/* ===== Theme (Gold on Black from logo) ===== */
:root{
  --black:#000000;
  --paper:#0A0A0A;
  --gold:#C7A56B;
  --gold-dark:#A98753;
  --off:#EDE7DA;
  --muted:#B9B2A4;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--black);
  color:var(--off);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

.wrap{width:min(1200px,92%); margin-inline:auto}
.center{text-align:center}
.h2{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  margin:0 0 .75rem;
}
.h3{font-weight:700; margin:.4rem 0 .25rem}
.img-card{
  height:300px; width:100%; display:block; border-radius:var(--radius);
  box-shadow:var(--shadow); background:#111; object-fit:cover;
}

/* Buttons */
.btn{
  display:inline-block; border:1px solid var(--gold);
  padding:.8rem 1.1rem; border-radius:999px; text-decoration:none;
  color:var(--gold); font-weight:600;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn-gold{ background:var(--gold); color:#1b1408; border-color:var(--gold) }
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark) }
.btn-ghost{ background:transparent; color:var(--gold) }
.btn-ghost:hover{ background:rgba(199,165,107,.12) }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,0.9); backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(199,165,107,0.25);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--off); text-decoration:none }
.brand-logo{ height:100px; width:auto; display:block }
.brand-text{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold) }
.nav{ display:flex; gap:1.25rem; align-items:center }
.nav a{
  color:var(--off); text-decoration:none; font-weight:600; opacity:.9;
  border-bottom:2px solid transparent; padding:6px 2px;
}
.nav a:hover{ color:var(--gold); border-color:var(--gold) }

/* Mobile menu */
.hamburger{ display:none; background:none; border:0; cursor:pointer }
.hamburger span{ display:block; width:24px; height:2px; background:var(--off); margin:5px 0 }

/* ===== Hero (Fade Slider) ===== */
.hero{ position:relative; background:var(--black) }
.fader{ position:relative; height:68vh; min-height:520px; overflow:hidden; background:#000 }
.fader__slides{ position:absolute; inset:0 }
.fader__slide{
  position:absolute; inset:0; opacity:0; transition:opacity .8s ease;
  background-size:cover; background-position:center; filter:brightness(.72);
}
.fader__slide.is-active{ opacity:1 }
.hero-overlay{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:1rem; background:linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55));
}
.hero-title{
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  margin:0 0 .6rem;
}
.hero-sub{ max-width:900px; margin:0 auto 1.1rem; color:#ddd6c3 }
.cta{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center }

.fader__ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.45); border:1px solid rgba(199,165,107,.6);
  color:var(--gold); font-size:1.4rem; border-radius:50%;
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
}
.fader__ctrl:hover{ background:rgba(0,0,0,0.65) }
.fader .prev{ left:14px } .fader .next{ right:14px }

.fader__dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; justify-content:center }
.fader__dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid var(--gold); background:transparent; cursor:pointer;
}
.fader__dots button.is-active{ background:var(--gold) }

/* ===== Sections ===== */
.section{ padding:72px 0; background:var(--paper); border-top:1px solid rgba(199,165,107,0.15) }
.section-dark{ background:#050505 }
.section-split .split{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px }
.keypoints{ margin:1rem 0 0 1rem }
.keypoints li{ margin:.2rem 0 }

.pillars{ display:grid; gap:22px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) }
.pillar{ background:#0E0E0E; border:1px solid rgba(199,165,107,0.12); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow) }
.pillar-media img{ width:100%; height:150px; object-fit:cover; border-radius:12px; display:block; background:#111 }

.services{ display:grid; gap:22px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) }
.service{ background:#0E0E0E; border:1px solid rgba(199,165,107,0.12); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.service-img{ width:100%; height:180px; object-fit:cover; display:block; background:#111 }
.service-body{ padding:16px }

/* ===== Contact ===== */
.contact-grid{ display:grid; gap:24px; grid-template-columns:1.1fr .9fr }
.card{
  background:#0E0E0E; border:1px solid rgba(199,165,107,0.15);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.contact-form label{ display:block; font-weight:600; margin:.4rem 0 }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; margin-top:.35rem; background:#0B0B0B; color:var(--off);
  border:1px solid rgba(199,165,107,0.22); border-radius:10px; padding:.75rem;
}
.form-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem }

/* ===== Footer ===== */
.site-footer{ background:#000; border-top:1px solid rgba(199,165,107,.18) }
.footer-grid{ display:grid; grid-template-columns: 1fr auto 1fr; gap:18px; padding:22px 0; align-items:center }
.footer-logo{ height:50px; width:auto; margin-bottom:.3rem }
.footer-links{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }
.footer-links a{ color:var(--muted); text-decoration:none }
.footer-links a:hover{ color:var(--gold) }
.newsletter{ display:flex; gap:.5rem; justify-content:flex-end }
.newsletter input{
  background:#0B0B0B; color:var(--off);
  border:1px solid rgba(199,165,107,.22); border-radius:999px; padding:.7rem 1rem; min-width:220px;
}
.footer-bottom{ border-top:1px solid rgba(199,165,107,.12); padding:14px 0; text-align:center; color:var(--muted) }
.muted{ color:var(--muted); margin:.25rem 0 0 }
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }


/* Team section — match About's full-width split grid */
.team-split { 
  grid-template-columns: 1fr 1fr;  /* two equal columns like About */
  align-items: stretch;
}

/* Team cards */
.team-card{
  background:#0E0E0E;
  border:1px solid rgba(199,165,107,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.team-photo{
  width:100px;
  height:100px;           /* adjust as needed */
  object-fit:cover;
  display:block;
  background:#111;
}

.team-meta{
  padding:16px;
  text-align:center;
}

.team-meta .h3{ 
  margin:8px 0 4px; 
  color:var(--gold);
}

.team-meta .role{
  margin:0;
  color:var(--muted);
}

/* Responsive: your existing rule already stacks split grids at <=960px:
   .section-split .split { grid-template-columns:1fr; } */



/* ===== Responsive ===== */
@media (max-width: 960px){
  .section-split .split{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; text-align:center }
  .newsletter{ justify-content:center }
}
@media (max-width: 820px){
  .hamburger{ display:block }
  .nav{
    position:absolute; right:0; top:64px; background:#050505; border-left:1px solid rgba(199,165,107,.15);
    width:100%; display:none; flex-direction:column; padding:10px 16px; gap:6px;
  }
  .nav a{ padding:10px 2px; border-bottom:1px solid rgba(199,165,107,.08) }
  .nav.show{ display:flex }
}

/* Team section — full-width look matching .wrap used in About */
.team-section { 
  padding-top: 56px;
  padding-bottom: 56px;
  background: var(--paper);   /* same background as other sections */
  border-top: 1px solid rgba(199,165,107,0.08);
}

/* ensure heading matches other section headings and centred */
.team-section .h2.center { margin-bottom: 28px; color: var(--gold); }

/* 2-column grid that matches site width */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 28px;
  align-items: start;
}

/* card styling consistent with site */
.team-card {
  background: #0E0E0E;
  border: 1px solid rgba(199,165,107,0.12);
  border-radius: var(--radius);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;     /* center contents */
  text-align: center;      /* center text */
  box-shadow: var(--shadow);
}

/* rounded circular photo */
.team-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--gold);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  display: block;
}

/* name and role */
.team-name {
  margin: 14px 0 6px;
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1.15;
}
.team-role {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Responsive: stack on narrow screens */
@media (max-width: 960px) {
  .team-grid { grid-template-columns: 1fr; gap: 18px; }
  .team-photo { width: 140px; height: 140px; }
}