/* Basic reset & variables */
:root{
  --gold:#c5a24d;
  --dark:#111;
  --muted:#6b6b6b;
  --bg:#fff;
  --card:#fafafa;
  --maxw:1150px;
  --radius:12px;
  --gap:24px;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* helpers */
.container{max-width:var(--maxw);margin:0 auto;padding:24px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{
  position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter: blur(4px);z-index:60;border-bottom:1px solid #eee;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{height:56px;width:auto}
.nav{display:block}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav a{color:var(--dark);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{background:#f4f4f4}

/* mobile toggle */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle .hamburger{width:22px;height:2px;background:var(--dark);display:block;position:relative}
.nav-toggle .hamburger::after,.nav-toggle .hamburger::before{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--dark)}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{top:7px}

/* Hero */
.hero{padding:64px 0;background:linear-gradient(180deg,rgba(197,162,77,0.06),transparent 40%);}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.hero-content h1{font-size:clamp(28px,4.6vw,44px);margin:0 0 12px;font-weight:700;color:var(--dark)}
.lead{color:var(--muted);font-size:1.05rem;margin-bottom:16px}
.cta-row{display:flex;gap:12px;margin-bottom:18px}
.btn{display:inline-block;padding:11px 16px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn.primary{background:var(--gold);color:#fff}
.btn.ghost{background:transparent;border:1px solid #ddd;color:var(--dark)}
.btn.small{padding:8px 12px;font-size:0.95rem}

/* quick services */
.quick-services{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;padding:0;list-style:none}
.quick-services li{background:#fff;border:1px solid #eee;padding:8px 10px;border-radius:8px;font-size:0.9rem;color:var(--muted)}

/* Contact card aside */
.contact-card{background:linear-gradient(180deg,#fff,var(--card));padding:18px;border-radius:12px;box-shadow:0 6px 20px rgba(16,16,16,0.06);border:1px solid #eee}
.contact-card h3{margin:0 0 8px}

/* Sections */
.section{padding:48px 0}
.section-header h2{margin:0 0 8px;font-size:1.6rem}
.section-header .muted{color:var(--muted)}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid #eee}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px}
.service{background:#fff;padding:18px;border-radius:12px;border:1px solid #eee;transition:transform .18s,box-shadow .18s}
.service:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(16,16,16,0.06)}
.service .icon{height:56px;width:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:linear-gradient(180deg,rgba(197,162,77,0.12),transparent);color:var(--dark);margin-bottom:12px}
.service h3{margin:0 0 8px}
.service p{color:var(--muted);margin-bottom:12px}
.service .learn{font-weight:600;color:var(--dark);text-decoration:none}

/* Impact */
.impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.impact-card{background:linear-gradient(180deg,#fff,#fbfbfb);padding:20px;border-radius:12px;border:1px solid #eee}

/* Leadership */
.leader-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}
.leader{display:flex;gap:16px;align-items:flex-start}
.avatar-placeholder{height:92px;width:92px;border-radius:12px;background:linear-gradient(180deg,rgba(121, 113, 96, 0.14),transparent);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--dark);font-size:1.4rem}
.leader-info .title{color:var(--muted);margin:6px 0}

/* Contact area */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.contact-form{background:var(--card);padding:18px;border-radius:12px;border:1px solid #eee}
.contact-form label{display:block;margin-bottom:10px}
.contact-form label span{display:block;margin-bottom:6px;font-weight:600}
.contact-form input, .contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;font-size:1rem}
.form-row{display:flex;gap:10px;align-items:center;margin-top:10px}
.form-note{font-size:0.9rem;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:18px 0;background:#fff}
.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.footer-links{display:flex;gap:12px;align-items:center}
.footer-links a{text-decoration:none;color:var(--muted)}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-card{margin-top:18px}
  .header-inner{padding:8px 0}
}
@media (max-width:720px){
  .nav{display:none}
  .nav-toggle{display:block}
  .nav.open{display:block;position:absolute;left:0;right:0;top:72px;background:#fff;padding:12px;border-bottom:1px solid #eee}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:12px}
  .container{padding:16px}
  .footer-grid{grid-template-columns:1fr;row-gap:8px;text-align:center}
}
/* Background section alternation */
.section:nth-of-type(odd) {
  background: #fff;
}
.section:nth-of-type(even) {
  background: linear-gradient(180deg, #faf8f3, #fff);
  background-attachment: fixed;
}

/* Hero background upgrade */
.hero {
  background: linear-gradient(135deg, rgba(197,162,77,0.1), rgba(255,255,255,0.9)),
              url("pattern-light.png");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Managing director photo */
.leader-photo {
  height: 180px;
  width: 180px;
  border-radius: 12px; /* square with slightly rounded corners */
  object-fit: cover;
  border: 4px solid var(--gold);
  box-shadow: 0 8px 20px rgba(16,16,16,0.12);
}
}

/* Buttons with gradient hover */
.btn.primary {
  background: linear-gradient(90deg, var(--gold), #a37d26);
  color: #fff;
  border: none;
  transition: background 0.3s, transform 0.2s;
}
.btn.primary:hover {
  background: linear-gradient(90deg, #a37d26, var(--gold));
  transform: translateY(-2px);
}

/* Alternating section backgrounds */
.section:nth-of-type(odd) {
  background: #ffffff; /* white */
  color: var(--dark);
}
.section:nth-of-type(even) {
  background: #faf6ef; /* very light gold/cream */
  color: var(--dark);
}

/* Service cards centered with icons */
.service {
  text-align: center;
}
.service .icon {
  font-size: 36px;
  color: var(--gold);
  margin: 0 auto 12px;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(197,162,77,0.1);
}

/* Hover effect for service cards */
.service {
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(16,16,16,0.08);
}

.service .icon {
  font-size: 36px;
  color: var(--gold);
  margin: 0 auto 12px;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(197,162,77,0.1);
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.service:hover .icon {
  transform: scale(1.2);
  color: #a37d26; /* deeper gold shade */
  background: rgba(197,162,77,0.2);
}