/* ============================================================
   Mayfair21 — styles.css
   Single-page brand site. Bone backdrop, Navy carrier, Coral
   accent. Mobile-first; breakpoints at 600, 900, 1280.
   ============================================================ */

:root {
  --navy: #143A5E;
  --navy-deep: #0E2940;
  --coral: #E94B4B;
  --coral-deep: #C73838;
  --bone: #F8F5F0;
  --stone: #E8E2D6;
  --slate: #4A5568;
  --charcoal: #0F1419;
  --brass: #B8956A;
  --white: #FFFFFF;

  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --gutter: 24px;
  --container: 1140px;
  --container-lg: 1280px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Buffer for the fixed header on anchor jumps. */
  scroll-padding-top: 110px;
}
@media (min-width: 900px) {
  html { scroll-padding-top: 140px; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding-left: 0; list-style: none; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
  .container { max-width: var(--container-lg); }
}

.section { padding: 80px 0; }
@media (min-width: 900px) { .section { padding: 120px 0; } }

.section-bone { background: var(--bone); color: var(--charcoal); }
.section-navy { background: var(--navy); color: var(--white); }

.centred { text-align: center; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 24px;
}
.eyebrow-coral { color: var(--coral); }

.hero-headline,
.display-md,
.display-sm {
  font-family: var(--sans);
  font-weight: 200;
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.display-md { font-size: clamp(36px, 5.2vw, 56px); letter-spacing: -0.035em; }
.display-sm { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -0.03em; line-height: 1.1; }

.display-md.light, .display-sm.light, .hero-headline.light { color: var(--white); }

/* Brand inflection — coral 800 accent inside a 200 headline. */
.accent { font-weight: 800; color: var(--coral); }

.prose {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--charcoal);
}
.prose p + p { margin-top: 1.1em; }

.lead {
  max-width: 720px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--charcoal);
  margin-top: 24px;
}
.lead.light { color: rgba(255, 255, 255, 0.8); }
.lead.centred { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-primary { background: var(--coral); color: var(--white); }
.btn-primary:hover { background: var(--coral-deep); }
.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--navy); }
.btn-block { display: block; width: 100%; text-align: center; }

/* ============================================================
   HEADER
   Static bone background with navy text throughout — no transparent
   state, no scroll-state transition. The bar is the bar on every
   section of the page.
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid var(--stone);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 18px var(--gutter);
}
.header-logo img { height: 64px; width: auto; }
@media (min-width: 900px) {
  .header-logo img { height: 96px; }
}
.header-nav { display: none; }
@media (min-width: 900px) {
  .header-nav {
    display: flex;
    gap: 32px;
  }
  .header-nav a {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--navy);
    transition: color 180ms ease;
  }
  .header-nav a:hover { color: var(--coral); }
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy);
  transition: transform 180ms ease, opacity 180ms ease;
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

@media (max-width: 899px) {
  .header-nav.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--stone);
    padding: 12px 0;
  }
  .header-nav.open a {
    display: block;
    padding: 14px var(--gutter);
    color: var(--navy);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 16px;
    border-top: 1px solid var(--stone);
  }
  .header-nav.open a:first-child { border-top: none; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 120px var(--gutter) 64px;
  background-image: url('assets/images/01-hero-sandton.jpg');
  background-size: cover;
  background-position: center;
  color: var(--white);
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 58, 94, 0.85) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding-bottom: 64px;
}
.hero-headline {
  color: var(--white);
  font-weight: 200;
  letter-spacing: -0.045em;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1.02;
  max-width: 18ch;
}
.hero-subhead {
  margin-top: 28px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  max-width: 720px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.hero-factband {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  padding: 0 var(--gutter);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.factband-sep { padding: 0 14px; }
@media (max-width: 599px) {
  .hero-factband { flex-direction: column; align-items: center; gap: 4px; bottom: 16px; }
  .factband-sep { display: none; }
  .hero-content { padding-bottom: 80px; }
}

/* ============================================================
   TWO-COLUMN (Platform, Operating model, About)
   ============================================================ */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .two-col-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

/* Platform (01) and About (07) both centre their two columns
   vertically — in each case the right column (prose or image) is
   shorter than the left and looks better visually anchored against
   the middle of the left content than floating at the top. */
@media (min-width: 900px) {
  #platform .two-col-grid,
  #about .two-col-grid { align-items: center; }
}
.col-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   SECTION 3 — HOW WE WORK
   2×3 cell grid on desktop. Cells 1–5 are step cells (bone, stone
   border, coral mono number + navy title + body). Cell 6 is the
   commitment cell (navy fill, white centred text, no number) and
   lands bottom-right so the closing line is what the eye finishes on.
   ============================================================ */
.how-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .how-intro { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.how-intro-right {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--charcoal);
  max-width: 560px;
}
.how-intro-right p + p { margin-top: 1.1em; }
@media (min-width: 900px) {
  /* Pull the body copy down a touch so it sits flush with the headline
     rather than ranging above it. Visual balance only — content order
     in the DOM is unchanged. */
  .how-intro-right { margin-top: 12px; }
}

.steps-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.step-cell {
  background: var(--bone);
  border: 1px solid var(--stone);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.step-cell .step-number {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 32px;
  color: var(--coral);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.step-cell .step-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 14px;
}
.step-cell .step-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
}

/* Commitment cell — same shell as the step cells (bone + stone border),
   no number, text centred. Differentiation comes from the centred layout
   and the coral accent phrase inside the line. */
.step-cell-commitment {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.step-commitment-line {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 21px);
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--navy);
}
.step-commitment-line .accent {
  /* Keep coral as the inflection but match the surrounding text weight
     so it reads as emphasis, not a yelled phrase. */
  font-weight: 700;
}

/* ============================================================
   SECTION 4 — Operating model bullet list
   ============================================================ */
.square-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
}
.square-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}
.square-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--coral);
}

/* ============================================================
   SECTION 5 — Capabilities (two-column, image on right)
   ============================================================ */
.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .capabilities-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 64px;
  }
}
.capabilities-left { min-width: 0; }
.capabilities-right { min-width: 0; }
.capabilities-image {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 900px) {
  /* Right column is shorter than the left (just an image vs. three
     capability blocks). Centre the image vertically inside the column
     so it sits opposite the middle block rather than floating at the
     top. align-self: stretch keeps the column at full row height so
     the centring has something to centre against. */
  .capabilities-right {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .capabilities-image { aspect-ratio: 3 / 4; object-fit: cover; }
}

.cap-blocks {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.cap-block {
  padding: 32px 0;
  border-top: 1px solid var(--stone);
  max-width: 740px;
}
.cap-block:first-child { border-top: none; padding-top: 0; }
.cap-block:last-child { padding-bottom: 0; }
.cap-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  line-height: 1.3;
}
.cap-block p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
}
.cap-close {
  margin-top: 40px;
  font-size: 16px;
  color: var(--slate);
  max-width: 740px;
}

/* ============================================================
   SECTION 6 — Selected situations (navy + tower overlay)
   ============================================================ */
.section-tower { position: relative; overflow: hidden; }
.tower-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}
.section-tower::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 41, 64, 0.55);
  z-index: 1;
}
.section-tower .container { position: relative; z-index: 2; }

.situations-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 56px;
}
@media (min-width: 900px) {
  .situations-grid { grid-template-columns: 1fr 1fr; }
}
.situation { color: var(--white); }
.situation-number {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 48px;
  color: var(--coral);
  line-height: 1;
  margin-bottom: 16px;
}
.situation-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.3;
}
.situation-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  max-width: 540px;
}

/* ============================================================
   SECTION 7 — Areas of activity (2x2 sector grid)
   ============================================================ */
.sectors-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) {
  .sectors-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.sector-card {
  background: var(--bone);
  border: 1px solid var(--stone);
  padding: 32px;
}
.sector-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.3;
}
.sector-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
}
.areas-close {
  margin-top: 48px;
  text-align: center;
  font-size: 16px;
  color: var(--slate);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ============================================================
   SECTION 9 — Contact (full-bleed image + form)
   ----------------------------------------------------------
   Overlay deliberately strong so the coral eyebrow at 100%
   reads cleanly against the blue-hour photograph beneath.
   ============================================================ */
.section-contact {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  color: var(--white);
}
.contact-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.contact-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 58, 94, 0.82) 0%, rgba(14, 41, 64, 0.92) 100%);
  z-index: 1;
}
.contact-inner { position: relative; z-index: 2; }

.section-contact .eyebrow-coral {
  color: var(--coral);
  opacity: 1;
  text-align: center;
}

/* Single prominent clickable email — no form, no fields. */
.contact-email-line {
  margin: 56px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.1;
}
.contact-email-line a {
  display: inline-block;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 6px;
  transition: color 180ms ease, border-color 180ms ease;
}
.contact-email-line a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
}
.footer-mark { height: 64px; width: auto; margin-bottom: 18px; }
.footer-tagline {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 320px;
  line-height: 1.5;
}
.footer-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.footer-links a { transition: color 160ms ease; }
.footer-links a:hover { color: var(--coral); }

.footer-bottom {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* ============================================================
   Responsive trims
   ============================================================ */
@media (max-width: 599px) {
  .section { padding: 64px 0; }
  .sector-card { padding: 24px; }
  .step-cell { padding: 24px; }
  .hero { padding: 100px 20px 56px; }
  .footer-bottom { font-size: 9px; }
}