:root {
  --black: #0d0d0d;
  --grey-dark: #2a2a2a;
  --grey-mid: #7a7a7a;
  --grey-light: #bdbdbd;
  --white: #f5f5f5;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--black); color:var(--white); font-family:var(--font-body); line-height:1.7; }
h1,h2,h3,.nav-logo { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* NAV */
header.site-header { background:var(--black); border-bottom:1px solid var(--grey-dark); position:sticky; top:0; z-index:100; }
.nav-wrap { max-width:1200px; margin:0 auto; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; }
.nav-logo { font-size:1.5rem; font-weight:700; line-height:1; }
.nav-logo span { display:block; font-family:var(--font-body); text-transform:uppercase; font-size:0.6rem; letter-spacing:0.25em; color:var(--grey-light); font-weight:400; margin-top:4px; }
nav ul { display:flex; gap:28px; list-style:none; }
nav ul li a { font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }
nav ul li a:hover { color:var(--grey-light); }
.menu-toggle { display:none; background:none; border:none; color:var(--white); font-size:1.6rem; cursor:pointer; }
@media (max-width:860px) {
  nav ul { display:none; }
  .menu-toggle { display:block; }
  nav ul.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--black); padding:24px; gap:20px; border-bottom:1px solid var(--grey-dark); }
}

/* PAGE BANNER (grey diagonal header used on every inner page) */
.page-banner {
  position:relative;
  background:linear-gradient(120deg,#3a3a3a,#1c1c1c 60%);
  overflow:hidden;
  padding:70px 24px 50px;
}
.page-banner::after {
  content:"";
  position:absolute; top:0; right:-10%; bottom:0; width:60%;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), transparent 60%);
  clip-path:polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}
.page-banner-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; position:relative; z-index:2; }
.page-banner h1 { font-size:clamp(2rem,5vw,3rem); font-weight:700; }
.breadcrumb { font-size:0.85rem; color:var(--grey-light); }
.breadcrumb a:hover { color:var(--white); }

/* HERO (home only) */
.hero { position:relative; min-height:70vh; display:flex; align-items:center; background:linear-gradient(120deg,#3a3a3a,#111 65%); padding:60px 24px; }
.hero-inner { max-width:1200px; margin:0 auto; }
.eyebrow { font-size:0.8rem; letter-spacing:0.3em; text-transform:uppercase; font-weight:600; color:var(--grey-light); margin-bottom:18px; }
.hero h1 { font-size:clamp(2.2rem,6vw,4rem); font-weight:700; line-height:1.05; max-width:820px; }
.services-strip { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:24px; font-size:0.85rem; letter-spacing:0.05em; color:var(--grey-light); text-transform:uppercase; }
.services-strip span:not(:last-child)::after { content:"|"; margin-left:28px; color:var(--grey-dark); }
.btn-row { display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:15px 30px; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; border:1px solid var(--white); transition:all .25s; }
.btn:hover { background:var(--white); color:var(--black); }

section { padding:80px 24px; max-width:1200px; margin:0 auto; }
.section-head { margin-bottom:48px; max-width:700px; }
.section-head h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; }
.section-head p { color:var(--grey-light); margin-top:14px; }

/* CONTACT / QUICK INFO BLOCKS */
.info-blocks { display:flex; gap:60px; flex-wrap:wrap; padding:60px 24px; max-width:1200px; margin:0 auto; }
.info-block { display:flex; gap:18px; align-items:flex-start; }
.info-icon { width:46px; height:46px; border-radius:50%; border:1px solid var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.info-block h4 { font-family:var(--font-display); text-transform:uppercase; font-size:0.95rem; letter-spacing:0.05em; margin-bottom:6px; }
.info-block p, .info-block a { color:var(--grey-light); font-size:0.95rem; display:block; }
.info-block a:hover { color:var(--white); }

/* EXPERTISE LIST */
.expertise-list { border-top:1px solid var(--grey-dark); }
.expertise-list a { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; background:var(--grey-dark); border-bottom:1px solid #3a3a3a; font-family:var(--font-display); text-transform:uppercase; font-size:0.95rem; letter-spacing:0.03em; transition:background .2s; }
.expertise-list a:hover { background:#3a3a3a; }

/* EBOOK CTA */
.ebook-cta { display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:center; background:var(--grey-dark); padding:40px; }
@media (max-width:760px){ .ebook-cta{grid-template-columns:1fr;} }
.ebook-cta h3 { font-size:1.5rem; margin-bottom:10px; }
.ebook-cta p { color:var(--grey-light); margin-bottom:20px; }
.ebook-thumb { background:var(--black); border:1px solid var(--grey-mid); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; color:var(--grey-mid); font-size:0.8rem; text-align:center; padding:16px; }

/* PROCESS */
.process-list { list-style:none; counter-reset:step; border-top:1px solid var(--grey-dark); }
.process-list li { counter-increment:step; display:flex; gap:22px; padding:20px 0; border-bottom:1px solid var(--grey-dark); align-items:baseline; }
.process-list li::before { content:counter(step,decimal-leading-zero); font-family:var(--font-display); color:var(--grey-light); font-size:1rem; min-width:40px; }
.process-list li span { color:var(--grey-light); }

/* CHECKLIST (FAQ / getting started) */
.checklist { list-style:none; margin:24px 0; }
.checklist li { display:flex; gap:14px; padding:10px 0; align-items:flex-start; color:var(--grey-light); }
.checklist li::before { content:"✓"; width:26px; height:26px; border-radius:50%; border:1px solid var(--white); display:flex; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0; color:var(--white); }

/* GALLERY */
.gallery-list { display:flex; flex-direction:column; gap:2px; }
.gallery-item { position:relative; background:var(--grey-dark); border:1px dashed #444; min-height:260px; display:flex; align-items:flex-end; padding:20px; }
.gallery-item .cap { position:relative; z-index:2; background:linear-gradient(to top, rgba(0,0,0,0.75), transparent); margin:-20px; padding:60px 20px 16px; width:100%; }
.gallery-item .cap strong { display:block; font-family:var(--font-display); text-transform:uppercase; font-size:1rem; letter-spacing:0.02em; }
.gallery-item .cap span { color:var(--grey-light); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; }

/* TESTIMONIALS */
.testimonial { padding:36px 0; border-bottom:1px solid var(--grey-dark); }
.testimonial p.quote { color:var(--grey-light); font-size:1rem; }
.testimonial .author { margin-top:16px; font-family:var(--font-display); text-transform:uppercase; font-size:0.85rem; letter-spacing:0.05em; }

/* DIRECTOR QUOTE BLOCK */
.director-block { background:var(--grey-dark); padding:60px 40px; }
.director-block h2 { font-size:1.6rem; margin-bottom:6px; }
.director-block .by { color:var(--grey-light); font-size:0.9rem; margin-bottom:28px; display:block; }
.director-block h4 { font-size:1rem; margin:26px 0 8px; letter-spacing:0.05em; }
.director-block p { color:var(--grey-light); font-size:0.95rem; }

/* FOOTER */
footer { border-top:1px solid var(--grey-dark); padding:70px 24px 30px; }
.footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr; gap:40px; padding-bottom:40px; }
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr;} }
footer h4 { font-family:var(--font-display); text-transform:uppercase; font-size:0.85rem; letter-spacing:0.1em; color:var(--grey-light); margin-bottom:16px; }
footer p, footer a { color:var(--grey-light); font-size:0.9rem; display:block; margin-bottom:10px; }
footer a:hover { color:var(--white); }
.social-row { display:flex; gap:14px; margin-top:16px; }
.social-row a { width:38px; height:38px; border-radius:50%; border:1px solid var(--grey-mid); display:flex; align-items:center; justify-content:center; font-size:0.85rem; }
.footer-bottom { max-width:1200px; margin:0 auto; border-top:1px solid var(--grey-dark); padding-top:22px; font-size:0.78rem; color:var(--grey-mid); }