/* ==========================================================================
   SEZIBERA CONSTRUCTION
   Light editorial design system.
   Warm paper ground, high-contrast serif display, geometric sans copy,
   near-black ink with a single warm-stone accent. Hairline rules, wide air.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Jost:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Ground */
  --paper: #f7f6f3;          /* page background, warm off-white */
  --paper-sunk: #f1efea;     /* recessed panels, form fields */
  --band: #17181a;           /* dark hero band */
  --band-deep: #101113;

  /* Ink */
  --ink: #17181a;            /* display headings */
  --ink-body: #55585d;       /* body copy */
  --ink-mute: #8b8e93;       /* captions, meta */

  /* The one accent — warm stone */
  --accent: #7d7266;
  --accent-deep: #574f45;

  /* Semantic, used only for form submission feedback */
  --ok: #3f6b52;
  --error: #9c3328;

  /* Rules */
  --line: rgba(23, 24, 26, 0.14);
  --line-soft: rgba(23, 24, 26, 0.08);
  --line-invert: rgba(255, 255, 255, 0.16);

  /* Type */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Avenir Next', Avenir, 'Century Gothic', 'Helvetica Neue', sans-serif;

  /* Layout */
  --maxwidth: 78rem;
  --measure: 40rem;
  --gutter: 1.5rem;

  /* Rhythm — generous, Squarespace-editorial */
  --space-xs: 1rem;
  --space-sm: 2rem;
  --space-md: 3.5rem;
  --space-lg: 5rem;
  --space-xl: 7rem;

  --ease: cubic-bezier(0.33, 0.02, 0.14, 1);

  scroll-behavior: smooth;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 3rem;
    --space-md: 4.5rem;
    --space-lg: 7rem;
    --space-xl: 9.5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --gutter: 4.5rem;
    --space-lg: 8rem;
    --space-xl: 11rem;
  }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

blockquote, body, dd, dl, figcaption, figure,
h1, h2, h3, h4, li, ol, p, ul { margin: 0; }

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

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

/* Intrinsic width/height are set in the markup so the browser reserves the
   space before an image arrives. These two keep them fluid regardless. */
img { display: block; max-width: 100%; height: auto; }

/* Anchored targets clear the sticky masthead instead of hiding beneath it */
:target,
[id] { scroll-margin-top: 7rem; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

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

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

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

.section    { padding-block: var(--space-lg); }
.section-sm { padding-block: var(--space-md); }
.section-lg { padding-block: var(--space-xl); }

.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }

/* Hairline separator between editorial blocks — the reference's key device */
.hairline {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 0;
}

.center { text-align: center; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.005em;
}

/* Hero display, as on the reference band and about-page statement */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.75rem, 7.5vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.display-sm {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.h-section {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 400;
}

.h-block {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
}

/* Accent eyebrow — the reference's small tracked caps above a heading */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

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

/* Small bold label sitting on a hairline, used for the services row */
.label {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-body);
}

p + p { margin-top: 1.125rem; }

.body-copy { font-size: 1rem; line-height: 1.78; color: var(--ink-body); }
.small { font-size: 0.875rem; line-height: 1.7; color: var(--ink-mute); }

/* Pull quote — centred serif with tracked caps attribution */
.pullquote {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
}
.pullquote p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.3;
  color: var(--ink);
}
.pullquote cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. LINKS & BUTTONS
   -------------------------------------------------------------------------- */

/* Accent caps link with a trailing marker, as on "BOOK AN APPOINTMENT ▸" */
.link-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-accent::after { content: "\25B8"; font-size: 0.75em; line-height: 1; }
.link-accent:hover { color: var(--accent-deep); gap: 0.85rem; }

.link-underline {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--ease);
}
.link-underline:hover { border-color: var(--ink); }

/* Outlined rectangle button — the reference's "LEARN MORE" / "SUBMIT" */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 1.75rem;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }

.btn-invert { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-invert:hover { background: #fff; color: var(--ink); }

/* --------------------------------------------------------------------------
   6. MASTHEAD — phone left, centred mark, lowercase nav right
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

/* Phones first: three equal-ish columns cannot hold a 16-character number
   beside the mark, so the row is a simple flex strip here and only becomes
   the symmetric grid — phone left, mark dead centre — once there is room. */
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.masthead-phone {
  justify-self: start;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  /* The number is one thing to read and one thing to tap — never two lines */
  white-space: nowrap;
  color: var(--accent);
  transition: color 0.3s var(--ease);
}
.masthead-phone:hover { color: var(--accent-deep); }

.masthead-logo { justify-self: center; }
.masthead-logo img { height: 40px; width: auto; }

.masthead-end {
  justify-self: end;
  display: flex;
  align-items: center;
}

.primary-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
}

.primary-nav a {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.primary-nav a:hover { color: var(--accent); }
.primary-nav a[aria-current="page"] { color: var(--accent); }

.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
}
.nav-burger span {
  display: block;
  width: 1.25rem;
  height: 1px;
  margin-left: auto;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: var(--paper);
  padding: 7.5rem var(--gutter) var(--space-md);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.nav-panel.open { opacity: 1; visibility: visible; }

.nav-panel-links { display: flex; flex-direction: column; }
.nav-panel-links a {
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--ink);
}

.nav-panel-foot {
  margin-top: var(--space-sm);
  display: grid;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--ink-mute);
}
.nav-panel-foot .accent { color: var(--accent); font-weight: 500; }

/* --------------------------------------------------------------------------
   7. HERO — completed building behind a matte black sheet, logo centred on it
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(30rem, 80vh, 44rem);
  padding-block: var(--space-lg);
  text-align: center;
  overflow: hidden;
  background: var(--band-deep);
}

.hero-media { position: absolute; inset: 0; }

/* Full colour. No contrast boost either — that existed only to reopen the
   midtones desaturation had collapsed, and on a colour frame it just clips
   the highlights. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* The matte black translucent sheet — deepest at the edges so the centred
   logo always sits on the darkest part of the frame, whatever the crop.
   Lighter than it would need to be in colour: mono imagery competes far
   less with white type, so the building is allowed to stay legible. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(14, 15, 17, 0.30) 0%, rgba(14, 15, 17, 0.68) 100%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.52) 0%, rgba(14, 15, 17, 0.38) 45%, rgba(14, 15, 17, 0.74) 100%);
}

.hero-inner { position: relative; z-index: 1; }

/* The hero makes the claim; the masthead carries the identity. No wordmark
   or eyebrow here — either would only repeat the logo sitting directly
   above it, and the title reads stronger as the first thing on the frame. */
.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
}

/* Each sentence is its own span rather than a <br>: on phones they stay
   inline and wrap naturally on the real space between them, and only get
   their own line once there is room for both. A hidden <br> would have
   glued "certainty.Delivered" into one unbreakable word. */
.hero-title span { display: inline; }
@media (min-width: 34rem) {
  .hero-title span { display: block; }
}

.hero-sub {
  margin: 2rem auto 0;
  max-width: 34rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.hero-actions { margin-top: 2.5rem; }

.hero-plate figcaption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* Inner-page header: eyebrow + big centred statement on paper */
.page-head {
  text-align: center;
  padding-block: var(--space-lg) var(--space-md);
}
.page-head .display,
.page-head .display-sm { margin-top: 1.5rem; }
.page-head p {
  margin-top: 1.75rem;
  margin-inline: auto;
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   8. SPLIT — wide intro column + narrow sidebar (reference home + about)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.split-body > * + * { margin-top: 1.25rem; }
.split-body .h-block + p { margin-top: 1.75rem; }
.split-body .btn { margin-top: 2.25rem; }

.aside-block + .aside-block { margin-top: 2rem; }

.aside-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.aside-value {
  margin-top: 0.875rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.9;
  color: var(--ink-body);
}
.aside-value a { transition: color 0.3s var(--ease); }
.aside-value a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. SERVICE ROW — columns bracketed by hairlines
   -------------------------------------------------------------------------- */

.svc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 3rem;
  margin-top: var(--space-md);
}

.svc-item {
  padding-block: 1.125rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-item p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.7; }
.svc-item .link-accent { margin-top: 1rem; }

/* Numbered capability list used on the services page */
.capability-list { margin-top: var(--space-md); }

.capability {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 3rem;
  padding-block: 2.25rem;
  border-top: 1px solid var(--line);
}
.capability:last-child { border-bottom: 1px solid var(--line); }

.capability-index {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.capability h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
.capability ul { margin-top: 1.125rem; display: grid; gap: 0.5rem; }
.capability li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  color: var(--ink-body);
}
.capability li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   9b. PEOPLE — name and role, set as a hairline register rather than cards
   -------------------------------------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 3rem;
  margin-top: var(--space-md);
}

.person {
  padding-block: 1.125rem;
  border-top: 1px solid var(--line);
}
.person:last-child { border-bottom: 1px solid var(--line); }

.person strong {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
}
.person span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--accent);
}

/* Sector chips — the markets the profile says are already served */
.sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}
.sectors li {
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-body);
}

/* --------------------------------------------------------------------------
   10. ACCORDION — hairline rows with a thin +/- marker
   -------------------------------------------------------------------------- */

.accordion { margin-top: var(--space-md); }

.accordion-item { border-top: 1px solid var(--line); }
.accordion-item:last-child { border-bottom: 1px solid var(--line); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.625rem;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  font-weight: 400;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.accordion-trigger:hover { color: var(--accent); }

.accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.accordion-icon::before { width: 14px; height: 1px; }
.accordion-icon::after  { width: 1px; height: 14px; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.accordion-panel > div { overflow: hidden; }
.accordion-item.open .accordion-panel { grid-template-rows: 1fr; }

.accordion-panel .inner { padding-bottom: 2rem; max-width: 44rem; }
.accordion-panel p { font-size: 0.9375rem; line-height: 1.78; }
.accordion-panel ul { margin-top: 1.125rem; display: grid; gap: 0.5rem; }
.accordion-panel li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  color: var(--ink-body);
}
.accordion-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   11. IMAGERY — portrait figure, gallery, wide plate
   -------------------------------------------------------------------------- */

.figure { margin-inline: auto; max-width: 20rem; }
.figure img { width: 100%; }
.figure figcaption { margin-top: 0.875rem; text-align: center; font-size: 0.8125rem; color: var(--ink-mute); }

.plate { position: relative; overflow: hidden; }
.plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: var(--space-md);
}

.gallery figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.gallery figure { overflow: hidden; }
.gallery figure > a,
.gallery figure > div { display: block; overflow: hidden; }
.gallery figure:hover img { transform: scale(1.035); }

.gallery figcaption { margin-top: 1rem; }
.gallery figcaption .label { margin-bottom: 0.35rem; }
.gallery figcaption p { font-size: 0.875rem; line-height: 1.7; color: var(--ink-body); }

/* Project meta strip */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 3.5rem;
  margin-top: var(--space-sm);
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.meta-row dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.meta-row dd { margin: 0.4rem 0 0; font-size: 1rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   12. CAROUSEL — light chrome, thin arrows, pill dots
   -------------------------------------------------------------------------- */

.carousel { margin-top: var(--space-md); }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.7s var(--ease); will-change: transform; }
.carousel-slide { flex: 0 0 100%; min-width: 0; }

.carousel-slide figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.carousel-slide figcaption {
  margin-top: 1.25rem;
  text-align: center;
}
.carousel-slide figcaption h3 { margin-top: 0.5rem; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.carousel-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink);
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.carousel-arrow svg { width: 1.875rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1; }
.carousel-arrow:hover:not(:disabled) { color: var(--accent); }
.carousel-arrow:disabled { color: var(--ink-mute); opacity: 0.4; cursor: default; }

.carousel-dots { display: flex; align-items: center; gap: 0.5rem; }
.carousel-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  padding: 0;
  border-radius: 999px;
  background: rgba(23, 24, 26, 0.22);
  transition: width 0.4s var(--ease), background-color 0.4s var(--ease);
}
.carousel-dot[aria-selected="true"] { width: 1.75rem; background: var(--accent); }

/* --------------------------------------------------------------------------
   12c. PROJECT BROWSER — one project at a time, with the register as its index
   -------------------------------------------------------------------------- */

.browser { margin-top: var(--space-md); }

/* Without JavaScript every project simply stacks and stays readable. */
.pv-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.pv-item + .pv-item { margin-top: var(--space-md); }

.js .pv-item { display: none; }
.js .pv-item.is-active { display: grid; }
.js .pv-item + .pv-item { margin-top: 0; }

.pv-media { overflow: hidden; }
.pv-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Title card for projects whose photograph has not been identified yet.
   Deliberate rather than empty — and never a photo of a different building
   captioned as this one. */
.pv-plate {
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  gap: 0.875rem;
  padding: 2rem;
  text-align: center;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
}
.pv-plate strong {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
}
.pv-plate span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.pv-body h3 {
  margin-top: 0.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
}
.pv-body > p { margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.75; }

.pv-meta {
  margin-top: 1.75rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.125rem;
}
.pv-meta dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.pv-meta dd { margin: 0.3rem 0 0; font-size: 1rem; color: var(--ink); }

.pv-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: var(--space-sm);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.pv-count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pv-count b { color: var(--ink); font-weight: 600; }

.pv-nav { display: flex; align-items: center; gap: 0.75rem; }

.pv-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.pv-arrow svg { width: 1.875rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.1; }
.pv-arrow:hover { color: var(--accent); gap: 1rem; }
.pv-arrow-label { display: none; }

/* Register rows double as the browser's index */
.project-jump {
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
  transition: color 0.3s var(--ease);
}
.project-jump:hover { color: var(--accent); }

.project-row { transition: opacity 0.3s var(--ease); }
.js .project-row.is-current .capability-index { color: var(--ink); }
.js .project-row.is-current .project-jump { color: var(--accent); }

/* --------------------------------------------------------------------------
   13. NOTICE — quiet inset for "content not supplied yet"
   -------------------------------------------------------------------------- */

.notice {
  padding: 1.375rem 1.5rem;
  background: var(--paper-sunk);
  border-left: 2px solid var(--accent);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink-body);
}
.notice a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   14. FORM — the reference's "Let's Chat." block
   -------------------------------------------------------------------------- */

.form-block {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.form-block > p { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.8; }

.form {
  display: grid;
  gap: 1.5rem;
  margin-top: var(--space-sm);
  text-align: left;
}

.form-legend {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--ink);
  padding-bottom: 0.5rem;
}

.form-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.8125rem; font-weight: 400; color: var(--ink-body); }
.field label .req { color: var(--ink-mute); font-size: 0.75rem; }
.field .hint { font-size: 0.75rem; color: var(--ink-mute); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.3s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 8.5rem; resize: vertical; }

.form-note { font-size: 0.8125rem; color: var(--ink-mute); }
.form-note a { border-bottom: 1px solid currentColor; }

/* Submission states. Semantic colours, kept desaturated so they sit on the
   paper ground without fighting the stone accent. */
.form-note.is-ok    { color: var(--ok); }
.form-note.is-error { color: var(--error); }

/* Honeypot: reachable by bots that fill every field, invisible and
   unreachable for anyone using the form as intended. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.btn:disabled { opacity: 0.55; cursor: progress; }

/* Contact detail rows (contact page) */
.contact-rows dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-rows dd { margin: 0.5rem 0 0; font-size: 1.0625rem; color: var(--ink); }
.contact-rows > div {
  padding-block: 1.375rem;
  border-top: 1px solid var(--line);
}
.contact-rows > div:last-child { border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   15. CTA PAIR — two quiet columns above the footer
   -------------------------------------------------------------------------- */

.cta-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--line);
}
.cta-pair h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cta-pair p { margin-top: 0.75rem; font-size: 0.9375rem; }
.cta-pair .btn { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   15b. LOADER — the mark's six bars, animated as the waveform they already are
   -------------------------------------------------------------------------- */

/* Hidden by default: without JavaScript this must never cover the page. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
}

/* With JavaScript it is visible from the first paint, then faded out.
   The animation is a failsafe: if script.js never runs, the overlay clears
   itself after six seconds rather than trapping the visitor behind it.
   script.js cancels it as soon as it takes control. */
.js .loader {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
  animation: loader-failsafe 0s linear 4.5s forwards;
}
.js .loader.is-hidden { opacity: 0; visibility: hidden; }

@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* The gap here is the tight one — track to counter, which belong together as a
   single readout. The mark keeps its original distance via the track's own
   margin, so pulling the number in does not drag the logo down with it. */
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.loader-mark {
  width: clamp(6.5rem, 13vw, 9.5rem);
  height: auto;
  color: var(--ink);
  overflow: visible;
}

/* A hairline that fills — the same rule that separates every section on the
   site, put to work as the progress track. Kept to roughly two-thirds of the
   mark above it: a track wider than the logo it belongs to reads as the main
   event, when it is only there to account for the wait. */
.loader-track {
  position: relative;
  margin-top: 1.125rem;    /* + the 0.75rem gap = the mark's original clearance */
  width: clamp(4.5rem, 9vw, 6.5rem);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.loader-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--ink);
  transition: width 0.2s linear;
}

.loader-pct {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* Reserves the widest case (100) so the centred line never shifts as the
   count climbs. 3ch covers the digits; the 0.66em covers the two extra
   letter-spaces those digits bring with them. The <b> is here for that
   reservation, not for emphasis — hence the normal weight. */
.loader-pct b {
  display: inline-block;
  min-width: calc(3ch + 0.66em);
  text-align: right;
  font-weight: 400;
  color: var(--ink);
}

/* One shared duration so the six bars stay in a single rhythm; only the
   delay is staggered. A common period is what lets the set resolve cleanly
   instead of being cut off mid-bounce. */
.loader-mark line {
  stroke: currentColor;
  stroke-width: 34;          /* the bar's width in the mark */
  stroke-linecap: round;     /* and half of it is the cap radius */
  animation: loader-bar 0.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.loader-mark line:nth-child(1) { animation-delay: 0s; }
.loader-mark line:nth-child(2) { animation-delay: 0.05s; }
.loader-mark line:nth-child(3) { animation-delay: 0.1s; }
.loader-mark line:nth-child(4) { animation-delay: 0.025s; }
.loader-mark line:nth-child(5) { animation-delay: 0.075s; }
.loader-mark line:nth-child(6) { animation-delay: 0.125s; }

/* Scaling the bars used to squash their rounded ends flat at the bottom of the
   bounce — the radius was part of the shape being scaled. Trimming a dash out
   of the stroke instead leaves the cap alone: it is drawn onto whatever the
   dash ends up being, at full radius, every frame. Each line is normalised to
   pathLength 100, so one keyframe drives all six despite their differing
   heights, and the negative offset of half the remaining gap keeps the dash
   centred so a bar still contracts toward its own middle. */
@keyframes loader-bar {
  0%, 100% { stroke-dasharray: 24 100; stroke-dashoffset: -38; }
  50%      { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   15c. PAGE ENTRANCE — content arrives only once the mark has settled
   -------------------------------------------------------------------------- */

@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Applied after the loader resolves. The content is visible by default, so
   nothing is hidden if these never run — the overlay simply covers it until
   the class lands. The masthead fades only: animating transform on a sticky
   element would break stickiness while it runs. */
.js body.page-in .masthead     { animation: page-fade 0.4s var(--ease) both; }
.js body.page-in main          { animation: page-rise 0.5s var(--ease) 0.04s both; }
.js body.page-in .site-footer  { animation: page-rise 0.5s var(--ease) 0.09s both; }

@media (prefers-reduced-motion: reduce) {
  .loader-mark line { animation: none; }
  .js .loader { transition: none; }
  .js body.page-in .masthead,
  .js body.page-in main,
  .js body.page-in .site-footer { animation: none; }
}

/* --------------------------------------------------------------------------
   15d. CLIENT LOGOS — a row of marks that travels only when it has to
   -------------------------------------------------------------------------- */

.logos {
  position: relative;
  display: flex;
  justify-content: center;      /* centred while it fits… */
  margin-top: var(--space-md);
  overflow: hidden;
}
.logos.is-scrolling { justify-content: flex-start; }   /* …left-anchored once it loops */

/* Fades the row into the paper at both edges so a travelling strip enters and
   leaves the frame instead of being guillotined by the overflow box. The rgba
   stop repeats --paper's value: a bare `transparent` fades through grey in
   some engines, which shows as a dirty smear over a warm background. */
.logos::before,
.logos::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 8vw, 5rem);
  z-index: 1;
  pointer-events: none;
}
.logos::before { left: 0; background: linear-gradient(90deg, var(--paper) 0%, rgba(247, 246, 243, 0) 100%); }
.logos::after { right: 0; background: linear-gradient(270deg, var(--paper) 0%, rgba(247, 246, 243, 0) 100%); }

.logos-track { display: flex; width: max-content; }

.logos-set {
  display: flex;
  align-items: center;
  gap: clamp(2.25rem, 6vw, 4rem);
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}

/* Sized by a per-logo cap rather than one shared height: these marks run from a
   3.2:1 wordmark to a 0.6:1 upright badge, and a single height would leave the
   narrow ones looking like an afterthought beside the wide ones. The caps below
   equalise each logo's *area* instead, to roughly 2,500px² — that is what the
   eye actually compares. A new logo starts at the default and gets nudged if it
   reads heavy or light next to these. */
.logos img {
  width: auto;
  height: auto;
  max-height: var(--logo-h, 3rem);
  max-width: var(--logo-w, 7rem);
  object-fit: contain;
}

.logo-safe-auto img    { --logo-h: 2.75rem; }
.logo-solid-africa img { --logo-h: 3.5rem; }
.logo-rgl img          { --logo-h: 4rem; }
.logo-onomo img        { --logo-h: 3.5rem; }
.logo-eaacon img       { --logo-h: 3.25rem; }
.logo-reserve-force img { --logo-h: 4rem; }

.logos.is-scrolling .logos-track { animation: logos-slide 45s linear infinite; }

/* Reading a logo means stopping on it — and a keyboard user tabbing into the
   row needs the same courtesy. is-paused is set while the row is off-screen. */
.logos.is-scrolling:hover .logos-track,
.logos.is-scrolling:focus-within .logos-track,
.logos.is-paused .logos-track { animation-play-state: paused; }

/* Half the track is one full set, so resetting at -50% lands on an identical
   frame — the seam is never visible. */
@keyframes logos-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* No travel means the row has to wrap, or the overflow box would eat whatever
   does not fit. script.js also declines to set is-scrolling in this case. */
@media (prefers-reduced-motion: reduce) {
  .logos { justify-content: center; }
  .logos-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .logos-set { flex-wrap: wrap; justify-content: center; row-gap: 2rem; }
  .logos::before, .logos::after { display: none; }
}

/* --------------------------------------------------------------------------
   16. FOOTER — licence line, hairline, link row, legal
   -------------------------------------------------------------------------- */

.site-footer { padding-bottom: var(--space-md); }

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
}
.footer-top h2 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 400; }
.footer-mark img { height: 42px; width: auto; opacity: 0.85; }

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.footer-links a { color: var(--accent); transition: color 0.3s var(--ease); }
.footer-links a:hover { color: var(--accent-deep); }
.footer-links .sep { color: var(--line); }

.footer-contact {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--ink-body);
}
.footer-contact a { transition: color 0.3s var(--ease); }
.footer-contact a:hover { color: var(--accent); }

.footer-about {
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--ink-body);
}

.footer-socials { display: flex; gap: 0.875rem; margin-top: 1.25rem; }
.footer-socials a { color: var(--ink-mute); transition: color 0.3s var(--ease); }
.footer-socials a:hover { color: var(--accent); }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }

.footer-legal {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   17. REVEAL
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   18. BREAKPOINTS
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .masthead-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    min-height: 5.5rem;
  }
  .masthead-logo img { height: 56px; }
  .masthead-phone { font-size: 0.8125rem; letter-spacing: 0.1em; }
  .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-md) var(--space-md); }
  .svc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Four items would leave an orphan on a three-up grid, and these labels are
     long enough that four columns would set them one word per line. */
  .svc-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .footer-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .footer-about { text-align: right; }
  .footer-socials { justify-content: flex-end; }
  .capability { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr); }
  .figure { max-width: 100%; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-item { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-md); }
  .pv-arrow-label { display: inline; }
}

@media (min-width: 64rem) {
  .primary-nav { display: flex; }
  .nav-burger { display: none; }
  .split { gap: var(--space-lg); }
}