/* ==========================================================================
   bejulo — design system
   Single source of truth for every page. Values taken from the Figma file
   (channel fi7cys1x), 1440px artboard.
   ========================================================================== */

/* --- Fonts -----------------------------------------------------------------
   The Figma file specifies "Myriad Web Pro", a licensed Adobe typeface that
   cannot be redistributed. It is listed first so a licensed install is picked
   up automatically; Source Sans 3 (Adobe, open source, same humanist skeleton
   and near-identical metrics) is bundled as the fallback.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Brand */
  --orange: #f47b20;
  /* buttons, "be" prefix, accents */
  --orange-chevron: #ed7703;
  /* chevron mark + timeline rail */
  --orange-hover: #d96a15;

  /* Ink */
  --ink: #000000;
  --ink-footer: #1a202c;
  --icon: #333333;

  /* Surfaces */
  --white: #ffffff;
  --surface-card: #d9d9d9;
  /* service cards */
  --surface-panel: #e7e7e7;
  /* accordion shells, callout boxes */
  --footer-bg: #bdbfc1;
  --hairline: #cccccc;
  --pin-ghost: #fdebde;
  /* contact-page watermark pin */

  /* Geometry */
  --radius: 15px;
  --container: 1216px;
  /* 1440 − 2 × 112 gutter */
  --gutter: 112px;
  --header-h: 122px;
  --footer-h: 123px;
  --nav-h: 48px;
  --logo-w: 194px;
  --container-pad: 24px;
  /* gutter inside .container; full-bleed blocks negate exactly this */

  /* Type */
  --font: 'Myriad Web Pro', 'Myriad Pro', 'Source Sans 3', 'Segoe UI', system-ui,
    -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --fs-h1: 60px;
  --lh-h1: 76px;
  --fs-h2: 40px;
  --lh-h2: 50px;
  --fs-h3: 28px;
  --lh-h3: 40px;
  --fs-sub: 24px;
  --lh-sub: 32px;
  --fs-body: 20px;
  --lh-body: 32px;
  --fs-ui: 16px;
  --lh-ui: 24px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  background: var(--white);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  transition: top .15s ease;
}

.skip-link:focus {
  top: 16px;
}

/* --- Layout primitives ---------------------------------------------------- */
/* max-width = 1216 content + 2 × 24 gutter, so at the 1440 artboard the content
   box starts at exactly x=112 as in Figma, and narrow screens keep a gutter. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Vertical rhythm.
   Figma's hero-to-heading gap drifts between pages (37 / 73 / 78 / 92 / 104px).
   It is normalised to one scale here so every page reads identically. */
.section {
  padding-block: 80px 56px;
}

.section--tight {
  padding-block: 48px 40px;
}

.section--flush {
  padding-block: 0 56px;
}

/* Client review 2026-08-24 §3a — exactly 60px between the projects button and
   the "Satisfied customers" heading. The preceding section drops its bottom
   padding so the 60px below is the whole gap, not an addition to it. */
.section--flush-bottom {
  padding-bottom: 0;
}

.section--gap60 {
  padding-block: 60px 56px;
}

.stack>*+* {
  margin-top: var(--stack-gap, 40px);
}

/* ==========================================================================
   Header
   Logo at x=98 / y=30 (194×75). Orange nav pill 880×48, radius 15.
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
}

.site-header__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 98px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header__logo {
  flex: 0 0 auto;
}

.site-header__logo img {
  width: var(--logo-w);
  height: auto;
}

.nav {
  margin-left: auto;
  height: var(--nav-h);
  background: var(--orange);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline: 20px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-inline: 14px;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: 0.5px;
  font-weight: 400;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: background-color .15s ease;
}

.nav__link:hover {
  background: rgba(255, 255, 255, .16);
}

.nav__link[aria-current='page'] {
  font-weight: 700;
}

.nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease;
}

.nav__search:hover {
  background: rgba(255, 255, 255, .16);
}

.nav__search img {
  width: 21px;
  height: 21px;
}

/* Language switcher (EN / DE) — lives inside the orange nav pill */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .45);
}

.lang__btn {
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.lang__btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, .16);
}

.lang__btn.is-active {
  color: var(--white);
  font-weight: 700;
}

.lang__sep {
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
}

/* Mobile nav toggle — hidden on desktop */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  content: '';
  position: relative;
}

.nav-toggle__bar::before {
  top: -7px;
}

.nav-toggle__bar::after {
  top: 5px;
}

/* On hero pages the bar floats over the image and takes no flow space. */
.site-header--overlay {
  position: absolute;
  inset-inline: 0;
  top: 0;
}

/* Pages without a hero use a solid white bar and the dark logo. */
.site-header:not(.site-header--overlay) {
  background: var(--white);
}

/* Placeholders reserve the chrome's height so nothing shifts while layout.js
   swaps them out. Overlay headers are out of flow, so they reserve nothing. */
#site-header {
  min-height: var(--header-h);
}

body[data-header='overlay'] #site-header {
  min-height: 0;
}

#site-footer {
  min-height: var(--footer-h);
  background: var(--footer-bg);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  min-height: var(--footer-h);
  background: var(--footer-bg);
  display: flex;
  align-items: center;
  padding-block: 24px;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.site-footer__copy {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: -0.32px;
  color: var(--ink-footer);
}

.site-footer__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 68px;
  flex-wrap: wrap;
}

.site-footer__nav a {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: -0.32px;
  color: var(--ink-footer);
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

/* ISO 9001:2015 certificate badge (client review 2026-09-08 §2).
   The supplied artwork has an opaque white background, so it is framed as a
   deliberate white chip rather than left to sit on the grey bar as a stray
   rectangle. Sized by height so the 200×88 source scales without arithmetic
   and stays clear of the 123px footer. */
.site-footer__cert {
  flex: none;
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--white);
  line-height: 0;
  /* no inline-image descender inside the chip */
  transition: box-shadow .15s ease, transform .15s ease;
}

.site-footer__cert img {
  display: block;
  height: 48px;
  width: auto;
}

.site-footer__cert:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ==========================================================================
   Typography
   ========================================================================== */
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  letter-spacing: 0;
}

.subhead {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  font-weight: 400;
}

.lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.center {
  text-align: center;
}

/* Orange "be" prefix — <span class="be">be</span> strong. */
.be {
  color: var(--orange);
  font-weight: 700;
}

/* The bold lead-in that follows the prefix: "be strong." */
.be-lead {
  font-weight: 700;
}

/* Display headline where line 2 is regular weight (International, 40px) */
.headline-duo {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0.5px;
  font-weight: 700;
}

.headline-duo span {
  display: block;
  font-weight: 400;
}

/* Body lists inside rich text */
.rich p+p {
  margin-top: var(--lh-body);
}

.rich ul {
  margin-top: 0;
  padding-left: 1.15em;
  list-style: disc;
}

.rich strong {
  font-weight: 700;
}

/* Legal / Policy documents (Impressum, Datenschutz, Cookies) */
.legal {
  max-width: 920px;
  padding-block: 48px 80px;
}

.legal h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin-bottom: 24px;
}

.legal h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-top: 36px;
  margin-bottom: 12px;
}

.legal h3 {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  margin-top: 24px;
  margin-bottom: 8px;
}

.legal p,
.legal ul {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.legal ul {
  padding-left: 1.5em;
  list-style: disc;
}

.legal a {
  color: var(--orange);
  text-decoration: underline;
}

.legal a:hover {
  color: var(--orange-hover);
}

html[lang="de"] [data-lang="en"] {
  display: none !important;
}

html[lang="en"] [data-lang="de"] {
  display: none !important;
}

/* ==========================================================================
   Buttons
   48px tall, radius 15, 20px inline padding, bold 16/24, ls 0.5
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nav-h);
  padding: 12px 20px;
  background: var(--orange);
  color: var(--white);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.btn:hover {
  background: var(--orange-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* International landing page CTAs — standard 24px gap across all pages */
.btn-row--wide {
  gap: 24px;
}

.btn-row--center {
  justify-content: center;
}

/* ==========================================================================
   Hero
   Full-bleed image, 724px tall in the design (686 on Home, 636 on Services).
   The header sits on top of it.
   ========================================================================== */
.hero {
  position: relative;
  /* A fixed height means the wider the screen, the more of the photo gets
     cropped away — on an ultrawide monitor that ate the team's heads. Scaling
     with viewport width keeps the crop roughly constant. The vw figures are the
     Figma heights divided by 1440, so at the 1440 artboard these still resolve
     to exactly 724 / 686 / 636px. */
  height: clamp(380px, 50.28vw, 880px);
  background: #2b2f36 center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero--home {
  height: clamp(380px, 47.64vw, 834px);
}

.hero--services {
  height: clamp(380px, 44.17vw, 773px);
}

/* Shared by the <img> heroes and the <video> hero on Home, so both crop
   identically. `display: block` matters for the video: as an inline-level
   replaced element it would otherwise sit on a text baseline and leave a
   hairline of the .hero background showing along its bottom edge. */
.hero__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Which part of the photo survives the crop. 50% (the default) centres it,
     which is wrong for a group shot — it keeps torsos and loses faces. Pages
     set --hero-focus to their subject; see .hero--about below. */
  object-position: center var(--hero-focus, 50%);
}

/* The team photo's faces sit in the upper third, and the navbar overlays the
   top of the hero, so bias the crop upwards without pushing heads under it. */
.hero--about {
  --hero-focus: 30%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .10) 34%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

/* Floating scroll cue, pinned to the bottom-right of the viewport.
   At the top of the page it points down and jumps to the intro; once the
   visitor has scrolled past the hero it flips to a back-to-top control
   (.is-up). See the script in index.html. */
.scroll-cue {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 900;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: background-color .15s ease, box-shadow .15s ease;
}

.scroll-cue svg {
  width: 26px;
  height: 26px;
  transition: transform .25s ease;
}

/* same chevron, turned over — one glyph, two meanings */
.scroll-cue.is-up svg {
  transform: rotate(180deg);
}

.scroll-cue:hover {
  background: var(--orange-hover);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Service cards — grey panel 1241×N, photo 401 wide, alternating sides
   ========================================================================== */
.card {
  background: var(--surface-card);
  border-radius: var(--radius);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr 401px;
  gap: 48px;
  align-items: start;
}

.card--media-left {
  grid-template-columns: 401px 1fr;
}

.card--media-left .card__media {
  order: -1;
}

.card__media {
  border-radius: var(--radius);
  overflow: hidden;
  align-self: stretch;
  min-height: 351px;
}

/* Client review 2026-09-15 — the Operations photo on Services was visibly
   stretched: the media column is a fixed 401×351+ box and `fill` squeezed a
   3:2 photo into it. Crop instead of distorting, everywhere a card carries a
   photo. */
.card__media img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

.card__body>*+* {
  margin-top: 16px;
}

/* A row that spans the whole card, under both the text column and the photo
   (Figma: the "be in touch" paragraph on the project-development card). */
.card__full {
  grid-column: 1 / -1;
}

.card__full>*+* {
  margin-top: 16px;
}

.card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
}

.card__title>span {
  display: block;
}

/* second line of a card heading is the lighter, smaller strapline */
.card__title>span+span {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  font-weight: 400;
}

/* Closing CTA paragraph sits in a narrow measure, as in Figma (484px) */
/* ==========================================================================
   Closing call to action (Services)
   Client review 2026-08-24 §2b — per the supplied screenshot the chevron mark
   sits to the LEFT of the copy, which runs as two lines (regular, then bold).
   The button sits below, left-aligned with the chevron.
   ========================================================================== */
.cta {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.cta__mark {
  flex: 0 0 auto;
  width: 66px;
  height: auto;
  margin-top: 4px;
  /* optical alignment with the cap height of the first line */
}

.cta__copy {
  margin: 0;
  /* no narrow measure here — the first sentence runs on one line at desktop */
}

.cta__actions {
  margin-top: 38px;
}

.card-stack {
  display: grid;
  gap: 48px;
}

/* ==========================================================================
   Project detail cards (project-<country>.html)
   Client review / Option 3 (2026-10-01):
   - Side-by-side card containers are set to equal height (align-items: stretch).
   - Case A (1 image vs 2 images): single image is centered vertically within
     its card in the available space below the text.
   - Case B (2 images on both cards): images in both cards align at the exact
     same height (at the bottom); for the card with shorter text/description,
     the text block is centered vertically within the remaining space above.
   ========================================================================== */

[data-meta^="project-"] .card-stack {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* A group heading ("Challenging soil conditions") introduces the cards below
   it, so it runs the full width rather than sitting in one column. */
[data-meta^="project-"] .card-stack__heading {
  grid-column: 1 / -1;
}

/* Copy above, photos below. Flex column ensures equal-height cards can
   distribute free space to center media or text according to Option 3. */
[data-meta^="project-"] .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 28px;
}

[data-meta^="project-"] .card__body {
  display: flex;
  flex-direction: column;
}

/* A common 16:9 crop, so the photo in one card lines up with the photo in the
   card beside it whatever shape the original is (the set runs 16:9 to 4:3). */
[data-meta^="project-"] .card__media {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}

[data-meta^="project-"] .card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

/* Case A: In a card with 1 image, center the image vertically in the available space */
[data-meta^="project-"] .card__media:not(.card__media--pair) {
  margin-top: auto;
  margin-bottom: auto;
}

/* Case B: In a card with 2 images, images align at the bottom at the exact same
   height, and the text block for the card with shorter description is centered
   vertically within the remaining space above the images. */
[data-meta^="project-"] .card:has(.card__media--pair) .card__body,
[data-meta^="project-"] .card--pair .card__body {
  margin-top: auto;
  margin-bottom: auto;
}

[data-meta^="project-"] .card__media--pair {
  margin-top: auto;
}


/* Figures table — <dl> of label/value pairs from the client's document.
   Label above value: at half a row's width the longer labels ("Construction
   time, both projects:") leave no room for a figure beside them, and the
   client's screenshot shows them stacked. */
.specs {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 16px;
}

.specs dt {
  font-weight: 400;
}

.specs dd {
  margin: 0 0 12px;
  font-weight: 700;
}

.specs dd:last-child {
  margin-bottom: 0;
}

/* Both photos of a two-site entry (Odell + Glebe, Ehyaei + Eslamieh) sit in
   the card's media area, stacked, so the pair reads as one project the way
   the client's document presents it. */
[data-meta^="project-"] .card__media--pair,
.card__media--pair {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  overflow: visible;
  /* sized by the two photos rather than one 16:9 box — the card is free to
     run taller than the single-photo one beside it */
  aspect-ratio: auto;
}

.card__media--pair img {
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

/* Ballinaclough has figures but no photo yet. Every project card is a single
   column now, so this only needs to keep the Services cards' behaviour. */
.card--no-media {
  grid-template-columns: 1fr;
}

/* Group heading inside a card stack ("Challenging soil conditions"). */
.card-stack__heading {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  margin-bottom: -16px;
  /* pulls the heading towards the card it introduces, against the 48px gap */
}

/* Wide card used on the International landing page (text only, panel bg) */
.panel {
  background: var(--surface-panel);
  border-radius: var(--radius);
  padding: 40px 48px;
}

.panel__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

.panel p {
  font-size: 20px;
  line-height: var(--lh-body);
  letter-spacing: 0;
  margin-top: 16px;
  text-wrap: pretty;
}

.br-desktop {
  display: inline;
}

@media (max-width: 900px) {
  .br-desktop {
    display: none;
  }
}

.panel>*+* {
  margin-top: 16px;
}

/* International landing page — desktop vertical rhythm from the client's
   2026-09-23 screenshot (911×876, ×1.41 to CSS px): headline → first panel
   ~52px visual (≈56 box gap), panels ~40/48 apart (44 splits the difference),
   last panel → buttons ~50px (56 stack step − 6px nudge). */
@media (min-width: 901px) {
  body[data-page="international"] .stack {
    --stack-gap: 56px;
  }

  body[data-page="international"] .card-stack {
    gap: 44px;
  }

  body[data-page="international"] .btn-row {
    margin-top: 25px;
  }
}

/* Country project page header stats block (tight vertical spacing) */
.project-header-stats>*+* {
  margin-top: 8px;
}

/* ==========================================================================
   Accordion
   Shell: --surface-panel, radius 15. Row: white, 1px --hairline, radius 15,
   min-height 62px. Header type 28/700. Icon 24×24 plus / minus.
   ========================================================================== */
.accordion {
  background: var(--surface-panel);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  gap: 20px;
}

.accordion__item {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion__trigger {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px 16px 35px;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.accordion__trigger:hover {
  background: #fafafa;
}

.accordion__label {
  flex: 1 1 auto;
}

.accordion__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  position: relative;
}

/* plus / minus drawn in CSS so it can animate; matches the 24×24 Figma icon */
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--icon);
  transition: transform .2s ease, opacity .2s ease;
}

.accordion__icon::before {
  left: 4.9px;
  right: 4.9px;
  top: 11.1px;
  height: 1.78px;
  /* horizontal bar */
}

.accordion__icon::after {
  top: 4.9px;
  bottom: 4.9px;
  left: 11.1px;
  width: 1.78px;
  /* vertical bar */
}

.accordion__trigger[aria-expanded='true'] .accordion__icon::after {
  transform: scaleY(0);
  opacity: 0;
}

.accordion__panel {
  display: none;
  padding: 0 35px 35px;
}

.accordion__item.is-open .accordion__panel {
  display: block;
}

.accordion__panel>*+* {
  margin-top: 24px;
}

.accordion__figure {
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion__figure img {
  width: 100%;
  height: auto;
}

/* Job posting inside careers accordion */
.job-posting {
  text-align: left;
}

.job-posting h4 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--ink);
}

.job-posting h4:first-child {
  margin-top: 0;
}

.job-posting .job-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 20px;
}

.job-posting p {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.job-posting ul {
  padding-left: 1.5em;
  list-style: disc;
  margin-top: 8px;
  margin-bottom: 16px;
}

.job-posting li {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
}

.job-posting li+li {
  margin-top: 6px;
}

.job-posting .job-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 22px;
  color: #555;
}

.job-posting .job-footer p {
  font-size: 15px;
  line-height: 22px;
}

.job-posting a {
  color: var(--orange);
  text-decoration: underline;
}

.job-posting a:hover {
  color: var(--orange-hover);
}

/* ==========================================================================
   Timeline (International → be expert)
   Rebuilt from the Figma raster so the copy stays selectable and responsive.
   Years alternate above / below a horizontal rail.
   ========================================================================== */
.timeline-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.timeline {
  --rail: 2px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr);
  align-items: center;
  min-width: 1000px;
  position: relative;
  padding-block: 8px;
}

.timeline__step {
  position: relative;
  min-height: 420px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  padding-inline: 8px;
}

/* the rail */
.timeline__step::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--rail);
  background: var(--ink);
  transform: translateY(-50%);
}

/* node: chevron for even steps, ring for odd — mirrors the Figma rhythm */
.timeline__node {
  position: relative;
  z-index: 1;
  grid-row: 2;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  background: var(--white);
  border: var(--rail) solid var(--orange-chevron);
  border-radius: 50%;
}

.timeline__step--chevron .timeline__node {
  border: 0;
  width: 34px;
  height: 24px;
  background: none;
  margin-left: -6px;
}

.timeline__step--chevron .timeline__node img {
  width: 34px;
  height: auto;
}

.timeline__card {
  position: relative;
  padding-left: 16px;
}

.timeline__card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  border-left: 2px dashed var(--ink);
}

.timeline__step--above .timeline__card {
  grid-row: 1;
  align-self: end;
  padding-bottom: 24px;
}

.timeline__step--below .timeline__card {
  grid-row: 3;
  align-self: start;
  padding-top: 24px;
}

.timeline__year {
  color: var(--orange);
  font-size: var(--fs-sub);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-ui);
  line-height: 22px;
  letter-spacing: 0;
}

.timeline__note {
  margin-top: 8px;
}

.timeline__note .chev {
  display: inline-block;
  width: 22px;
  vertical-align: -2px;
  margin-right: 10px;
}

/* Standalone chevron mark, kept for reuse elsewhere */
.chevron-mark {
  width: 66px;
  height: auto;
}

/* ==========================================================================
   Projects map (Leaflet, vector basemap)
   Flat grey landmasses on white to match the Figma/PDF artwork — no tiles, no
   labels, no graticule. Orange outline pins.
   ========================================================================== */
.map-panel {
  position: relative;
  border-radius: var(--radius);
  /* visible so the popup card and the overhanging inset are never clipped */
  overflow: visible;
  background: var(--white);
  /* room for the detail box, which is pulled 70px above the world map */
  margin-top: 115px;
}

#projects-map {
  height: 630px;
  width: 100%;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Europe inset in the foreground of the world map, as in the PDF. */
.map-inset {
  position: absolute;
  /* Figma places this box at 28%/36.5%. It is nudged left and narrowed here so
     it cannot cover the Iran pin the client added in review §3b — an inset over
     Europe and a pin just east of Europe compete for the same space. */
  left: 33%;
  /* lifted above the world map's top edge so the detail box reads as a
     separate plane and covers less of the world behind it */
  top: -70px;
  width: 38%;
  height: 46%;
  z-index: 400;
  border: 1px solid var(--ink);
  background: var(--white);
  overflow: hidden;
}

.map-inset #projects-map-europe {
  width: 100%;
  height: 100%;
  background: var(--white);
}

.map-panel__hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 500;
  background: rgba(255, 255, 255, .92);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: #555;
  pointer-events: none;
}

/* Orange outline pin, drawn to match the Figma marker */
.bejulo-pin {
  background: none;
  border: 0;
}

.bejulo-pin svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bejulo-pin__shape {
  fill: var(--white);
  stroke: var(--orange-chevron);
  stroke-width: 2.6;
  transition: fill .15s ease;
}

.bejulo-pin:hover .bejulo-pin__shape,
.bejulo-pin:focus .bejulo-pin__shape {
  fill: var(--orange-chevron);
}

/* --------------------------------------------------------------------------
   Popup card.
   Not a Leaflet popup: the inset clips its own overflow, so a popup opened
   inside it would be cut in half. One shared card lives in .map-panel and is
   positioned by map.js over whichever pin is active.
   -------------------------------------------------------------------------- */
.pin-card {
  position: absolute;
  z-index: 600;
  width: 274px;
  padding: 18px 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

.pin-card.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* little tail pointing at the pin */
.pin-card::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--white);
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .06);
}

.pin-card.is-below::after {
  bottom: auto;
  top: -7px;
  box-shadow: -3px -3px 6px rgba(0, 0, 0, .06);
}

.pin-card__country {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

.pin-card__meta {
  margin-top: 2px;
  font-size: var(--fs-ui);
  line-height: 22px;
  letter-spacing: 0;
  color: var(--orange);
  font-weight: 700;
}

.pin-card__text {
  margin-top: 10px;
  font-size: var(--fs-ui);
  line-height: 22px;
  letter-spacing: 0;
  color: #333;
}

.pin-card__more {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-ui);
  line-height: 22px;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
}

.pin-card__more:hover {
  color: var(--orange-hover);
  text-decoration: underline;
}

.leaflet-container {
  font-family: var(--font);
  background: var(--white);
}

/* Zoom buttons, restyled from Leaflet's default chrome */
.leaflet-control-zoom {
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
  border-radius: 8px;
  overflow: hidden;
  margin: 8px !important;
}



.leaflet-control-zoom a {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, .95);
  border-bottom-color: #e6e6e6;
  font-weight: 700;
}

.leaflet-control-zoom a:hover {
  background: var(--white);
  color: var(--orange);
}

/* ==========================================================================
   Contact page
   Watermark pin: 424×658 outline, stroke 29, ring hole ⌀145, colour --pin-ghost
   ========================================================================== */
.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: 467px 1fr;
  gap: 0;
  align-items: start;
  padding-block: 60px 40px;
}

.contact-pin {
  position: absolute;
  left: 172px;
  top: 0;
  width: 424px;
  z-index: 0;
  pointer-events: none;
}

.contact-pin svg {
  width: 100%;
  height: auto;
}

.contact-card {
  position: relative;
  z-index: 1;
  grid-column: 2;
  padding-top: 60px;
}

.contact-card address {
  font-style: normal;
}

.contact-card__social {
  margin-top: 130px;
}

.contact-card__social img {
  width: 54px;
  height: 50px;
}

.contact-card__social p {
  margin-top: 22px;
}

.contact-photo {
  grid-column: 1 / -1;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 24px;
}

/* ==========================================================================
   Prose blocks (About) and misc page pieces
   ========================================================================== */
.prose>p+p {
  margin-top: var(--lh-body);
}

/* Careers heading sits in orange, centred, above the vacancy list */
.vacancies-title {
  color: var(--orange);
}

/* Centred page variant (Careers) — buttons and text align to the middle */
.center .btn-row {
  justify-content: center;
}

.center .accordion {
  text-align: left;
}

.center .callout {
  text-align: center;
}

/* Timeline block inside the "be expert" accordion */
.timeline-figure {
  margin: 0;
}

.timeline-summary {
  margin-top: 24px;
}

.timeline-summary>p+p {
  margin-top: 4px;
}

/* Contact address block */
.contact-card address p {
  margin: 0;
}

.contact-card address .contact-card__tel {
  margin-top: var(--lh-body);
}

.contact-card address p:last-child {
  margin-top: var(--lh-body);
}

.contact-card a {
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Careers
   ========================================================================== */
.callout {
  background: var(--surface-panel);
  border-radius: var(--radius);
  padding: 32px 48px;
  text-align: center;
}

/* ==========================================================================
   Responsive
   The artboard is 1440 wide; below that everything reflows to a single column.
   ========================================================================== */
/* The nav pill carries 6 items plus the language switcher. Between 1140 and
   1439 the header gutter and link padding tighten; below 1140 it becomes a
   menu. (Downloads and search were removed at the client's request, so the
   pill is narrower than before and the horizontal nav survives further down.) */
@media (max-width: 1439px) {
  .site-header__inner {
    padding-inline: 40px;
  }

  .nav {
    padding-inline: 16px;
  }

  .nav__link {
    padding-inline: 12px;
  }

  .lang {
    margin-left: 4px;
    padding-left: 8px;
  }
}



@media (max-width: 1180px) {
  :root {
    --fs-h1: 44px;
    --lh-h1: 54px;
    --fs-h2: 32px;
    --lh-h2: 40px;
    --fs-h3: 24px;
    --lh-h3: 32px;
    --fs-sub: 20px;
    --lh-sub: 28px;
    --fs-body: 18px;
    --lh-body: 29px;
    --header-h: 96px;
  }

  .site-header__inner {
    padding-inline: 24px;
  }

  .nav {
    gap: 0;
    padding-inline: 12px;
  }

  .nav__link {
    padding-inline: 10px;
    font-size: 15px;
  }

  .card,
  .card--media-left {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .card--media-left .card__media {
    order: 0;
  }

  .card__media {
    min-height: 260px;
  }

  /* Project photos are sized by their 16:9 box, not a floor — a min-height
     here would stretch the crop on a narrow card. */
  [data-meta^="project-"] .card__media {
    min-height: 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-card {
    grid-column: 1;
    padding-top: 0;
  }

  .contact-card__social {
    margin-top: 56px;
  }

  .contact-pin {
    left: -40px;
    width: 300px;
    opacity: .8;
  }

  #projects-map {
    height: 520px;
  }
}

@media (max-width: 1139px) {
  /* NB: do not force position:relative here. It outranks
     .site-header--overlay, drops the bar out of the hero, and leaves the white
     logo sitting on the white page background — invisible. */

  /* Tablet and below: one project card per row (client review 2026-09-15). */
  [data-meta^="project-"] .card-stack {
    grid-template-columns: 1fr;
  }

  [data-meta^="project-"] .card {
    height: auto;
  }

  [data-meta^="project-"] .card__media:not(.card__media--pair) {
    margin-top: 0;
    margin-bottom: 0;
  }

  [data-meta^="project-"] .card:has(.card__media--pair) .card__body,
  [data-meta^="project-"] .card--pair .card__body {
    margin-top: 0;
    margin-bottom: 0;
  }

  [data-meta^="project-"] .card__media--pair {
    margin-top: 0;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: calc(100% - 8px);
    right: 24px;
    left: 24px;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 12px;
    display: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  }

  .nav.is-open {
    display: flex;
  }

  .nav__link {
    height: 44px;
    padding-inline: 14px;
    font-size: 16px;
  }

  .nav__search {
    width: 44px;
    height: 44px;
    margin-left: 0;
    align-self: flex-start;
  }

  .lang {
    order: -1;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 8px;
    margin-bottom: 6px;
  }

  .lang__btn {
    padding: 8px 10px;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .card {
    padding: 28px 24px;
  }

  .panel,
  .callout {
    padding: 24px;
  }

  .panel>*+* {
    margin-top: 16px;
  }

  .panel p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .accordion {
    padding: 14px;
    gap: 14px;
  }

  .accordion__trigger {
    padding: 14px 16px;
    gap: 16px;
  }

  .accordion__panel {
    padding: 0 16px 24px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .site-footer__nav {
    margin-left: 0;
    gap: 20px 28px;
  }

  .site-footer__cert img {
    height: 40px;
  }

  .section {
    padding-block: 40px;
  }

  .scroll-cue {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

  .scroll-cue svg {
    width: 21px;
    height: 21px;
  }

  .timeline {
    min-width: 760px;
  }

  #projects-map {
    height: 440px;
  }

  /* Give the map the full viewport width on small screens by pulling it out
     through the container gutter. Capped at the gutter (24px) rather than the
     suggested 35px, which would push 11px past the viewport on each side and
     create a horizontal scrollbar. */
  .map-panel {
    margin-inline: calc(-1 * var(--container-pad));
    border-radius: 0;
  }

  #projects-map {
    border-radius: 0;
  }

  /* The detail box stays an overlay on small screens, and gets nearly the full
     width. It is lifted further above the world map so that its lower edge
     stays clear of the Iran pin behind it (that pin sits ~36% down the world
     map) — the overhang is what buys the extra width without hiding anything. */
  .map-panel {
    margin-top: 90px;
  }

  .map-inset {
    left: 4%;
    top: -90px;
    width: 92%;
    /* 200px puts the lower edge ~110px into the world map, comfortably above
       the Iran pin (~156px at tablet width, lower still on phones). */
    height: 200px;
  }

  /* Keep the client's 60px gap (review §3a) at every width. */
  .section--flush-bottom {
    padding-bottom: 0;
  }

  .section--gap60 {
    padding-block: 60px 40px;
  }



  .btn-row {
    gap: 14px;
  }

  .btn {
    width: 100%;
  }

  .btn-row .btn {
    width: auto;
    flex: 1 1 220px;
  }

  /* The chevron/copy pair gets cramped on a phone — stack it. */
  .cta {
    gap: 18px;
  }

  .cta__mark {
    width: 48px;
    margin-top: 2px;
  }

  .cta__actions {
    margin-top: 28px;
  }
}

@media (max-width: 560px) {
  :root {
    --container-pad: 18px;
    --fs-h1: 34px;
    --lh-h1: 42px;
    --fs-h2: 26px;
    --lh-h2: 34px;
  }

  .container {
    padding-inline: var(--container-pad);
  }

  .btn-row .btn {
    flex: 1 1 100%;
  }
}

/* --- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Print --------------------------------------------------------------- */
@media print {

  .site-header,
  .site-footer,
  .scroll-cue {
    display: none;
  }

  .accordion__panel {
    display: block !important;
  }
}