/* ============================================================
   BIODUN ADEYEMI & ASSOCIATES — STYLESHEET
   ============================================================
   1.  Root variables
   2.  Reset & base
   3.  Layout helpers
   4.  Topbar
   5.  Header & navigation
   6.  Services dropdown
   7.  Hero slider
   8.  Buttons
   9.  Sections & grids
   10. Cards & services
   11. Team (homepage preview)
   12. Team page (float layout)
   13. Scroll reveal
   14. CTA band
   15. Page hero (inner pages)
   16. Prose content
   17. Gallery
   18. Contact
   19. Footer
   20. Homepage extras (trust strip, feature band, slide extras)
   21. Back to top button
   22. Responsive — tablet (960px)
   23. Responsive — mobile (720px)
   24. Motion preferences
   ============================================================ */

/* ============================================================
   1. ROOT VARIABLES
   ============================================================ */
:root{
  --green:#1a5f2a;
  --green-dark:#0f3f1c;
  --green-soft:#e7f2ea;
  --blue:#0a2d4f;
  --black:#121212;
  --ink:#1e1e1e;
  --muted:#5a5a5a;
  --line:#e5e5e5;
  --bg:#fafaf7;
  --white:#ffffff;
  --radius:10px;
  --shadow:0 8px 30px rgba(0,0,0,.06);
  --font-head:'Cormorant Garamond', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--black);
  line-height:1.2;
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4vw,3.4rem)}
h2{font-size:clamp(1.6rem,2.6vw,2.4rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.container{width:min(1180px, 92%); margin:0 auto}
.center{text-align:center}
.muted{color:var(--muted)}

/* ============================================================
   4. TOPBAR
   ============================================================ */
.topbar{
  background:var(--black);
  color:#ddd;
  font-size:.85rem;
  line-height:1.3;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem 0;
  flex-wrap:wrap;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#ddd;
}
.topbar-left span{
  display:inline-block;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
}
.topbar-right > a{
  color:#ddd;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease;
}
.topbar-right > a:hover{
  color:var(--green-soft);
  text-decoration:none;
}

/* Topbar — social icons */
.topbar-social{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding-left:.9rem;
  margin-left:.2rem;
  border-left:1px solid rgba(255,255,255,.15);
}
.topbar-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#cfe3d5;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.topbar-social a:hover{
  background:var(--green);
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
}
.topbar-social svg{
  width:14px;
  height:14px;
  display:block;
  pointer-events:none;
}

/* ============================================================
   5. HEADER & NAVIGATION
   ============================================================ */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}

/* Brand / logo */
.brand{display:flex; align-items:center; text-decoration:none; flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-logo{height:64px; width:auto; max-width:340px; display:block; object-fit:contain}

/* Legacy brand-mark fallback (unused when logo present) */
.brand-mark{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),var(--blue));
  color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.25rem;
}
.brand-text strong{display:block; font-family:var(--font-head); font-size:1.15rem; letter-spacing:.3px}
.brand-text small{color:var(--muted); font-size:.75rem; letter-spacing:.5px; text-transform:uppercase}

/* Main nav */
.main-nav ul{list-style:none; padding:0; margin:0; display:flex; gap:.25rem; align-items:center}
.main-nav a{
  color:var(--black);
  padding:.55rem .8rem;
  display:inline-block;
  font-weight:500;
  font-size:.95rem;
  border-radius:6px;
}
.main-nav a:hover{
  background:var(--green-soft);
  color:var(--green-dark);
  text-decoration:none;
}
.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--black);
}

/* ============================================================
   6. SERVICES DROPDOWN
   ============================================================ */
.has-dropdown{position:relative; z-index:60}

/* Invisible bridge between link and panel */
.has-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:10px;
  background:transparent;
  pointer-events:auto;
}

.has-dropdown .dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:280px;
  list-style:none;
  margin:0;
  padding:.5rem 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  z-index:60;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events:none;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
  pointer-events:auto;
}
.dropdown li a{
  display:block;
  padding:.6rem 1.1rem;
  font-size:.9rem;
  color:var(--black);
  border-radius:0;
  text-decoration:none;
}
.dropdown li a:hover{background:var(--green-soft); color:var(--green-dark);}

/* Arrow supplied by CSS */
.has-dropdown > a::after{
  content:"▾";
  display:inline-block;
  margin-left:.35rem;
  font-size:.75em;
  transition:transform .2s ease;
}
.has-dropdown:hover > a::after{transform:rotate(180deg);}

/* ============================================================
   7. HERO SLIDER
   ============================================================ */
.hero{position:relative; height:min(78vh, 640px); overflow:hidden; background:#000}
.slides{position:absolute; inset:0}
.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1s ease;
  display:flex;
  align-items:center;
}
.slide.active{opacity:1}
.slide-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(10,45,79,.55) 55%, rgba(26,95,42,.35) 100%);
}
.slide-content{position:relative; color:#fff; max-width:720px}
.slide-content h1{color:#fff; margin-bottom:.4em}
.slide-content p{font-size:1.1rem; max-width:600px; color:#eee}

.slide-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:1.6rem;
  cursor:pointer;
  z-index:5;
  backdrop-filter:blur(4px);
}
.slide-nav.prev{left:20px}
.slide-nav.next{right:20px}

.slide-dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.5rem;
  z-index:5;
}
.slide-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
}
.slide-dots span.active{background:var(--green-soft)}

/* Slide extras */
.slide-eyebrow{
  display:inline-block;
  color:#e7f2ea;
  background:rgba(26,95,42,.55);
  border:1px solid rgba(231,242,234,.35);
  padding:.35rem .9rem;
  border-radius:999px;
  font-size:.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:1.2rem;
  backdrop-filter:blur(4px);
}
.slide-cta{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.4rem;}

/* ============================================================
   8. BUTTONS
   ============================================================ */
.btn{
  display:inline-block;
  padding:.85rem 1.6rem;
  border-radius:6px;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  transition:.2s;
  border:2px solid transparent;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-dark); color:#fff}
.btn-outline{border-color:var(--green); color:var(--green); background:transparent}
.btn-outline:hover{background:var(--green); color:#fff}
.btn-ghost-light{
  border-color:rgba(255,255,255,.7);
  color:#fff;
  background:transparent;
}
.btn-ghost-light:hover{
  background:#fff;
  color:var(--green);
  border-color:#fff;
}

/* ============================================================
   9. SECTIONS & GRIDS
   ============================================================ */
.section{padding:5rem 0}
.section-head{text-align:center; margin-bottom:3rem}
.eyebrow{
  display:inline-block;
  color:var(--green);
  letter-spacing:3px;
  font-size:.75rem;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:.6rem;
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem}

.intro-media img{border-radius:var(--radius); box-shadow:var(--shadow)}
.intro h2{max-width:520px}
.intro .lead{font-size:1.08rem; color:var(--ink)}

/* ============================================================
   10. CARDS & SERVICES
   ============================================================ */
.card{
  background:#fff;
  padding:2rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card h3{color:var(--green-dark)}
.card-icon{
  width:52px;height:52px;
  display:grid;place-items:center;
  background:var(--green-soft);
  color:var(--green-dark);
  border-radius:10px;
  margin-bottom:1rem;
}

.strengths{background:var(--green-soft)}

.service-card{
  background:#fff;
  padding:2rem;
  border-radius:var(--radius);
  border-top:4px solid var(--green);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  color:var(--ink);
  display:block;
  transition:.25s;
}
.service-card:hover{
  transform:translateY(-4px);
  text-decoration:none;
  border-top-color:var(--blue);
}
.service-card h3{color:var(--black); margin-bottom:.6rem}
.service-card p{color:var(--muted); font-size:.95rem}
.read-more{color:var(--green); font-weight:600; font-size:.9rem}
.service-card .read-more .arr{
  display:inline-block;
  transition:transform .25s ease;
}
.service-card:hover .read-more .arr{transform:translateX(4px);}

/* ============================================================
   11. TEAM — HOMEPAGE PREVIEW
   ============================================================ */
.team-preview{background:#fff}
.team-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.team-photo{
  aspect-ratio:1/1;
  background-size:cover;
  background-position:center;
  transition:transform .5s ease;
}
.team-card h4{
  padding:.9rem 1rem 0;
  margin:0;
  font-family:var(--font-head);
  font-size:1.15rem;
  letter-spacing:.2px;
}
.team-card .role{
  padding:.15rem 1rem 1.1rem;
  color:var(--green);
  font-size:.8rem;
  margin:0;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:600;
}
.team-preview .team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.team-preview .team-card:hover .team-photo{transform:scale(1.05);}

/* ============================================================
   12. TEAM PAGE — FLOAT LAYOUT
   ============================================================ */
.team-page .section-head{margin-bottom:4rem}
.team-list{display:flex; flex-direction:column; gap:2rem;}

.member{
  display:block;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:1.75rem;
  overflow:hidden;
}
.member::after{
  content:"";
  display:block;
  clear:both;
}
.member-photo{
  float:left;
  width:220px;
  height:220px;
  margin:0 1.75rem 1rem 0;
  background-size:cover;
  background-position:center top;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.member:nth-child(even) .member-photo{
  float:right;
  margin:0 0 1rem 1.75rem;
}
.member-body{padding:0;}
.member-name{
  margin:0 0 .15em;
  font-family:var(--font-head);
  font-size:clamp(1.4rem, 2.2vw, 1.9rem);
  color:var(--black);
  line-height:1.15;
}
.member-name::before{
  content:"";
  display:inline-block;
  width:28px;
  height:3px;
  background:var(--green);
  margin-right:.55rem;
  vertical-align:middle;
  border-radius:2px;
  transform:translateY(-4px);
}
.member-role{
  color:var(--green);
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.3px;
  margin:0 0 .35em;
}
.member-creds{
  color:var(--muted);
  font-size:.88rem;
  font-style:italic;
  margin:0 0 1em;
}
.member-bio{
  color:var(--ink);
  font-size:.98rem;
  line-height:1.7;
}
.member-bio p:last-child{margin-bottom:0;}

/* ============================================================
   13. SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal.in-view{opacity:1; transform:none;}

/* Stagger for homepage team grid */
.team-preview .reveal.in-view:nth-child(1){transition-delay:.05s}
.team-preview .reveal.in-view:nth-child(2){transition-delay:.15s}
.team-preview .reveal.in-view:nth-child(3){transition-delay:.25s}
.team-preview .reveal.in-view:nth-child(4){transition-delay:.35s}
.team-preview .reveal.in-view:nth-child(5){transition-delay:.45s}
.team-preview .reveal.in-view:nth-child(6){transition-delay:.55s}

/* ============================================================
   14. CTA BAND
   ============================================================ */
.cta-band{
  background:linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  color:#fff;
  padding:3.5rem 0;
}
.cta-band h2, .cta-band p{color:#fff}
.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-band .btn-primary{background:#fff; color:var(--green)}
.cta-band .btn-primary:hover{background:#eee}

/* ============================================================
   15. PAGE HERO (INNER PAGES)
   ============================================================ */
.page-hero{
  background:linear-gradient(135deg, var(--black) 0%, var(--green-dark) 60%, var(--blue) 100%);
  color:#fff;
  padding:5rem 0 3rem;
}
.page-hero h1{color:#fff; margin:0}
.page-hero .crumbs{color:#bbb; font-size:.9rem; margin-top:.4rem}
.page-hero .crumbs a{color:var(--green-soft)}

/* Page hero with image */
.page-hero.has-image{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:320px;
  display:flex;
  align-items:center;
  padding:6rem 0 4rem;
}
.page-hero.has-image .container{width:min(1180px, 92%); margin:0 auto;}

/* ============================================================
   16. PROSE CONTENT
   ============================================================ */
.prose{max-width:860px; margin:0 auto}
.prose h2{
  margin-top:2.2rem;
  color:var(--green-dark);
  border-left:4px solid var(--green);
  padding-left:.7rem;
}
.prose ul{list-style:none; padding-left:0; margin:1.5rem 0}
.prose ul li{
  position:relative;
  padding-left:1.75rem;
  margin-bottom:.9rem;
  line-height:1.6;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55rem;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
}
.prose ul li strong{color:var(--green-dark); font-weight:600}
.prose .page-intro{
  font-size:1.1rem;
  line-height:1.75;
  color:var(--ink);
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
  margin-bottom:2rem;
}

/* ============================================================
   17. GALLERY
   ============================================================ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}
.gallery-item{
  position:relative;
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.gallery-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  transition:.4s;
}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item span{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:.5rem .8rem;
  color:#fff;
  font-size:.85rem;
  background:linear-gradient(0deg, rgba(0,0,0,.7), transparent);
}

/* ============================================================
   18. CONTACT
   ============================================================ */
.contact-grid{align-items:flex-start}
.contact-info p{font-size:1rem}
.contact-info .map{
  margin-top:1.5rem;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.contact-info .map iframe{width:100%; height:350px; border:0; display:block}

.contact-form-wrap{
  background:#fff;
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border-top:4px solid var(--green);
}
.contact-form label{
  display:block;
  margin-bottom:1rem;
  font-weight:500;
  font-size:.92rem;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:inherit;
  font-size:.95rem;
  margin-top:.3rem;
  background:#fbfbfb;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--green);
  background:#fff;
  box-shadow:0 0 0 3px rgba(26,95,42,.1);
}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.contact-form .err{color:#c0392b; font-size:.8rem; font-weight:500}
.contact-form button{margin-top:.5rem}

.alert{
  padding:1rem 1.2rem;
  border-radius:6px;
  margin-bottom:1rem;
  font-size:.92rem;
}
.alert.success{background:#e7f2ea; color:var(--green-dark); border-left:4px solid var(--green)}
.alert.error{background:#fdecea; color:#922b21; border-left:4px solid #c0392b}

/* ============================================================
   19. FOOTER
   ============================================================ */

.site-footer{
  background: var(--black);
  color: #bbb;
  padding: 4rem 0 0;
  margin-top: 4rem;
}
.site-footer h4{
  color: #fff;
  font-size: 1rem;
  margin-bottom: .8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-footer a{ color: #bbb; }
.site-footer a:hover{ color: var(--green-soft); }
.site-footer ul{ list-style: none; padding: 0; }
.site-footer li{ margin-bottom: .4rem; }
.site-footer p{ margin: 0 0 .6rem; }

/* --- Footer brand (logo + firm name) --- */
.footer-brand .footer-logo{
  display: block;
  height: 58px;
  width: auto;
  border-radius: 5px;
  max-width: 400px;
  margin: 0 0 1.1rem;
  object-fit: contain;

  /* The logo is dark green on transparent.
     On the black footer it needs a white variant, a filter, or a white card.
     OPTION A — no change: use a light logo file (e.g. balogo-white.png) and point the img here.
     OPTION B — filter to white (uncomment next line):
     filter: brightness(0) invert(1);
     OPTION C — sit the logo on a small white card (uncomment next two lines):
     background: #fff; padding: .5rem .75rem; border-radius: 8px;
  */
}
.footer-brand h4{ margin-top: 0; }

.footer-bottom{
  border-top: 1px solid #2a2a2a;
  margin-top: 2rem;
  padding: 1.2rem 0;
  font-size: .85rem;
  color: #888;
}
.footer-bottom .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-credit a{
  color: var(--green-soft);
  font-weight: 500;
}
.footer-credit a:hover{ color: #fff; }

/* --- Responsive footer tweaks --- */
@media (max-width: 720px){
  .footer-brand .footer-logo{
    height: 48px;
    max-width: 200px;
  }
  .footer-bottom .container{
    justify-content: center;
    text-align: center;
  }
}
/* ============================================================
   20. HOMEPAGE EXTRAS — TRUST STRIP, FEATURE BAND
   ============================================================ */
.trust-strip{
  background:var(--green-soft);
  border-top:1px solid rgba(26,95,42,.1);
  border-bottom:1px solid rgba(26,95,42,.1);
  padding:1.4rem 0;
}
.trust-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  text-align:center;
}
.trust-item strong{
  display:block;
  font-family:var(--font-head);
  font-size:1.05rem;
  color:var(--green-dark);
  letter-spacing:.3px;
}
.trust-item span{
  display:block;
  font-size:.82rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.5px;
}

.feature-band{background:#fff; padding:5rem 0}
.feature-inner{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:3.5rem;
  align-items:center;
}
.feature-media{
  aspect-ratio:4 / 3;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.feature-body h2{max-width:520px}
.feature-body p{color:var(--ink)}
.feature-body .eyebrow{margin-bottom:.5rem}

/* ============================================================
   21. BACK TO TOP BUTTON
   ============================================================ */
#backToTop{
  position:fixed !important;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  border-radius:50%;
  border:0;
  padding:0;
  margin:0;
  background:var(--green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9999;
  box-shadow:0 8px 24px rgba(26,95,42,.30);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s,
             background-color .2s ease, box-shadow .2s ease;
}
#backToTop.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s,
             background-color .2s ease, box-shadow .2s ease;
}
#backToTop:hover{
  background:var(--green-dark);
  box-shadow:0 12px 32px rgba(26,95,42,.40);
  transform:translateY(-2px);
}
#backToTop:focus-visible{
  outline:3px solid rgba(26,95,42,.35);
  outline-offset:3px;
}
#backToTop svg{
  display:block;
  width:20px;
  height:20px;
  pointer-events:none;
}

/* ============================================================
   22. RESPONSIVE — TABLET (≤960px)
   ============================================================ */
@media (max-width: 960px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr 1fr}

  .brand-logo{height:56px; max-width:280px}

  .trust-inner{grid-template-columns:repeat(2,1fr)}
  .feature-inner{grid-template-columns:1fr; gap:2rem}
  .feature-media{aspect-ratio:16 / 10}

  /* Team page: smaller float */
  .member{padding:1.25rem}
  .member-photo{
    width:180px;
    height:180px;
    margin:0 1.25rem 1rem 0;
  }
  .member:nth-child(even) .member-photo{
    margin:0 0 1rem 1.25rem;
  }
}

/* ============================================================
   23. RESPONSIVE — MOBILE (≤720px)
   ============================================================ */
@media (max-width: 720px){
  /* Topbar */
  .topbar-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
    padding:.5rem 0;
  }
  .topbar-left{font-size:.82rem; line-height:1.35}
  .topbar-right{
    width:100%;
    justify-content:flex-start;
    gap:.85rem;
    font-size:.8rem;
  }
  .topbar-social{
    padding-left:0;
    margin-left:0;
    border-left:0;
  }
  .topbar-social a{width:24px; height:24px}
  .topbar-social svg{width:13px; height:13px}

  /* Header */
  .brand-logo{height:44px; max-width:200px}

  /* Mobile nav panel */
  .nav-toggle{display:block}
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    display:none;
    padding:1rem;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column; align-items:stretch; gap:0}
  .main-nav a{padding:.75rem 1rem; display:block}

  /* Mobile dropdown */
  .has-dropdown .dropdown{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    border:0;
    box-shadow:none;
    padding:.25rem 0 .25rem 1rem;
    min-width:0;
    display:none;
    pointer-events:auto;
    transition:none;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .has-dropdown:not(.open) .dropdown{display:none}
  .has-dropdown.open .dropdown{display:flex}

  .has-dropdown > a{display:flex; justify-content:space-between; align-items:center}
  .has-dropdown > a::after{
    content:"+";
    font-size:1.1rem;
    font-weight:600;
    margin-left:.5rem;
    transform:none !important;
  }
  .has-dropdown.open > a::after{content:"−"}

  /* Grids stack */
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  .section{padding:3rem 0}
  .cta-inner{flex-direction:column; text-align:center}

  /* Trust & feature */
  .trust-inner{grid-template-columns:1fr; gap:1rem}
  .slide-cta{flex-direction:column; align-items:flex-start}
  .slide-cta .btn{width:100%; text-align:center}
  .feature-band{padding:3rem 0}

  /* Team page: centered square photo, no float */
  .member{padding:1.25rem}
  .member-photo,
  .member:nth-child(even) .member-photo{
    float:none;
    display:block;
    width:140px;
    height:140px;
    margin:0 auto 1rem;
  }
  .member-body{text-align:center}
  .member-name::before{display:none}

  /* Homepage team cards: no hover lift */
  .team-preview .team-card:hover{transform:none; box-shadow:var(--shadow)}
  .team-preview .team-card:hover .team-photo{transform:none}

  /* Back to top smaller */
  #backToTop{
    right:16px;
    bottom:16px;
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
  }

  /* Footer bottom stacks */
  .footer-bottom .container{justify-content:center; text-align:center}
}

/* ============================================================
   24. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  #backToTop,
  #backToTop.show{
    transition:opacity .01s, visibility 0s;
    transform:none !important;
  }
}