/*
  This stylesheet defines a clean, minimalist aesthetic suitable for a
  professional consulting and venture fund site. Colours, fonts and layout
  measurements are defined using CSS variables for easy customisation. You
  can override these variables to change the look and feel of the site.
*/

/* Colour palette and global variables */
:root{
  --bg: #ffffff;
  --text: #0b1620;
  --muted: #546471;
  --brand: #0b5d3b;
  --brand-ink: #0a4f33;
  --surface: #f4f7f6;
  --card: #ffffff;
  --border: #e6ecea;
  --radius: 16px;
  --shadow: 0 4px 20px rgba(0,0,0,0.06);
  --container: 1100px;
  --rhythm: 1rem;
  /* Additional accent colour and larger radius for a more modern feel */
  --brand-light: #2bbf7e;
  --radius-lg: 24px;
  --shadow-lg: 0 6px 24px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui,-apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
/* Use a lighter brand colour on hover for links */
a:hover{
  color:var(--brand-light);
}
.container{max-width:var(--container); margin-inline:auto; padding:0 20px}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden
}
.skip-link:focus{
  position:fixed; left:20px; top:20px; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:8px; z-index:10000
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
  /* Add a subtle shadow to make the header float above content */
  box-shadow:var(--shadow);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:.625rem; text-decoration:none}
.brand-logo{border-radius:8px; object-fit:contain}
.brand-text{font-weight:700; color:var(--text); letter-spacing:.2px}

/* Increase the logo size for greater prominence */
.brand-logo{
  width:64px;
  height:64px;
}

.site-nav .nav-toggle{
  display:none; background:transparent; border:1px solid var(--border); padding:.5rem .75rem; border-radius:10px
}
.site-nav .nav-list{display:flex; gap:1.25rem; list-style:none; margin:0; padding:0}
.site-nav a{text-decoration:none; color:var(--text); font-weight:600}
.site-nav a:hover{color:var(--brand)}

@media (max-width: 760px){
  .site-nav .nav-toggle{display:inline-block}
  .site-nav .nav-list{position:absolute; right:20px; top:70px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:.75rem; display:none; flex-direction:column; gap:.5rem; min-width:200px}
  .site-nav .nav-list.open{display:flex}
}

/* Hero */
.hero{
  padding: clamp(3rem, 6vw, 6rem) 0;
  /* Use on-brand gradients for a fresher hero background */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(43, 191, 126, 0.15), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(11, 93, 59, 0.15), transparent 55%);
  border-bottom:1px solid var(--border);
}
.hero h1{font-size:clamp(2rem, 3.5vw, 3rem); margin:0 0 .5rem}
.lead{font-size:clamp(1rem, 1.4vw, 1.125rem); color:var(--muted); max-width:70ch}

/* Sections */
.section{padding: clamp(2.5rem, 5vw, 4rem) 0}
.section-alt{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section h2{margin:0 0 .75rem; font-size:clamp(1.5rem, 2.5vw, 2rem)}
.section p{margin:.5rem 0 0}

/* Cards / grids */
.grid{display:grid; gap:clamp(1rem, 2.4vw, 2rem)}
/* Grid layouts automatically scale based on available space.  Each card has
   a minimum width and will wrap when the viewport is too narrow. */
.services-grid,
.team-grid,
.investments-grid,
.blog-grid{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 1024px){
  .services-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 720px){
  .services-grid, .team-grid{grid-template-columns: 1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  /* Use a larger radius for a softer, more modern card shape */
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* Elevate cards on hover to provide a sense of depth */
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

/* contact logo in contact section */
.contact-logo{
  width:64px;
  height:auto;
  margin-bottom:1rem;
}

/* Service cards */
.service-media{aspect-ratio: 16 / 10; background:#eaf2ee}
.media-img{width:100%; height:100%; object-fit:cover}
.service-body{padding:1rem 1.125rem 1.25rem}
.service h3{margin:.25rem 0 .5rem}

/* Team */
.team-card{align-items:center; text-align:center}
/* Add breathing room above team member photos */
.team-card .avatar{
  width:100%;
  /* Removed the max-width constraint so avatars expand to the full width of
     their card. This prevents leftover white space on the sides. */
  aspect-ratio: 4 / 3;
  /* Use a neutral background colour matching the service/investment cards. It
     shows through before the image loads and eliminates white bands if a
     photo is missing. */
  background:#eaf2ee;
  object-fit:cover;
  /* Remove extra top margin so avatars align consistently with card edges */
  margin-top:0;
}
.team-body{padding:1rem 1.125rem 1.25rem}
.person-name{margin:.25rem 0 .5rem}
.contact a{text-decoration:none}
.contact a:hover{text-decoration:underline}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#fff}
.footer-inner{padding:1rem 0; text-align:center; color:var(--muted); font-size:.95rem}

/* Focus styles */
:focus-visible{outline:3px solid #9ad1b7; outline-offset:2px}

/* Testimonials slider */
.testimonial-container{
  text-align:center;
  max-width:700px;
  margin-inline:auto;
  margin-top:1rem;
}
.testimonial-quote{
  font-style:italic;
  font-size:1.25rem;
  margin-bottom:.5rem;
}
.testimonial-author{
  font-weight:600;
  color:var(--muted);
  margin-bottom:1rem;
}
.testimonial-controls{
  display:flex;
  justify-content:center;
  gap:.5rem;
}
.testimonial-controls button{
  background:none;
  border:1px solid var(--border);
  border-radius:50%;
  width:36px;
  height:36px;
  font-size:1.25rem;
  color:var(--brand);
  cursor:pointer;
}
.testimonial-controls button:hover{
  background:var(--surface);
}

/* Blog / Insights */
.blog-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.blog-card h3{
  margin:0 0 .5rem;
}
.blog-card p{
  margin:0 0 1rem;
}
.blog-card a{
  align-self:flex-start;
  color:var(--brand);
  font-weight:600;
  text-decoration:none;
}
.blog-card a:hover{
  text-decoration:underline;
}

/* Read more links in investments cards */
.read-more{
  display:inline-block;
  margin-top:.5rem;
  color:var(--brand);
  font-weight:600;
  text-decoration:none;
}
.read-more:hover{
  text-decoration:underline;
  color:var(--brand-light);
}

/* Newsletter */
.newsletter-form{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  max-width:500px;
  margin-top:1rem;
}
.newsletter-form input{
  flex:1 1 auto;
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:1rem;
}
.newsletter-form button{
  padding:.5rem 1rem;
  border:none;
  border-radius:var(--radius);
  /* Use the lighter brand colour for the subscribe button to stand out */
  background:var(--brand-light);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.newsletter-form button:hover{
  /* Darken slightly on hover for contrast */
  background:var(--brand);
}

/* Contact form */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  max-width:600px;
  margin-top:1rem;
}
.contact-form input,
.contact-form textarea{
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:1rem;
  width:100%;
}
.contact-form textarea{
  min-height:120px;
  resize:vertical;
}
.contact-form button{
  align-self:flex-start;
  padding:.5rem 1.25rem;
  border:none;
  border-radius:var(--radius);
  /* Use the lighter brand colour for primary action buttons */
  background:var(--brand-light);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.contact-form button:hover{
  /* Darken slightly on hover */
  background:var(--brand);
}

/* Form messages */
.form-message{
  margin-top:.75rem;
  color:var(--brand);
  font-weight:600;
}

/* Investments: match Services card inner padding for consistency */
.investments-body{padding:1rem 1.125rem 1.25rem}

/* Align Investment card title spacing with Services */
.investments-card h3{margin:.25rem 0 .5rem}

/* Investments media area: match Services banner crop */
.investments-media{aspect-ratio: 16 / 10; background:#eaf2ee}