/* ==========================================================================
   Mowzoon Construction Inc.
   Palette is drawn from the firm's own materials: oxidised steel, limestone,
   walnut veneer. Display face is Archivo at a wide optical width (monumental,
   engineered); body is Spectral (the refinement side of the portfolio).
   ========================================================================== */

:root {
  /* Surfaces */
  --petrol:       #1C2A2E;   /* oxidised steel — the dominant surface */
  --petrol-lift:  #253538;   /* raised panels on dark */
  --petrol-line:  #35474B;   /* rules on dark */
  --limestone:    #E4E1DA;   /* travertine / limestone — light sections */
  --limestone-dp: #D5D1C6;   /* recessed panels on light */
  --limestone-ln: #C3BEB1;   /* rules on light */

  /* Ink */
  --ink:          #212A2D;   /* body text on limestone */
  --ink-soft:     #55625F;   /* secondary text on limestone */
  --chalk:        #DCD7CB;   /* body text on petrol */
  --chalk-soft:   #9AA7A6;   /* secondary text on petrol */

  /* Accent — walnut veneer */
  --walnut:       #7C4F2D;   /* on light */
  --walnut-lift:  #C08B54;   /* on dark */

  /* Type */
  --display: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --prose:   "Spectral", Georgia, "Times New Roman", serif;

  /* Scale */
  --s-xs:  0.78rem;
  --s-sm:  0.9rem;
  --s-md:  1.0625rem;
  --s-lg:  1.25rem;
  --s-xl:  clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --s-2xl: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --s-3xl: clamp(2.6rem, 1.2rem + 6vw, 6.2rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --band:   clamp(4rem, 9vw, 8.5rem);
  --wide:   1320px;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;          /* not `hidden` — that would break sticky */
}

body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
  background: var(--petrol);
  color: var(--chalk);
  font-family: var(--prose);
  font-size: var(--s-md);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* --- Utility -------------------------------------------------------------- */

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

.narrow { max-width: 60ch; }
.narrower { max-width: 48ch; }

.band { padding-block: var(--band); }

.light {
  background: var(--limestone);
  color: var(--ink);
}
.light h1, .light h2, .light h3, .light h4 { color: var(--ink); }

.lede {
  font-size: var(--s-lg);
  line-height: 1.55;
  font-weight: 300;
}

.muted { color: var(--chalk-soft); }
.light .muted { color: var(--ink-soft); }

/* Section heading with a hairline that runs to the edge of the column */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-bottom: 1.1rem;
  margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--petrol-line);
}
.light .sec-head { border-bottom-color: var(--limestone-ln); }
.sec-head h2 { font-size: var(--s-2xl); }
.sec-head .count {
  font-family: var(--display);
  font-size: var(--s-sm);
  color: var(--chalk-soft);
  margin-left: auto;
  white-space: nowrap;
}
.light .sec-head .count { color: var(--ink-soft); }

/* --- Header --------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--petrol);
  border-bottom: 1px solid var(--petrol-line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 78px;
}

.mark {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
}

/* Shape from the SVG, colour from background-color — so it can transition. */
.mark-img {
  display: block;
  aspect-ratio: 156.603 / 52.764;
  background-color: var(--chalk);
  -webkit-mask: url(../images/logo.svg) no-repeat center / contain;
          mask: url(../images/logo.svg) no-repeat center / contain;
  transition: background-color 0.25s ease;
}
.mark:hover .mark-img,
.mark:focus-visible .mark-img { background-color: var(--walnut-lift); }

.site-head .mark-img { height: 44px; }
.site-foot .mark-img { height: 56px; }

@media (max-width: 640px) {
  .site-head .mark-img { height: 34px; }
  .site-foot .mark-img { height: 44px; }
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  font-family: var(--display);
  font-size: var(--s-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--chalk-soft);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--walnut-lift); }
.site-nav a[aria-current="page"] {
  color: var(--chalk);
  border-bottom-color: var(--walnut-lift);
}

.site-nav .tel {
  color: var(--walnut-lift);
}

/* --- Hero ----------------------------------------------------------------- */

.hero { padding-top: clamp(3.5rem, 8vw, 7rem); }

.hero h1 {
  font-size: var(--s-3xl);
  font-weight: 600;
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--walnut-lift);
}

.hero-lede {
  margin-top: 2rem;
  max-width: 56ch;
  font-size: var(--s-lg);
  font-weight: 300;
  line-height: 1.55;
  color: var(--chalk-soft);
}

.hero-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero-figure { margin-top: clamp(3rem, 6vw, 5rem); }

/* Page hero for interior pages */
.page-hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { font-size: var(--s-2xl); max-width: 18ch; }
.page-hero p { margin-top: 1.6rem; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--s-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--walnut-lift);
  background: var(--walnut-lift);
  color: var(--petrol);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--walnut-lift); }

.btn-ghost {
  background: transparent;
  color: var(--chalk);
  border-color: var(--petrol-line);
}
.btn-ghost:hover { background: var(--chalk); color: var(--petrol); border-color: var(--chalk); }

.light .btn { border-color: var(--walnut); background: var(--walnut); color: var(--limestone); }
.light .btn:hover { background: transparent; color: var(--walnut); }
.light .btn-ghost { background: transparent; color: var(--ink); border-color: var(--limestone-ln); }
.light .btn-ghost:hover { background: var(--ink); color: var(--limestone); border-color: var(--ink); }

/* --- Photo slots ---------------------------------------------------------- */
/* Images resolve as soon as the matching file is dropped into /images.
   Until then the alt text shows inside a labelled block. */

figure { margin: 0; }

.shot {
  width: 100%;
  background: var(--petrol-lift);
  border: 1px solid var(--petrol-line);
  color: var(--chalk-soft);
  font-family: var(--display);
  font-size: var(--s-xs);
  object-fit: cover;
  min-height: 220px;
}
.light .shot { background: var(--limestone-dp); border-color: var(--limestone-ln); color: var(--ink-soft); }

.shot-wide  { aspect-ratio: 16 / 7; }
.shot-hero  { aspect-ratio: 21 / 9; }
.shot-tall  { aspect-ratio: 4 / 5; }
.shot-square{ aspect-ratio: 1 / 1; }
.shot-4x3   { aspect-ratio: 4 / 3; }

figcaption {
  margin-top: 0.85rem;
  font-family: var(--display);
  font-size: var(--s-xs);
  color: var(--chalk-soft);
  line-height: 1.5;
}
.light figcaption { color: var(--ink-soft); }

/* --- Range band ----------------------------------------------------------- */
/* The one loud moment on the page: the firm's actual working range, set as a
   typographic specimen. Industrial vocabulary on the left, finish vocabulary
   on the right, meeting at a rule. */

.range {
  background: var(--limestone);
  color: var(--ink);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
.range-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.range-col p {
  font-family: var(--display);
  font-size: clamp(1.35rem, 0.6rem + 2.6vw, 3rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}
.range-col:last-child { text-align: right; }
.range-col:last-child p { color: var(--walnut); }
.range-rule {
  width: 1px;
  align-self: stretch;
  background: var(--limestone-ln);
}
.range-foot {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--limestone-ln);
  color: var(--ink-soft);
  max-width: 64ch;
}

/* --- Service list --------------------------------------------------------- */

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--limestone-ln);
}
.svc-list > li {
  border-bottom: 1px solid var(--limestone-ln);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
.svc-list h2 {
  font-size: var(--s-xl);
  font-weight: 500;
}
.svc-body p { color: var(--ink-soft); }
.svc-body ul {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
}
.svc-body ul li {
  font-family: var(--display);
  font-size: var(--s-xs);
  color: var(--ink);
  border: 1px solid var(--limestone-ln);
  padding: 0.32rem 0.66rem;
}

/* --- Project cards -------------------------------------------------------- */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.proj-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.proj-card h3 {
  font-size: var(--s-lg);
  font-weight: 600;
  margin-top: 1.1rem;
}
.proj-card .meta {
  font-family: var(--display);
  font-size: var(--s-xs);
  color: var(--chalk-soft);
  margin-top: 0.5rem;
}
.light .proj-card .meta { color: var(--ink-soft); }
.proj-card:hover h3 { color: var(--walnut-lift); }
.light .proj-card:hover h3 { color: var(--walnut); }

/* --- Project detail ------------------------------------------------------- */

.project {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  border-top: 1px solid var(--petrol-line);
}
.light .project { border-top-color: var(--limestone-ln); }
.project:first-of-type { border-top: 0; }

.project-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.project-head h2 { font-size: var(--s-2xl); }
.project-head .place {
  font-family: var(--display);
  font-size: var(--s-sm);
  color: var(--walnut-lift);
  margin-bottom: 0.9rem;
  display: block;
}
.light .project-head .place { color: var(--walnut); }

.project-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* Spec table — the closest thing this trade has to a title block */
.specs {
  margin: 0;
  border-top: 1px solid var(--petrol-line);
}
.light .specs { border-top-color: var(--limestone-ln); }
.specs div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--petrol-line);
  font-family: var(--display);
  font-size: var(--s-sm);
}
.light .specs div { border-bottom-color: var(--limestone-ln); }
.specs dt { color: var(--chalk-soft); margin: 0; }
.light .specs dt { color: var(--ink-soft); }
.specs dd { margin: 0; text-align: right; font-weight: 500; }

.shot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* --- Project stages ------------------------------------------------------- */
/* Design → build → result. A real sequence, so it gets sequence markers. */

.stage { margin-top: clamp(2.75rem, 6vw, 4.5rem); }

.stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--petrol-line);
}
.light .stage-head { border-bottom-color: var(--limestone-ln); }

.stage-head h3 {
  font-size: var(--s-xl);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.stage-head h3 b {
  font-size: var(--s-sm);
  font-weight: 500;
  color: var(--walnut-lift);
  letter-spacing: 0.04em;
}
.light .stage-head h3 b { color: var(--walnut); }
.stage-head p { color: var(--chalk-soft); font-size: var(--s-sm); }
.light .stage-head p { color: var(--ink-soft); }

/* Line drawings sit on paper, never on the dark field */
.drawings {
  background: var(--limestone);
  padding: clamp(1rem, 2.5vw, 2rem);
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.drawings img { border: 0; background: transparent; min-height: 0; }
.drawings .caption {
  font-family: var(--display);
  font-size: var(--s-xs);
  color: var(--ink-soft);
  margin-top: 0.6rem;
}
.drawings .pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* Photo grids */
.gal { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }
.gal-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.gal-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.gal-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }


.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.office h3 {
  font-size: var(--s-lg);
  font-weight: 600;
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--petrol-line);
}
.light .office h3 { border-bottom-color: var(--limestone-ln); }

/* --- Pillars -------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.pillar h3 {
  font-size: var(--s-lg);
  font-weight: 600;
  margin-bottom: 0.8rem;
  padding-top: 1rem;
  border-top: 2px solid var(--walnut-lift);
}
.light .pillar h3 { border-top-color: var(--walnut); }

/* --- Form ----------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--display);
  font-size: var(--s-xs);
  font-weight: 500;
  color: var(--chalk-soft);
}
.light .field label { color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
  font-family: var(--prose);
  font-size: var(--s-md);
  color: inherit;
  background: transparent;
  border: 1px solid var(--petrol-line);
  padding: 0.75rem 0.85rem;
  border-radius: 0;
}
.light .field input,
.light .field select,
.light .field textarea { border-color: var(--limestone-ln); }

.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--walnut-lift);
  outline-offset: 1px;
}
.light .field input:focus-visible,
.light .field select:focus-visible,
.light .field textarea:focus-visible { outline-color: var(--walnut); }

.form-note {
  margin-top: 1.25rem;
  font-size: var(--s-sm);
  color: var(--chalk-soft);
}
.light .form-note { color: var(--ink-soft); }

/* --- Footer --------------------------------------------------------------- */

.site-foot {
  background: var(--petrol);
  color: var(--chalk);
  border-top: 1px solid var(--petrol-line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.foot-grid h3 {
  font-size: var(--s-sm);
  font-weight: 600;
  color: var(--chalk-soft);
  margin-bottom: 1rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0.5rem; }
.foot-grid a { text-decoration: none; color: var(--chalk); }
.foot-grid a:hover { color: var(--walnut-lift); text-decoration: underline; }

.foot-bar {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--petrol-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: var(--s-xs);
  color: var(--chalk-soft);
  font-family: var(--display);
}

/* --- CTA strip ------------------------------------------------------------ */

.cta-strip {
  background: var(--walnut);
  color: #F3EEE6;
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.cta-strip h2 {
  font-size: var(--s-2xl);
  color: #F8F4ED;
  max-width: 20ch;
}
.cta-strip p { margin-top: 1rem; max-width: 52ch; color: #F4EBE0; }
.cta-strip .btn {
  margin-top: 1.9rem;
  background: #F8F4ED;
  border-color: #F8F4ED;
  color: var(--walnut);
}
.cta-strip .btn:hover { background: transparent; color: #F8F4ED; }

/* --- Accessibility -------------------------------------------------------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--walnut-lift);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--walnut-lift);
  color: var(--petrol);
  padding: 0.7rem 1.1rem;
  font-family: var(--display);
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* One orchestrated reveal, on the hero only. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero h1, .hero-lede, .hero-actions {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero-lede    { animation-delay: 0.1s; }
.hero-actions { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 820px) {
  .svc-list > li,
  .project-head,
  .project-body { grid-template-columns: 1fr; }
  .project-head { align-items: start; }
  .range-grid { grid-template-columns: 1fr; }
  .range-rule { width: 100%; height: 1px; }
  .range-col:last-child { text-align: left; }
}

@media (max-width: 640px) {
  .head-inner { min-height: 66px; gap: 1rem; }
  .site-nav .tel { display: none; }
  .sec-head { flex-wrap: wrap; gap: 0.6rem; }
  .sec-head .count { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   CONVERSION LAYER
   Everything below serves one of three jobs: prove the firm is real, make the
   next step obvious, or remove friction from taking it.
   ========================================================================== */

/* --- Proof band ----------------------------------------------------------- */

.proof {
  border-top: 1px solid var(--petrol-line);
  border-bottom: 1px solid var(--petrol-line);
}
.light .proof { border-color: var(--limestone-ln); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.proof-item {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--petrol-line);
}
.light .proof-item { border-left-color: var(--limestone-ln); }
.proof-item:first-child { border-left: 0; }

.proof-item b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--chalk);
}
.light .proof-item b { color: var(--ink); }

.proof-item span {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--s-sm);
  color: var(--chalk-soft);
  max-width: 24ch;
}
.light .proof-item span { color: var(--ink-soft); }

@media (max-width: 640px) {
  .proof-item { border-left: 0; border-top: 1px solid var(--petrol-line); }
  .light .proof-item { border-top-color: var(--limestone-ln); }
  .proof-item:first-child { border-top: 0; }
}

/* --- Numbered process ----------------------------------------------------- */
/* A real sequence, so it earns real numbers. */

.steps { counter-reset: step; }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--petrol-line);
}
.light .step { border-top-color: var(--limestone-ln); }

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: var(--s-sm);
  font-weight: 500;
  color: var(--walnut-lift);
  padding-top: 0.35rem;
}
.light .step::before { color: var(--walnut); }

.step h3 {
  font-size: var(--s-lg);
  font-weight: 500;
}
.step p { color: var(--chalk-soft); }
.light .step p { color: var(--ink-soft); }

@media (max-width: 760px) {
  .step { grid-template-columns: auto minmax(0, 1fr); }
  .step p { grid-column: 2; margin-top: 0.5rem; }
}

/* --- Credentials ---------------------------------------------------------- */

.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  background: var(--petrol-line);
  border: 1px solid var(--petrol-line);
  margin: 0;
}
.light .creds { background: var(--limestone-ln); border-color: var(--limestone-ln); }

.cred { background: var(--petrol); padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.light .cred { background: var(--limestone); }

.cred dt {
  font-family: var(--display);
  font-size: var(--s-xs);
  color: var(--chalk-soft);
  margin-bottom: 0.5rem;
}
.light .cred dt { color: var(--ink-soft); }
.cred dd { margin: 0; font-size: var(--s-md); font-weight: 500; line-height: 1.45; }

/* --- Enquiry form --------------------------------------------------------- */

.form-section {
  border: 1px solid var(--limestone-ln);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  margin: 0 0 1.25rem;
}
.form-section > legend {
  font-family: var(--display);
  font-size: var(--s-sm);
  font-weight: 600;
  padding-inline: 0.6rem;
  margin-left: -0.6rem;
  color: var(--walnut);
}

.field-note { font-size: var(--s-xs); color: var(--ink-soft); margin-top: 0.4rem; }
.required { color: var(--walnut); }

/* Choice chips — a budget band is easier to tap than to type */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choices label {
  position: relative;
  font-family: var(--display);
  font-size: var(--s-sm);
  border: 1px solid var(--limestone-ln);
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.choices input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choices label:hover { border-color: var(--ink-soft); }
.choices label:has(input:checked) {
  background: var(--walnut);
  border-color: var(--walnut);
  color: var(--limestone);
}
.choices label:has(input:focus-visible) { outline: 2px solid var(--walnut); outline-offset: 2px; }

/* --- Sticky mobile action bar --------------------------------------------- */
/* On a phone the highest-value action is a phone call. One tap, always. */

.callbar { display: none; }

@media (max-width: 760px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    border-top: 1px solid var(--petrol-line);
  }
  .callbar a {
    text-align: center;
    padding: 0.95rem 0.5rem;
    font-family: var(--display);
    font-size: var(--s-sm);
    font-weight: 600;
    text-decoration: none;
  }
  .callbar .call  { background: var(--walnut); color: #F8F4ED; }
  .callbar .quote { background: var(--petrol-lift); color: var(--chalk); }
  body { padding-bottom: 3.4rem; }
}

/* --- Sticky header shouldn't cover anchored headings ---------------------- */

[id] { scroll-margin-top: 96px; }

/* ==========================================================================
   IMAGE FIT
   Tiles stay uniform so grids read as designed, but no photograph loses more
   of itself than it can afford. Where an image's own shape disagrees with its
   row, it is shown whole inside the tile rather than cropped to fit.
   ========================================================================== */

.shot-fit {
  object-fit: contain;
  background: var(--petrol-lift);
}
.light .shot-fit { background: var(--limestone-dp); }

/* Galleries: tiles align to the top so a shorter row never stretches. */
.gal { align-items: start; }

/* --- Phones ---------------------------------------------------------------
   A 21:9 band is 150px tall on a 360px screen — a letterbox slot, not a
   photograph. Very wide slots relax toward 3:2 on small viewports. */

@media (max-width: 700px) {
  .shot-hero,
  .shot-wide,
  .shot[style*="aspect-ratio:2/1"] {
    aspect-ratio: 3 / 2 !important;
  }
  /* Full-width portraits shouldn't run past a phone screen either. */
  .shot[style*="aspect-ratio:2/3"],
  .shot[style*="aspect-ratio:3/4"] {
    max-height: 78vh;
  }
}

/* Drawings keep their true proportions everywhere — a plan that is cropped
   or stretched is a plan you cannot read. */
.drawings img {
  object-fit: contain;
  height: auto;
  aspect-ratio: auto;
}


/* ==========================================================================
   UNIFORM TILES
   Every gallery tile is 4:3 and every feature image is 16:9. Nothing runs
   taller than the screen. Images whose own shape disagrees are shown whole
   inside the tile instead of being cropped to fit it.
   ========================================================================== */

.shot-16x9 { aspect-ratio: 16 / 9; }

figure > .shot,
.project > .wrap > figure > .shot { max-height: 72vh; }

@media (max-width: 700px) {
  .shot-16x9 { aspect-ratio: 3 / 2; }
  .gal .shot { aspect-ratio: 4 / 3; }
  figure > .shot { max-height: 60vh; }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 18, 20, 0.96);
  padding: clamp(1rem, 4vw, 3rem);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}
.lightbox.is-open { display: grid; }

.lb-stage {
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}
.lb-cap {
  font-family: var(--display);
  font-size: var(--s-sm);
  color: var(--chalk-soft);
  text-align: center;
  max-width: 70ch;
}

.lb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}
.lb-count {
  font-family: var(--display);
  font-size: var(--s-sm);
  color: var(--chalk-soft);
  min-width: 6ch;
  text-align: center;
}
.lightbox button {
  font-family: var(--display);
  font-size: var(--s-sm);
  font-weight: 600;
  color: var(--chalk);
  background: transparent;
  border: 1px solid var(--petrol-line);
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.lightbox button:hover { background: var(--walnut-lift); border-color: var(--walnut-lift); color: var(--petrol); }
.lb-close { justify-self: end; }

@media (max-width: 640px) {
  .lb-img { max-height: calc(100vh - 14rem); }
  .lightbox button { padding: 0.7rem 1rem; }
}

/* ==========================================================================
   HERO FILM
   ========================================================================== */

.hero-film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--petrol-lift);
}
.hero-film video,
.hero-film img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) { .hero-film { aspect-ratio: 3 / 2; } }

/* ==========================================================================
   LEADERSHIP
   Square portraits, box sized to the picture — no bars above or below.
   ========================================================================== */

.person figure { margin: 0; }
.person h3 {
  font-size: var(--s-lg);
  font-weight: 600;
  margin-top: 1rem;
}
.person .role {
  font-family: var(--display);
  font-size: var(--s-sm);
  color: var(--walnut);
  margin-top: 0.35rem;
}
.light .person .role { color: var(--walnut); }
.person p { margin-top: 0.8rem; color: var(--ink-soft); }

/* --- Hero slideshow -------------------------------------------------------- */

.hero-film[data-slideshow] { position: relative; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.hero-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* --- Work dropdown --------------------------------------------------------- */

.has-menu { position: relative; display: flex; align-items: center; gap: 0.3rem; }

.menu-toggle {
  background: none;
  border: 0;
  padding: 0.4rem 0 0.4rem 0.15rem;
  cursor: pointer;
  color: var(--chalk-soft);
  font-family: var(--display);
  font-size: 0.7rem;
  line-height: 1;
}
.menu-toggle:hover { color: var(--chalk); }
.has-menu.is-open .menu-toggle { color: var(--walnut-lift); }

.menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.55rem);
  left: -1rem;
  z-index: 80;
  min-width: 22rem;
  background: var(--petrol-lift);
  border: 1px solid var(--petrol-line);
  padding: 0.6rem 0;
  margin: 0;
  list-style: none;
  max-height: 70vh;
  overflow-y: auto;
}
.has-menu.is-open .menu-panel { display: block; }

.menu-panel li { margin: 0; }
.menu-panel a {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 1.1rem;
  font-family: var(--display);
  font-size: var(--s-sm);
  color: var(--chalk);
  text-decoration: none;
  border-bottom: 0;
}
.menu-panel a span { color: var(--chalk-soft); font-size: var(--s-xs); white-space: nowrap; }
.menu-panel a:hover { background: var(--walnut); color: #F8F4ED; }
.menu-panel a:hover span { color: #EADCCB; }
.menu-panel .menu-head {
  padding: 0.35rem 1.1rem 0.55rem;
  font-family: var(--display);
  font-size: var(--s-xs);
  color: var(--walnut-lift);
  border-bottom: 1px solid var(--petrol-line);
  margin-bottom: 0.4rem;
}



/* Lightbox: which project you are looking at */
.lb-project {
  font-family: var(--display);
  font-size: var(--s-sm);
  font-weight: 600;
  color: var(--walnut-lift);
  letter-spacing: 0.02em;
}
.lb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}


/* --- Leadership portraits --------------------------------------------------
   Fixed-size square thumbnails. One rule, no competing widths. The files are
   already square and face-centred, so cover crops nothing. */

.person-thumb {
  width: 264px;
  height: 264px;
  max-width: 264px;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: var(--limestone-dp);
  border-radius: 0;
}

.person-solo {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (max-width: 700px) {
  .person-solo { grid-template-columns: 1fr; }
  .person-thumb { width: 200px; height: 200px; max-width: 200px; }
}

/* ==========================================================================
   REFINEMENT
   Motion is used sparingly and only where it answers something the visitor
   did — a hover, a scroll into view. Everything here is switched off when the
   system asks for reduced motion.
   ========================================================================== */

/* --- Logo ------------------------------------------------------------------
   The mark is drawn in currentColor, so a colour change is a real transition
   rather than swapping two files. */

.site-head .mark { position: relative; }
.site-head .mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.55rem;
  height: 1px;
  background: var(--walnut-lift);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-head .mark:hover::after,
.site-head .mark:focus-visible::after { transform: scaleX(1); }

/* --- Navigation: the rule draws in rather than blinking on ----------------- */

.site-nav a { position: relative; border-bottom: 0; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--walnut-lift);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* --- Header settles once you start reading -------------------------------- */

.site-head {
  transition: background 0.3s ease, box-shadow 0.3s ease;
  background: rgba(28, 42, 46, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-head.is-scrolled { box-shadow: 0 1px 0 var(--petrol-line), 0 10px 30px rgba(0, 0, 0, 0.28); }

/* --- Photographs breathe on hover ----------------------------------------- */

.gal figure,
.proj-card figure,
.hero-figure figure > .shot,
.project > .wrap > figure { overflow: hidden; }

.gal .shot,
.proj-card .shot,
.project > .wrap > figure .shot {
  transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.5s ease;
  will-change: transform;
}
.gal figure:hover .shot,
.proj-card:hover .shot,
.project > .wrap > figure:hover .shot { transform: scale(1.035); }

/* --- Buttons -------------------------------------------------------------- */

.btn { transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* --- Reveal on first sight -------------------------------------------------
   One movement, once, as a block enters the viewport. Not on every element —
   only on the structural beats: section heads, galleries, figures, steps. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- Rules that draw themselves ------------------------------------------- */

.sec-head { position: relative; }
.sec-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--walnut-lift);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s;
}
.light .sec-head::after { background: var(--walnut); }
.sec-head.is-in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .sec-head::after { display: none; }
  .gal .shot, .proj-card .shot, .project > .wrap > figure .shot { transition: none; }
  .gal figure:hover .shot, .proj-card:hover .shot,
  .project > .wrap > figure:hover .shot { transform: none; }
  .btn:hover { transform: none; }
  .site-head .mark::after, .site-nav a::after { transition: none; }
}

/* --- Stepper arrows -------------------------------------------------------- */

.stepper { display: inline-flex; align-items: center; gap: 0.35rem; vertical-align: middle; }
.stepper button {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--petrol-line);
  color: var(--chalk-soft);
  font-family: var(--display);
  font-size: 0.95rem; line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.stepper button:hover {
  border-color: var(--walnut-lift);
  background: var(--walnut-lift);
  color: var(--petrol);
}
.head-stepper { margin-top: 1.4rem; }
.slide-stepper { margin-left: auto; }
.hero-film-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.85rem;
}

/* ==========================================================================
   MOBILE MENU
   Below 900px the navigation becomes a hamburger and a drop-down panel that
   sizes itself to its contents. The project list sits behind a caret so the
   main tabs are all visible without scrolling.
   ========================================================================== */

.nav-toggle { display: none; }

@media (max-width: 900px) {

  .nav-toggle {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle svg { width: 24px; height: 24px; display: block; overflow: visible; }
  .nav-toggle line {
    stroke: var(--chalk);
    stroke-width: 2;
    stroke-linecap: round;
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform 0.3s cubic-bezier(0.2,0.7,0.3,1), opacity 0.15s ease;
  }
  .nav-toggle:hover line { stroke: var(--walnut-lift); }
  .nav-toggle[aria-expanded="true"] .l1 { transform: rotate(45deg) translateY(5px); }
  .nav-toggle[aria-expanded="true"] .l2 { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .l3 { transform: rotate(-45deg) translateY(-5px); }

  /* the panel: drops from the header, only as tall as it needs to be */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 90;
    display: block;
    background: var(--petrol);
    border-top: 1px solid var(--petrol-line);
    border-bottom: 1px solid var(--petrol-line);
    box-shadow: 0 22px 40px rgba(0,0,0,0.4);
    padding: 0.5rem var(--gutter) 1.25rem;
    margin: 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }

  .site-nav > a,
  .site-nav .has-menu > a {
    display: block;
    padding: 0.7rem 0;
    font-size: var(--s-md);
    color: var(--chalk);
    border-bottom: 1px solid var(--petrol-line);
    transition: color 0.18s ease;
  }
  .site-nav > a:hover,
  .site-nav > a:active,
  .site-nav > a:focus-visible,
  .site-nav .has-menu > a:hover,
  .site-nav .has-menu > a:active,
  .site-nav .has-menu > a:focus-visible,
  .menu-toggle:hover,
  .menu-toggle:active { color: var(--walnut-lift); }
  .site-nav .menu-panel a:hover,
  .site-nav .menu-panel a:active { color: var(--walnut-lift); }
  .site-nav a::after { display: none; }
  .site-nav .tel {
    display: block;
    margin-top: 0.9rem;
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--walnut-lift);
    font-size: var(--s-md);
  }

  /* Work + caret on one row; the project list stays folded away */
  .has-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: static;
    gap: 0;
  }
  .has-menu > a { flex: 1; border-bottom: 0 !important; }
  .menu-toggle {
    display: block;
    font-size: 0.85rem;
    padding: 0.7rem 0 0.7rem 1rem;
    transition: transform 0.25s ease;
  }
  .has-menu.is-open .menu-toggle { transform: rotate(180deg); }
  .has-menu::after {
    content: "";
    flex-basis: 100%;
    height: 1px;
    background: var(--petrol-line);
  }

  .menu-panel {
    display: none;
    position: static;
    order: 3;
    flex-basis: 100%;
    min-width: 0;
    max-height: none;
    background: transparent;
    border: 0;
    padding: 0.25rem 0 0.75rem;
    overflow: visible;
  }
  .has-menu.is-open .menu-panel { display: block; }
  .menu-panel a {
    padding: 0.45rem 0 0.45rem 0.9rem;
    font-size: var(--s-sm);
    flex-wrap: wrap;
    gap: 0.1rem 0.8rem;
  }
  .menu-panel a span { white-space: normal; }
  .menu-panel a:hover { background: transparent; color: var(--walnut-lift); }
  .menu-panel a:hover span { color: var(--chalk-soft); }
  .menu-head { padding-left: 0; }

}

@media (max-width: 640px) {
  .site-nav { max-height: calc(100vh - 66px); }
}


/* Headings that exist for structure, not for looks */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   PRINT
   Owners and architects print project pages. Make that produce something
   usable rather than a black page with hidden images.
   ========================================================================== */

@media print {
  :root { --chalk: #111; --chalk-soft: #444; --petrol-line: #ccc; }

  body { background: #fff; color: #111; font-size: 11pt; }

  .site-head, .callbar, .lightbox, .stepper,
  .site-nav, .nav-toggle, .cta-strip, .btn,
  .hero-film, .skip { display: none !important; }

  .light, .project, .band, .site-foot { background: #fff !important; color: #111 !important; }
  h1, h2, h3, h4, .light h1, .light h2, .light h3 { color: #111 !important; }
  .muted, .light .muted, .specs dt, figcaption { color: #444 !important; }

  a { color: #111; text-decoration: none; }
  .specs div, .sec-head, .step, .svc-list > li { border-color: #ccc !important; }

  /* keep a project and its picture together on the page */
  .project, .stage, figure, .gal figure { break-inside: avoid; }
  .project { break-before: page; }
  .project:first-of-type { break-before: auto; }

  .shot { max-height: 9cm; object-fit: contain !important; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* spell out where a link went */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* --- Form error notice ----------------------------------------------------- */

.form-error {
  border: 1px solid var(--walnut);
  border-left-width: 3px;
  background: var(--limestone-dp);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}
.form-error p { margin: 0; color: var(--ink); font-size: var(--s-sm); }