.bc   { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: .78rem; }
.bc a { color: var(--blue); text-decoration: none; }
.bc a:hover { text-decoration: underline; }
.sep  { color: var(--text-muted); }
.cur  { color: var(--text-muted); }


.g-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.g-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }


.btn-wa       { background: #25D366; color: #fff; border: none; }
.btn-wa:hover { background: #1da851; color: #fff; }


.modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }


.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sb-cell {
  padding: 22px 16px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.sb-cell:last-child { border-right: none; }
.sb-num  { font-size: 1.65rem; font-weight: 800; color: var(--navy); line-height: 1; }
.sb-lbl  { font-size: .75rem; color: var(--text-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }


.fg { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 150px; }
.fg label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.fg input,
.fg select {
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: .84rem;
  background: var(--surface);
  outline: none;
  font-family: inherit;
  color: var(--text-body);
}
.fg input:focus,
.fg select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,86,219,.08); }


.uni-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}


.uc-cover {
  height: 110px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--blue-light));
}
.uc-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }


.uc-logo {
  position: absolute;
  bottom: -18px;
  left: 14px;
  width: 48px;
  height: 48px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Card body */
.uc-body      { padding: 26px 14px 10px; }
.uc-name      { font-size: .93rem; font-weight: 700; color: var(--text-head); margin-bottom: 3px; }
.uc-loc       { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }

/* Stats row inside card */
.uc-stats     { display: flex; gap: 14px; margin-top: 8px; }
.ucs-num      { font-size: .92rem; font-weight: 800; color: var(--navy); line-height: 1.2; }
.ucs-lbl      { font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Tags strip */
.uc-tags  { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px 10px; }

/* Card footer */
.uc-footer {
  display: flex;
  gap: 7px;
  padding: 8px 14px 14px;
}


.enq-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.enq-card-head {
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  padding: 16px 18px;
  color: #fff;
}
.enq-card-head h4 { color: #fff; font-size: .94rem; margin-bottom: 3px; }
.enq-card-head p  { font-size: .74rem; color: rgba(255,255,255,.52); }
.enq-card-body    { padding: 18px; }

/* Sticky column for sidebar */
.sticky-col {
  position: sticky;
  top: calc(var(--header-h, 64px) + 14px);
}

/* Trust row inside sidebar */
.trust-row {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.team-av {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}


/* 4-up info cards across top */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 28px 0;
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: box-shadow .2s, transform .2s;
}
.contact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Icon box inside contact card */
.cc-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: rgba(26,86,219,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--blue);
  flex-shrink: 0;
}
/* Colour modifier classes */
.cc-icon.teal { background: rgba(5,150,105,.08);    color: var(--teal); }
.cc-icon.gold { background: rgba(245,158,11,.08);   color: var(--gold-dark); }
.cc-icon.wa   { background: #dcfce7;                color: #16a34a; }

/* Text inside contact card */
.cc-title { font-size: .88rem; font-weight: 700; color: var(--text-head); margin-bottom: 5px; }
.cc-val   { font-size: .83rem; font-weight: 600; color: var(--blue); display: block; margin-bottom: 2px; text-decoration: none; }
.cc-val:hover { text-decoration: underline; }
.cc-val2  { font-size: .79rem; color: var(--text-muted); display: block; }
.cc-hours { font-size: .72rem; color: var(--text-light); margin-top: 4px; }

/* Main form + sidebar layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

/* Form card */
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cfcard-head {
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  padding: 20px 24px;
}
.cfcard-head h3 { color: #fff; font-size: 1rem; margin-bottom: 4px; }
.cfcard-head p  { font-size: .78rem; color: rgba(255,255,255,.48); }
.cfcard-body    { padding: 24px; }

/* Office info block (inside sidebar) */
.office-info    { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.oi-label       { font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 12px; }
.oi-row         { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border2); }
.oi-row:last-child { border-bottom: none; }
.oi-icon        { width: 30px; height: 30px; background: rgba(26,86,219,.07); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: .82rem; flex-shrink: 0; }
.oi-key         { font-size: .73rem; font-weight: 600; color: var(--text-head); margin-bottom: 2px; }
.oi-val         { font-size: .78rem; color: var(--text-muted); line-height: 1.55; }

/* Social links row */
.social-row   { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.social-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.social-link  {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; text-decoration: none;
  transition: all .15s;
  border: 1px solid transparent;
}

/* FAQ accordion */
.faq-section  { background: var(--white); }
.faq-list     { max-width: 760px; margin: 0 auto; }
.faq-item     {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-trigger  {
  width: 100%; background: none; border: none;
  padding: 15px 18px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; text-align: left; gap: 12px;
}
.faq-trigger:hover { background: rgba(26,86,219,.03); }
.faq-q        { font-size: .89rem; font-weight: 600; color: var(--text-head); line-height: 1.4; }
.faq-icon     { color: var(--blue); flex-shrink: 0; font-size: .9rem; transition: transform .22s, color .2s; }
.faq-icon.open{ transform: rotate(45deg); color: var(--teal); }
.faq-answer   { display: none; padding: 0 18px 15px; animation: fadeIn .18s ease; }
.faq-answer.open { display: block; }
.faq-answer p { font-size: .86rem; color: var(--text-body); line-height: 1.75; margin: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }



/* Two-column mission layout */
.about-mission {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}

/* Dark impact card (right column) */
.impact-card  {
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  border-radius: var(--radius-lg);
  padding: 28px;
}
.impact-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.impact-row   { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.impact-row:last-child { border-bottom: none; }
.impact-icon  { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.impact-num   { font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1; }
.impact-text  { font-size: .75rem; color: rgba(255,255,255,.48); margin-top: 2px; }

/* How it works step cards */
.step-card    {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.step-num-bg  { position: absolute; top: 10px; right: 14px; font-size: 3.2rem; font-weight: 900; color: var(--border); line-height: 1; pointer-events: none; user-select: none; }
.step-icon    { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; }
.step-title   { font-size: .97rem; font-weight: 700; color: var(--text-head); margin-bottom: 7px; }
.step-desc    { font-size: .82rem; color: var(--text-muted); line-height: 1.7; }

/* Values / dark section */
.values-section { background: linear-gradient(135deg, var(--navy), var(--navy2)); padding: 64px 0; }
.value-head     { text-align: center; margin-bottom: 32px; }
.value-head .sec-label { color: #7eb3ff; }
.value-head h2  { color: #fff; margin-top: 6px; }
.value-head h2 span { color: var(--gold); }
.value-head .sec-sub { color: rgba(255,255,255,.45); margin-top: 6px; }

/* Why / value cards (dark bg) */
.why-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  transition: background .2s;
}
.why-card:hover { background: rgba(255,255,255,.08); }
.why-icon {
  width: 50px; height: 50px; border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 1.3rem;
}
.why-card h4 { color: #fff; margin-bottom: 8px; font-size: .96rem; }
.why-card p  { font-size: .81rem; color: rgba(255,255,255,.5); line-height: 1.68; }

.cta-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.cta-banner h3 { color: var(--navy); margin-bottom: 5px; }
.cta-banner p  { color: var(--text-muted); font-size: .87rem; margin: 0; }



/* 1200px — uni grid 4→3 */
@media (max-width: 1200px) {
  .uni-grid              { grid-template-columns: repeat(3, 1fr); }
  .contact-cards-grid    { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .about-mission         { grid-template-columns: 1fr; gap: 28px; }
  .g-4                   { grid-template-columns: repeat(3, 1fr); }
}

/* 1024px — grids tighten, sidebar drops */
@media (max-width: 1024px) {
  .uni-grid              { grid-template-columns: repeat(2, 1fr); }
  .contact-layout        { grid-template-columns: 1fr; }
  .sticky-col            { position: static; }
  .stats-bar             { grid-template-columns: repeat(2, 1fr); }
  .sb-cell:nth-child(2)  { border-right: none; }
  .g-4                   { grid-template-columns: repeat(2, 1fr); }
  .g-3                   { grid-template-columns: repeat(2, 1fr); }
  .modal-2col            { grid-template-columns: 1fr 1fr; }
}

/* 768px — mobile layout */
@media (max-width: 768px) {
  .contact-cards-grid    { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .contact-layout        { grid-template-columns: 1fr; gap: 18px; }
  .about-mission         { grid-template-columns: 1fr; gap: 20px; }
  .g-4,.g-3              { grid-template-columns: repeat(2, 1fr); }
  .g-2                   { grid-template-columns: 1fr; }
  .uni-grid              { grid-template-columns: repeat(2, 1fr); }
  .cta-banner            { flex-direction: column; text-align: center; padding: 24px 20px; }
  .cta-banner .btn       { width: 100%; justify-content: center; }
  .stats-bar             { grid-template-columns: repeat(2, 1fr); }
  .values-section        { padding: 44px 0; }
  .impact-card           { padding: 22px 18px; }
  .faq-trigger           { padding: 14px 16px; }
  .faq-answer            { padding: 0 16px 14px; }
  .cfcard-body           { padding: 20px; }
  .cfcard-head           { padding: 18px 20px; }
}

/* 640px */
@media (max-width: 640px) {
  .contact-cards-grid    { grid-template-columns: 1fr; gap: 10px; }
  .contact-card          { padding: 16px; gap: 12px; }
  .uni-grid              { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .modal-2col            { grid-template-columns: 1fr; }
}

/* 480px — single column everything */
@media (max-width: 480px) {
  .uni-grid              { grid-template-columns: 1fr; }
  .contact-cards-grid    { grid-template-columns: 1fr; }
  .g-4,.g-3,.g-2         { grid-template-columns: 1fr; }
  .about-mission         { gap: 16px; }
  .impact-card           { padding: 18px 16px; }
  .impact-num            { font-size: 1rem; }
  .step-card             { padding: 18px; }
  .step-num-bg           { font-size: 2.6rem; }
  .step-icon             { width: 40px; height: 40px; font-size: 1.1rem; }
  .cfcard-body           { padding: 16px; }
  .cfcard-head           { padding: 16px; }
  .contact-card          { flex-direction: row; padding: 14px; gap: 10px; }
  .cc-icon               { width: 40px; height: 40px; font-size: 1rem; }
  .office-info           { padding: 14px; }
  .faq-q                 { font-size: .84rem; }
  .uc-cover              { height: 90px; }
  .uc-logo               { width: 42px; height: 42px; bottom: -14px; }
  .uc-body               { padding: 22px 12px 8px; }
  .sb-num                { font-size: 1.3rem; }
  .sb-cell               { padding: 16px 10px; }
  .stats-bar             { grid-template-columns: repeat(2, 1fr); }
  .modal-2col            { grid-template-columns: 1fr; }
  .social-link           { width: 34px; height: 34px; }
  .values-section        { padding: 36px 0; }
  .why-card              { padding: 18px 14px; }
  .trust-row             { gap: 10px; }
}

/* 360px */
@media (max-width: 360px) {
  .uni-grid              { grid-template-columns: 1fr; }
  .cta-banner            { padding: 18px 14px; }
  .uc-cover              { height: 80px; }
}