:root{
  --bg:#f4f3f1; --ink:#0d0d0d; --muted:#8a8a86; --line:rgba(0,0,0,0.16);
  --font:"Helvetica Neue","Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
body{ min-height:100vh; }
a{ color:inherit; text-decoration:none; }

/* ───────── Header (matches the archive) ───────── */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:1.9em 2.4em; font-size:13px; letter-spacing:0.02em;
  background:linear-gradient(var(--bg) 60%, rgba(244,243,241,0)); }
.header-left{ display:flex; align-items:center; gap:3em; }
.brand{ font-weight:600; font-size:16px; letter-spacing:0.06em; }
.brand-dot{ font-size:9px; vertical-align:super; margin-left:2px; }
.nav{ display:flex; gap:2.2em; font-weight:500; }
.nav a{ position:relative; opacity:0.62; transition:opacity .3s ease; }
.nav a.is-active, .nav a:hover{ opacity:1; }
.nav a.is-active::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--ink); }
.lang{ display:flex; gap:0.5em; font-weight:500; }
.lang .sep, .lang .muted{ opacity:0.4; }
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:18px;
  padding:0; background:none; border:none; cursor:pointer; }
.menu-toggle span{ display:block; width:100%; height:1.5px; background:var(--ink); }

/* ───────── Layout ───────── */
.about{ max-width:1180px; margin:0 auto; padding:11em 2.4em 5em; }
.eyebrow{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.6em; }

.about-hero{ font-size:clamp(46px,9vw,128px); font-weight:500; line-height:0.98; letter-spacing:-0.03em; }
.about-hero em{ font-style:italic; font-weight:400; }

.statement{ margin-top:1.8em; max-width:760px; font-size:clamp(20px,2.4vw,30px); line-height:1.32;
  font-weight:400; letter-spacing:-0.01em; }
.statement b{ font-weight:500; }
.statement .soft{ color:var(--muted); }

.rule{ height:1px; background:var(--line); border:0; margin:4em 0; }

.section-label{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:2.2em; }

/* enquiry / office grids */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4em 2em; }
.cell .k{ font-size:13px; color:var(--muted); margin-bottom:0.7em; }
.cell .v{ font-size:clamp(17px,1.5vw,20px); font-weight:500; letter-spacing:-0.01em; }
.cell .v a{ border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .3s ease; }
.cell .v a:hover{ border-color:var(--ink); }
.cell .sub{ margin-top:0.5em; font-size:14px; color:var(--muted); }

.offices{ grid-template-columns:repeat(3,1fr); }
.office address{ font-style:normal; font-size:15px; line-height:1.6; color:var(--muted); }
.office .city{ font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-0.01em; color:var(--ink); margin-bottom:0.7em; }
.office .map{ display:inline-block; margin-top:0.7em; font-size:13px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:2px; }
.office .map i{ font-style:normal; margin-left:0.35em; }

/* feature image */
.about-figure{ margin:4.5em 0; width:100%; aspect-ratio:2/1; overflow:hidden; background:#e7e6e3; }
.about-figure img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.95); }

/* social + footer */
.social{ display:flex; flex-wrap:wrap; gap:1.6em 2.4em; }
.social a{ font-size:15px; font-weight:500; opacity:0.7; transition:opacity .3s ease; }
.social a:hover{ opacity:1; }

.about-footer{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em 2em;
  margin-top:5em; padding-top:2em; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.about-footer nav{ display:flex; gap:1.8em; }
.about-footer a:hover{ color:var(--ink); }

.note{ margin-top:2.5em; font-size:12px; line-height:1.6; color:var(--muted);
  border-left:2px solid var(--line); padding:0.2em 0 0.2em 1em; max-width:640px; }

@media (max-width:768px){
  .site-header{ padding:1.15em 1em; }
  .nav, .lang{ display:none; }
  .menu-toggle{ display:flex; }
  .about{ padding:7.5em 1.2em 4em; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:2em 1.4em; }
  .offices{ grid-template-columns:1fr; gap:2.4em; }
  .about-figure{ aspect-ratio:4/3; margin:3.2em 0; }
  .about-footer{ flex-direction:column; }
}