:root{
  --bg:#ffffff;
  --surface:#f7f8fb;
  --banner-h: 24px;
  --text:#0f172a;
  --muted:#475467;
  --border:#e4e7ec;

  --magenta:#c00080;
  --teal:#20a0a0;
  --coral:#e00020;

  --primary:var(--magenta);
  --accent:var(--teal);

  --shadow:0 16px 40px rgba(15,23,42,.08);
  --shadow-sm:0 10px 24px rgba(15,23,42,.08);

  --radius:18px;
  --radius-sm:14px;

  --max:1160px;
}

/* ====== Base reset ====== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden; /* prevent stray overflow on mobile */
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:none}
p{margin:0 0 12px}
h1,h2,h3{margin:0 0 10px; line-height:1.15}
small,.small{font-size:.92rem; color:var(--muted)}

/* ====== Layout helpers ====== */
.container{
  width:min(100%, var(--max));
  margin-inline:auto;
  padding-inline: 18px;
}
.section{
  padding: clamp(34px, 4vw, 64px) 0;
}
.section.alt{
  background: linear-gradient(180deg, #ffffff, #fafbff);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.section-head p{margin:6px 0 0; color:var(--muted)}
.hr{height:1px; background:var(--border); margin:14px 0}

/* ====== Buttons ====== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{
  background: var(--primary);
  color:#ffffff;
  box-shadow: 0 14px 30px rgba(192,0,128,.18);
}

.btn-primary,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus{
  color:#ffffff;
}
.btn-primary:hover{filter: brightness(.97)}
.btn-ghost{
  background:transparent;
  border-color: var(--border);
}
.btn-ghost:hover{background:rgba(15,23,42,.03)}
.btn-sm{padding:10px 14px; font-size:.95rem}

/* ====== Top navigation (professional, responsive) ====== */
.nav{
  position: sticky;
  top: var(--banner-h);
  z-index: 2000;
  background: #ffffff;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.brand img{
  height: 40px;
  width:auto;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-links a{
  color:var(--muted);
  font-weight:700;
  font-size:.98rem;
  padding:8px 10px;
  border-radius: 999px;
}
.nav-links a[aria-current="page"]{
  color:var(--text);
  background: rgba(32,160,160,.10);
}
.nav-links a:hover{
  color:var(--text);
  background: rgba(15,23,42,.04);
}
.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Responsive Google Map embed (prevents horizontal scroll) */
.map-embed{
  width:100%;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:#fff;
}

.map-embed iframe{
  display:block;
  width:100% !important;
  max-width:100% !important;
  border:0;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 280px;
}
/* ===== Modern Minimal Hamburger (Like DataXL) ===== */
.burger{
  display:none;
  width:44px;
  height:44px;
  background: transparent;   /* REMOVE white box */
  border: none;              /* REMOVE border box */
  cursor:pointer;
  position: relative;
  align-items:center;
  justify-content:center;
  position: relative;
  z-index: 6001;
}

/* Create the 3 thin lines */
.burger::before,
.burger::after,
.burger span{
  content:"";
  position:absolute;
  width:22px;       /* length of lines */
  height:2px;       /* THIN lines like Image 2 */
  background:#1f3a5f; /* dark blue like your example */
  border-radius:2px;
  transition: all 0.3s ease;
}

/* Top line */
.burger::before{
  transform: translateY(-7px);
}

/* Middle line */
.burger span{
  transform: translateY(0);
}

/* Bottom line */
.burger::after{
  transform: translateY(7px);
}

/* Hover (professional subtle effect) */
.burger:hover::before,
.burger:hover::after,
.burger:hover span{
  background: var(--primary); /* matches your magenta theme */
}

/* Burger becomes a Close (X) icon when menu is open */
.burger.active::before{
  transform: translateY(0) rotate(45deg);
  background: var(--primary);
}
.burger.active span{ opacity: 0; }
.burger.active::after{
  transform: translateY(0) rotate(-45deg);
  background: var(--primary);
}

/* Keep the close icon clickable above the full-screen menu */
.burger.active{
  position: fixed;
  top: calc(var(--banner-h) + 10px);
  right: 18px;
  z-index: 6001;
}

/* ===== Full-screen Mobile Menu Overlay (fixed for click + stacking) ===== */
.mobile-menu{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 5000;
  background: #ffffff;

  /* Hidden state must NOT capture clicks */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  padding: 18px;
  padding-top: calc(18px + env(safe-area-inset-top));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  transition: opacity .2s ease, visibility .2s ease;
}

.mobile-menu.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 24px !important;
}

/* Wrap inner content for perfect centering */
.mobile-menu > *{
  width: 100%;
  max-width: 420px;
}

/* Menu items stacked vertically */
.mobile-menu a{
  display:block;
  width:100%;
  padding: 18px 0;
  border-radius: 12px;
  color: var(--text);
  font-weight: 700;
}
.mobile-menu a:hover{background:rgba(15,23,42,.04); color:var(--text)}

.mobile-menu .btn{
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}

/* Lock background scroll when menu is open */
body.menu-open{
  overflow: hidden;
  height: 100%;
}

/* ====== Hero ====== */
.hero{
  position:relative;
  padding: clamp(36px, 6vw, 78px) 0 clamp(22px, 3vw, 38px);
  background:
    radial-gradient(1200px 520px at 90% 10%, rgba(32,160,160,.18), transparent 55%),
    radial-gradient(900px 480px at 10% 30%, rgba(192,0,128,.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #fbfbff 100%);
  overflow:hidden;
}
.hero [data-hero-image] img{
  width:100%;
  height:auto;
  max-height: 350px;
  object-fit: cover;
  object-position: top;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap: clamp(18px, 4vw, 44px);
  align-items:start;
}
.h-title{
  font-size: clamp(2.05rem, 3.4vw, 3.15rem);
  letter-spacing: -0.03em;
}
.h-sub{
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  color: var(--muted);
  max-width: 60ch;
}
.hero-card{
  background: rgba(255,255,255,.88);
  border:1px solid rgba(228,231,236,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 18px 16px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing: .18em;
  font-size:.78rem;
  font-weight:800;
  color: var(--primary);
  margin-bottom: 10px;
}
.hero-card h3{
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* ====== Cards / grids ====== */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.card h3{
  font-size:1.05rem;
  margin-bottom:8px;
}
.card p{color:var(--muted); margin:0}

/* ===============================
   FOOTER — 3 COLUMN PROFESSIONAL
   Ideal Counselling Consultants
================================= */

.site-footer{
  background: #0b1a2b;
  color: #e2e8f0;
  margin-top: 80px;
  font-family: inherit;
}

/* Container Grid */
.footer-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr; /* 3 columns */
  gap: 48px;
  align-items: flex-start;
}

/* Logo */
.footer-logo{
  height: 54px;
  width: auto;
  margin-bottom: 18px;
}

/* About Text */
.footer-about{
  font-size: 16px;
  line-height: 1.7;
  color: #cbd5e1;
  max-width: 420px;
}

/* Column Headings */
.footer-col h4{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Lists */
.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li{
  margin-bottom: 12px;
}

/* Links */
.footer-col ul li a{
  color: #cbd5e1;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.25s ease;
}

.footer-col ul li a:hover{
  color: #ec4899;
}

/* Contact Text */
.footer-col p{
  margin-bottom: 12px;
  font-size: 16px;
  color: #cbd5e1;
  line-height: 1.6;
}

/* CTA Button */
.footer-cta{
  display: inline-block;
  margin-top: 18px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #ec4899, #d946ef);
  color: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(236,72,153,0.25);
}

/* ===============================
   CENTER QUICK LINKS COLUMN
================================= */
.footer-col:nth-child(2){
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-col:nth-child(2) ul{
  text-align: left;
}

/* ===============================
   FOOTER BOTTOM BAR
================================= */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 22px 16px;
  font-size: 14px;
  color: #94a3b8;
  background: #0b1a2b;
}

/* ===============================
   TABLET RESPONSIVENESS
================================= */
@media (max-width: 992px){
  .footer-container{
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-col:nth-child(2){
    order: 3; /* Moves Quick Links below for better balance */
  }
}

/* ===============================
   MOBILE (Pixel 7 & Phones)
================================= */
@media (max-width: 600px){

  .site-footer{
    margin-top: 60px;
  }

  .footer-container{
    grid-template-columns: 1fr;
    padding: 48px 18px;
    gap: 36px;
    text-align: center;
  }

  .footer-logo{
    margin: 0 auto 16px auto;
  }

  .footer-about{
    max-width: 100%;
    font-size: 17px;
  }

  .footer-col{
    text-align: center;
    align-items: center;
  }

  .footer-col h4{
    font-size: 19px;
  }

  .footer-col ul li a{
    font-size: 17px;
  }

  .footer-col p{
    font-size: 17px;
  }

  .footer-cta{
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  .footer-bottom{
    font-size: 15px;
  }
}

/* ====== Forms ====== */
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  font: inherit;
}
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: rgba(32,160,160,.55);
  box-shadow: 0 0 0 4px rgba(32,160,160,.10);
}


/* ====== Two-column grids / split layouts ====== */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items:start;
}

/* ====== Forms (contact) ====== */
.form{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
textarea{min-height: 120px; resize: vertical}
.input{}

/* ====== Icon helper ====== */
.icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(32,160,160,.10);
  color: var(--accent);
  border: 1px solid rgba(32,160,160,.18);
}

.card .icon{
  margin: 0 auto 14px auto;  /* centers the icon + spacing below */
}

/* ===== Top Contact Banner (Theme Consistent) ===== */
.top-banner{
  position: sticky;
  top: 0;
  z-index: 3000;          /* above the nav */
  width: 100%;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.top-banner-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 6px 18px;
  text-align: center;
  line-height: 1.4;
}

.top-banner a{
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}

.top-banner a:hover{
  opacity: 0.85;
}

/* ===== ICC Toast (no Bootstrap conflicts) ===== */
.icc-toast{
  display: none;
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;

  width: auto;
  max-width: min(92vw, 520px);
  padding: 12px 16px;

  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.18);

  background: #34BEB4; /* teal background */
  color: #ffffff;      /* white text */
  text-align: center;

  white-space: normal;
  word-break: break-word;
}

.icc-toast.show{ display: block; }

.icc-toast.success{ background: #16a34a; } /* green */
.icc-toast.error{ background: #e00020; }   /* red */


/* ====== Responsive ====== */
@media (max-width: 960px){
  .nav-links{display:none;}
  .nav-cta .btn{display:none;} /* DataXL-style: hide CTA in top bar on mobile */
  .burger{display:inline-flex;}
  .hero-grid{grid-template-columns: 1fr; }
  .hero-card{max-width: 640px;}
  .section-head{flex-direction:column; align-items:flex-start}
  .grid-3{grid-template-columns: 1fr; gap:12px;}
  .grid-2{grid-template-columns: 1fr;}
  .split{grid-template-columns: 1fr;}
}

@media (min-width: 961px){
  .mobile-menu{display:none !important;}
}

@media (max-width: 640px){
  :root{
    --banner-h: 65px; /* adjust if needed */
  }
  .top-banner-inner{
    white-space: normal;     /* allow wrapping */
    text-align: center;
    line-height: 1.35;
    padding: 8px 14px;
  }
}

/* =========================
   SIMPLE FOOTER BAR (Teal)
   © Ideal Counselling Consultants | Menu | Contact
   Colour: #0b1a2b
========================= */

.simple-footer{
  background:#0E162B;
  color:#fff;
}

.simple-footer-bar{
  max-width: 1300px;
  margin: 0 auto;
  padding: 10px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  font-size: 14px;
  line-height: 1.2;
  flex-wrap: wrap;
}

.foot-copy{
  width: 100%;
  margin-top: -5px; /* slight negative margin to visually center with links */
  text-align: center;
  display: block;
  font-weight: 600;
}

/* Links + contact */
.foot-links, .foot-contact{
  display:flex;
  gap: 12px;
  text-align: center;
  display: block;
  flex-wrap: wrap;
}

.foot-links a, .foot-contact a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  opacity:.92;
}

.foot-links a:hover, .foot-contact a:hover{
  opacity:1;
  text-decoration: underline;
}

/* Add subtle dot separators automatically */
.foot-links a + a::before,
.foot-contact a + a::before{
  content:"•";
  margin-right: 12px;
  opacity:.6;
}

/* Add a subtle divider between sections */
.foot-links::before,
.foot-contact::before{
  content:"";
  width:1px;
  height:16px;
  background: rgba(255,255,255,.35);
  margin: 0 6px;
}

/* Mobile: stack nicely */
@media(max-width: 600px){
  .simple-footer-bar{
    gap: 10px;
    padding: 12px 14px;
  }
  .foot-links::before,
  .foot-contact::before{
    display:none;
  }
}