/* ==========================================================================
   ESAN Consulting — marketing homepage
   Fonts: Jost (display/headings), Manrope (body/UI)
   ========================================================================== */

:root {
  /* Brand palette */
  --gold: #F0CF79;
  --champagne: #E4CC8B;
  --sage: #A0C0A0;
  --sage-text: #6E8F72;
  --gold-text: #A8842B;
  --gold-deep: #7A5C16;
  --sage-tint: #EAF0EA;
  --ink: #2C2A24;
  --ink-on-dark: #F5EFE0;
  --muted-dark: #B8B1A0;
  --muted-dark-2: #A79F8C;
  --muted-dark-3: #D8D2C2;
  --paper: #FAF7EF;
  --stone: #7C7768;
  --body: #4A4740;
  --body-2: #5A5648;
  --border: rgba(44, 42, 36, 0.10);
  --border-soft: rgba(44, 42, 36, 0.08);

  --maxw: 1180px;
  --pad-x: 40px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Keep anchored sections clear of the sticky header */
section[id] { scroll-margin-top: 104px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold-text); }

img { display: block; }

::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Layout helper */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* Shared type patterns */
.eyebrow {
  font: 600 13px/1 'Jost', sans-serif;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.section-h2 {
  font: 600 clamp(32px, 4.4vw, 52px)/1.06 'Jost', sans-serif;
  letter-spacing: -0.02em;
}

/* Buttons */
.btn {
  display: inline-block;
  border-radius: 10px;
  font: 600 16px/1 'Manrope', sans-serif;
  padding: 17px 30px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #3d3a31; color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid rgba(44, 42, 36, 0.35); }
.btn-outline:hover { color: var(--ink); border-color: var(--ink); }
.btn-gold { background: var(--gold); color: var(--ink); font-size: 15px; padding: 15px 26px; }
.btn-gold:hover { background: #e9c25f; color: var(--ink); }

/* Placeholder image blocks (swap for real photos: 4:5 portrait crops) */
.ph {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: repeating-linear-gradient(45deg,
    rgba(44, 42, 36, 0.08) 0 14px,
    rgba(44, 42, 36, 0.03) 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 247, 239, 0.88);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand img { width: 280px; max-width: 55vw; height: auto; }

.nav {
  display: flex;
  gap: 34px;
  align-items: center;
  font: 500 15px/1 'Manrope', sans-serif;
  color: #4A4740;
}
.nav a { color: #4A4740; }
.nav a:hover { color: var(--gold-text); }
.nav .nav-cta { background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 9px; }
.nav .nav-cta:hover { background: #3d3a31; color: #fff; }

/* Language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13px/1 'Jost', sans-serif;
  letter-spacing: 0.08em;
}
.lang-switch a { color: #8A8578; }
.lang-switch a.active { color: var(--ink); }
.lang-switch a:hover { color: var(--gold-text); }
.lang-switch .sep { color: rgba(44, 42, 36, 0.30); }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  color: var(--ink);
}
.nav-toggle svg { display: block; }

/* ==========================================================================
   Sections
   ========================================================================== */

/* Hero — currently text-only and centred. When a real founder photo exists,
   restore the two-column grid (1.05fr 0.95fr) and drop the centring. */
.hero { background: var(--champagne); }
.hero .wrap {
  max-width: 900px;
  text-align: center;
  padding-top: 96px;
  padding-bottom: 100px;
}
.hero .eyebrow { color: var(--gold-deep); letter-spacing: 0.22em; margin-bottom: 26px; }
.hero h1 {
  font: 600 clamp(42px, 5.4vw, 68px)/1.02 'Jost', sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 26px;
}
.hero .lead {
  font: 400 20px/1.6 'Manrope', sans-serif;
  color: var(--body);
  max-width: 560px;
  margin: 0 auto 36px;
}
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* 404 — secondary English line under the French message. */
.notfound-en {
  margin-top: 34px;
  font: 400 15px/1.6 'Manrope', sans-serif;
  color: var(--gold-deep);
}
.notfound-en a { color: var(--gold-deep); text-decoration: underline; }
.notfound-en a:hover { color: var(--ink); }

/* About — heading left, story right (was heading + portrait). */
.about { background: #fff; border-bottom: 1px solid var(--border-soft); }
.about .wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 96px;
}
.about .eyebrow { color: var(--gold-text); margin-bottom: 22px; }
.about h2 { margin-bottom: 22px; }
.about p {
  font: 400 19px/1.65 'Manrope', sans-serif;
  color: var(--body);
  max-width: 520px;
  margin-bottom: 18px;
}
.about p:last-of-type { margin-bottom: 32px; }
.signature { font: 500 30px/1 'Jost', sans-serif; color: var(--ink); margin-bottom: 8px; }
.signature-role { font: 400 14px/1.4 'Manrope', sans-serif; color: var(--stone); }

/* Why ESAN — its own tinted band, so it reads as a pause between the personal
   About section and the commercial Services grid rather than merging with it. */
.value-intro { background: var(--sage-tint); text-align: center; }
.value-intro .wrap { padding-top: 84px; padding-bottom: 84px; }
.value-intro .eyebrow { color: var(--gold-text); margin-bottom: 22px; }
.value-intro h2 {
  font: 600 clamp(32px, 4.4vw, 52px)/1.08 'Jost', sans-serif;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin: 0 auto;
}
.value-intro .lead {
  font: 400 19px/1.65 'Manrope', sans-serif;
  color: var(--body-2);
  max-width: 560px;
  margin: 20px auto 0;
}

/* Services — left-aligned. Only the full-bleed statement bands (hero, Why
   ESAN) are centred; every content section reads from the left edge. */
.services.wrap { padding-top: 92px; padding-bottom: 110px; }
.services .eyebrow { color: var(--gold-text); margin-bottom: 16px; }
.services h2 {
  font: 600 clamp(30px, 3.6vw, 44px)/1.08 'Jost', sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 720px;
}
.services .lead {
  font: 400 18px/1.6 'Manrope', sans-serif;
  color: var(--body-2);
  max-width: 620px;
  margin: 0 0 52px;
}
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
}
.pill {
  align-self: flex-start;
  font: 600 12px/1 'Jost', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.pill-gold { background: var(--gold); }
.pill-sage { background: var(--sage); }
.card .sub { font: 400 16px/1.6 'Manrope', sans-serif; color: var(--stone); margin-bottom: 12px; }
.card .desc { font: 400 17px/1.6 'Manrope', sans-serif; color: var(--body); margin-bottom: 28px; }
.card ul {
  list-style: none;
  display: grid;
  gap: 14px;
  font: 500 16px/1.45 'Manrope', sans-serif;
  color: var(--ink);
  margin-bottom: 28px;
}
.card li { display: flex; gap: 12px; align-items: flex-start; }
.card li .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.dot-gold { background: var(--gold); }
.dot-sage { background: var(--sage-text); }
.card .note { margin-top: auto; font: 600 15px/1.5 'Manrope', sans-serif; }
.note-gold { color: var(--gold-deep); }
.note-sage { color: var(--sage-text); }

/* Services directory grid (homepage) — each card links to its own page */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 28px;
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease;
}
.svc-card:hover { color: var(--ink); border-color: rgba(44, 42, 36, 0.30); transform: translateY(-2px); }
.svc-card .rule { width: 28px; height: 2px; margin-bottom: 18px; }
.rule-gold { background: var(--gold); }
.rule-sage { background: var(--sage); }
.svc-card h3 { font: 600 20px/1.25 'Jost', sans-serif; margin-bottom: 8px; }
.svc-card p { font: 400 15px/1.6 'Manrope', sans-serif; color: var(--stone); margin-bottom: 20px; }
.svc-card .more { margin-top: auto; font: 600 14px/1 'Manrope', sans-serif; color: var(--gold-text); }
.svc-card:hover .more { color: var(--ink); }

/* ==========================================================================
   Service detail pages
   ========================================================================== */
.page-hero { background: var(--champagne); }
.page-hero .wrap { padding-top: 72px; padding-bottom: 76px; }
.breadcrumb { font: 500 14px/1 'Manrope', sans-serif; color: var(--gold-deep); margin-bottom: 22px; display: inline-block; }
.breadcrumb:hover { color: var(--ink); }
.page-hero h1 {
  font: 600 clamp(34px, 4.6vw, 56px)/1.04 'Jost', sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 780px;
}
.page-hero .lead { font: 400 19px/1.6 'Manrope', sans-serif; color: var(--body); max-width: 620px; }

.block .wrap { padding-top: 80px; padding-bottom: 80px; }
.block-tint { background: var(--sage-tint); }
.block h2 {
  font: 600 clamp(26px, 3vw, 36px)/1.12 'Jost', sans-serif;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  max-width: 640px;
}

/* Two-column scope list, shared by service pages */
.scope-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 44px;
  max-width: 940px;
}
.scope-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 400 16px/1.55 'Manrope', sans-serif;
  color: var(--body);
}
.scope-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; }
.scope-list strong { font-weight: 600; color: var(--ink); }

/* How it works — light variant of the dark Approach steps */
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how-steps .step p { color: var(--stone); }
.how-steps .step-gold .step-no { color: var(--gold-text); }
.how-steps .step-sage .step-no { color: var(--sage-text); }

/* Who it's for — heading beside the list. Three short lines spread across the
   full width read as empty space; pairing them with the heading fills the row
   and gives the block enough substance on desktop. */
.who-block .wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
  padding-bottom: 60px;
}
.who-block h2 { margin-bottom: 0; }
.who-list { list-style: none; }
.who-list li {
  padding: 18px 0;
  border-top: 1px solid var(--border);
  font: 400 17px/1.55 'Manrope', sans-serif;
  color: var(--body);
}
.who-list li:first-child { padding-top: 0; border-top: 0; }

/* Other-services strip at the foot of a service page. Rule sits inside the
   content width to separate it from the block above without a full-bleed edge. */
.more-services .wrap {
  padding-top: 52px;
  padding-bottom: 72px;
  border-top: 1px solid var(--border);
}
.more-services h2 { font: 600 24px/1.2 'Jost', sans-serif; margin-bottom: 26px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font: 500 15px/1 'Manrope', sans-serif;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
}
.chip:hover { border-color: rgba(44, 42, 36, 0.30); color: var(--ink); }

/* Fleet & mobility */
.fleet { background: var(--sage-tint); }
.fleet .wrap { padding-top: 88px; padding-bottom: 88px; }
.fleet .eyebrow { color: var(--sage-text); margin-bottom: 16px; }
.fleet h2 {
  font: 600 clamp(30px, 3.6vw, 44px)/1.08 'Jost', sans-serif;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  max-width: 720px;
}
.fleet .lead {
  font: 400 18px/1.6 'Manrope', sans-serif;
  color: var(--body-2);
  max-width: 620px;
  margin-bottom: 36px;
}
/* Scope as a light two-column list — same bullet language as the service
   cards, so the section reads as a peer rather than the page's centrepiece. */
.fleet-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 44px;
  max-width: 940px;
}
.fleet-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 400 16px/1.55 'Manrope', sans-serif;
  color: var(--body);
}
.fleet-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; }
.fleet-list strong { font-weight: 600; color: var(--ink); }
.fleet-note {
  margin-top: 32px;
  font: 600 16px/1.5 'Manrope', sans-serif;
  color: var(--sage-text);
}

/* Approach (dark) */
.approach { background: var(--ink); color: var(--ink-on-dark); }
.approach .wrap { padding-top: 110px; padding-bottom: 110px; }
.approach .eyebrow { color: var(--gold); margin-bottom: 22px; }
.approach h2 {
  font: 600 clamp(32px, 4.4vw, 52px)/1.06 'Jost', sans-serif;
  letter-spacing: -0.02em;
  max-width: 720px;
  margin-bottom: 64px;
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { padding-top: 26px; }
.step-gold { border-top: 2px solid var(--gold); }
.step-sage { border-top: 2px solid var(--sage); }
.step .step-no {
  font: 600 15px/1 'Jost', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.step-gold .step-no { color: var(--gold); }
.step-sage .step-no { color: var(--sage); }
.step h3 { font: 600 24px/1.2 'Jost', sans-serif; margin-bottom: 12px; }
.step p { font: 400 16px/1.65 'Manrope', sans-serif; color: var(--muted-dark); }

/* Promise */
.promise.wrap { padding-top: 110px; padding-bottom: 110px; }
.promise .eyebrow { color: var(--gold-text); margin-bottom: 16px; }
.promise h2 {
  font: 600 clamp(30px, 3.6vw, 44px)/1.08 'Jost', sans-serif;
  letter-spacing: -0.02em;
  margin-bottom: 52px;
  max-width: 640px;
}
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.promise-item { padding-top: 22px; }
.promise-item.step-gold { border-top: 2px solid var(--gold); }
.promise-item.step-sage { border-top: 2px solid var(--sage); }
.promise-item h3 { font: 600 19px/1.25 'Jost', sans-serif; margin-bottom: 10px; }
.promise-item p { font: 400 15px/1.6 'Manrope', sans-serif; color: var(--stone); }

/* Testimonial */
.testimonial { background: #fff; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.testimonial .wrap { max-width: 900px; padding-top: 100px; padding-bottom: 100px; text-align: center; }
.testimonial .quote-mark { font: 600 40px/1 'Jost', sans-serif; color: var(--gold); margin-bottom: 24px; }
.testimonial blockquote {
  font: 400 clamp(24px, 3vw, 36px)/1.35 'Jost', sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.testimonial .name { margin-top: 34px; font: 600 15px/1.4 'Manrope', sans-serif; color: var(--ink); }
.testimonial .role { font: 400 14px/1.4 'Manrope', sans-serif; color: var(--stone); }

/* CTA */
.cta { background: var(--champagne); }
.cta .wrap {
  padding-top: 100px;
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.cta h2 {
  font: 600 clamp(32px, 4.2vw, 52px)/1.06 'Jost', sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.cta .lead { font: 400 19px/1.6 'Manrope', sans-serif; color: var(--body); max-width: 440px; }
.contact-card { background: var(--ink); border-radius: 18px; padding: 40px 38px; color: var(--ink-on-dark); }
.contact-card .eyebrow { font-size: 12px; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 16px; }
.contact-card .name { font: 600 20px/1.4 'Jost', sans-serif; margin-bottom: 4px; }
.contact-card .role { font: 400 14px/1.6 'Manrope', sans-serif; color: var(--muted-dark-2); margin-bottom: 20px; }
.contact-card a.email { display: block; color: var(--ink-on-dark); font: 500 16px/1.6 'Manrope', sans-serif; }
.contact-card a.email:hover { color: var(--gold); }
.contact-card .phone { font: 500 16px/1.6 'Manrope', sans-serif; color: var(--ink-on-dark); margin-bottom: 24px; }

/* Footer */
.site-footer { background: var(--ink); color: var(--ink-on-dark); }
.site-footer .wrap { padding-top: 64px; padding-bottom: 48px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(245, 239, 224, 0.16);
  padding-bottom: 40px;
}
.footer-top .footer-logo { width: 280px; max-width: 60%; height: auto; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { font: 400 15px/1.9 'Manrope', sans-serif; color: var(--muted-dark-3); }
.footer-col .eyebrow { font-size: 12px; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 12px; }
.footer-col a { color: var(--muted-dark-3); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { padding-top: 24px; font: 400 13px/1.5 'Manrope', sans-serif; color: #8B8474; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 840px) {
  :root { --pad-x: 24px; }

  /* Mobile nav */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--border-soft); font-size: 16px; }
  .nav .nav-cta { text-align: center; margin-top: 14px; border-bottom: 0; }
  .nav .lang-switch { padding: 16px 0; font-size: 15px; }
  .site-header { position: sticky; }
  /* Center the logo; float the hamburger to the right edge */
  .site-header .wrap { position: relative; justify-content: center; }
  .nav-toggle { position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); }
  .brand { display: flex; justify-content: center; }
  .brand img { max-width: 70vw; }

  /* Collapse two-column grids */
  .hero .wrap,
  .about .wrap,
  .cta .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero .wrap { padding-top: 72px; padding-bottom: 72px; }
  .about .wrap { padding-top: 72px; padding-bottom: 72px; }

  /* Put the About photo below the text on mobile */
  .about .ph { order: 2; }

  .steps { grid-template-columns: 1fr; gap: 32px; }
  .service-grid { grid-template-columns: 1fr; }
  .fleet-list { grid-template-columns: 1fr; gap: 14px; }
  .fleet .wrap { padding-top: 72px; padding-bottom: 72px; }

  .svc-grid { grid-template-columns: 1fr 1fr; }
  .scope-list { grid-template-columns: 1fr; gap: 14px; }
  .how-steps { grid-template-columns: 1fr; gap: 30px; }
  .who-block .wrap { grid-template-columns: 1fr; gap: 28px; }
  .page-hero .wrap { padding-top: 56px; padding-bottom: 60px; }
  .block .wrap { padding-top: 60px; padding-bottom: 60px; }
  .promise-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }

  .value-intro .wrap { padding-top: 64px; padding-bottom: 64px; }
  .services.wrap { padding-top: 68px; padding-bottom: 80px; }
  .approach .wrap,
  .promise.wrap { padding-top: 80px; padding-bottom: 80px; }
  .approach h2 { margin-bottom: 48px; }
  .cta .wrap { padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 520px) {
  .promise-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .card { padding: 36px 28px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}