/* ============================================================
   aCounted For — Main Stylesheet
   WordPress-ready vanilla CSS
   Organized for easy conversion to a WordPress theme:
   - CSS variables = theme customizer settings
   - .widget-placeholder = WordPress widget areas
   - Section comments mark template-part boundaries
   ============================================================ */

/* Force light mode — applies across all browsers, mobile and desktop */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  html { background: #fff; color: #1a1a1a; }
}

/* ── 1. CSS Variables ── */
:root {
  --color-primary:        #00b8b8;
  --color-primary-dark:   #009999;
  --color-secondary:      #0f1e2d;
  --color-secondary-dark: #0a1a28;
  --color-footer-bg:      #08131c;
  --color-bg-light:       #f8f9fa;
  --color-white:          #ffffff;
  --color-text:           #374151;
  --color-text-muted:     #6b7280;
  --color-text-light:     #9ca3af;
  --color-border:         #e5e7eb;
  --color-border-light:   #f3f4f6;

  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  --container-max: 1280px;
  --container-px:  20px;
  --navbar-h:      72px;

  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.10);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.15);

  --ease: 0.3s ease;
}

/* ── 2. Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font-body); color: var(--color-text); line-height: 1.6; background: var(--color-white); -webkit-font-smoothing: antialiased; }
img   { display: block; max-width: 100%; height: auto; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }
button{ cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── 3. Typography ── */
h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; color: var(--color-secondary); }

/* ── 4. Container ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ── 5. Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.75rem;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  transition: var(--ease);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-outline-dark { background: rgba(15,30,45,.8); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-dark:hover { background: rgba(15,30,45,.95); }
.btn-full  { width: 100%; }
.btn-round { border-radius: var(--r-full); }

/* ── 6. Scroll-reveal animations ── */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in.d1 { transition-delay: .15s; }
.fade-in.d2 { transition-delay: .30s; }
.fade-in.d3 { transition-delay: .45s; }

/* ── 7. Section label ── */
.label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--color-primary); margin-bottom: .5rem; }

/* ── 8. Section header (centred) ── */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section-header h2 { color: var(--color-secondary); margin-top: .5rem; }
.section-header p  { color: var(--color-text-muted); margin-top: .75rem; font-size: .9375rem; }


/* ══════════════════════════════════════════
   NAVBAR  ←→  header.php in WordPress
   ══════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  background: #fff;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-border-light);
  z-index: 1000;
}
.navbar > .container { height: 100%; }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.navbar__logo img { height: 48px; width: auto; }

.navbar__nav { display: flex; align-items: center; gap: 2rem; }
.navbar__link { font-size: .875rem; font-weight: 500; color: var(--color-text); transition: color var(--ease); position: relative; }
.navbar__link:hover,
.navbar__link.active { color: var(--color-primary); }
.navbar__link.active::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:var(--color-primary); border-radius:2px; }

.navbar__cta { background: var(--color-secondary); color: #fff; padding: .625rem 1.5rem; border-radius: var(--r-full); font-size: .875rem; font-weight: 600; transition: background var(--ease); }
.navbar__cta:hover { background: var(--color-primary); }

.navbar__burger { display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; }
.navbar__burger span { display: block; width: 22px; height: 2px; background: var(--color-secondary); border-radius: 2px; transition: var(--ease); }
.navbar__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.open span:nth-child(2) { opacity: 0; }
.navbar__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.navbar__mobile {
  display: none; flex-direction: column;
  position: absolute; top: var(--navbar-h); left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); padding: .75rem 0;
}
.navbar__mobile.open { display: flex; }
.navbar__mobile-link { padding: .75rem 1.25rem; font-size: .9375rem; font-weight: 500; color: var(--color-text); transition: color var(--ease); }
.navbar__mobile-link:hover,
.navbar__mobile-link.active { color: var(--color-primary); }
.navbar__mobile-cta { margin: .5rem 1.25rem .25rem; padding: .75rem 1.5rem; border-radius: var(--r-full); background: var(--color-secondary); color: #fff; text-align: center; font-weight: 600; font-size: .9rem; }


/* ══════════════════════════════════════════
   PAGE HERO BANNER  (inner pages)
   ══════════════════════════════════════════ */
.page-hero {
  background: var(--color-secondary);
  padding: 5rem 0;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-top: var(--navbar-h);
}
.page-hero::before { content:''; position:absolute; top:0; right:0; width:16rem; height:16rem; border:1px solid rgba(0,184,184,.1); border-radius:50%; transform:translate(50%,-50%); }
.page-hero h1 { color: #fff; font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: 1rem; }
.page-hero__crumb { display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.875rem; color:rgba(255,255,255,.7); font-weight:500; }
.page-hero__crumb a:hover { color:#fff; }
.page-hero__crumb-cur { color: var(--color-primary); }


/* ══════════════════════════════════════════
   HOME HERO
   ══════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  margin-top: var(--navbar-h);
}
/* Desktop background */
.hero__bg-desk {
  position: absolute; inset: 0;
  background: url('../images/hero-desktop.png') center/cover no-repeat;
}
/* Mobile background */
.hero__bg-mob {
  display: none;
  position: absolute; inset: 0;
  background: url('../images/hero-mobile.png') top center/cover no-repeat;
}
/* Invisible image drives section height on mobile */
.hero__sizer { display: none; width: 100%; visibility: hidden; }

.hero__content { position: relative; z-index: 10; padding: 6rem 0 8rem; }
.hero h1 { font-size: clamp(2.25rem,5vw,4rem); font-weight: 800; line-height: 1.25; color: #fff; margin-bottom: 1.25rem; }
.hero__sub { font-size: .9375rem; color: rgba(255,255,255,.85); margin-bottom: 1.75rem; max-width: 300px; line-height: 1.6; }
.hero__btns { display: flex; gap: .75rem; margin-bottom: 1.75rem; }
.hero__dots { display: flex; align-items: center; gap: .5rem; }
.hero__dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.35); }
.hero__dot.active { background: var(--color-primary); }


/* ══════════════════════════════════════════
   ABOUT SECTION  (Home page)
   ══════════════════════════════════════════ */
.about-home { padding: 4rem 0 5rem; background: #fff; }
.about-home__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.about-home h2 { color: var(--color-secondary); margin: .5rem 0 1rem; font-size: clamp(1.5rem,3vw,2.25rem); }
.about-home__text { color: var(--color-text-muted); font-size: .9375rem; line-height: 1.75; margin-bottom: 1.5rem; }
.about-home__photo { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 4/3; }
.about-home__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-home__accent { position: absolute; bottom: -1rem; right: -1rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-primary); z-index: 10; }


/* ══════════════════════════════════════════
   SERVICES SECTION  (Home page)
   ══════════════════════════════════════════ */
.services-home { padding: 4rem 0 5rem; background: #fff; border-top: 1px solid var(--color-border-light); }

/* Desktop cards (hidden on mobile) */
.services-home__grid { display: none; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.svc-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--ease), transform var(--ease); }
.svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.svc-card__icon { width:48px; height:48px; background:rgba(0,184,184,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; color:var(--color-primary); transition:background var(--ease),color var(--ease); }
.svc-card__icon svg { width:22px; height:22px; }
.svc-card:hover .svc-card__icon { background:var(--color-primary); color:#fff; }
.svc-card__title { font-size:1rem; font-weight:700; color:var(--color-secondary); margin-bottom:.5rem; }
.svc-card__desc { font-size:.875rem; color:var(--color-text-muted); line-height:1.6; margin-bottom:1.25rem; }
.svc-card__link { display:inline-flex; align-items:center; gap:.375rem; font-size:.875rem; font-weight:600; color:var(--color-primary); transition:gap var(--ease); }
.svc-card:hover .svc-card__link { gap:.625rem; }
.svc-card__link svg { width:14px; height:14px; }

/* Mobile list rows (hidden on desktop) */
.services-home__list { display:flex; flex-direction:column; border:1px solid var(--color-border); border-radius:var(--r-xl); overflow:hidden; }
.svc-row { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:#fff; border-bottom:1px solid var(--color-border); transition:background var(--ease); }
.svc-row:last-child { border-bottom:none; }
.svc-row:hover { background:var(--color-bg-light); }
.svc-row__icon { width:40px; height:40px; border-radius:50%; background:rgba(0,184,184,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--color-primary); }
.svc-row__icon svg { width:18px; height:18px; }
.svc-row__title { flex:1; font-size:.9rem; font-weight:600; color:var(--color-secondary); }
.svc-row__chevron { color:var(--color-text-light); }
.svc-row__chevron svg { width:18px; height:18px; }


/* ══════════════════════════════════════════
   BUSINESS UPDATES  (Home page)
   Widget placeholder areas marked below
   ══════════════════════════════════════════ */
.updates { padding: 4rem 0 5rem; background: var(--color-bg-light); position: relative; z-index: 0; scroll-margin-top: var(--navbar-h); }

/* Responsive card grid — stacks on mobile, 3-col on desktop */
.updates__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.upd-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; text-align:center; }
.upd-card__icon { width:48px; height:48px; border-radius:50%; background:rgba(0,184,184,.1); display:flex; align-items:center; justify-content:center; margin-bottom:.75rem; color:var(--color-primary); flex-shrink:0; }
.upd-card__icon svg { width:22px; height:22px; }
.upd-card__title { font-size:1rem; font-weight:700; color:var(--color-secondary); margin-bottom:.875rem; }

/* Data body — left-aligned content inside the centred card header */
.upd-card__body { width:100%; text-align:left; }

/* Loading state */
.upd-loading { display:flex; align-items:center; gap:.6rem; color:var(--color-text-muted); font-size:.875rem; padding:.75rem 0; }
.upd-spinner { width:15px; height:15px; border:2px solid var(--color-border); border-top-color:var(--color-primary); border-radius:50%; animation:spin .75s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Error state */
.upd-error { font-size:.8rem; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:var(--r-sm); padding:.5rem .75rem; line-height:1.45; }

/* Exchange rate rows */
.rates-list { width:100%; display:flex; flex-direction:column; gap:.4rem; margin-bottom:.625rem; }
.rate-item { display:flex; align-items:center; justify-content:space-between; padding:.45rem .6rem; background:var(--color-bg-light); border-radius:var(--r-sm); }
.rate-label { font-size:.78rem; font-weight:600; color:var(--color-text-muted); letter-spacing:.04em; }
.rate-value { font-size:.95rem; font-weight:700; color:var(--color-secondary); font-family:var(--font-heading); }
.upd-updated { font-size:.7rem; color:var(--color-text-light); margin-top:.25rem; }

/* RSS feed items (SARS + Legislation) */
.feed-list { width:100%; display:flex; flex-direction:column; }
.feed-item { padding:.625rem 0; border-bottom:1px solid var(--color-border-light); }
.feed-item:last-child { border-bottom:none; }
.feed-item__title { font-size:.82rem; font-weight:600; color:var(--color-secondary); line-height:1.4; margin-bottom:.3rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.feed-item__meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.feed-item__date { font-size:.72rem; color:var(--color-text-muted); }
.feed-item__link { font-size:.72rem; font-weight:600; color:var(--color-primary); white-space:nowrap; transition:color var(--ease); }
.feed-item__link:hover { color:var(--color-primary-dark); }

/*
 * ── WordPress Widget Placeholder (kept for other pages) ──
 */
.widget-placeholder {
  width: 100%;
  padding: 2.5rem 1rem;
  background: var(--color-bg-light);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--color-text-light);
  font-family: monospace;
  font-size: .7rem;
  font-style: italic;
  line-height: 1.7;
}


/* ══════════════════════════════════════════
   CTA SECTION  ←→  cta-section.php
   ══════════════════════════════════════════ */
.cta {
  position: relative; z-index: 10;
  margin-top: -120px;
  background: url('../images/footer-bg.png') top center / 100% 100% no-repeat;
  padding: 13rem 0 calc(4rem - 20px);
  text-align: center;
  color: #fff;
}
.cta h2 { color:#fff; margin-bottom:1rem; font-size:clamp(1.5rem,3vw,2.25rem); }
.mob-br { display: none; }
.cta__text { color:rgba(255,255,255,.8); font-size:.9375rem; max-width:380px; margin:0 auto 2rem; line-height:1.7; }


/* ══════════════════════════════════════════
   FOOTER  ←→  footer.php in WordPress
   ══════════════════════════════════════════ */
.footer { background: var(--color-footer-bg); color: #fff; }

/* Desktop layout */
.footer-desk { display: none; padding: 3.5rem 0 1.5rem; }
.footer-desk__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2.5rem; margin-bottom: 2.5rem; }
.footer__pill { display:inline-flex; align-items:center; background:#fff; border-radius:var(--r-md); padding:.5rem 1rem; }
.footer__pill img { height:52px; width:auto; }
.footer__tag { font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.6; margin-top:1rem; }
.footer__social { display:flex; gap:.5rem; margin-top:1rem; }
.footer__social a { width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); transition:background var(--ease),color var(--ease),border-color var(--ease); }
.footer__social a:hover { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.footer__social a svg { width:13px; height:13px; }
.footer__col-title { font-size:.875rem; font-weight:600; color:#fff; margin-bottom:1rem; }
.footer__links { display:flex; flex-direction:column; gap:.5rem; }
.footer__links a { font-size:.875rem; color:rgba(255,255,255,.5); transition:color var(--ease); }
.footer__links a:hover { color:var(--color-primary); }
.footer__contact-list { display:flex; flex-direction:column; gap:.75rem; }
.footer__ci { display:flex; align-items:flex-start; gap:.75rem; }
.footer__ci-icon { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.footer__ci-icon svg { width:13px; height:13px; color:var(--color-primary); }
.footer__ci-text { font-size:.875rem; color:rgba(255,255,255,.5); line-height:1.5; }
.footer-desk__bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.25rem; display:flex; align-items:center; justify-content:space-between; font-size:.75rem; color:rgba(255,255,255,.35); }
.footer-desk__bottom-links { display:flex; gap:1rem; }
.footer-desk__bottom-links a:hover { color:#fff; }

/* Mobile layout */
.footer-mob { padding: 2.5rem 0 1.5rem; }
.footer-mob__top { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:1.5rem; }
.footer-mob__social { display:flex; gap:.5rem; margin-top:1rem; }
.footer-mob__social a { width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); transition:background var(--ease),color var(--ease),border-color var(--ease); }
.footer-mob__social a:hover { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.footer-mob__social a svg { width:13px; height:13px; }
.acc-item { border-bottom:1px solid rgba(255,255,255,.1); }
.acc-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1rem 0; font-size:.9rem; font-weight:600; color:#fff; background:none; border:none; cursor:pointer; }
.acc-trigger svg { width:16px; height:16px; color:rgba(255,255,255,.5); transition:transform var(--ease); flex-shrink:0; }
.acc-trigger.open svg { transform:rotate(180deg); }
.acc-content { display:none; padding-bottom:1rem; }
.acc-content.open { display:block; }
.acc-links { display:flex; flex-direction:column; gap:.75rem; }
.acc-links a { font-size:.875rem; color:rgba(255,255,255,.5); transition:color var(--ease); }
.acc-links a:hover { color:var(--color-primary); }
.footer-mob__bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.25rem; margin-top:.5rem; display:flex; flex-direction:column; align-items:center; gap:.75rem; text-align:center; font-size:.75rem; color:rgba(255,255,255,.35); }
.footer-mob__legal { display:flex; gap:1rem; }
.footer-mob__legal a:hover { color:#fff; }


/* ══════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════ */
.about-story { padding: 4rem 0 5rem; background: #fff; }
.about-story__grid { display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
.about-story h2 { color:var(--color-secondary); margin-bottom:1.5rem; }
.about-story p { color:var(--color-text-muted); font-size:1rem; line-height:1.8; margin-bottom:1rem; }
.about-story p:last-child { margin-bottom:0; }

/* Decorative story graphic */
.story-graphic {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  border-radius: var(--r-xl); padding: 2rem; aspect-ratio: 4/3;
  position: relative; overflow: hidden; box-shadow: var(--shadow-xl);
  display: flex; align-items: center;
}
.story-graphic::before { content:''; position:absolute; top:1rem; right:1rem; width:5rem; height:5rem; border:1px solid rgba(0,184,184,.2); border-radius:50%; }
.story-graphic::after  { content:''; position:absolute; bottom:1rem; left:1rem; width:3rem; height:3rem; background:rgba(0,184,184,.1); border-radius:50%; }
.story-graphic__inner  { position:relative; z-index:10; width:100%; }
.story-graphic__hd { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.story-graphic__av { width:40px; height:40px; border-radius:50%; background:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.story-graphic__av svg { width:20px; height:20px; color:#fff; }
.story-graphic__name { color:#fff; font-weight:700; font-size:.875rem; }
.story-graphic__sub  { color:rgba(255,255,255,.5); font-size:.75rem; }
.sg-item { display:flex; align-items:center; gap:.75rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:.75rem 1rem; margin-bottom:.5rem; }
.sg-item:last-child { margin-bottom:0; }
.sg-item__icon { width:36px; height:36px; border-radius:50%; background:rgba(0,184,184,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sg-item__icon svg { width:16px; height:16px; color:var(--color-primary); }
.sg-item__label { flex:1; color:#fff; font-size:.8125rem; font-weight:600; }
.sg-item__sub { color:rgba(255,255,255,.45); font-size:.7rem; }
.sg-item__check svg { width:14px; height:14px; color:var(--color-primary); }

/* Values section */
.about-values { padding: 4rem 0 5rem; background: var(--color-bg-light); }
.about-values__grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.val-card { background:#fff; border:1px solid var(--color-border-light); border-radius:var(--r-xl); padding:1.75rem; text-align:center; box-shadow:var(--shadow-sm); }
.val-card__icon { width:56px; height:56px; border-radius:50%; background:rgba(0,184,184,.1); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; color:var(--color-primary); }
.val-card__icon svg { width:28px; height:28px; }
.val-card__title { margin-bottom:.75rem; font-size:1rem; }
.val-card__desc { color:var(--color-text-muted); font-size:.875rem; line-height:1.6; }


/* ══════════════════════════════════════════
   SERVICES PAGE
   ══════════════════════════════════════════ */
.services-detail { padding: 4rem 0 5rem; background: #fff; }
.svc-block { display:flex; flex-direction:column; gap:2rem; padding-bottom:4rem; margin-bottom:4rem; border-bottom:1px solid var(--color-border-light); }
.svc-block:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.svc-block__icon { width:56px; height:56px; background:rgba(0,184,184,.1); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; color:var(--color-primary); margin-bottom:1.25rem; }
.svc-block__icon svg { width:28px; height:28px; }
.svc-block h2 { color:var(--color-secondary); margin-bottom:1rem; font-size:clamp(1.5rem,3vw,2.25rem); }
.svc-block__desc { color:var(--color-text-muted); font-size:1rem; line-height:1.75; margin-bottom:1.5rem; }
.svc-bullets { display:flex; flex-direction:column; gap:.75rem; }
.svc-bullet { display:flex; align-items:flex-start; gap:.75rem; }
.svc-bullet__icon { flex-shrink:0; margin-top:2px; color:var(--color-primary); }
.svc-bullet__icon svg { width:18px; height:18px; }
.svc-bullet__text { font-size:.9375rem; font-weight:500; color:#374151; }

/* Decorative graphic */
.svc-graphic {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  border-radius: var(--r-xl); aspect-ratio: 4/3; position: relative;
  overflow: hidden; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.05);
}
.svc-graphic::before { content:''; position:absolute; top:1rem; right:1rem; width:5rem; height:5rem; border:1px solid rgba(0,184,184,.15); border-radius:50%; }
.svc-graphic::after  { content:''; position:absolute; bottom:1rem; left:1rem; width:3rem; height:3rem; background:rgba(0,184,184,.08); border-radius:50%; }
.svc-graphic svg { width:96px; height:96px; color:rgba(0,184,184,.3); position:relative; z-index:1; }


/* ══════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════ */
.contact-section { padding: 4rem 0 5rem; background: #fff; }
.contact-section__grid { display:grid; grid-template-columns:1fr; gap:2.5rem; }

.contact-form h2 { color:var(--color-secondary); margin-bottom:.5rem; font-size:clamp(1.25rem,2.5vw,1.875rem); }
.contact-form__sub { color:var(--color-text-muted); font-size:.9rem; margin-bottom:1.75rem; }
.form-row { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-bottom:1.25rem; }
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:.875rem; font-weight:600; color:var(--color-secondary); margin-bottom:.5rem; }
.form-input, .form-textarea {
  width:100%; background:var(--color-bg-light); border:1px solid var(--color-border);
  border-radius:var(--r-md); padding:.75rem 1rem; font-size:.9rem;
  font-family:var(--font-body); color:var(--color-text);
  transition:border-color var(--ease),box-shadow var(--ease); outline:none;
}
.form-input:focus, .form-textarea:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(0,184,184,.12); }
.form-input { height:48px; }
.form-textarea { min-height:140px; resize:vertical; }

.contact-info { background:var(--color-bg-light); border-radius:var(--r-2xl); padding:2rem; }
.contact-info h2 { color:var(--color-secondary); margin-bottom:1.75rem; font-size:clamp(1.25rem,2.5vw,1.875rem); }
.ci-items { display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2.5rem; }
.ci-item { display:flex; align-items:flex-start; gap:1rem; }
.ci-item__icon { width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-sm); color:var(--color-primary); }
.ci-item__icon svg { width:20px; height:20px; }
.ci-item__label { font-weight:700; font-size:.9375rem; color:var(--color-secondary); margin-bottom:.25rem; }
.ci-item__val { font-size:.875rem; color:var(--color-text-muted); }

/* Map placeholder — replace with Google Maps embed in WordPress */
.map-placeholder { width:100%; height:200px; background:var(--color-border-light); border-radius:var(--r-xl); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color:var(--color-text-light); font-family:monospace; font-size:.75rem; font-style:italic; }


/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════ */

/* 640px — two-column form row */
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* 768px — tablet / desktop layout switches */
@media (min-width: 768px) {
  :root { --container-px: 32px; }

  /* Navbar */
  .navbar__burger  { display: none !important; }
  .navbar__nav     { display: flex; }
  .navbar__mobile  { display: none !important; }
  .navbar__cta     { display: flex; }

  /* Hero — switch to desktop */
  .hero__bg-mob  { display: none !important; }
  .hero__bg-desk { display: block; }
  .hero__sizer   { display: none !important; }
  .hero__content { position: relative; padding: 7rem 0 9rem; }
  .hero__btns    { flex-direction: row; }

  /* Services home */
  .services-home__grid { display: grid; }
  .services-home__list { display: none; }

  /* Updates — 3-column grid on desktop */
  .updates__grid { grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .footer-desk { display: block; }
  .footer-mob  { display: none; }

  /* About page values */
  .about-values__grid { grid-template-columns: repeat(2,1fr); }

  /* Services page alternating layout */
  .svc-block { flex-direction: row; gap: 4rem; align-items: center; }
  .svc-block > * { flex: 1; }
  .svc-block:nth-child(even) { flex-direction: row-reverse; }

  /* Contact */
  .contact-section__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* 1024px — wider spacing */
@media (min-width: 1024px) {
  :root { --container-px: 48px; }

  .about-home__grid  { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .about-story__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .about-values__grid{ grid-template-columns: repeat(4,1fr); }

  .hero h1 { font-size: 4rem; }
}

/* ≤767px — mobile-only overrides */
@media (max-width: 767px) {
  .navbar__burger { display: flex; }
  .navbar__nav    { display: none; }
  .navbar__cta    { display: none; }

  /* Hero — switch to mobile background, no absolute overlay */
  .hero__bg-desk { display: none; }
  .hero__bg-mob  { display: block; }
  .hero__sizer   { display: none !important; }
  .hero          { min-height: 750px; display: flex; flex-direction: column; }
  .hero__content {
    position: relative;
    flex: 1;
    padding: 3.5rem 0 3rem;
  }
  .hero h1      { font-size: 2.25rem; }
  .hero__sub    { font-size: .875rem; max-width: 100%; }
  .hero__btns   { flex-direction: column; gap: .75rem; }
  .hero__btns .btn { width: 100%; }

  /* Page hero */
  .page-hero { padding: 3.5rem 0; }

  /* CTA margin top on mobile is less */
  .cta { margin-top: 0; padding: calc(8rem + 5px) 0 3rem; }
  .mob-br { display: inline; }
}