/* =========================================================
   Golden Buildings Contracting — brand tokens
   Source: GBC_Brand_Identity_System.docx
   ========================================================= */
@font-face {
  font-family: "Square721 BdEx";
  src: url("assets/fonts/square721-bold-extended.woff2?v=4") format("woff2"),
       url("assets/fonts/square721-bold-extended.ttf?v=3") format("truetype");
  font-weight: 700;
  font-display: block;  /* wait briefly for the brand font instead of flashing a stand-in */
}
@font-face {
  /* Official Arabic name font (Brand Material/Fonts/Official Name) */
  font-family: "GBC Kufi";
  src: url("assets/fonts/kufi-lt.woff2?v=4") format("woff2"),
       url("assets/fonts/kufi-lt.ttf?v=3") format("truetype");
  font-display: block;  /* wait briefly for the brand font instead of flashing a stand-in */
}

:root {
  --blue: #2E3092;
  --blue-dark: #1F2168;
  --red: #ED1C24;
  --red-dark: #C8141B;
  /* accessible variants of the brand red (WCAG AA contrast); the brand red stays for lines, stripes and icons */
  --red-ink: #D9141C;      /* small red text on white/grey, and red buttons with white text (5.2:1) */
  --red-on-blue: #F5525A;  /* red text on the hero blue (3.2:1, large text) */
  --gray-light: #F5F5F5;
  --gray-dark: #333333;
  --gray-mid: #6B6B6B;
  --white: #FFFFFF;

  --font-head: "Square721 BdEx", "Arial Black", Arial, sans-serif;
  --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-ar: "GBC Kufi", "Geeza Pro", "Noto Kufi Arabic", sans-serif;

  --radius: 6px;
  --shadow: 0 10px 30px rgba(46, 48, 146, 0.12);
  --container: 1440px;
  --header-h: 100px;
  --header-h-compact: 64px;         /* after scrolling down */
  --brand-compact-scale: .62;       /* logo + name size in the compact header */
  --header-ease: .35s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h-compact); }
/* when Lenis runs it does the smoothing itself; the browser's own smooth scrolling would double it */
html.lenis { scroll-behavior: auto; }
body {
  margin: 0;
  padding-top: var(--header-h);     /* room for the fixed header */
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--blue);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 600px) { .container { padding: 0 16px; } }
@media (min-width: 1280px) { .container { padding: 0 40px; } }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: .8em;
}
.eyebrow-red { color: var(--red-ink); }
.accent { color: var(--red); }
.hero .accent { color: var(--red-on-blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red-ink); color: var(--white); }
.btn-red:hover { background: var(--red-dark); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-dark); }
.btn-white { background: var(--white); color: var(--blue); }
.btn-outline-light { border-color: rgba(255,255,255,.7); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--blue); }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-block { width: 100%; }

/* ---------- Placeholders (remove once real content is in) ---------- */
.ph-photo {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(46,48,146,.06) 0 14px, rgba(46,48,146,.12) 14px 28px),
    #DADBEA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-tag {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(255,255,255,.9);
  border: 1px dashed var(--blue);
  padding: 6px 10px;
  border-radius: 4px;
  text-align: center;
  max-width: 80%;
}
.ph-note {
  display: inline-block;
  font-size: .85rem;
  color: var(--red-dark);
  background: #FDECEC;
  border: 1px dashed var(--red);
  padding: 4px 10px;
  border-radius: 4px;
}
.ph-inline { background: #FFF3C4; border-radius: 3px; padding: 0 4px; color: inherit; }
.ph strong, .ph blockquote { color: inherit; }

/* ---------- Header ---------- */
/* Fixed (not sticky) so shrinking it never shifts the page content under the reader.
   main.js adds .is-compact after the first bit of scrolling. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #E6E6EE;
  height: var(--header-h);
  transition: height var(--header-ease), box-shadow var(--header-ease);
}
.site-header.is-compact {
  height: var(--header-h-compact);
  box-shadow: 0 6px 20px rgba(46, 48, 146, .10);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transform-origin: left center;
  transition: transform var(--header-ease);
}
/* only the logo and the name are clickable, not the blank space around them
   (clicks on them still follow the link; clicks on the gaps fall through to the header) */
.brand { pointer-events: none; }
.brand-logo, .brand .wordmark { pointer-events: auto; cursor: pointer; }
/* logo and name shrink as one unit, so the rule stays level with the logo's "C" */
.site-header.is-compact .brand { transform: scale(var(--brand-compact-scale)); }
@media (prefers-reduced-motion: reduce) {
  .site-header, .brand { transition: none; }
}
.brand-logo { height: 92px; width: auto; flex-shrink: 0; }

/* Official name lockup, as in Logo.pdf:
   Arabic name (Kufi) / red rule / GOLDEN BUILDINGS CONTRACTING (Square 721) [+ CO L.L.C in footer]
   main.js (fitWordmarks) lengthens the Arabic with kashida to the width of the English line
   and sets the two gaps around the red rule so they are optically equal. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--blue);
  font-size: clamp(.5rem, 2.2vw, .8rem); /* sizes the whole lockup */
  position: relative;                /* main.js nudges it with top: to line the rule up with the logo */
  /* Arabic alef height relative to English capital height (1 = identical) */
  --ar-to-en: 2;
}
@media (max-width: 480px) {
  .brand { gap: 10px; min-width: 0; }
  .brand-logo { height: 70px; }
  .nav-toggle { flex-shrink: 0; }
}
.wordmark-ar {
  font-family: var(--font-ar);
  font-size: 1.6em;                  /* fallback; main.js sets the exact size */
  line-height: 1;
  display: flex;
  justify-content: center;
  width: 0;                          /* the English line alone sets the lockup width */
  min-width: 100%;
  white-space: nowrap;
}
.wordmark-rule {
  display: block;
  height: max(1px, .11em);
  background: var(--red);
}
.wordmark-ar-text {
  display: inline-block;
  flex-shrink: 0;
  transform-origin: center;
}
.wordmark-en {
  font-family: var(--font-head);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .01em;
  position: relative;
}
.wordmark-en small {
  /* hangs past the end of the name, outside the width the Arabic is matched to */
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: .3em;
  font-size: .42em;
  letter-spacing: .02em;
}
.wordmark-light { color: var(--white); }
/* the name lockup stays hidden until main.js has sized it with the real fonts (no jump on load) */
.wordmark:not(.is-ready) { visibility: hidden; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) {
  text-decoration: none;
  color: var(--gray-dark);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover { color: var(--red-ink); }
/* Menu as a pill segmented control.
   Adapted from "Pill Segmented Tabs" by uiverse-astronaut (Astronaut), uiverse.io — MIT License.
   Copyright 2026 uiverse-astronaut (Astronaut). Permission is hereby granted, free of charge, to any person
   obtaining a copy of this software and associated documentation files (the "Software"), to deal in the
   Software without restriction, including without limitation the rights to use, copy, modify, merge, publish,
   distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
   furnished to do so, subject to the following conditions: The above copyright notice and this permission
   notice shall be included in all copies or substantial portions of the Software.
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
   LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
   EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
   USE OR OTHER DEALINGS IN THE SOFTWARE. */
.nav-pills { display: contents; }               /* phone/tablet dropdown: links behave as before */
@media (min-width: 1201px) {
  .site-nav { gap: 16px; }
  .nav-pills {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    background: var(--white);
    border: 1px solid #E3E5EE;
    border-radius: 999px;
    box-shadow:
      0 1px 1px rgba(14, 17, 22, .04),
      0 20px 40px -24px rgba(14, 17, 22, .18);
  }
  .nav-pills a:not(.btn) {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: .98rem;
    transition:
      background-color 220ms cubic-bezier(.22, 1, .36, 1),
      color 220ms cubic-bezier(.22, 1, .36, 1),
      box-shadow 220ms cubic-bezier(.22, 1, .36, 1);
  }
  /* hover: a light blue tint fills the pill (the active pill keeps its solid blue) */
  .nav-pills a:not(.btn):hover { color: var(--blue); background: rgba(46, 48, 146, .08); }
  /* the section you are reading: filled with brand blue, lifted on a soft shadow */
  .nav-pills a.is-active,
  .nav-pills a.is-active:hover {
    background: var(--blue);
    color: var(--white);
    box-shadow:
      0 1px 1px rgba(46, 48, 146, .08),
      0 8px 18px -10px rgba(46, 48, 146, .65);
  }
  .site-header.is-compact .nav-pills a:not(.btn) { height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .nav-pills a { transition: none; } }

/* focus ring only for keyboard users (Tab), not after a mouse click */
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.site-nav .btn-sm { font-size: .95rem; white-space: nowrap; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--blue);
  margin: 5px 0;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1200px) {
  /* collapse earlier: the full-width name lockup and the menu need the room */
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%;                      /* follows the header as it shrinks */
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 3px solid var(--blue);
    padding: 8px 16px 20px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid #EEE; }
  .site-nav .btn { margin-top: 14px; text-align: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
  min-height: min(58vh, 520px);
  display: flex;
  align-items: center;
}
.hero-bg {
  position: absolute;
  inset: 0 0 0 45%;
  opacity: .9;
  align-items: flex-end;
  padding-bottom: 32px;
}
.hero::before {
  /* blue wash over the photo so white copy stays legible */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue) 42%, rgba(46,48,146,.75) 60%, rgba(46,48,146,.15) 100%);
  z-index: 1;
}
.hero::after {
  /* red accent stripe */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 6px;
  background: var(--red);
  z-index: 2;
}
.hero-content { position: relative; z-index: 2; padding-top: 56px; padding-bottom: 56px; }
.hero h1 { color: var(--white); max-width: 14ch; }
.hero .lead { font-size: 1.15rem; max-width: 52ch; color: rgba(255,255,255,.9); margin-bottom: 2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Hero map: Dubai outline + project pins ---------- */
.hero-map {
  position: absolute;
  top: 0; bottom: 6px; right: 0; left: 40%;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
  justify-items: end;                    /* keep the map against the right edge on wide screens */
  /* fade the map's left edge into the blue behind the headline */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
.hero-map-frame {
  /* all of Dubai fits top to bottom; land and sea continue past the frame edges, so the area stays covered */
  position: relative;
  flex: none;
  width: min(100cqw, calc(100cqh * 1000 / 845.3));
  aspect-ratio: 1000 / 845.3;
}
.dubai-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dm-sea      { fill: #1F2168; }                       /* sea / Creek: deep brand blue */
.dm-land     { fill: var(--blue); }                   /* land: brand blue, same as the banner */
.dm-coast    { fill: none; stroke: #fff; stroke-width: 1; stroke-linejoin: round; opacity: .55; }
.dm-primary  { fill: none; stroke: #fff; stroke-width: .6; stroke-linecap: round; opacity: .13; }
.dm-trunk    { fill: none; stroke: #fff; stroke-width: 1;  stroke-linecap: round; opacity: .22; }
.dm-motorway { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .32; }
.dm-runway   { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: butt; opacity: .35; }

/* area names and landmarks (main.js places them) */
.hero-map-labels { position: absolute; inset: 0; pointer-events: none; }
.map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  text-shadow: 0 1px 2px rgba(15, 16, 60, .6);
}
.map-label.is-major { font-size: 11.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .78); }
.map-label.is-water { font-weight: 400; font-style: italic; text-transform: none; letter-spacing: .04em; font-size: 11px; color: rgba(190, 200, 255, .7); }
.map-landmark { display: flex; flex-direction: column; align-items: center; gap: 3px; color: rgba(255, 255, 255, .85); }
.map-landmark svg { width: 16px; height: 16px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(15, 16, 60, .6)); }
.map-landmark span { font-size: 9.5px; letter-spacing: .08em; }

.hero-map-pins, .hero-map-dots { position: absolute; inset: 0; }
/* smaller dots: completed projects listed only as a count per area (GBC_MAP_AREAS in projects.js) */
.map-dot {
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--red);
  border: 1px solid var(--white);
  box-shadow: 0 1px 2px rgba(10, 12, 50, .45);
  pointer-events: none;
}
.map-dot::after { inset: -1px; }         /* pulse ring starts at the dot's outer edge */
.map-dot.is-dropping { animation: pin-drop .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--drop-delay, 0s); }
.map-pin {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;            /* centre on the point */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}
.map-pin::before {                     /* the pin dot: same size as every other dot */
  content: "";
  position: absolute;
  inset: 8.5px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--white);
  box-shadow: 0 1px 3px rgba(10, 12, 50, .45);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.map-pin::after, .map-dot::after {     /* soft pulse ring, shared by all dots */
  content: "";
  position: absolute;
  inset: 8.5px;
  border-radius: 50%;
  border: 2px solid rgba(237, 28, 36, .9);
  animation: pin-pulse 2.8s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: var(--pulse-delay, 0s);
  opacity: 0;
}
.map-pin:hover::before, .map-pin:focus-visible::before, .map-pin.is-open::before { transform: scale(1.35); }
@keyframes pin-pulse {
  0%   { transform: scale(1);   opacity: .85; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* pins drop in one after another (main.js adds .is-dropping) */
.map-pin.is-dropping { animation: pin-drop .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--drop-delay, 0s); }
@keyframes pin-drop {
  from { transform: translateY(-26px) scale(.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hero-map-card {
  position: absolute;
  z-index: 3;
  width: 230px;
  background: var(--white);
  color: var(--gray-dark);
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(10, 12, 50, .55);
  overflow: hidden;
  pointer-events: none;
  transform-origin: bottom center;
  animation: card-in .25s cubic-bezier(.22, 1, .36, 1);
}
.hero-map-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #EEEFF5; }
.hero-map-card .card-body { padding: 12px 14px 14px; }
.hero-map-card .card-sector { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); }
.hero-map-card .card-name { font-family: var(--font-head); color: var(--blue); font-size: .92rem; line-height: 1.2; margin: 4px 0 4px; }
.hero-map-card .card-meta { font-size: .8rem; color: var(--gray-mid); margin: 0; }
@keyframes card-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

.hero-map-legend, .hero-map-credit {
  position: absolute;
  bottom: 12px;
  margin: 0;
  font-size: .78rem;
  color: rgba(255, 255, 255, .85);
}
.hero-map-legend { right: 24px; bottom: 30px; z-index: 4; display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .02em; }
.hero-map-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 1px solid var(--white); }
.hero-map-credit { right: 24px; z-index: 4; font-size: .66rem; color: rgba(255, 255, 255, .55); }
.hero-map-credit a { color: inherit; }

@media (max-width: 900px) {
  /* phones/tablets: the map sits faintly behind the headline, pins are decorative */
  .hero-map { left: 0; opacity: .32; pointer-events: none; -webkit-mask-image: none; mask-image: none; }
  .hero-map-labels { display: none; }
  .hero::before { background: rgba(46,48,146,.35); }
  .hero-map-legend, .hero-map-card { display: none; }
  .hero-map-credit { pointer-events: auto; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin::after, .map-dot::after { animation: none; }
  .map-pin.is-dropping { animation: none; }
}

/* ---------- Stats ---------- */
.stats { background: var(--white); border-bottom: 1px solid #E6E6EE; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
  padding: 34px 12px;
  text-align: center;
  border-right: 1px solid #E6E6EE;
}
.stat:last-child { border-right: 0; }
.stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  white-space: nowrap;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  margin: 0 auto;
}
/* short red bar under each number */
.stat strong::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin: 10px auto 12px;
  background: var(--red);
  border-radius: 2px;
}
/* stats band animation (main.js adds .stats-armed / .is-counting) */
.stats-armed .stat strong::after { transform: scaleX(0); transition: transform .8s cubic-bezier(.22, 1, .36, 1) .25s; }
.stats-armed .stat > span { opacity: 0; transform: translateY(10px); transition: opacity .7s ease .35s, transform .7s cubic-bezier(.22, 1, .36, 1) .35s; }
.stats-armed .stat.is-counting strong::after { transform: scaleX(1); }
.stats-armed .stat.is-counting > span { opacity: 1; transform: none; }
.stat.ph strong { color: var(--gray-mid); }
.stat span { font-size: .88rem; color: var(--gray-mid); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 24px 8px; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid #E6E6EE; }
  .stat span { font-size: .74rem; letter-spacing: .04em; }
}

/* ---------- Vision ---------- */
.vision { background: var(--blue-dark); color: rgba(255,255,255,.88); padding: 80px 0; }
.vision-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
}
.vision h2 { color: var(--white); margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.vision-text p { font-size: 1.05rem; max-width: 60ch; }
.vision-text p:first-child { color: var(--white); font-size: 1.2rem; }
.vision-text p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
  .vision { padding: 60px 0; }
  .vision-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Mission ---------- */
.mission-head { max-width: 820px; margin-bottom: 44px; }
.mission-lead {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  color: var(--blue);
  margin: 0;
  text-wrap: balance;
}
.mission-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
}
.mission-points li {
  padding: 26px 0;
  border-top: 1px solid #E6E6EE;
}
.mission-points h3::before {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  background: var(--red);
  margin-bottom: 14px;
}
.mission-points p { margin: 0; color: var(--gray-dark); }
@media (max-width: 700px) {
  .mission-points { grid-template-columns: 1fr; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-gray { background: var(--gray-light); }
.section-blue { background: var(--blue); color: var(--white); }
.section-blue h2, .section-blue h3 { color: var(--white); }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head-row {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
@media (max-width: 600px) { .section { padding: 64px 0; } }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-media { aspect-ratio: 4 / 5; border-radius: var(--radius); border-bottom: 6px solid var(--red); }
.check-list { list-style: none; padding: 0; margin: 0 0 2em; }
.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.check-list strong { color: var(--blue); }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-media { aspect-ratio: 16 / 10; }
  /* the rising building is a tall drawing: keep its full height on phones */
  .about-media.about-rise { aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; }
}

/* ---------- Values ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value-card {
  background: var(--white);
  padding: 32px 26px;
  border-radius: var(--radius);
  border-top: 4px solid var(--blue);
  box-shadow: var(--shadow);
}
.value-card p { font-size: .95rem; margin: 0; }
.value-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(237,28,36,.1);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.value-icon svg { width: 24px; height: 24px; fill: var(--red); }
@media (max-width: 1000px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .values-grid { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #E6E6EE;
  border: 2px solid #E6E6EE;
  border-radius: var(--radius);
  overflow: hidden;
}
.service-card {
  background: var(--white);
  padding: 36px 30px;
  transition: background .25s, color .25s;
}
.service-card p { font-size: .95rem; margin: 0; }
.service-num {
  display: block;
  font-family: var(--font-head);
  color: var(--red-ink);
  font-size: .9rem;
  margin-bottom: 14px;
}
.service-card:hover { background: var(--blue); color: rgba(255,255,255,.88); }
.service-card:hover h3 { color: var(--white); }
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* ---------- Sectors ---------- */
.sectors { background: var(--blue-dark); color: rgba(255,255,255,.85); }
/* one equal column per sector, however many there are */
.sectors-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sector { padding: 44px 28px; border-left: 1px solid rgba(255,255,255,.12); }
.sector:first-child { border-left: 0; }
.sector h3 { color: var(--white); margin-bottom: .3em; }
.sector h3::before {
  content: "";
  display: block;
  width: 32px; height: 4px;
  background: var(--red);
  margin-bottom: 16px;
}
.sector p { margin: 0; font-size: .95rem; }
@media (max-width: 960px) and (min-width: 701px) {
  .sectors-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector:nth-child(odd) { border-left: 0; }
  .sector:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 700px) {
  .sectors-grid { grid-auto-flow: row; grid-template-columns: 1fr; }
  .sector { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 32px 4px; }
  .sector:first-child { border-top: 0; }
}

/* ---------- Projects ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
  font: 700 .85rem var(--font-body);
  padding: 9px 16px;
  border-radius: 999px;
  border: 2px solid var(--blue);
  background: transparent;
  color: var(--blue);
  cursor: pointer;
}
.filter-btn.is-active, .filter-btn:hover { background: var(--blue); color: var(--white); }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.project-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: transform .25s;
}
.project-card:hover { transform: translateY(-4px); }
.project-card.is-hidden { display: none; }
.project-img { aspect-ratio: 4 / 3; overflow: hidden; background: #EEEFF5; }
/* contain: always show the whole render, whatever its shape (tall towers, wide villas) */
.project-img img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s ease; }
.project-img img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .project-img img { transition: none; } }
.projects-empty { grid-column: 1 / -1; color: var(--gray-mid); }
.projects-more { display: flex; justify-content: center; margin-top: 40px; }
.projects-more:has(> [hidden]) { display: none; }
#projects-toggle { display: inline-flex; align-items: center; gap: 10px; }
#projects-toggle::after {
  /* chevron: points down, flips up when the full list is open */
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
#projects-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }

/* newly revealed project cards drop gently into place, one after another */
@keyframes project-in {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: none; }
}
.project-card.is-entering { animation: project-in .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes project-out {
  to { opacity: 0; transform: translateY(-14px); }
}
.project-card.is-leaving { animation: project-out .34s ease-in both; }
@media (prefers-reduced-motion: reduce) {
  .project-card.is-entering, .project-card.is-leaving { animation: none; }
  #projects-toggle::after { transition: none; }
}
.project-body { padding: 22px 24px 26px; border-top: 4px solid var(--red); }
.project-body p { margin: 0; font-size: .9rem; color: var(--gray-mid); }
.project-sector {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-ink);
}
@media (max-width: 900px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .projects-grid { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: none;
}
.process-steps li {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid rgba(255,255,255,.25);
}
.process-steps p { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0; }
.step-num {
  position: absolute;
  top: -19px; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--red-ink);
  color: var(--white);
  font-family: var(--font-head);
  display: grid; place-items: center;
  font-size: .95rem;
}
@media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 48px; } }
@media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--red); color: var(--white); padding: 56px 0; }
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
}
.cta-band h2 { color: var(--white); margin: 0; }
.cta-band .btn-white { color: var(--red-ink); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.contact-list { list-style: none; padding: 0; margin: 0 0 28px; }
.contact-list li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #E6E6EE;
}
.contact-list li > span:first-child {
  width: 100px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--red-ink);
  padding-top: 2px;
}
.contact-list a { text-decoration: none; }

.contact-intro p:last-child { margin-bottom: 0; max-width: 46ch; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Careers ---------- */
.careers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.careers-apply { color: var(--gray-mid); margin-bottom: 1.6em; }
.careers-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  background: #E2E2EC;
  border-radius: var(--radius);
  overflow: hidden;
}
.careers-roles li { background: var(--white); padding: 22px 26px; }
.careers-roles h3 { margin-bottom: .25em; }
.careers-roles p { margin: 0; font-size: .95rem; color: var(--gray-mid); }
@media (max-width: 900px) { .careers-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue); color: rgba(255,255,255,.8); padding-top: 64px; font-size: .92rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer h4 {
  color: var(--white);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer a, .site-footer .footer-grid span { display: block; color: rgba(255,255,255,.8); text-decoration: none; margin-bottom: 8px; }
.site-footer a:hover { color: var(--white); }
.footer-logo {
  /* reversed logo (gbc-logo-white.png): blue parts in white, red kept, transparent background */
  display: inline-block !important;
  margin-bottom: 18px;
}
.footer-logo img { width: 84px; height: auto; }
.site-footer .ph-inline { color: var(--gray-dark); display: inline-block; }
.site-footer .footer-brand .wordmark { font-size: clamp(.55rem, .9vw, .68rem); margin-bottom: 18px; display: inline-flex; }
.site-footer .footer-brand .wordmark span { margin: 0; color: var(--white); }
.site-footer .footer-brand .wordmark-ar { display: flex; }
.site-footer .footer-brand .wordmark-ar-text { display: inline-block; }
.site-footer .footer-brand .wordmark small { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: .82rem;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer .legal-links a { display: inline; margin: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Legal pages (privacy.html, terms.html) ---------- */
.legal { padding: 72px 0 96px; }
.legal-body { max-width: 760px; }
.legal-body h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal-updated { color: var(--gray-mid); font-size: .92rem; margin-bottom: 2.2em; }
.legal-body h2 { font-size: 1.15rem; margin-top: 2em; }
.legal-body ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal-body li { margin-bottom: .4em; }
.legal-body address { font-style: normal; }
.legal-back { margin-top: 2.5em; }

/* ---------- Motion effects (see main.js; inspired by React Bits) ---------- */
.bt-word { display: inline-block; will-change: filter, opacity, transform; }
html.has-motion .reveal { opacity: 0; transform: translateY(40px); }
html.has-motion .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1),
    background-color .25s, color .25s;
}
.btn.is-magnet:hover { transform: none; }   /* the magnet sets its own transform */
@media print { html.has-motion .reveal { opacity: 1; transform: none; } .bt-word { opacity: 1 !important; filter: none !important; } }

/* While main.js is getting the animations ready, animated items start hidden (no flash of the final state).
   Safety net: if the script never runs, everything fades in on its own after 3 seconds. */
html.motion-pending main h1,
html.motion-pending main h2,
html.motion-pending .mission-lead,
html.motion-pending .stat strong,
html.motion-pending .hero-map,
html.motion-pending .stat > span,
html.motion-pending :is(.about-media, .check-list li, .vision-text p, .mission-points li, .value-card,
  .service-card, .sector, .process-steps li, .contact-list li, .careers-roles li, .legal-body p, .legal-body ul) {
  opacity: 0;
  animation: motion-failsafe .4s ease 3s forwards;
}
@keyframes motion-failsafe { to { opacity: 1; } }
/* stats: number stays hidden until its count starts */
.stats-armed .stat:not(.is-counting) strong { opacity: 0; }

/* =====================================================================
   "Why GBC" visual: a 20-floor building rises as you scroll, the crane is removed, handover.
   main.js sets --p (0 → 1) and the floor / crane / handover states.
   ===================================================================== */
.about-rise { position: relative; overflow: hidden; --p: 0; }

/* ---- Option 2: building rising floor by floor ---- */
.about-rise { background: #EEF0F8; }
.rise-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rise-sky { fill: #EEF0F8; }
.rise-skyline rect { fill: #DADCEC; }
.rise-ground { fill: #E2E4F0; }
.rise-groundline { stroke: var(--blue); stroke-width: 2; }
.rise-slab { fill: var(--blue); stroke: #EEF0F8; stroke-width: 1.5; }
.rise-win { fill: #4A4DB0; transition: fill .6s ease; }
.about-rise.is-built .rise-win { fill: #FFD27A; }
.rise-floor {
  opacity: 0;
  translate: 0 -24px;
  transition: opacity .45s ease, translate .55s cubic-bezier(.22, 1, .36, 1);
}
.rise-floor.is-up { opacity: 1; translate: 0 0; }
.rise-mast, .rise-jib, .rise-cable { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; }
.rise-jib { stroke-width: 1.6; }
.rise-counterweight, .rise-hookshape { fill: var(--red); }
.rise-status {
  position: absolute; left: 16px; top: 16px;
  padding: 7px 13px; border-radius: 999px; background: var(--white); color: var(--blue);
  box-shadow: 0 6px 18px -8px rgba(46,48,146,.45);
  font: 700 .74rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  display: grid;
}
.rise-status span { grid-area: 1 / 1; transition: opacity .4s; }
.rise-done { opacity: 0; color: var(--red-ink); }
.about-rise.is-built .rise-floors { opacity: 0; }
.about-rise.is-built .rise-done { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rise-floor { transition: none; }
}

/* option 2 additions: crane lowered away before handover; status label colour at handover */
.rise-crane { transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.about-rise.is-built .rise-state { color: var(--red-ink); }
.rise-state { transition: color .3s; }
@media (prefers-reduced-motion: reduce) { .rise-crane { transition: none; } }