:root{
  /* Refined palette for stronger contrast and investor-ready feel */
  --bg:#f6f8fb;
  --surface:#ffffff;
  --primary:#0f766e; /* slightly deeper teal for better contrast */
  --primary-700:#0b5f57;
  --accent-2:#ff7a59;
  --accent:#ffb86b;
  --muted:#6B7280;
  --text:#071124;
  --container:1200px;
  /* Spacing / scale */
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:20px;
  --space-lg:32px;
  --glass: rgba(255,255,255,0.06);
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-heading: 'Poppins', var(--font-sans);
  --h1: 3rem; /* desktop */
  --h1-md: 2.4rem; /* tablet */
  --h1-sm: 2rem; /* mobile */
  --lead-size: 1.125rem;
  --logo-bg:#f3f7f6; /* slightly off-white background for light logos */
  --logo-border: rgba(6,20,46,0.12);
  --logo-shadow: 0 16px 40px rgba(6,20,46,0.08);
}

/* Header normalization - override per-page header styles so all pages use the unified header */
header.site-header, .site-header{background:linear-gradient(180deg, rgba(6,20,46,0.98), rgba(6,20,46,0.95)) !important; color: #fff !important; position: sticky !important; top: 0 !important; z-index: 9999 !important; box-shadow: 0 6px 24px rgba(6,20,46,0.08) !important}
.site-header .header-inner, header.site-header .header-inner{max-width:var(--container);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between !important}
.brand img.logo, header .logo, .logo{width:48px !important;height:48px !important;border-radius:10px !important;object-fit:contain !important;border:2px solid var(--primary) !important;padding:4px !important;background:transparent !important}
.brand-text, .brand .brand-text{color:#fff !important}
.header-actions{display:flex;align-items:center;gap:8px !important}
.header-cta .btn{padding:10px 14px;border-radius:10px;font-weight:700;box-shadow:0 12px 30px rgba(15,118,110,0.08) !important}

/* Ensure nav panel is above page content */
nav.site-nav{z-index:12000 !important}


/* Modern header glass and centered nav */
header.site-header{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}


/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
/* Make images responsive and prevent overflow */
img{max-width:100%;height:auto;display:block}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Remove default underlines site-wide and keep color inheritance for anchors.
   Specific hover/focus styles are handled per component for accessibility. */
a{color:inherit;text-decoration:none}
/* Accessible focus styles for keyboard users */
:focus{
  outline: none;
}
:focus-visible{
  outline: 3px solid rgba(15,118,110,0.18);
  outline-offset: 3px;
}

@media (max-width:980px){
  :root{ --h1: var(--h1-md); }
}

@media (max-width:700px){
  :root{ --h1: var(--h1-sm); }
  .hero .lead{font-size:1rem}
  .site-header .header-inner{padding:12px 0}
}
.header-container, .header-inner{max-width:var(--container);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{width:60px;height:60px;border-radius:12px;object-fit:cover;border:2px solid var(--primary);box-shadow:0 4px 15px rgba(27,160,152,0.15)}


.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* Header */
header.site-header{
  background:linear-gradient(180deg, rgba(6,20,46,0.98), rgba(6,20,46,0.95));
  color:#fff;
  position:sticky;top:0;z-index:50;
  box-shadow:0 6px 24px rgba(6,20,46,0.08);
}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img.logo{width:48px;height:48px;border-radius:10px;object-fit:contain;border:2px solid var(--primary);background:transparent;padding:4px}
.brand img.logo:hover{box-shadow:0 10px 30px rgba(6,20,46,0.12);transform:scale(1.03)}
.brand .brand-name{font-weight:700;font-size:1.125rem;color:#fff;font-family:var(--font-heading)}
.brand .brand-text small{display:block;color:rgba(255,255,255,0.8);font-weight:400;font-size:0.8rem}

/* Dropdown navigation: hidden by default, shown when .open is applied */
.site-header .header-inner{position:relative}
.nav-toggle{display:flex;background:transparent;border:0;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px}
.nav-toggle .hamburger{display:block;width:22px;height:2px;background:rgba(255,255,255,0.95);position:relative;transition:transform .2s ease}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';position:absolute;left:0;width:22px;height:2px;background:rgba(255,255,255,0.95)}
.nav-toggle .hamburger::before{top:-6px}
.nav-toggle .hamburger::after{top:6px}

/* Desktop: inline centered nav */
nav.site-nav{position:relative;top:auto;right:auto;min-width:0;background:transparent;color:#fff;border-radius:0;padding:0;box-shadow:none;visibility:visible;opacity:1;transform:none;z-index:20}
nav.site-nav ul{display:flex;align-items:center;gap:18px;margin:0;padding:0}
nav.site-nav a{display:inline-block;padding:8px 12px;color:rgba(255,255,255,0.95);text-decoration:none;border-radius:8px;font-weight:600}
nav.site-nav a:hover,nav.site-nav a:focus{background:rgba(255,255,255,0.06);outline:none}

/* Ensure brand anchor text never shows underline */
.brand, .brand a, .brand .brand-text{text-decoration:none}

/* Header CTA (right) */
  /* Dropdown nav: hidden by default, shown when open. This is the single
    dropdown panel that appears when the hamburger is clicked (Option B). */
  /* Use fixed positioning so the dropdown isn't clipped by header containers */
  nav.site-nav{position:fixed;top:72px;right:18px;min-width:320px;background:var(--surface);color:var(--text);border-radius:12px;padding:12px;box-shadow:0 22px 60px rgba(6,20,46,0.14);visibility:hidden;opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:120;display:flex;flex-direction:column;max-height:calc(100vh - 96px);-webkit-overflow-scrolling:touch;}
  nav.site-nav.open{visibility:visible;opacity:1;transform:translateY(0)}
  /* make the list area scroll when content overflows; keep footer pinned */
  nav.site-nav ul{display:block;list-style:none;margin:0;padding:8px 0;overflow:auto}
  nav.site-nav a{display:block;padding:10px 12px;color:var(--text);text-decoration:none;border-radius:8px;font-weight:600}
  nav.site-nav a:hover,nav.site-nav a:focus{background:rgba(6,20,46,0.04)}
  
  /* Header CTA (beside hamburger) */
  .header-cta{display:flex;align-items:center;gap:8px}
  .header-cta .btn{padding:10px 14px;border-radius:10px;font-weight:700;box-shadow:0 12px 30px rgba(15,118,110,0.08)}
  .nav-cta{margin-bottom:8px}
  .nav-cta .btn{width:100%;display:inline-flex;justify-content:center}
  /* visual divider */
  .nav-divider{height:1px;background:linear-gradient(90deg,rgba(6,20,46,0.04),rgba(6,20,46,0.02));margin:10px 0;border-radius:2px}
  /* Make submenu headings slightly muted */
  .sub-toggle{font-size:0.98rem}
  .sub-menu a{font-size:0.95rem}

/* Mobile slide-out nav (overrides) */
@media (max-width:980px){
  /* Mobile slide-out: make the same nav a full-height panel */
  nav.site-nav{position:fixed;top:0;right:0;height:100vh;width:320px;background:var(--surface);color:var(--text);box-shadow:0 30px 80px rgba(6,20,46,0.16);transform:translateX(110%);transition:transform .28s ease;padding:24px;border-radius:0 0 0 12px;z-index:90}
  nav.site-nav.open{transform:translateX(0);visibility:visible;opacity:1}
  nav.site-nav ul{display:block;gap:12px}
  nav.site-nav a{color:var(--text);padding:14px}
  .sub-menu{position:static;transform:none;opacity:1;visibility:visible;padding-left:6px;background:transparent;box-shadow:none}
}

/* Ensure the dropdown panel is scrollable on mobile devices while body scrolling is locked
   (we set an internal scroll area and enable smooth touch scrolling) */
@media (max-width:980px){
  nav.site-nav{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Constrain the main list so it scrolls inside the panel and keep footer pinned */
  nav.site-nav ul{
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}

/* Dropdown submenu styles (desktop) */
.nav-item{position:relative}
.sub-toggle{background:transparent;border:0;color:inherit;font-weight:700;padding:8px 10px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sub-toggle .chev{font-size:0.86rem;opacity:0.9}
.sub-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--surface);color:var(--text);border-radius:12px;padding:8px;box-shadow:0 18px 48px rgba(6,20,46,0.12);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:80}
.sub-menu li{list-style:none;margin:0}
.sub-menu a{display:block;padding:10px 12px;color:var(--text);border-radius:8px;text-decoration:none}
.sub-menu a:hover, .sub-menu a:focus{background:rgba(6,20,46,0.04)}
.nav-item.open > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-item.open > .sub-toggle .chev{transform:rotate(180deg)}

/* Rich dropdown content styles: icons, titles and muted descriptions for clarity */
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-weight:700}
.nav-link i{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(15,118,110,0.06),rgba(15,118,110,0.02));color:var(--primary);font-size:16px}
.nav-title{display:block;font-weight:700;color:var(--text)}
.nav-desc{display:block;font-size:0.86rem;color:var(--muted);margin-top:2px;font-weight:500}

.sub-menu a{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:10px}
.sub-menu a i{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(6,20,46,0.03),rgba(6,20,46,0.01));color:var(--primary);font-size:16px}
.sub-menu .nav-title{font-size:0.98rem}
.sub-menu .nav-desc{font-size:0.82rem;color:var(--muted)}

.nav-divider{height:1px;background:linear-gradient(90deg,rgba(6,20,46,0.04),rgba(6,20,46,0.02));margin:12px 0;border-radius:2px}
.nav-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
  /* keep footer pinned to bottom when panel is tall */
  .nav-footer{margin-top:auto}
.nav-contact{font-size:0.92rem;color:var(--muted)}
.nav-contact a{color:var(--primary);font-weight:700}
.nav-social{display:flex;gap:8px}
.social-link{display:inline-flex;width:36px;height:36px;border-radius:8px;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(6,20,46,0.04),rgba(6,20,46,0.02));color:var(--text)}
.social-link i{font-size:14px}

/* Hover states for nav links */
.nav-link:hover, .sub-menu a:hover{background:linear-gradient(90deg, rgba(15,118,110,0.03), rgba(6,20,46,0.02));transform:translateY(-2px)}

@media (max-width:980px){
  .nav-link{padding:12px 10px}
  .nav-footer{flex-direction:column;align-items:flex-start}
}

/* Mobile: keep submenus inline inside slide-out (no absolute panels) */
@media (max-width:980px){
  .sub-menu{position:static;transform:none;opacity:1;visibility:visible;padding-left:6px;background:transparent;box-shadow:none}
  .sub-toggle{width:100%;text-align:left;padding:12px}
}

/* Hero */
.hero{padding:72px 0}
.hero .lead{font-size:1.6rem;line-height:1.12;margin-bottom:16px;color:var(--muted)}
.hero .sub{color:var(--muted);margin-bottom:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;border:0;cursor:pointer;font-weight:700;transition:transform .12s ease,box-shadow .12s ease}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-700));color:#fff;border-radius:12px}
.btn-ghost{background:transparent;border:1px solid rgba(6,20,46,0.08);color:var(--text)}
.btn:focus{box-shadow:0 6px 22px rgba(15,118,110,0.08)}

/* Team grid */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:32px 0}
.team-member-card{
  background:var(--surface);
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 30px rgba(6,20,46,0.06);
  border:1px solid rgba(6,20,46,0.04);
  text-align:center;
  transition:transform .22s ease,box-shadow .22s ease;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.team-member-card:hover{transform:translateY(-8px);box-shadow:0 18px 44px rgba(6,20,46,0.1)}
.member-photo{width:140px;height:140px;border-radius:18px;object-fit:cover;border:3px solid var(--primary);margin-bottom:8px;background:#f3f7f6}
.member-photo.large{width:140px;height:140px}
.member-photo-wrap{border-radius:18px;overflow:hidden}

/* Bio clamp + toggle */
.bio-wrap{position:relative;width:100%;padding-bottom:18px}
.member-bio{color:var(--muted);text-align:left;margin:6px 0;line-height:1.4}
.member-bio.clamp-6{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  -webkit-line-clamp:6;
  line-clamp:6;
  max-height:calc(1.4em * 6);
  padding-bottom:12px;
}
.member-bio.expanded{display:block;max-height:none}
.bio-toggle{position:absolute;right:8px;bottom:4px;background:transparent;border:0;color:var(--primary);font-weight:700;cursor:pointer}

/* Skills */
.member-skills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.member-skills .skill-tag{background:linear-gradient(135deg,rgba(15,118,110,0.08),rgba(6,20,46,0.02));padding:6px 10px;border-radius:999px;color:var(--primary);font-weight:700;font-size:0.85rem}
.member-meta{font-size:0.92rem;color:var(--muted);margin-top:6px}
.member-name{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:6px}
.member-role{color:var(--primary);font-weight:600;margin-bottom:10px}
.member-bio{color:var(--muted);font-size:.95rem;line-height:1.5;margin-bottom:14px}

/* Meta row: university and experience badges */
.member-meta-row{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:6px;margin-bottom:6px;flex-wrap:wrap}
.member-university{color:var(--muted);font-weight:600;font-size:0.92rem;padding:6px 10px;border-radius:10px;background:linear-gradient(180deg,rgba(6,20,46,0.02),rgba(6,20,46,0.01));}
.member-experience{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#06142E;font-weight:800;padding:6px 10px;border-radius:999px;font-size:0.85rem}

/* Slightly bigger skill tag styling for nicer visual rhythm */
.member-skills .skill-tag{background:transparent;border:1px solid rgba(15,118,110,0.08);padding:6px 10px;border-radius:999px;color:var(--primary);font-weight:700;font-size:0.85rem}

/* Target Pamela specifically on narrow screens to avoid compressed look */
@media (max-width:520px){
  .member-photo[data-person="Beri Pamela Mengnjoh"]{
    /* Increased strongly per your request — make Pamela's portrait much larger on phones */
    width:220px !important;
    /* make the portrait significantly taller to give a less compressed look */
    height:320px !important;
    max-height:360px !important;
    border-radius:14px !important;
    object-fit:cover !important;
    margin-bottom:8px;
  }
  /* fallback: enlarge other portrait-like photos on mobile for breathing room */
  .member-photo[data-person]{
    /* upscale for better legibility */
    width:160px !important;
    height:auto !important;
    max-height:260px !important;
  }

  /* Additional robust selector: target Pamela by her image filename as a fallback
     in case the name in associates.json changes. This ensures the homepage portrait
     won't look squashed under the nav. */
  img[src$="/Pamela.jpg"], img[src$="Pamela.jpg"]{
    width:220px !important;
    height:320px !important;
    max-height:360px !important;
    object-fit:cover !important;
    border-radius:14px !important;
    margin-bottom:8px !important;
  }
}

/* Inline 'See more' button placed at end of truncated paragraph */
.member-bio{transition: max-height .32s ease, padding .22s ease}
.bio-inline-toggle{display:inline;background:transparent;border:0;color:var(--primary);font-weight:700;cursor:pointer;padding:0;margin:0;font-size:0.95rem;vertical-align:baseline}
.bio-inline-toggle:focus{outline:3px solid rgba(15,118,110,0.12);outline-offset:2px;border-radius:4px}

.social-links{display:flex;gap:10px;justify-content:center}
.social-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none}
.social-btn svg{display:block}
.social-btn--linkedin{background:#0077B5}
.social-btn--whatsapp{background:#25D366}
.social-btn--x{background:#000}
.social-btn:focus{outline:3px solid rgba(15,118,110,0.16);outline-offset:2px}

/* Responsive helpers */
@media (max-width:700px){
  .hero .lead{font-size:1.1rem}
  .site-header .header-inner{padding:12px 0}
}

/* Forms */
form input,form textarea,form select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(6,20,46,0.08);background:#fff;margin-bottom:12px}
form button{margin-top:6px}

/* Footer */
footer.site-footer{padding:24px 0;background:transparent;color:var(--muted);text-align:center}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:24px}
.service-card{background:var(--surface);padding:22px;border-radius:14px;box-shadow:0 8px 28px rgba(6,20,46,0.06);border:1px solid rgba(6,20,46,0.04);transition:transform .22s ease,box-shadow .22s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(6,20,46,0.08)}
.service-card .icon{font-size:34px;color:var(--primary);margin-bottom:16px}
.service-card i{display:block;font-size:28px;margin-bottom:10px}
.service-card h3{margin:0 0 10px 0;color:var(--text)}
.service-card p{color:var(--muted);line-height:1.6}
.service-card .service-list{margin-top:12px;padding-left:18px;color:var(--muted)}

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:24px}
.project-card{background:var(--surface);border-radius:14px;position:relative;overflow:hidden;box-shadow:0 10px 36px rgba(6,20,46,0.06);border:1px solid rgba(6,20,46,0.04);display:flex;flex-direction:column}
.project-card .project-thumb{display:block;width:auto;max-width:100%;max-height:140px;object-fit:contain;margin:0 auto;border-radius:14px;padding:14px;background:linear-gradient(180deg,var(--logo-bg),#ffffff);box-shadow:var(--logo-shadow);border:1px solid var(--logo-border);transition:transform .18s ease,box-shadow .18s ease}
.project-card .project-thumb:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 56px rgba(6,20,46,0.12)}
.project-card .project-body{padding:16px}
.project-card .badge{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:0.76rem;background:var(--accent);color:#06142E}
.project-card h3{margin-top:6px;margin-bottom:8px}
.project-card .muted{color:var(--muted);font-size:0.92rem}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:24px}
.testimonial-card{background:var(--surface);padding:22px;border-radius:14px;box-shadow:0 6px 26px rgba(6,20,46,0.06);border:1px solid rgba(6,20,46,0.04)}
.testimonial-card blockquote{margin:0 0 12px 0;color:var(--muted);font-style:italic}
.testimonial-card .client{display:flex;align-items:center;gap:12px}
.testimonial-card .client .avatar{width:48px;height:48px;border-radius:50%;display:inline-block;background:linear-gradient(135deg,var(--primary),#06142E);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.testimonial-card .client .meta{font-weight:700;color:var(--text)}

/* Footer tweaks */
footer.site-footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:var(--container);margin:0 auto;padding:20px}
.footer-bottom{border-top:1px solid rgba(6,20,46,0.06);padding-top:18px;margin-top:18px;text-align:center;color:var(--muted)}

/* Design refinements to match the provided sample */
:root{
  --hero-gradient: linear-gradient(135deg,var(--primary),#06142E);
}

/* Hero layout */
.hero{padding:64px 0;background:transparent}
.hero-inner{display:grid;grid-template-columns:1fr minmax(280px,420px);gap:36px;align-items:center;max-width:var(--container);margin:0 auto;padding:0 24px}
.hero-copy h1{font-family:var(--font-heading);font-size:var(--h1);line-height:1;margin:0 0 12px;color:var(--text);font-weight:800;letter-spacing:-0.02em}
.hero-copy .lead{font-size:var(--lead-size);color:var(--muted);max-width:640px}
.hero-art img{width:100%;height:auto;border-radius:14px;transform:translateY(-6px);transition:transform .35s ease,box-shadow .35s ease}
.hero-signature{display:block;max-width:360px;width:90%;height:auto;margin:0 auto 14px;padding:6px 8px;border-radius:10px;background:transparent;transform:translateX(6%);transition:transform .18s ease}

@media (max-width:700px){
  .hero-signature{transform:translateX(0);width:95%;max-width:320px}
}
.hero-art img:hover{transform:translateY(-12px) scale(1.01);box-shadow:0 30px 60px rgba(6,20,46,0.12)}

/* Hero subtle gradient background */
.hero{background:linear-gradient(120deg, rgba(15,118,110,0.04), rgba(6,20,46,0.02));}

/* CTA styles */
.hero-cta .btn{padding:12px 18px;border-radius:12px}
.btn{font-family:inherit}
.btn-outline{background:transparent;border:2px solid rgba(6,20,46,0.06);color:var(--text)}
.btn-primary{color:#fff}

/* Improve contrast for primary actions */
.btn{box-shadow:0 10px 30px rgba(15,118,110,0.08)}

/* Nav open animation */
/* Mobile nav: keep hidden on small screens via transform (better for transitions) */
nav.site-nav{transition:opacity .22s ease,transform .22s ease}
nav.site-nav.open{opacity:1;transform:none}

/* Button hover */
.btn-primary:hover{filter:brightness(0.95);transform:translateY(-2px);box-shadow:0 16px 40px rgba(15,118,110,0.12)}
.btn-outline:hover{background:rgba(6,20,46,0.04);transform:translateY(-2px)}

/* Section container helper */
section{padding:48px 0}
section > .container{padding:0 24px;max-width:var(--container);margin:0 auto}

/* Improve testimonial typography */
.testimonial-card blockquote{font-size:1rem;color:var(--text);line-height:1.6}
.testimonial-card cite{display:block;margin-top:10px;color:var(--muted);font-weight:600}

.section-title, h2{font-family:var(--font-heading);font-size:1.8rem;margin:0 0 12px;color:var(--text);text-align:left}
.section-sub{color:var(--muted);max-width:800px;margin:0 auto 18px;text-align:center}

/* Make service icons circular and prominent */
.service-card i{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:18px;background:linear-gradient(180deg,rgba(15,118,110,0.12),rgba(15,118,110,0.04));color:var(--primary);font-size:28px;margin-bottom:12px}

/* Slightly tighter cards */
.service-card, .project-card, .testimonial-card{padding:20px}

/* Team member compact card */
.team-member img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--primary);box-shadow:0 8px 30px rgba(6,20,46,0.06);margin-bottom:12px}

/* Responsive adjustments */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:28px;padding:0 18px}
  .hero-copy h1{font-size:2.2rem}
}

/* Mobile polish: tighter, more professional mobile layout (phones) */
@media (max-width:520px){
  html,body{font-size:15px}

  /* Hero adjustments */
  .hero{padding:36px 0}
  .hero-copy h1{font-size:clamp(1.4rem, 6vw, 2rem)}
  .hero .lead{font-size:1rem;line-height:1.35}
  .hero-art img{max-height:220px}

  /* Header / nav tweaks */
  nav.site-nav{top:66px;right:8px;width:min(92vw,360px);padding:12px;border-radius:12px}
  .nav-toggle{width:40px;height:40px}
  .nav-toggle .hamburger{width:18px;height:2px}

  /* Nav content sizing */
  nav.site-nav ul{padding:6px 0}
  nav.site-nav a{padding:10px 8px;font-size:0.95rem}
  .nav-link{padding:10px 8px}

  /* CTA sizing (Start project / header CTA) */
  .header-cta .btn, .nav-cta .btn, .btn-start-project{
    padding:6px 10px;font-size:0.92rem;min-height:36px;border-radius:10px
  }

  /* Stronger mobile override for the primary start button to reduce visual bulk */
  .header-cta .btn.btn-primary, .header-cta a.btn-primary {
    padding:6px 8px !important;
    font-size:0.9rem !important;
    min-height:34px !important;
    border-radius:10px !important;
    box-shadow:0 6px 18px rgba(15,118,110,0.06) !important;
  }

  /* Team grid and member card sizing */
  .team-grid{gap:14px;margin:20px 0}
  .team-member-card{padding:14px;border-radius:12px;gap:10px}
  .member-photo{width:96px;height:96px;border-radius:12px}
  .member-photo.large{width:96px;height:96px}

  .member-name{font-size:1rem}
  .member-role{font-size:0.95rem}
  .member-bio{font-size:0.92rem;line-height:1.45}
  .member-bio.clamp-6{max-height:calc(1.45em * 6)}

  /* Buttons and CTAs: keep touch targets but reduce visual bulk */
  .btn{padding:8px 12px;font-size:0.95rem;min-height:40px}
  .header-cta .btn{padding:8px 12px}

  /* Inline see more smaller and aligned */
  .bio-inline-toggle{font-size:0.92rem}

  /* Reduce card hover transform on mobile to avoid layout jumps */
  .team-member-card:hover{transform:none;box-shadow:0 10px 30px rgba(6,20,46,0.06)}

  /* Keep social icons compact */
  .social-btn{width:40px;height:40px}

  /* Footer spacing */
  footer.site-footer{padding:18px 0}
}

@media (max-width:520px){
  .project-card .project-thumb{max-height:96px;padding:8px}
}

@media (max-width:520px){
  .brand img.logo{width:44px;height:44px}
  /* Hide default nav and show toggle */
  nav.site-nav{position:fixed;top:70px;right:16px;background:var(--surface);box-shadow:0 12px 40px rgba(6,20,46,0.12);border-radius:12px;padding:14px;display:none;min-width:200px}
  nav.site-nav.open{display:block}
  nav.site-nav ul{display:block;flex-direction:column;gap:12px}
  .hero-copy .lead{font-size:1rem}
  h2{text-align:center}
}

/* Nav toggle button — visible on all sizes */
.nav-toggle{display:flex;background:transparent;border:0;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;color:rgba(255,255,255,0.95)}
.nav-toggle .hamburger{display:block;width:22px;height:2px;background:rgba(255,255,255,0.95);position:relative;transition:transform .2s ease}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';position:absolute;left:0;width:22px;height:2px;background:rgba(255,255,255,0.95)}
.nav-toggle .hamburger::before{top:-6px}
.nav-toggle .hamburger::after{top:6px}
/* Animated hamburger -> X when .open present on button */
.nav-toggle.open .hamburger{background:transparent}
.nav-toggle.open .hamburger::before{transform:rotate(45deg) translate(4px,4px)}
.nav-toggle.open .hamburger::after{transform:rotate(-45deg) translate(4px,-4px)}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{transition:transform .18s ease, opacity .12s ease}

/* Improve mobile nav appearance and accessibility */
@media (max-width:520px){
  nav.site-nav{position:fixed;top:70px;right:16px;background:var(--surface);box-shadow:0 12px 40px rgba(6,20,46,0.12);border-radius:12px;padding:14px;display:block;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .2s ease,visibility .18s ease}
  nav.site-nav.open{transform:translateY(0);opacity:1;visibility:visible}
}

/* Very specific override to ensure the header 'Start a project' primary button is compact on all pages */
@media (max-width:520px){
  header.site-header .header-inner .header-cta .btn.btn-primary,
  header.site-header .header-inner .header-cta a.btn-primary{
    padding:6px 8px !important;
    font-size:0.9rem !important;
    min-height:34px !important;
    border-radius:10px !important;
    box-shadow:0 6px 18px rgba(15,118,110,0.06) !important;
  }
}