/* ==========================================================================
   EK Engineers — site stylesheet
   Palette taken from the company logo: charcoal + bronze/gold on white.
   ========================================================================== */

:root {
  /* Greyscale ramp is neutral to match the logo charcoal, which has no colour cast. */
  --ink:          #1e1e1e;
  --charcoal:     #333333;  /* exact logo charcoal */
  --charcoal-dk:  #242424;
  --grey:         #6b6b6b;
  --grey-light:   #9a9a9a;
  --rule:         #e3e3e3;
  --bg:           #ffffff;
  --bg-alt:       #f6f5f3;

  --gold:         #bc986c;  /* exact logo bronze */
  --gold-dk:      #8a6a42;  /* darkened for 4.9:1 contrast on white */
  --gold-light:   #d8af7c;  /* lightened for use on dark grounds */

  --measure: 68ch;
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 1px 2px rgba(30, 30, 30, .06), 0 4px 14px rgba(30, 30, 30, .05);
  --shadow-md: 0 2px 6px rgba(30, 30, 30, .07), 0 18px 40px rgba(30, 30, 30, .09);

  --t: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gold-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 1rem;
}

.lede {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem);
  line-height: 1.6;
  color: var(--charcoal);
}

.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head p { color: var(--grey); }

.actions { margin-top: 2rem; }
.pt-0 { padding-top: 0; }

.rule-gold {
  width: 56px;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.btn--primary { background: var(--gold); color: #fff; }
.btn--primary:hover { background: var(--gold-dk); color: #fff; }

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 82px;
}

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: clamp(178px, 22vw, 240px); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  padding: .55rem .7rem;
  cursor: pointer;
  color: var(--ink);
  line-height: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
  transition: color var(--t);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.nav .btn {
  color: #fff;
  /* Wider than the base button so the gold block reads as a deliberate
     header element rather than a tight label. */
  padding: 1rem 2.5rem;
}
.nav .btn::after { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    inset: 100% 0 auto;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
  }
  .nav li { border-bottom: 1px solid var(--rule); }
  .nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .nav a { display: block; padding: 1rem 0; }
  .nav a::after { display: none; }
  .nav .btn { display: inline-flex; }
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 78vh, 760px);
  color: #fff;
  background-color: var(--charcoal-dk);
  background-image: url("../img/hero-home.jpg");
  background-size: cover;
  background-position: center 40%;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Tuned for the hero photograph, which is bright across the sky, where the old
     values were set against the near-black placeholder artwork. */
  background: linear-gradient(100deg, rgba(16, 16, 16, .88) 0%, rgba(16, 16, 16, .62) 45%, rgba(16, 16, 16, .32) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
}

.hero__content { max-width: 44rem; }

.hero .eyebrow { color: var(--gold-light); }

.hero h1 { color: #fff; margin-bottom: 1.1rem; }

.hero p {
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  line-height: 1.6;
  max-width: 38rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

/* slim hero used on interior pages */
.page-hero {
  position: relative;
  color: #fff;
  background: var(--charcoal-dk);
  overflow: hidden;
  /* Pinned height so the About and Contact banners match. Without it the banner
     is sized purely by its own copy, and the two pages drift apart as soon as one
     carries a longer heading. Sized to clear the taller of the two (About). */
  display: flex;
  align-items: center;
  min-height: clamp(360px, 24vw + 180px, 430px);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-building.svg");
  background-size: cover;
  background-position: center 35%;
  opacity: .38;
}

/* About Us carries a photograph rather than the placeholder artwork. The scrim is
   baked into the background stack instead of using opacity, so the darkening can be
   weighted to the left where the heading sits while the image stays legible. */
.page-hero--about::before {
  background-image:
    linear-gradient(100deg, rgba(16, 16, 16, .9) 0%, rgba(16, 16, 16, .72) 45%, rgba(16, 16, 16, .5) 100%),
    url("../img/hero-about.jpg");
  background-position: center 42%;
  opacity: 1;
}

/* Contact Us. This photograph is high-key — a white shirt against a pale wall — so it
   carries a heavier scrim than the About banner to keep the white heading legible. */
.page-hero--contact::before {
  background-image:
    linear-gradient(100deg, rgba(16, 16, 16, .92) 0%, rgba(16, 16, 16, .78) 45%, rgba(16, 16, 16, .58) 100%),
    url("../img/hero-contact.jpg");
  background-position: center 55%;
  opacity: 1;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.page-hero h1 { color: #fff; margin-bottom: .75rem; }
.page-hero p { color: rgba(255, 255, 255, .82); max-width: 46rem; }
.page-hero .eyebrow { color: var(--gold-light); }

/* --------------------------------------------------------------- grids -- */

.grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* ------------------------------------------------------------- values -- */

.value {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  transition: transform var(--t), box-shadow var(--t);
}
.value:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value__num {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--gold-dk);
}
.value h3 { margin: .6rem 0 .5rem; }
.value p { color: var(--grey); margin: 0; }

/* value strip on the home page (dark band) */
.values-strip { background: var(--charcoal-dk); color: rgba(255, 255, 255, .78); }
.values-strip h2, .values-strip h3 { color: #fff; }
.values-strip .value {
  background: transparent;
  border: 0;
  border-left: 2px solid rgba(188, 152, 108, .55);
  padding: .25rem 0 .25rem 1.5rem;
}
.values-strip .value:hover { transform: none; box-shadow: none; }
.values-strip .value p { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------ sectors -- */

.sector {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  background: #fff;
  border: 1px solid var(--rule);
}
.sector h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.sector h3 svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--gold); }
.sector ul { margin: 0; padding-left: 1.15rem; color: var(--grey); }
.sector li { margin-bottom: .3rem; }

/* ----------------------------------------------------------- services -- */

.service {
  padding-top: 1.4rem;
  border-top: 2px solid var(--ink);
}
/* Reserve two lines of heading so every card body starts on the same baseline,
   whatever the heading length. Without it a wrapping heading drops its paragraph
   below its row-mates. */
.service h3 { margin-bottom: .5rem; min-height: 2.3em; }
.service p { color: var(--grey); margin: 0; }

/* ------------------------------------------------------------ profile -- */

.profile {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } }

.profile__photo {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  /* The headshot backdrop is the brand charcoal, so the circle holds that colour
     while the photograph loads rather than flashing a different one. */
  background: var(--charcoal);
}
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }

.profile__role {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 1.25rem;
}

.creds {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.5rem 2rem;
}
.creds h4 {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: .6rem;
}
.creds ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.creds li { margin-bottom: .3rem; }

/* ------------------------------------------------------- project cards -- */

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.project:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 820px) { .project { grid-template-columns: 1fr; } }

.project--flip .project__media { order: 2; }
@media (max-width: 820px) { .project--flip .project__media { order: 0; } }

.project__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--charcoal-dk) url("../img/hero-building.svg") center / cover;
  overflow: hidden;
}
.project__media img { width: 100%; height: 100%; object-fit: cover; }

/* Vary the crop so the stand-in artwork doesn't read as four identical tiles.
   Each is replaced by a real photograph as they become available. */
.project:nth-of-type(2) .project__media { background-position: 12% 62%; }
.project:nth-of-type(3) .project__media { background-position: 82% 30%; }
.project:nth-of-type(4) .project__media { background-position: 45% 85%; background-size: 150%; }

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey);
}
.project__meta strong { color: var(--ink); font-weight: 600; }

.project h3 { margin-bottom: .35rem; }
.project p { color: var(--grey); }

.note {
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--gold);
  font-size: .95rem;
  color: var(--grey);
}
.note p { max-width: none; }

/* ------------------------------------------------------------ contact -- */

.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  margin: 0;
  padding: 0;
}
.contact-list dt {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: .6rem;
}
.contact-list dd {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink);
}
.contact-list dd a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); }
.contact-list dd a:hover { color: var(--gold-dk); }
.contact-list dd span { display: block; font-size: .95rem; color: var(--grey); margin-top: .35rem; }

/* --------------------------------------------------------------- cta --- */

.cta {
  background: var(--charcoal-dk);
  color: rgba(255, 255, 255, .8);
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { margin-inline: auto; }
/* .lede sets a dark colour for use on light sections, which would otherwise win
   over the light colour .cta sets on the section and leave the text unreadable. */
.cta .lede { color: rgba(255, 255, 255, .82); }

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

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  font-size: .92rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer h4 {
  color: #fff;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
/* The footer uses a light variant of the mark on a transparent ground, so it needs
   no white chip behind it. */
.site-footer__brand img { width: 210px; }
.site-footer__brand p { margin-top: 1.25rem; max-width: 22rem; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------------------ motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Print / PDF export.
   Deliberately faithful to the on-screen design so that a browser
   "Print to PDF" produces a document suitable for design review markup.
   Backgrounds must be forced on: browsers strip them from print by default. */
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .site-header { position: static; backdrop-filter: none; background: #fff; }
  .nav-toggle, .skip-link { display: none !important; }

  /* Keep blocks whole across page breaks rather than splitting mid-card. */
  .value, .sector, .service, .project, .note, .profile { break-inside: avoid; }
  .section, .hero, .page-hero { break-inside: auto; }

  /* Trim the tallest whitespace so a page fits fewer sheets, without
     changing the layout itself. */
  .section { padding-block: 2.75rem; }
  .hero { min-height: 60vh; }

  @page { margin: 12mm; }
}