/* ==========================================================================
   Wistec Engineers Pte. Ltd. - v2.0
   Single hand-authored stylesheet. No build step, no CDN.

   Contents
   1.  Reset
   2.  Design tokens
   3.  Base typography
   4.  Layout primitives
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Sections & editorial blocks
   9.  Cards (project, service, person, job)
   10. Logo walls
   11. Forms
   12. Lightbox
   13. Footer
   14. Utilities
   15. Motion preferences
   ========================================================================== */


/* 1. Reset ================================================================= */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

table { border-collapse: collapse; }


/* 2. Design tokens ========================================================= */

:root {
  /* Brand: the Wistec plum, built into a full tonal scale.
     --plum-800 is the core brand colour carried over from v1. */
  --plum-50:  #faf3f9;
  --plum-100: #f2e4f0;
  --plum-200: #e1c8de;
  --plum-300: #c79fc3;
  --plum-400: #a66ba1;
  --plum-500: #8d4489;
  --plum-600: #7d2a79;
  --plum-700: #6a1666;
  --plum-800: #580855;
  --plum-900: #3d053b;
  --plum-950: #2a0429;

  /* Neutrals carried over from the v1 site, which already used a lightly
     plum-tinted grey scale. Kept rather than replaced, so the revamp reads as
     the same company. */
  --ink:       #2b2b2b;   /* v1 */
  --ink-soft:  #4b4b4b;   /* body copy */
  --muted:     #6b6b6b;   /* v1 */
  --line:      #e8e4e8;   /* v1 */
  --line-soft: #f3f0f3;
  --surface:   #ffffff;
  --soft:      #faf8fa;   /* v1 */

  --brand:       var(--plum-800);
  --brand-hover: var(--plum-700);
  --brand-deep:  var(--plum-950);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  /* The motto only. Marcellus is drawn from Roman inscriptional capitals —
     the letterforms cut into buildings — which suits a practice that works
     on them. Deliberately not used anywhere else, so the motto stays the
     one place the company speaks in its own voice. */
  --font-display: 'Marcellus', Georgia, 'Times New Roman', serif;

  /* Spacing: 8px base */
  --s-1:  0.5rem;   /*  8 */
  --s-2:  1rem;     /* 16 */
  --s-3:  1.5rem;   /* 24 */
  --s-4:  2rem;     /* 32 */
  --s-5:  3rem;     /* 48 */
  --s-6:  4rem;     /* 64 */
  --s-7:  6rem;     /* 96 */
  --s-8:  8rem;     /* 128 */

  --container: 1180px;   /* v1 */
  --gutter: 1.25rem;

  --radius: 2px;

  --z-header: 100;
  --z-mobile-nav: 200;
  --z-lightbox: 1000;

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}


/* 3. Base typography ======================================================= */

body {
  font-family: var(--font-sans);
  /* 17px, matching the body size the v1 site already used for its running
     copy, and close to the ~18px used by Squire Mech and Cundall. */
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

/* A phrase that must not be split across lines. Used for the motto and
   other short headings where an arbitrary wrap reads as a truncation. */
.phrase { display: inline-block; }

/* The motto, set in the display face.

   The size is capped so that "We Make Dreams Happen" fits on one line inside
   the 46rem hero column. Marcellus is appreciably wider than Inter at the same
   size, and going any larger pushes that phrase onto a line of its own, which
   splits it as "We Make / Dreams Happen" — the exact break the phrase spans
   exist to prevent. On a narrow phone it does wrap, which is expected.

   max-width overrides the 16ch cap on .hero h1: that measure is derived from
   the font's "0" glyph, so it moves when the typeface does. The column itself
   is the constraint we actually want. */
.hero h1.hero__motto {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.6rem);
  letter-spacing: 0.02em;
  line-height: 1.14;
  max-width: 100%;

  /* Marcellus is drawn in a single weight, so there is no bold to switch
     to and font-weight:700 would only make the browser smear a fake one.
     A hairline stroke on the outline thickens it instead, keeping the
     letterforms intact. Measured in em so it scales with the heading, and
     currentColor so it follows the text on any background. */
  -webkit-text-stroke: 0.019em currentColor;
  paint-order: stroke fill;
}

a { color: var(--brand); }

strong { font-weight: 600; color: var(--ink); }

/* The mono eyebrow is the signature of this design: a small, precise,
   engineering-drawing label that sits above every major block. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--s-2);
}

.eyebrow--muted { color: var(--muted); }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38ch;
}

.prose p { max-width: 68ch; }
.prose p + p { margin-top: var(--s-2); }
.prose h3 { margin-top: var(--s-4); margin-bottom: var(--s-1); }

.meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


/* 4. Layout primitives ===================================================== */

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

.container--narrow { max-width: 860px; }

.section { padding-block: var(--s-6); }

@media (min-width: 768px)  { .section { padding-block: var(--s-7); } }
@media (min-width: 1200px) { .section { padding-block: var(--s-8); } }

.section--tight { padding-block: var(--s-5); }
@media (min-width: 768px) { .section--tight { padding-block: var(--s-6); } }

.section--soft  { background: var(--soft); }
.section--deep  { background: var(--brand-deep); color: rgba(255,255,255,0.78); }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep .eyebrow { color: var(--plum-300); }

.rule { height: 1px; background: var(--line); border: 0; }

/* Section heading: eyebrow + title on the left, supporting copy on the right */
.section-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s-6);
    align-items: end;
  }
  .section-head > :first-child { grid-column: 1; }
}

.section-head h2 { max-width: 18ch; }

.grid { display: grid; gap: var(--s-3); }

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6);
  }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}


/* 5. Buttons & links ======================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}

/* Buttons sit in tight rows next to navigation; keep labels on one line
   so a long label never breaks the header layout. */
.site-header .btn,
.btn-row .btn { white-space: nowrap; }

.btn--primary {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--onDark {
  background: #fff;
  color: var(--brand-deep);
  border: 1px solid #fff;
}
.btn--onDark:hover { background: var(--plum-100); border-color: var(--plum-100); }

.btn--outlineDark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.btn--outlineDark:hover { border-color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* Text link with an arrow that nudges on hover */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;          /* comfortable touch target */
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  padding-block: 0.5rem;
}
.arrow-link svg { transition: transform 0.2s var(--ease); flex: none; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.arrow-link:hover svg { transform: translateX(4px); }

/* Focus: visible on every interactive element, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--plum-500);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.section--deep :where(a, button):focus-visible { outline-color: var(--plum-300); }

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 500;
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--s-2); }


/* 6. Header / navigation =================================================== */

.topbar {
  background: var(--brand-deep);
  color: rgba(255,255,255,0.72);
  font-size: 0.8125rem;
}
.topbar__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  flex-wrap: wrap;
}
.topbar a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
}
.topbar a:hover { color: #fff; }
.topbar svg { opacity: 0.6; flex: none; }

@media (max-width: 639px) { .topbar { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 76px;
}

/* The logo artwork already contains "WISTEC ENGINEERS PTE. LTD.", so the
   header shows the lockup alone and never repeats the name as text. */
.brand-lockup {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand-lockup img {
  height: 38px;
  width: auto;
}

@media (min-width: 640px) {
  .brand-lockup img { height: 46px; }
}

.nav { display: none; }

@media (min-width: 1040px) {
  .nav { display: flex; align-items: center; gap: 0.25rem; }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav__link:hover { color: var(--brand); background: var(--plum-50); }

.nav__link[aria-current="page"],
.nav__item--active > .nav__link {
  color: var(--brand);
  font-weight: 600;
}

/* Active indicator uses an underline as well as colour, so the current
   page is not signalled by colour alone. */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav__item--active::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
}

.nav__chev { transition: transform 0.2s var(--ease); flex: none; }
.nav__item--has-menu:hover .nav__chev,
.nav__item--has-menu:focus-within .nav__chev { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px -12px rgba(23,22,27,0.16);
  padding: var(--s-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
              visibility 0.18s;
}
.nav__item--has-menu:hover .mega,
.nav__item--has-menu:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__link {
  display: block;
  padding: 0.75rem 0.875rem;
  text-decoration: none;
  border-radius: var(--radius);
}
.mega__link:hover { background: var(--plum-50); }
.mega__title { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.mega__desc  { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; margin-top: 0.125rem; }

/* "Get in touch" is a nav item rendered as a button. */
.nav__cta {
  margin-left: var(--s-2);
  min-height: 42px;
  padding: 0.625rem 1.25rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  cursor: pointer;
  color: var(--ink);
}
@media (min-width: 1040px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  display: none;
}
.mobile-nav[data-open="true"] { display: block; }

.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(23,22,27,0.45);
}

.mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(92vw, 420px);
  background: #fff;
  overflow-y: auto;
  padding: var(--s-2) var(--s-3) var(--s-5);
  display: flex;
  flex-direction: column;
  /* keep content clear of the iOS home indicator */
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  margin-bottom: var(--s-2);
}

.mobile-nav__link {
  display: block;
  padding: 0.9375rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__link[aria-current="page"] { color: var(--brand); }

.mobile-nav__sub {
  display: block;
  padding: 0.75rem 0 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__sub:hover { color: var(--brand); }

body[data-nav-open="true"] { overflow: hidden; }


/* 7. Hero ================================================================== */

.hero {
  position: relative;
  background: var(--brand-deep);
  color: #fff;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__media img[data-active="true"] { opacity: 1; }

/* The photograph is the point. Instead of flooding it with brand colour, a
   neutral scrim weighted to the left keeps the headline legible while the
   right-hand side of the image stays true. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(14,10,14,0.80) 0%, rgba(14,10,14,0.58) 38%,
                              rgba(14,10,14,0.18) 68%, rgba(14,10,14,0.06) 100%),
    linear-gradient(to top, rgba(14,10,14,0.42), transparent 42%);
}

.hero__inner {
  position: relative;
  padding-block: clamp(4rem, 10vw, 8.5rem);
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
}

.hero__content { max-width: 46rem; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .eyebrow { color: var(--plum-300); }

.hero__text {
  margin-top: var(--s-3);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
}

/* Credibility strip. Sits below the hero on a light band rather than over the
   photograph, so the image runs uninterrupted to the fold. */
.hero__stats {
  position: relative;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
  .hero__stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stat {
  padding: var(--s-3) 0;
  padding-right: var(--s-3);
}
@media (min-width: 700px) {
  .stat { padding-block: var(--s-4); }
  .stat + .stat { border-left: 1px solid var(--line); padding-left: var(--s-4); }
}
.stat__value {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* Interior page hero */
.page-hero {
  position: relative;
  background: var(--brand-deep);
  color: #fff;
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14,10,14,0.78) 0%,
                                        rgba(14,10,14,0.52) 55%,
                                        rgba(14,10,14,0.22) 100%);
}
.page-hero__inner {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .eyebrow { color: var(--plum-300); }
.page-hero__text {
  margin-top: var(--s-3);
  color: rgba(255,255,255,0.8);
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--s-3);
}
.breadcrumb a { color: rgba(255,255,255,0.8); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb__sep { opacity: 0.5; }


/* 8. Sections & editorial blocks =========================================== */

.figure-frame {
  position: relative;
  background: var(--soft);
  overflow: hidden;
}
.figure-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Several photographs in the archive are only ~480px wide, because they were
   originally embedded in a Word document at display size. Cap the frame so
   they are never scaled up past their native width and go soft. */
.figure-frame--cap {
  max-width: 520px;
  margin-inline: auto;
}

.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* Numbered list used for the "how we work" stages */
.stage-list { counter-reset: stage; display: grid; gap: 1px; background: var(--line); }
@media (min-width: 700px)  { .stage-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stage-list { grid-template-columns: repeat(4, 1fr); } }

.stage {
  counter-increment: stage;
  background: var(--surface);
  padding: var(--s-3);
}
.stage::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--brand);
  margin-bottom: 0.75rem;
}
.stage h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.stage p { font-size: 1rem; color: var(--muted); }

/* Definition-style facts list */
.facts { display: grid; gap: 0; }
.fact {
  display: grid;
  gap: 0.25rem;
  padding-block: var(--s-2);
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
  .fact { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-3); }
}
.fact__key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.1875rem;
}
.fact__val { color: var(--ink); }

.callout {
  background: var(--plum-50);
  border-left: 3px solid var(--brand);
  padding: var(--s-3);
}
.callout p { color: var(--ink-soft); }

.cta-band { background: var(--brand-deep); color: #fff; }
.cta-band__inner {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-6);
    padding-block: var(--s-7);
  }
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,0.78); margin-top: var(--s-2); max-width: 52ch; }
.cta-band .btn-row { margin-top: 0; }


/* 9. Cards ================================================================= */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  text-decoration: none;
  height: 100%;
}

/* Project tile. Not a link - projects have no pages of their own. */
.project-card { margin: 0; }
.project-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--soft);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__body { padding: 0.875rem 0 0; display: grid; gap: 0.3125rem; }
.project-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.project-card__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Sector card on the projects index */
.sector-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  text-decoration: none;
  background: var(--surface);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
  height: 100%;
}
.sector-card:hover { border-color: var(--brand); background: var(--plum-50); }
.sector-card h3 { font-size: 1.125rem; }
.sector-card p { font-size: 1rem; color: var(--muted); margin-top: 0.5rem; }

/* Service card */
.service-card {
  padding: var(--s-3);
  border-top: 2px solid var(--ink);
  background: var(--surface);
  height: 100%;
}
.service-card--feature { border-top-color: var(--brand); }
.service-card__icon { color: var(--brand); margin-bottom: var(--s-2); }
.service-card h3 { font-size: 1.125rem; margin-bottom: 0.625rem; }
.service-card p { font-size: 1rem; color: var(--muted); }

.service-card__list {
  margin-top: var(--s-2);
  display: grid;
  gap: 0.4375rem;
}
.service-card__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5625rem;
  width: 6px;
  height: 1px;
  background: var(--brand);
}

/* Person card - typographic, no photograph */
.person {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .person { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); }
}

/* Director portrait. The three photographs arrive at slightly different
   proportions, so the frame fixes the aspect and object-fit does the framing
   rather than cropping the files themselves — which keeps the originals
   intact and avoids guessing where a head sits. Anchored towards the top,
   because that is where faces are in a standing portrait. */
.person__photo {
  width: 100%;
  max-width: 260px;
  /* height:auto is what lets aspect-ratio take effect. Without it the
     height attribute on the tag wins and the frame stretches. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius);
  margin-bottom: var(--s-3);
  background: var(--plum-50);
}

/* The lead team photograph, full container width. */
.team-lead {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft);
}
.team-lead img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 900px) {
  /* Shallower on a wide screen: at full 4:3 the photograph would push the
     copy below it off the first view. */
  .team-lead img { aspect-ratio: 21 / 9; }
}

/* The supporting shots. A four-across strip on desktop, two on a phone —
   never one, because a single column of party photographs reads as filler. */
.team-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
@media (min-width: 768px) {
  .team-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.team-strip figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft);
}
.team-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.person__monogram {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  background: var(--plum-50);
  border: 1px solid var(--plum-200);
  color: var(--brand);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-2);
}

.person__name { font-size: 1.375rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.person__role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 0.375rem;
}
.person__quals { font-size: 0.8125rem; color: var(--muted); margin-top: 0.625rem; line-height: 1.55; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-top: var(--s-2); }
.chip {
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  /* labels wrap rather than truncate */
  white-space: normal;
}

/* Team roster (non-director staff) */
.roster { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px)  { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .roster { grid-template-columns: repeat(3, 1fr); } }
.roster__item { background: var(--surface); padding: var(--s-2) var(--s-3); }
.roster__name { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.roster__role { font-size: 0.8125rem; color: var(--muted); margin-top: 0.125rem; }

/* Filter chips on the projects page */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s-4);
}
.filter {
  min-height: 44px;
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
  white-space: normal;
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.filter__count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  opacity: 0.7;
  margin-left: 0.375rem;
}


/* 10. Logo walls =========================================================== */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 560px)  { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.logo-wall__cell {
  background: var(--surface);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: var(--s-2);
}
.logo-wall__cell img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.logo-wall__cell:hover img { filter: grayscale(0); opacity: 1; }

.name-list {
  columns: 1;
  column-gap: var(--s-5);
  font-size: 0.9375rem;
}
@media (min-width: 640px)  { .name-list { columns: 2; } }
@media (min-width: 1000px) { .name-list { columns: 3; } }
.name-list li {
  break-inside: avoid;
  padding-block: 0.4375rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}


/* 11. Forms ================================================================ */

.form { display: grid; gap: var(--s-3); }

.field { display: grid; gap: 0.4375rem; }

.field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.field__req { color: var(--brand); margin-left: 0.125rem; }

.field__hint { font-size: 0.8125rem; color: var(--muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1rem; /* 16px prevents iOS zoom on focus */
  color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--plum-100);
}

.field--error input,
.field--error select,
.field--error textarea { border-color: #b3261e; }

/* Errors carry an icon and text, never colour alone */
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #b3261e;
}
.field__error svg { flex: none; margin-top: 0.1875rem; }

.form-alert {
  display: flex;
  gap: 0.75rem;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.form-alert svg { flex: none; margin-top: 0.1875rem; }
.form-alert--error   { background: #fdeceb; border: 1px solid #f3c2bf; color: #8c1d18; }
.form-alert--success { background: var(--plum-50); border: 1px solid var(--plum-200); color: var(--plum-900); }
.form-alert a { color: inherit; }
.form-alert__list { margin-top: 0.5rem; display: grid; gap: 0.25rem; padding-left: 1.125rem; list-style: disc; }
.form-alert__list a { font-weight: 600; }

/* Cloudflare Turnstile sits just above the submit button. It usually
   renders nothing at all, so this only reserves room when it does. */
.form__turnstile { margin-bottom: var(--s-3); }
.form__turnstile:empty { display: none; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 640px) {
  .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
}

.contact-panel {
  background: var(--soft);
  padding: var(--s-3);
  border: 1px solid var(--line);
}
@media (min-width: 768px) { .contact-panel { padding: var(--s-4); } }

.contact-list { display: grid; gap: 0; }
.contact-item { padding-block: var(--s-2); border-top: 1px solid var(--line); }
.contact-item:first-child { border-top: 0; padding-top: 0; }
.contact-item__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.375rem;
}
.contact-item__value { color: var(--ink); line-height: 1.6; }
.contact-item__value a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-item__value a:hover { color: var(--brand); text-decoration: underline; }

/* Compact service list for the home page - a summary, not the full detail */
.svc-mini {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .svc-mini { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .svc-mini { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.svc-mini__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--surface);
  padding: var(--s-3);
  min-height: 76px;
  text-decoration: none;
  transition: background-color 0.15s var(--ease);
}
.svc-mini__item:hover { background: var(--plum-50); }
.svc-mini__icon { color: var(--brand); flex: none; }
.svc-mini__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.svc-mini__item:hover .svc-mini__title { color: var(--brand); }

/* ---- Services page: compact cards that list their sub-systems ------------ */
.svc-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1050px) { .svc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* No height:100% - each card hugs its own list, which removes the dead space
   under the shorter groups. */
.svc-card {
  border: 1px solid var(--line);
  background: var(--surface);
}

/* Head is a compact band. With a photograph it becomes the image strip. */
.svc-card__head {
  position: relative;
  padding: var(--s-3);
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.svc-card--photo .svc-card__head { min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; }
.svc-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.svc-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,10,14,0.84), rgba(14,10,14,0.28));
}
.svc-card__icon { position: relative; display: block; color: var(--brand); margin-bottom: 0.625rem; }
.svc-card__title {
  position: relative;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.svc-card--photo .svc-card__icon,
.svc-card--photo .svc-card__title { color: #fff; }

.svc-card__list { padding: var(--s-2) var(--s-3) var(--s-3); display: grid; gap: 0; }
.svc-card__list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.svc-card__list li:last-child { border-bottom: 0; }
.svc-card__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.9375rem;
  width: 5px; height: 1px; background: var(--brand);
}

/* Service group card: a photograph with the title over it. Falls back to a
   plum panel when no image has been supplied yet, so nothing looks broken. */
.svc {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--plum-900);
  text-decoration: none;
  color: #fff;
}
.svc img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.svc:hover img { transform: scale(1.04); }
.svc__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,10,14,0.82) 0%, rgba(14,10,14,0.35) 55%, rgba(14,10,14,0.12) 100%);
}
/* Until a photograph is supplied, the card is a light panel rather than a
   block of brand colour - six solid plum rectangles would dominate the page. */
.svc--noimage {
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
}
.svc--noimage .svc__scrim { display: none; }
.svc--noimage .svc__body {
  inset: 0;
  align-items: flex-end;
  padding: var(--s-3);
}
.svc--noimage .svc__title { color: var(--ink); }
.svc--noimage .svc__icon  { color: var(--brand); }
.svc--noimage .svc__count { color: var(--muted); }
.svc--noimage:hover { border-color: var(--brand); background: var(--plum-50); }
.svc__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
}
.svc__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
  max-width: 20ch;
}
.svc__count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.svc__icon { color: #fff; margin-bottom: 0.625rem; opacity: .9; }

/* Plain list of sub-systems on a service detail page */
.subsystems { display: grid; gap: 0; }
.subsystem {
  padding-block: 0.6875rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.subsystem:first-child { border-top: 0; }

/* "Also completed" text list on a sector page */
.also-list {
  columns: 1;
  column-gap: var(--s-5);
}
@media (min-width: 700px)  { .also-list { columns: 2; } }
@media (min-width: 1050px) { .also-list { columns: 3; } }
.also-list li {
  break-inside: avoid;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* A sector block on the Projects index: heading, then a scrolling photo rail */
.sector-block__head {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .sector-block__head {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: var(--s-4);
  }
}
.sector-block__title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.sector-block__title a { color: var(--ink); text-decoration: none; }
.sector-block__title a:hover { color: var(--brand); }

.stack-5 > * + * { margin-top: var(--s-6); }

/* Chip that is a link (sector switcher) */
.chip--link {
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.chip--link:hover { border-color: var(--brand); background: var(--plum-50); color: var(--brand); }

/* Horizontally scrollable photo rail for a sector card */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-1);
  scrollbar-width: thin;
}
@media (min-width: 700px)  { .rail { grid-auto-columns: 42%; } }
@media (min-width: 1050px) { .rail { grid-auto-columns: 30%; } }
.rail > * { scroll-snap-align: start; }

/* Footer contact rows with icons */
.footer-contact { display: grid; gap: 0; }
.footer-contact__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.5rem;
  min-height: 44px;
}
.footer-contact__row svg { flex: none; margin-top: 0.3125rem; opacity: 0.55; }
.footer-contact__row a { text-decoration: none; }

/* Contact page: pre-addressed email links, in place of a server-side form. */
.enquiry-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  background: var(--surface);
  padding: var(--s-2) var(--s-3);
  min-height: 44px;
  text-decoration: none;
  transition: background-color 0.15s var(--ease);
}
.enquiry-link:hover { background: var(--plum-50); }
.enquiry-link__label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
}
.enquiry-link__text {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.125rem;
  line-height: 1.5;
}
.enquiry-link__icon { color: var(--brand); flex: none; }
.enquiry-link:hover .enquiry-link__icon { transform: translateX(3px); }
.enquiry-link__icon { transition: transform 0.2s var(--ease); }

.map-frame {
  border: 1px solid var(--line);
  background: var(--soft);
  height: clamp(280px, 42vw, 460px);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }


/* 12. Lightbox ============================================================= */

.gallery {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gallery__item {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--soft);
  cursor: zoom-in;
  padding: 0;
  width: 100%;
  border: 0;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.gallery__item:hover img { transform: scale(1.03); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(15,3,15,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
}
.lightbox[data-open="true"] { display: flex; }

.lightbox__img {
  max-width: min(1400px, 94vw);
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(var(--s-3), env(safe-area-inset-bottom));
  text-align: center;
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  padding-inline: var(--s-3);
}
.lightbox__count { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6; display: block; margin-top: 0.25rem; }

.lightbox__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,0.22); }
.lightbox__close { top: var(--s-3); right: var(--s-3); }
.lightbox__prev  { left: var(--s-2); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--s-2); top: 50%; transform: translateY(-50%); }


/* 13. Footer =============================================================== */

/* The footer carries the company logo in its original purple-and-gradient
   artwork, so it sits on a light ground rather than the deep plum band used
   previously. Plum becomes the accent here: the rule above, the section
   labels, the motto and link hovers. */
.site-footer {
  background: var(--soft);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  border-top: 3px solid var(--brand);
}

.site-footer__main {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
}
@media (min-width: 900px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
    gap: var(--s-6);
  }
}

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-2);
}

.site-footer a { color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.footer-links { display: grid; gap: 0.125rem; }
.footer-links a { display: block; min-height: 44px; padding-block: 0.6875rem; }

/* The original logo artwork, sitting on the light footer ground. */
.footer-brand img {
  height: 42px;
  width: auto;
  margin-bottom: var(--s-3);
}
.footer-motto {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  color: var(--brand);
  margin-bottom: var(--s-2);
}
.footer-brand p { max-width: 42ch; line-height: 1.7; }

.site-footer__bottom {
  border-top: 1px solid var(--line);
  padding-block: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer-address { font-style: normal; line-height: 1.8; }
.footer-fax { opacity: 0.7; margin-top: 0.375rem; }

.credit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
.credit img { height: 16px; width: auto; opacity: 0.75; }


/* 14. Utilities ============================================================ */

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

.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }

.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }

.text-muted { color: var(--muted); }
.text-sm { font-size: 0.875rem; }

.is-hidden { display: none !important; }

.empty-state {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
}


/* 15. Motion preferences =================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media img { transition: none; }
  .project-card:hover .project-card__media img,
  .gallery__item:hover img { transform: none; }
}

/* Website version, in the footer bottom bar. Set in includes/config/app.php. */
.site-version {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-left: 0.5rem;
  padding-left: 0.625rem;
  border-left: 1px solid rgba(255,255,255,0.2);
  opacity: 0.8;
}


/* 16. Print =================================================================
   Used when someone prints a page, and when the site is exported to PDF for
   review. Without print-color-adjust the browser drops every background,
   which turns the plum bands and the hero into white boxes. */

@media print {

  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* A sticky header repeats over the content on every printed sheet. */
  .site-header { position: static; }

  /* Screen-only furniture. */
  .mobile-nav,
  .lightbox,
  .nav-toggle,
  .rail__hint,
  .to-top { display: none !important; }

  /* Horizontal photo rails scroll on screen; on paper they must wrap so no
     project is cut off the edge of the sheet.
     grid-auto-flow and grid-auto-columns both have to be reset: on screen the
     rail flows items into implicit 30%-wide columns, which would otherwise
     keep running off the side of the page whatever the template says. */
  .rail {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    gap: var(--s-2);
  }

  /* Never split a card, a person or a statistic across two sheets. */
  .project-card,
  .service-card,
  .person-card,
  .job-card,
  .stat,
  .logo-wall__cell,
  figure { break-inside: avoid; page-break-inside: avoid; }

  section { break-inside: auto; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Links are not clickable on paper; the underline just adds noise. */
  a { text-decoration: none; }

  @page { margin: 12mm; }
}