:root {
  /* Primary */
  --colour-teal: #1D5C5C;
  --colour-ochre: #C4942D;
  --colour-lemon: #F7E135;

  /* Teal range */
  --colour-teal-mid: #2D7A7A;
  --colour-teal-light: #5A9E9E;
  --colour-teal-tint: #A8D0D0;
  --colour-teal-wash: #D4E8E8;

  /* Ochre range */
  --colour-ochre-mid: #D4A94D;
  --colour-ochre-light: #E8C878;
  --colour-ochre-tint: #F5E4B8;
  --colour-ochre-wash: #FBF4E0;

  /* Neutrals */
  --colour-charcoal: #2D2A26;
  --colour-black: #3D3A36;
  --colour-grey: #6B6560;
  --colour-grey-mid: #A8A49E;
  --colour-stone: #E8E4DC;
  --colour-warm-white: #F7F5F0;
  --colour-white: #FFFFFF;

  /* Typography */
  --font-family: "degular", sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 800;

  /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,8,4,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Step -4: 8.6806px → 8.192px */
  --step--4: clamp(0.512rem, 0.555rem + -0.0555vw, 0.5425rem);
  /* Step -3: 10.4167px → 10.24px */
  --step--3: clamp(0.64rem, 0.6556rem + -0.0201vw, 0.651rem);
  /* Step -2: 12.5px → 12.8px */
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  /* Step -1: 15px → 16px */
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  /* Step 0: 18px → 20px */
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  /* Step 1: 21.6px → 25px */
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  /* Step 2: 25.92px → 31.25px */
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  /* Step 3: 31.104px → 39.0625px */
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  /* Step 4: 37.3248px → 48.8281px */
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  /* Step 5: 44.7898px → 61.0352px */
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  /* Step 6: 53.7477px → 76.2939px */
  --step-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
  /* Step 7: 64.4973px → 95.3674px */
  --step-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.9605rem);
  /* Step 8: 77.3967px → 119.2093px */
  --step-8: clamp(4.8373rem, 3.7682rem + 4.7514vw, 7.4506rem);

  /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,8,4,&s=0.75|0.5|0.25|0.25,1.5|2|3|4|6|6|6,s-l&g=s,l,xl,12 */
  /* Space 4xs: 5px → 5px */
  --space-4xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  /* Space 3xs: 5px → 5px */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  /* Space 2xs: 9px → 10px */
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  /* Space xs: 14px → 15px */
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  /* Space s: 18px → 20px */
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  /* Space m: 27px → 30px */
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  /* Space l: 36px → 40px */
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  /* Space xl: 54px → 60px */
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  /* Space 2xl: 72px → 80px */
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  /* Space 3xl: 108px → 120px */
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  /* Space 4xl: 108px → 120px */
  --space-4xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  /* Space 5xl: 108px → 120px */
  --space-5xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  /* Space 4xs-3xs: 5px → 5px */
  --space-4xs-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  /* Space 3xs-2xs: 5px → 10px */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  /* Space 2xs-xs: 9px → 15px */
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  /* Space xs-s: 14px → 20px */
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  /* Space s-m: 18px → 30px */
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  /* Space m-l: 27px → 40px */
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  /* Space l-xl: 36px → 60px */
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  /* Space xl-2xl: 54px → 80px */
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  /* Space 2xl-3xl: 72px → 120px */
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
  /* Space 3xl-4xl: 108px → 120px */
  --space-3xl-4xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  /* Space 4xl-5xl: 108px → 120px */
  --space-4xl-5xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* Custom pairs */
  /* Space s-l: 18px → 40px */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);


}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  background: var(--colour-warm-white);
  color: var(--colour-black);
  overflow-x: hidden;
}

/* UTILITY */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
}

/* HEADER / NAV */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--colour-teal);
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
  min-height: 68px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.logo {
  display: flex;
  align-items: baseline;
  padding-left: var(--space-xl);
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
  text-decoration: none;
}
.logo-mark {
  background: var(--colour-lemon);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-inner .logo-mark {
  position: absolute;
  top: 0;
  left: 48px;
  width: 48px;
  height: 54px;
  border-radius: 0;
  padding: 0 8px;
}
.logo-mark svg {
  width: 100%;
  height: 100%;
}
.logo-text {
  font-size: var(--step-1);
  font-weight: var(--font-weight-bold);
  color: var(--colour-white);
  letter-spacing: 0.05rem;
}
nav {
  display: flex;
  align-items: baseline;
  gap: var(--space-l);
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
}
nav a {
  font-size: var(--step--1);
  font-weight: var(--font-weight-regular);
  color: var(--colour-teal-tint);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
nav a:hover {
  color: var(--colour-white);
}
.lang-switch {
  font-size: var(--step--3);
  color: var(--colour-teal-light);
  margin-left: auto;
  align-self: baseline;
}
.lang-switch a,
nav .lang-switch a {
  font-size: var(--step--3);
  color: var(--colour-teal-tint);
  text-decoration: none;
}
.lang-switch a:hover,
.lang-switch a.active {
  color: var(--colour-white);
}

/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 68px;
  background: var(--colour-ochre-tint);
  overflow: hidden;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: var(--step-5);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  color: var(--colour-teal);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-m);
  max-width: 600px;
}
.hero p {
  font-size: var(--step-0);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--colour-black);
  max-width: 480px;
}
.hero h1 .secondary {
  color: var(--colour-ochre);
}

/* Abstract shape - hero */
.hero-shape {
  position: absolute;
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 490px;
  opacity: 0.15;
  z-index: 1;
}
.hero-shape svg {
  width: 100%;
  height: 100%;
}

/* Abstract shape - hero outline (left) */
.hero-shape-outline {
  position: absolute;
  left: 15%;
  top: 75%;
  transform: translateY(-15%) rotate(70deg);
  width: 340px;
  height: 277px;
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
}
.hero-shape-outline svg {
  width: 100%;
  height: 100%;
}

/* SECTIONS */
section {
  padding: var(--space-3xl) 0;
  position: relative;
}
section.teal-bg {
  background: var(--colour-teal);
  color: var(--colour-white);
}
section h2 {
  font-size: var(--step--2);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--colour-ochre);
  margin-bottom: var(--space-m);
}
section.teal-bg h2 {
  color: var(--colour-lemon);
}
section h3 {
  font-size: var(--step-3);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-m);
  max-width: 560px;
  color: var(--colour-teal);
}
section.teal-bg h3 {
  color: var(--colour-white);
}
section p {
  font-size: var(--step-0);
  font-weight: var(--font-weight-regular);
  line-height: 1.65;
  color: var(--colour-grey);
  max-width: 560px;
}
section p + p {
  margin-top: var(--space-xs);
}
section.teal-bg p {
  color: var(--colour-teal-wash);
}

/* WHAT WE DO */
.what-we-do {
  position: relative;
  overflow: hidden;
}
.what-shape {
  position: absolute;
  left: -100px;
  bottom: -60px;
  width: 480px;
  height: 390px;
  opacity: 0.06;
}
.what-shape svg {
  width: 100%;
  height: 100%;
  fill: var(--colour-ochre);
}

/* HOW WE WORK */
.how-we-work {
  overflow: hidden;
}
.how-shape {
  position: absolute;
  right: 10%;
  top: 40%;
  width: 380px;
  height: 310px;
  /* opacity: 0.15; */
}
.how-shape svg {
  width: 100%;
  height: 100%;
  /* fill: var(--colour-lemon); */
  stroke: var(--colour-lemon);
  stroke-width: 1;
}

/* WHERE WE OPERATE */
.where-we-operate {
  overflow: hidden;
  background: var(--colour-ochre-wash);
}
.where-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.where-text h3 {
  max-width: 100%;
}
.where-text p {
  max-width: 100%;
}
.where-markets {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.market-group h4 {
  font-size: var(--step--2);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--colour-grey-mid);
  margin-bottom: var(--space-xs);
}
.market-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.market-tag {
  font-size: var(--step--1);
  font-weight: var(--font-weight-regular);
  color: var(--colour-teal);
  background: var(--colour-white);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 3px;
  border: 1px solid var(--colour-stone);
}
.where-shape {
  position: absolute;
  right: 70%;
  bottom: -120px;
  width: 420px;
  height: 340px;
  opacity: 0.08;
  transform: translateY(-15%) rotate(70deg);
}
.where-shape svg {
  width: 100%;
  height: 100%;
  fill: var(--colour-ochre);
}

/* CONTACT */
.contact {
  background: var(--colour-white);
  border-top: 1px solid var(--colour-stone);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-xl);
}
.contact h3 {
  font-size: var(--step-3);
  max-width: 100%;
}
.offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}
.office h4 {
  font-size: var(--step--1);
  font-weight: var(--font-weight-bold);
  color: var(--colour-teal);
  margin-bottom: var(--space-xs);
}
.office p {
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--colour-grey);
  max-width: 100%;
}
.office a {
  color: var(--colour-ochre);
  text-decoration: none;
}
.office a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FOOTER */
footer {
  background: var(--colour-grey-mid);
  color: var(--colour-warm-white);
  padding: 0 0 var(--space-l) 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
  min-height: 52px;
}
.footer-inner p {
  font-size: var(--step--2);
  max-width: 100%;
  padding-top: var(--space-xs);
}
.footer-logo {
  display: flex;
  align-items: baseline;
  padding-left: 44px;
  padding-top: var(--space-xs);
}
.footer-logo .logo-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 38px;
  border-radius: 0;
  padding: 0 5px;
}
.footer-logo .logo-mark svg {
  width: 100%;
  height: 100%;
}
.footer-logo span {
  font-size: var(--step--1);
  font-weight: var(--font-weight-bold);
  color: var(--colour-warm-white);
}

/* NAV TOGGLE */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colour-white);
  padding: var(--space-s) 0;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
  stroke: var(--colour-white);
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle.is-open .icon-open {
  display: none;
}
.nav-toggle.is-open .icon-close {
  display: block;
}

/* ─── TABLET (≤ 1024px) ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .offices {
    grid-template-columns: repeat(2, 1fr);
  }
  .where-content {
    grid-template-columns: 1fr;
  }
}

/* ─── MOBILE (≤ 768px) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Layout */
  .container {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
  .header-inner {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
  .header-inner .logo-mark {
    left: var(--space-m);
  }

  /* Nav toggle */
  .nav-toggle {
    display: flex;
  }

  /* Mobile nav panel */
  nav {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 99;
    flex-direction: column;
    gap: var(--space-m);
    background: var(--colour-teal);
    padding: var(--space-l) var(--space-m);
    border-top: 1px solid var(--colour-teal-mid);
  }
  nav.is-open {
    display: flex;
  }
  nav a {
    font-size: var(--step-0);
    color: var(--colour-teal-tint);
  }
  nav .lang-switch {
    margin-left: 0;
    padding-top: var(--space-s);
    border-top: 1px solid var(--colour-teal-mid);
  }
  nav .lang-switch a,
  nav .lang-switch {
    font-size: var(--step--1);
  }

  /* Hero */
  .hero h1 {
    max-width: 100%;
  }
  .hero p {
    max-width: 100%;
  }
  .hero-shape {
    width: 280px;
    height: 228px;
    right: -60px;
    opacity: 0.1;
  }
  .hero-shape-outline {
    width: 180px;
    height: 147px;
    left: 5%;
    opacity: 0.25;
  }

  /* Sections */
  section h3 {
    max-width: 100%;
  }
  section p {
    max-width: 100%;
  }

  /* Grids */
  .where-content {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .offices {
    grid-template-columns: 1fr;
  }

  /* Decorative shapes — scale down */
  .what-shape {
    width: 240px;
    height: 195px;
    left: -30px;
    bottom: -10px;
  }
  .how-shape {
    width: 190px;
    height: 155px;
    right: -40px;
    top: 40%;
  }
  .where-shape {
    width: 240px;
    height: 196px;
    left: -20px;
    bottom: -60px;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    gap: var(--space-s);
  }
  .footer-inner p {
    padding-top: 0;
  }
}