/* ==========================================================================
   Elite Crest One — shared site shell
   Header, nav, footer and inner-page furniture. Loaded by every page,
   including the scroll-world home page (which hides the engine's own topbar
   in favour of this one so all five pages share one header).
   ========================================================================== */

:root {
  /* Dark theme. Black ground, white type, gold for buttons and separators. */
  --ec-bg:        #0A0908;  /* black, faintly warm */
  --ec-surface:   #151311;  /* cards, inputs, panels */
  --ec-surface-2: #1E1B18;  /* hover / raised */
  --ec-sand:      #181512;  /* dark warm panel tone (mixed into panels) */
  --ec-stone:     #6B5535;  /* muted gold — mixed at low % for borders */
  --ec-bronze:    #D4AF5A;  /* solid gold for eyebrows, labels, accents */
  --ec-gold-grad: linear-gradient(135deg, #F6E1A0 0%, #D4AF5A 48%, #A8834F 100%);
  --ec-gold-line: linear-gradient(90deg, #F0D48A 0%, #D4AF5A 50%, #A8834F 100%);
  --ec-on-gold:   #171208;  /* type on gold buttons */
  --ec-ink:       #FFFFFF;  /* all copy */
  --ec-ink-soft:  #C9BFB4;  /* secondary copy, light warm grey */
  --ec-font-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --ec-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ec-header-h: 138px;
}

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

/* --------------------------------------------------------------- header -- */

.ec-header {
  position: fixed; inset: 0 0 auto 0; z-index: 400;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(18px, 4vw, 44px);
  pointer-events: none;              /* let the scroll world receive drags */
}
.ec-header > * { pointer-events: auto; }

.ec-brand { display: block; flex: none; text-decoration: none; }
.ec-brand img { display: block; width: 122px; height: 95px; object-fit: contain; }
.ec-brand__name {                    /* for screen readers; the lockup carries the name */
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- the nav -- */

.ec-nav {
  display: flex; align-items: center; gap: 2px;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ec-bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 6px 26px color-mix(in srgb, var(--ec-ink) 12%, transparent);
  max-width: 100%;
}

.ec-nav a {
  display: block;
  padding: 10px 18px;
  border-radius: 999px;
  font: 600 0.9rem/1 var(--ec-font-body);
  letter-spacing: .01em;
  color: var(--ec-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.ec-nav a:hover { color: var(--ec-ink); background: color-mix(in srgb, var(--ec-stone) 26%, transparent); }

.ec-nav a[aria-current="page"] {
  color: var(--ec-on-gold);
  background: var(--ec-gold-grad);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ec-bronze) 45%, transparent);
}

/* Replaces the browser's default focus ring (the blue outline) with one that
   belongs to the palette. :focus-visible so a mouse click doesn't show it. */
.ec-nav a:focus-visible,
.ec-brand:focus-visible,
.ec-btn:focus-visible {
  outline: 2px solid var(--ec-bronze);
  outline-offset: 3px;
}

/* ------------------------------------------------------- inner-page body -- */

body.ec-page {
  margin: 0;
  background: var(--ec-bg);
  color: var(--ec-ink);
  font-family: var(--ec-font-body);
  -webkit-font-smoothing: antialiased;
}

.ec-hero {
  position: relative;
  min-height: clamp(380px, 56vh, 560px);
  display: flex; align-items: flex-end;
  padding: var(--ec-header-h) clamp(18px, 5vw, 64px) clamp(40px, 6vh, 72px);
  overflow: hidden;
}
.ec-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.ec-hero::after {                     /* same scrim logic as the home page copy */
  content: ""; position: absolute; inset: 0; z-index: 1;
  width: min(58vw, 780px);
  background: linear-gradient(90deg,
    var(--ec-bg) 0%,
    color-mix(in srgb, var(--ec-bg) 82%, transparent) 34%,
    color-mix(in srgb, var(--ec-bg) 40%, transparent) 62%,
    transparent 100%);
}
.ec-hero__inner { position: relative; z-index: 2; max-width: 640px; }

.ec-eyebrow {
  display: block; margin: 0 0 14px;
  font: 700 .8rem/1 var(--ec-font-display);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ec-bronze);
}
.ec-hero h1 {
  margin: 0;
  font: 700 clamp(2.2rem, 5vw, 3.6rem)/1.04 var(--ec-font-display);
  letter-spacing: -.01em;
  color: var(--ec-ink);
}
.ec-hero p {
  margin: 18px 0 0; max-width: 46ch;
  font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.55;
  color: color-mix(in srgb, var(--ec-ink) 78%, var(--ec-ink-soft));
}

.ec-main { padding: clamp(48px, 8vh, 88px) clamp(18px, 5vw, 64px); }
.ec-wrap { max-width: 1100px; margin-inline: auto; }

.ec-placeholder {
  border: 1px dashed color-mix(in srgb, var(--ec-stone) 70%, transparent);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 56px);
  background: color-mix(in srgb, var(--ec-sand) 22%, transparent);
}
.ec-placeholder h2 {
  margin: 0 0 10px;
  font: 700 clamp(1.3rem, 2.4vw, 1.8rem)/1.2 var(--ec-font-display);
}
.ec-placeholder p { margin: 0; color: var(--ec-ink-soft); max-width: 60ch; line-height: 1.6; }

.ec-btn {
  display: inline-block; margin-top: 22px;
  padding: 13px 24px; border-radius: 999px;
  background: var(--ec-gold-grad); color: var(--ec-on-gold);
  font: 600 .92rem/1 var(--ec-font-body); text-decoration: none;
  box-shadow: 0 6px 20px color-mix(in srgb, #D4AF5A 28%, transparent);
  transition: filter .18s ease, transform .18s ease;
}
.ec-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ec-btn--ghost {
  background: transparent; color: var(--ec-bronze); box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--ec-bronze) 55%, transparent);
}

/* --------------------------------------------------------------- footer -- */

.ec-footer {
  position: relative;
  padding: clamp(32px, 5vh, 56px) clamp(18px, 5vw, 64px);
  background: var(--ec-bg);
}
.ec-footer::before {              /* gold gradient separator */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--ec-gold-line);
}
.ec-footer__row {
  max-width: 1100px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: center; justify-content: space-between;
}
.ec-footer img { display: block; width: 74px; height: 58px; object-fit: contain; }
.ec-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ec-footer a { color: var(--ec-ink-soft); text-decoration: none; font-size: .9rem; }
.ec-footer a:hover { color: var(--ec-ink); }
.ec-footer__legal { width: 100%; max-width: 1100px; margin: 24px auto 0; }
.ec-footer__legal p { margin: 0; font-size: .82rem; color: var(--ec-ink-soft); }

/* --------------------------------------------------------------- mobile -- */

@media (max-width: 860px) {
  :root { --ec-header-h: 96px; }
  .ec-header {                      /* solid black ground so the logo reads over bright skies */
    padding: 14px 16px; gap: 12px;
    background: #000;
  }
  .ec-brand img { width: 87px; height: 67px; }
  .ec-nav {
    padding: 5px;
    overflow-x: auto;               /* five items stay reachable, never clipped */
    scrollbar-width: none;
  }
  .ec-nav::-webkit-scrollbar { display: none; }
  .ec-nav a { padding: 9px 13px; font-size: .82rem; }
  .ec-hero { align-items: flex-end; }
  .ec-hero::after {
    width: 100%; height: 72%; top: auto; bottom: 0;
    background: linear-gradient(0deg,
      var(--ec-bg) 8%,
      color-mix(in srgb, var(--ec-bg) 70%, transparent) 46%,
      transparent 100%);
  }
}

/* ==========================================================================
   Scroll-scrubbed split panel  (About)
   Text on a sand ground at left, a scroll-driven video at right. The section
   is tall to give the scrub room; the inner wrapper pins for that distance.
   ========================================================================== */

.ec-scrub {
  position: relative;
  height: 260vh;                      /* scroll distance = 260vh - 100vh sticky */
  background: var(--ec-bg);
}
.ec-scrub__sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 43fr 57fr;   /* text panel : building */
  overflow: hidden;
}

/* ---- left: the copy panel ---- */

.ec-scrub__copy {
  position: relative;
  background: color-mix(in srgb, var(--ec-sand) 72%, var(--ec-bg));
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--ec-header-h) clamp(28px, 5vw, 84px) clamp(40px, 6vh, 72px);
}
.ec-scrub__copy > * { max-width: 46ch; }

.ec-rule {
  width: 54px; height: 2px; border: 0; margin: 0;
  background: var(--ec-gold-line);
}

.ec-scrub__eyebrow {
  font: 600 .78rem/1 var(--ec-font-body);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ec-bronze);
  margin: 0 0 18px;
}
.ec-scrub__title {
  margin: 30px 0 30px;
  font: 300 clamp(1.9rem, 3.4vw, 3rem)/1.24 var(--ec-font-display);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ec-ink);
}
.ec-scrub__body p {
  margin: 0 0 20px;
  font-size: clamp(.94rem, 1.05vw, 1.02rem); line-height: 1.7;
  color: color-mix(in srgb, var(--ec-ink) 82%, var(--ec-ink-soft));
}
.ec-scrub__body p:last-child { margin-bottom: 0; }

.ec-scrub__tagline {
  margin: 26px 0 0;
  font: 600 .82rem/1.85 var(--ec-font-body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ec-bronze);
}

/* ---- right: the scrubbed building ---- */

.ec-scrub__stage {
  position: relative;
  background: var(--ec-bg);
  overflow: hidden;
}
/* The clips were rendered on a white ground. Inverting luminance and swinging
   hue back 180° turns that into a night render — black ground, glass reading
   as lit windows, wireframe as bright lines — without re-rendering the footage. */
.ec-scrub__poster,
.ec-scrub__video { filter: invert(1) hue-rotate(180deg) brightness(.92); }
.ec-scrub__poster,
.ec-scrub__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.ec-scrub__video { opacity: 0; transition: opacity .25s ease; }
.ec-scrub__stage.is-painted .ec-scrub__video { opacity: 1; }
.ec-scrub__stage.is-painted .ec-scrub__poster { opacity: 0; }
.ec-scrub__poster { transition: opacity .25s ease; }

@media (max-width: 860px) {
  /* The copy alone needs ~680px of an 812px screen, so copy and building cannot
     share one pinned viewport (a 46fr/54fr split just collapsed the building to
     133px, because fr tracks still grow to fit their content). Instead the copy
     scrolls normally, then the building pins on its own and scrubs. */
  .ec-scrub { height: auto; }
  .ec-scrub__sticky {
    position: static; height: auto;
    display: block;
    padding-bottom: 62vh;             /* travel for the pinned stage below */
  }
  .ec-scrub__copy {
    padding: calc(var(--ec-header-h) + 20px) 20px 34px;
    display: block;
  }
  .ec-scrub__copy > * { max-width: none; }
  .ec-scrub__stage {
    position: sticky; top: var(--ec-header-h);
    height: 62vh;
  }
  .ec-scrub__title { margin: 22px 0 22px; }
  .ec-scrub__body p { margin-bottom: 15px; }
  .ec-scrub__tagline { margin-top: 20px; }
}

/* ==========================================================================
   Static split panel + contact form  (Contact)
   Same 43/57 split as the scrub panels, but nothing pins and there is no
   video — the right side carries the form.
   ========================================================================== */

.ec-split {
  display: grid;
  grid-template-columns: 43fr 57fr;
  min-height: 100vh;
}
.ec-split__copy {
  background: color-mix(in srgb, var(--ec-sand) 72%, var(--ec-bg));
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--ec-header-h) + 24px) clamp(28px, 5vw, 84px) clamp(40px, 6vh, 72px);
}
.ec-split__form {
  background: var(--ec-bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--ec-header-h) + 24px) clamp(24px, 4vw, 72px) clamp(40px, 6vh, 72px);
}

/* ---- contact details on the sand panel ---- */

.ec-details { margin: 30px 0 0; display: grid; gap: 22px; }
.ec-details div { display: grid; gap: 5px; }
.ec-details dt, .ec-details__label {
  font: 600 .72rem/1 var(--ec-font-body);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ec-bronze);
}
.ec-details a, .ec-details p {
  margin: 0;
  font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55;
  color: var(--ec-ink); text-decoration: none;
}
.ec-details a:hover { color: var(--ec-bronze); }

/* ---- the form ---- */

.ec-form { width: 100%; max-width: 520px; }
.ec-form__title {
  margin: 0 0 6px;
  font: 300 clamp(1.4rem, 2.2vw, 1.9rem)/1.25 var(--ec-font-display);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ec-ink);
}
.ec-form__note { margin: 0 0 26px; font-size: .92rem; color: var(--ec-ink-soft); }

.ec-field { display: grid; gap: 7px; margin-bottom: 18px; }
.ec-field label {
  font: 600 .72rem/1 var(--ec-font-body);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ec-ink-soft);
}
.ec-field input,
.ec-field select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--ec-stone) 85%, transparent);
  border-radius: 10px;
  background: var(--ec-surface);
  font: 400 .98rem/1.3 var(--ec-font-body);
  color: var(--ec-ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ec-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ec-ink-soft) 50%),
                    linear-gradient(135deg, var(--ec-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.ec-field input:focus,
.ec-field select:focus {
  outline: none;
  border-color: var(--ec-bronze);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-bronze) 22%, transparent);
}
.ec-field input[aria-invalid="true"],
.ec-field select[aria-invalid="true"] { border-color: #E07A66; }
.ec-field__error {
  min-height: 0; font-size: .8rem; color: #E07A66;
}
.ec-field__error:empty { display: none; }

/* honeypot — off-screen, never shown, catches naive bots */
.ec-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ec-form button {
  margin-top: 8px;
  padding: 14px 30px; border: 0; border-radius: 999px;
  background: var(--ec-gold-grad); color: var(--ec-on-gold);
  box-shadow: 0 6px 20px color-mix(in srgb, #D4AF5A 28%, transparent);
  font: 600 .92rem/1 var(--ec-font-body); letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .16s ease, opacity .16s ease;
}
.ec-form button:hover { filter: brightness(1.06); }
.ec-form button:disabled { opacity: .55; cursor: default; }
.ec-form button:focus-visible { outline: 2px solid var(--ec-bronze); outline-offset: 3px; }

.ec-form__status {
  margin-top: 18px; padding: 13px 16px; border-radius: 10px;
  font-size: .92rem; line-height: 1.5;
}
.ec-form__status:empty { display: none; }
.ec-form__status.is-ok {
  background: var(--ec-surface);
  border: 1px solid color-mix(in srgb, var(--ec-bronze) 50%, transparent);
  color: var(--ec-ink);
}
.ec-form__status.is-err {
  background: #221311; border: 1px solid #6E3A32; color: #F0A898;
}

@media (max-width: 860px) {
  .ec-split { grid-template-columns: 1fr; min-height: 0; }
  .ec-split__copy { padding: calc(var(--ec-header-h) + 20px) 20px 34px; }
  .ec-split__form { padding: 34px 20px 46px; }
  .ec-form { max-width: none; }
}

/* ==========================================================================
   Home page — dark hero (scroll-world engine tokens)
   Lives here rather than in an inline <style> so it rides the ?v= cache-bust;
   an inline block is only revalidated when index.html itself is, which made
   edits look like they had not applied. The --sw-* tokens are read only by
   scroll-world.js, which mounts on the home page alone.
   ========================================================================== */

:root, .sw-root {
  --sw-bg: #0A0908;          /* same black as the rest of the site */
  --sw-ink: #FFFFFF;         /* all copy */
  --sw-ink-soft: #B9AFA4;    /* warm light grey for secondary copy */
  --sw-accent: #D4AF5A;      /* gold */
  --sw-font-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sw-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Three engine components hardcode light values and would vanish now that
   --sw-ink is white: the primary button (white on var(--sw-ink)), the route
   label (white on a near-white pill), and the tag pills (a #fff ground). */
.sw-btn--primary { color: var(--ec-on-gold); background: var(--ec-gold-grad); }
.sw-btn--ghost {
  color: #fff;
  border-color: color-mix(in srgb, #fff 38%, transparent);
}
.sw-copy__tags li {
  color: color-mix(in srgb, var(--sw-accent) 80%, #fff);
  background: color-mix(in srgb, #fff 8%, transparent);
  border-color: color-mix(in srgb, var(--sw-accent) 42%, transparent);
}
.sw-route__label {
  color: #fff;
  background: color-mix(in srgb, #000 62%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}

/* The engine's own topbar is retired: the site header above is shared by all
   five pages. Its section nav is off via nav:false in the config. */
.sw-topbar { display: none; }

/* Hero copy scrim: the engine defaults to min(58vw, 780px). Hold it to 50% of
   the viewport, with the entire fade inside that width so the footage is
   untouched beyond it. Desktop only — on phones the engine switches to a
   bottom-anchored scrim that must stay as it is. */
@media (min-width: 861px) {
  .sw-copylayer::before {
    width: 50vw;
    background: linear-gradient(90deg,
      var(--sw-bg) 0%,
      color-mix(in srgb, var(--sw-bg) 88%, transparent) 42%,
      color-mix(in srgb, var(--sw-bg) 48%, transparent) 76%,
      transparent 100%);
  }
}

@media (max-width: 860px) {
  /* On phones the scroll hint collided with the tag pills
     (measured: hint 730-792 vs tags 699-731 at 375x812). */
  .sw-hint { display: none; }
}

/* ==========================================================================
   Project tiles  (Off-Plan)
   3-up grid of listing cards below the intro panel. Static HTML generated
   from work/projects.json by work/gen_tiles.py — re-run it to refresh.
   ========================================================================== */

.ec-projects {
  padding: clamp(56px, 8vh, 96px) clamp(18px, 5vw, 64px) clamp(64px, 9vh, 110px);
  background: var(--ec-bg);
}
.ec-projects__head { max-width: 640px; margin-bottom: clamp(32px, 4vh, 48px); }
.ec-projects__title {
  margin: 22px 0 0;
  font: 300 clamp(1.7rem, 3vw, 2.5rem)/1.2 var(--ec-font-display);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ec-ink);
}
.ec-projects__sub { margin: 14px 0 0; color: var(--ec-ink-soft); line-height: 1.6; max-width: 52ch; }

.ec-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.ec-tile { min-width: 0; }
.ec-tile__link {
  display: block; height: 100%;
  border-radius: 16px; overflow: hidden;
  background: var(--ec-surface);
  border: 1px solid color-mix(in srgb, var(--ec-stone) 55%, transparent);
  color: inherit; text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ec-tile__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px color-mix(in srgb, #D4AF5A 14%, transparent);
  border-color: color-mix(in srgb, var(--ec-bronze) 60%, transparent);
}
.ec-tile__link:focus-visible { outline: 2px solid var(--ec-bronze); outline-offset: 3px; }

.ec-tile__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ec-sand); }
.ec-tile__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.ec-tile__link:hover .ec-tile__media img { transform: scale(1.04); }
.ec-tile__completion {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font: 600 .72rem/1 var(--ec-font-body); letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.ec-tile__body { padding: 18px 20px 20px; }
.ec-tile__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ec-tile__dev {
  flex: none; width: 40px; height: 40px; object-fit: contain;
  border-radius: 8px; padding: 4px;
  background: #fff;                    /* colour logos need a light ground */
  border: 1px solid color-mix(in srgb, var(--ec-stone) 45%, transparent);
}
.ec-tile__head h3 {
  margin: 0; min-width: 0;
  font: 600 1.12rem/1.25 var(--ec-font-display);
  color: var(--ec-ink);
}
.ec-tile__loc { margin: 0 0 12px; font-size: .9rem; color: var(--ec-ink-soft); }
.ec-tile__price {
  margin: 0 0 12px;
  font: 600 1.05rem/1 var(--ec-font-body); color: var(--ec-ink);
}
.ec-tile__price span {
  display: block; margin-bottom: 4px;
  font: 600 .68rem/1 var(--ec-font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ec-bronze);
}
.ec-tile__types { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ec-tile__types li {
  font: 600 .74rem/1 var(--ec-font-body);
  padding: 6px 10px; border-radius: 999px;
  color: var(--ec-bronze);
  background: color-mix(in srgb, var(--ec-bronze) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ec-bronze) 40%, transparent);
}

@media (max-width: 1100px) { .ec-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ec-tiles { grid-template-columns: 1fr; } .ec-tile__body { padding: 16px; } }

/* ==========================================================================
   Home — handoff at the end of the film, and the project carousel
   ========================================================================== */

/* The engine keeps its sky / stage / copy layers position:fixed and never
   releases them, so anything placed after #world would scroll up underneath
   the video and be hidden. home.js adds .is-ended once the film's last frame
   is reached; these rules then pin those layers to the BOTTOM of #world as
   absolute boxes exactly one viewport tall — geometrically where they already
   were — so they scroll away with the page and the section below can rise.
   Scrolling back up removes the class and they snap back to fixed. */
#world { position: relative; }
#world.is-ended .sw-sky,
#world.is-ended .sw-stage,
#world.is-ended .sw-copylayer {
  position: absolute; inset: auto 0 0 0; height: 100vh;
}
#world.is-ended .sw-route,
#world.is-ended .sw-hint,
#world.is-ended .sw-scrollbar { opacity: 0; pointer-events: none; }
.sw-route, .sw-scrollbar { transition: opacity .3s ease; }

/* ---- carousel ---- */

/* The home <body> has no .ec-page class (that class also paints an alabaster
   ground, which would override the engine's dark one), so the sections that
   sit outside the engine set their own type instead of inheriting Times. */
.ec-carousel-section, .ec-footer {
  font-family: var(--ec-font-body);
  color: var(--ec-ink);
  -webkit-font-smoothing: antialiased;
}

.ec-carousel-section {
  position: relative; z-index: 2;            /* above the released engine layers */
  background: var(--ec-bg);
  padding: clamp(56px, 8vh, 96px) 0 clamp(64px, 9vh, 110px);
}
.ec-carousel-section .ec-projects__head { padding-inline: clamp(18px, 5vw, 64px); }
.ec-carousel-section .ec-wrap { padding-inline: clamp(18px, 5vw, 64px); }

.ec-carousel { position: relative; }
.ec-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);       /* two rows, columns flow sideways */
  grid-auto-columns: min(340px, 78vw);
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 6px clamp(18px, 5vw, 64px) 14px;
  scrollbar-width: none;
}
.ec-carousel__track::-webkit-scrollbar { display: none; }
.ec-carousel__track > .ec-tile { scroll-snap-align: start; }

.ec-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--ec-bg) 92%, transparent);
  color: var(--ec-ink);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--ec-ink) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ec-stone) 55%, transparent);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .16s ease, opacity .16s ease, transform .16s ease;
}
.ec-carousel__btn:hover { background: var(--ec-surface-2); }
.ec-carousel__btn:focus-visible { outline: 2px solid var(--ec-bronze); outline-offset: 3px; }
.ec-carousel__btn[disabled] { opacity: .3; cursor: default; }
.ec-carousel__btn--prev { left: clamp(6px, 1.6vw, 22px); }
.ec-carousel__btn--next { right: clamp(6px, 1.6vw, 22px); }

@media (max-width: 860px) {
  .ec-carousel__btn { display: none; }      /* touch: swipe the track directly */
  .ec-carousel__track { grid-auto-columns: 78vw; }
}

/* ==========================================================================
   Developers  (Home — sits above the project carousel)
   ========================================================================== */

.ec-developers {
  position: relative; z-index: 2;
  background: var(--ec-bg);
  font-family: var(--ec-font-body); color: var(--ec-ink);
  -webkit-font-smoothing: antialiased;
  padding: clamp(64px, 9vh, 110px) clamp(18px, 5vw, 64px) clamp(24px, 4vh, 40px);
}
.ec-developers__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: clamp(30px, 4vh, 44px);
}
.ec-developers__head .ec-projects__head { margin-bottom: 0; }

/* pill button with an arrow disc, as in the reference */
.ec-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 24px; border-radius: 999px;
  background: var(--ec-gold-grad);
  border: 1px solid transparent;
  color: var(--ec-on-gold); text-decoration: none;
  box-shadow: 0 6px 20px color-mix(in srgb, #D4AF5A 28%, transparent);
  font: 600 .84rem/1 var(--ec-font-body); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .18s ease, border-color .18s ease;
}
.ec-pill i {
  width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ec-on-gold); color: #F0D48A;
  font-style: normal; font-size: 1rem;
  transition: background-color .18s ease;
}
.ec-pill:hover { filter: brightness(1.06); }
.ec-pill:focus-visible { outline: 2px solid var(--ec-bronze); outline-offset: 3px; }

.ec-developers__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.ec-developers__tile {
  display: grid; place-items: center;
  aspect-ratio: 5 / 3;
  border-radius: 16px;
  background: var(--ec-surface);
  border: 1px solid color-mix(in srgb, var(--ec-stone) 55%, transparent);
  padding: 18px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ec-developers__tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ec-bronze) 60%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, #D4AF5A 12%, transparent);
}
.ec-developers__tile img {
  display: block; width: 100%; max-width: 150px; height: auto; max-height: 64px;
  object-fit: contain;
  filter: invert(1) brightness(1.05);   /* source marks are black-on-transparent */
}

@media (max-width: 1100px) { .ec-developers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ec-developers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
                             .ec-developers__tile { padding: 14px; } }

/* ==========================================================================
   FAQ accordion  (every page except Contact, above the footer)
   Native <details name="faq"> — accessible with no JS; browsers that support
   the name attribute keep one item open at a time, older ones allow several.
   ========================================================================== */

.ec-faq {
  position: relative; z-index: 2;
  background: var(--ec-bg);
  font-family: var(--ec-font-body); color: var(--ec-ink);
  -webkit-font-smoothing: antialiased;
  padding: clamp(64px, 9vh, 110px) clamp(18px, 5vw, 64px) clamp(72px, 10vh, 120px);
}
.ec-faq__inner {
  max-width: 1180px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.ec-faq__head { margin-bottom: clamp(22px, 3vh, 34px); }

.ec-faq__list { position: relative; }
.ec-faq__list::before,
.ec-faq__item::after {
  content: ""; display: block; height: 1px;
  background: var(--ec-gold-line); opacity: .55;
}
.ec-faq__list::before { position: absolute; left: 0; right: 0; top: 0; }

.ec-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  font: 600 clamp(1.05rem, 1.4vw, 1.22rem)/1.35 var(--ec-font-display);
  color: var(--ec-ink);
  transition: color .18s ease;
}
.ec-faq__item summary::-webkit-details-marker { display: none; }
.ec-faq__item summary:hover { color: var(--ec-bronze); }
.ec-faq__item summary:focus-visible { outline: 2px solid var(--ec-bronze); outline-offset: 4px; border-radius: 4px; }
.ec-faq__item[open] summary { color: var(--ec-bronze); }

/* the + that becomes × */
.ec-faq__item summary::after {
  content: "+"; flex: none;
  width: 28px; height: 28px; display: grid; place-items: center;
  font: 300 1.5rem/1 var(--ec-font-body);
  color: var(--ec-ink-soft);
  transition: transform .22s ease, color .18s ease;
}
.ec-faq__item[open] summary::after { transform: rotate(45deg); color: var(--ec-bronze); }

.ec-faq__answer { padding: 0 44px 26px 0; }
.ec-faq__answer p {
  margin: 0 0 12px; max-width: 70ch;
  font-size: clamp(.96rem, 1.05vw, 1.03rem); line-height: 1.7;
  color: color-mix(in srgb, var(--ec-ink) 84%, var(--ec-ink-soft));
}
.ec-faq__answer p:last-child { margin-bottom: 0; }

.ec-faq__note { margin: 18px 0 0; font-size: .82rem; color: var(--ec-ink-soft); }

/* right rail */
.ec-faq__aside { position: sticky; top: calc(var(--ec-header-h) + 16px); padding-top: 6px; }
.ec-faq__aside p {
  margin: 0 0 22px;
  font-size: clamp(.98rem, 1.1vw, 1.08rem); line-height: 1.6;
  color: color-mix(in srgb, var(--ec-ink) 84%, var(--ec-ink-soft));
}
.ec-faq__aside .ec-btn { margin-top: 0; }

@media (max-width: 960px) {
  .ec-faq__inner { grid-template-columns: 1fr; }
  .ec-faq__aside { position: static; padding-top: 6px; }
  .ec-faq__answer { padding-right: 0; }
}

/* ==========================================================================
   About — How we work / What we stand for / Visit us
   ========================================================================== */

.ec-about {
  position: relative; z-index: 2;
  background: var(--ec-bg);
  font-family: var(--ec-font-body); color: var(--ec-ink);
  -webkit-font-smoothing: antialiased;
  padding: clamp(64px, 9vh, 110px) clamp(18px, 5vw, 64px);
}
.ec-about + .ec-about { padding-top: 0; }
.ec-about__inner { max-width: 1180px; margin-inline: auto; }
.ec-about .ec-projects__head { margin-bottom: clamp(30px, 4vh, 44px); }

/* ---- how we work: numbered principle cards ---- */
.ec-principles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.ec-principle {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 16px;
  background: var(--ec-surface);
  border: 1px solid color-mix(in srgb, var(--ec-stone) 55%, transparent);
}
.ec-principle::before {            /* gold gradient hairline along the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 16px 16px 0 0;
  background: var(--ec-gold-line); opacity: .7;
}
.ec-principle__num {
  display: block; margin: 0 0 14px;
  font: 600 .74rem/1 var(--ec-font-body); letter-spacing: .22em;
  color: var(--ec-bronze);
}
.ec-principle h3 {
  margin: 0 0 10px;
  font: 600 clamp(1.15rem, 1.5vw, 1.35rem)/1.25 var(--ec-font-display);
  color: var(--ec-ink);
}
.ec-principle p {
  margin: 0; line-height: 1.65;
  font-size: clamp(.95rem, 1.03vw, 1.01rem);
  color: color-mix(in srgb, var(--ec-ink) 84%, var(--ec-ink-soft));
}

/* ---- what we stand for: three pillars from the tagline ---- */
.ec-pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.ec-pillar { padding-top: 22px; position: relative; }
.ec-pillar::before {
  content: ""; position: absolute; left: 0; top: 0; width: 54px; height: 2px;
  background: var(--ec-gold-line);
}
.ec-pillar h3 {
  margin: 0 0 12px;
  font: 300 clamp(1.4rem, 2vw, 1.8rem)/1.2 var(--ec-font-display);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ec-ink);
}
.ec-pillar p {
  margin: 0; line-height: 1.68;
  font-size: clamp(.95rem, 1.03vw, 1.01rem);
  color: color-mix(in srgb, var(--ec-ink) 84%, var(--ec-ink-soft));
}

/* ---- visit us: details + map ---- */
.ec-visit {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px); align-items: stretch;
}
.ec-visit__card {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 16px;
  background: var(--ec-surface);
  border: 1px solid color-mix(in srgb, var(--ec-stone) 55%, transparent);
  display: flex; flex-direction: column; justify-content: center;
}
.ec-visit__card .ec-details { margin-top: 0; }
.ec-visit__note {
  margin: 26px 0 0; padding-top: 20px;
  font-size: .92rem; line-height: 1.6; color: var(--ec-ink-soft);
  border-top: 1px solid color-mix(in srgb, var(--ec-stone) 55%, transparent);
}
.ec-visit__map {
  position: relative; min-height: 360px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ec-stone) 55%, transparent);
  background: var(--ec-surface);
}
.ec-visit__map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  /* Google's light tiles, pulled into the dark theme */
  filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.9);
}

@media (max-width: 960px) {
  .ec-principles { grid-template-columns: 1fr; }
  .ec-pillars { grid-template-columns: 1fr; gap: 28px; }
  .ec-visit { grid-template-columns: 1fr; }
  .ec-visit__map { min-height: 300px; }
}