/* Modern Tile Company, option "The site wall" (Cadence B)
   Tokens first; no literal colors inside components. */

:root {
  --ink: #16221E;        /* dominant dark surface, green-black */
  --porcelain: #F1F3F0;  /* dominant light surface, cool off-white */
  --slate: #4A5652;      /* secondary text on porcelain, 6.86:1 */
  --mist: #9FB0AA;       /* secondary text on ink, 7.23:1 */
  --verde: #1E6B57;      /* accent on light surfaces, 5.71:1 on porcelain */
  --marigold: #F0B429;   /* accent on dark surfaces, 8.79:1 with ink text */

  --line-dark: rgba(241, 243, 240, 0.14);
  --line-light: rgba(22, 34, 30, 0.16);
  --ink-2: #1F2E29;      /* raised panel on ink */

  --display: "Big Shoulders Display", "Arial Narrow", "Franklin Gothic Medium", sans-serif;
  --body: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --focus: var(--marigold);
  --top-h: 118px;        /* fixed top bar: mark row plus the four-link row below 900px */
  --row-w: 140px;        /* wall row photo cell, 3:2; the asset is 390x260 and only ever shrinks */
  --row-h: 93px;
}
@media (min-width: 900px) {
  :root { --top-h: 73px; --row-w: 195px; --row-h: 130px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--top-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--porcelain);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 0.95; font-weight: 900; letter-spacing: 0.005em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--marigold); color: var(--ink); padding: 10px 14px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Eyebrows, titles, buttons ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--verde);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 10px; height: 10px; background: currentColor; flex: none;
}
.eyebrow--light { color: var(--marigold); }

.section-title {
  font-size: clamp(40px, 6vw, 84px);
  color: var(--ink);
  max-width: 14ch;
}
.section-title--light { color: var(--porcelain); }
.section-lead {
  max-width: 58ch;
  color: var(--slate);
  font-size: 18px;
  margin-top: 20px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 22px;
  font-family: var(--body); font-weight: 600; font-size: 16px; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1.5px solid transparent; border-radius: 3px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--marigold { background: var(--marigold); color: var(--ink); border-color: var(--marigold); }
.btn--marigold:hover { background: var(--porcelain); border-color: var(--porcelain); }
.btn--ghost { background: transparent; color: var(--porcelain); border-color: var(--porcelain); }
.btn--ghost:hover { background: var(--porcelain); color: var(--ink); }

/* ---------- Top bar ---------- */

.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px;
  padding: 14px var(--gutter) 0;
  background: linear-gradient(to bottom, rgba(22, 34, 30, 0.92), rgba(22, 34, 30, 0.72));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dark);
}
.mark {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--porcelain);
  font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1;
  letter-spacing: 0.02em;
}
.mark__squares { display: inline-flex; gap: 3px; align-self: center; }
.mark__squares i { display: block; width: 11px; height: 11px; background: var(--marigold); }
.mark__squares i:last-child { background: var(--porcelain); }
.mark__sub { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--mist); letter-spacing: 0.04em; }
/* Below 900px the four anchors sit in a visible second row of the bar, so
   Work, Scope, Prequalify, and Contact are one tap away for the whole
   12,000px page. No menu button, no JS. */
.top__nav {
  order: 3; flex: 1 1 100%;
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line-dark);
}
.top__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-family: var(--mono); font-weight: 500; font-size: 14px;
  color: var(--porcelain); padding: 0 2px;
}
.top__nav a:hover { color: var(--marigold); }
.top__cta { margin-left: auto; min-height: 44px; padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.mark__sub { display: none; }

@media (min-width: 600px) {
  .mark__sub { display: inline; }
  .top__cta { padding: 8px 16px; font-size: 15px; }
}
@media (min-width: 900px) {
  .top { flex-wrap: nowrap; gap: 24px; padding-bottom: 14px; }
  .top__nav {
    order: 0; flex: 0 0 auto; margin: 0 0 0 auto; border-top: 0;
    gap: 26px; justify-content: flex-start;
  }
  .top__nav a { font-family: var(--body); font-size: 15px; min-height: 0; padding: 8px 0; }
  .top__cta { margin-left: 0; }
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform-origin: 50% 50%; }

/* Hero settle is CSS, not GSAP: the image eases from 1.08 to 1 and the
   copy rises in courses on the animation clock, which keeps running when
   requestAnimationFrame does not (hidden tab, throttled pane). Every
   keyframe ends at the element's natural state, so nothing in the hero
   can be left at opacity 0 and nothing here waits on a scroll trigger. */
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes hero-fact { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: hero-settle 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  [data-hero-line] { animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.15s + var(--i, 0) * 0.09s); }
  [data-hero-fact] { animation: hero-fact 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.7s + var(--i, 0) * 0.08s); }
}
.hero__eyebrow { --i: 0; }
.hero__line:nth-child(1) { --i: 1; }
.hero__line:nth-child(2) { --i: 2; }
.hero__line:nth-child(3) { --i: 3; }
.hero__lead { --i: 4; }
.hero__actions { --i: 5; }
.hero__facts li:nth-child(2) { --i: 1; }
.hero__facts li:nth-child(3) { --i: 2; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(22, 34, 30, 0.98) 0%, rgba(22, 34, 30, 0.86) 34%, rgba(22, 34, 30, 0.35) 62%, rgba(22, 34, 30, 0.18) 100%),
    linear-gradient(to right, rgba(22, 34, 30, 0.55), rgba(22, 34, 30, 0) 60%);
}
.hero__inner {
  padding: calc(var(--top-h) + 40px) var(--gutter) 40px;
  max-width: var(--max); width: 100%;
  margin: 0 auto;
  align-self: end;
}
.hero__eyebrow { color: var(--marigold); }
.hero__title {
  font-size: clamp(48px, 10vw, 132px);
  color: var(--porcelain);
  line-height: 0.9;
  margin-bottom: 24px;
}
.hero__line { display: block; }
.hero__lead {
  max-width: 56ch; font-size: clamp(17px, 1.5vw, 20px);
  color: var(--porcelain); margin-bottom: 28px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .hero__actions .btn { flex: 0 0 auto; } }

.hero__facts {
  border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: 1fr;
  max-width: var(--max); width: 100%; margin: 0 auto;
  padding: 0 var(--gutter) 28px;
}
.hero__facts li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 0; border-bottom: 1px solid var(--line-dark);
}
.hero__fact-k { font-family: var(--mono); font-size: 13px; color: var(--marigold); }
.hero__fact-v { font-size: 16px; color: var(--porcelain); }
@media (min-width: 760px) {
  .hero__facts { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hero__facts li { border-bottom: 0; padding: 22px 0 0; }
}
.hero__note {
  position: absolute; right: var(--gutter); top: calc(var(--top-h) + 16px);
  font-family: var(--mono); font-size: 12px; color: var(--porcelain);
  background: rgba(22, 34, 30, 0.6); padding: 4px 8px; margin: 0;
}

/* ---------- Photo strip under the hero ---------- */
/* Six of the company's own project photographs, so the first scroll shows
   real work before the wall. Assets are 480x320 (one 399x266 native crop);
   the widest a cell gets is about 213px at 1320, so nothing scales up. */

.strip {
  background: var(--ink); color: var(--porcelain);
  padding: clamp(40px, 5vw, 64px) var(--gutter) 0;
}
.strip__inner { max-width: var(--max); margin: 0 auto; }
.strip__lead { color: var(--mist); font-size: 15px; max-width: 62ch; margin: 0 0 20px; }
.strip__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-dark);
}
.strip__grid figure { margin: 0; }
.strip__grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ink-2); }
.strip__grid figcaption { font-family: var(--mono); font-size: 12px; color: var(--mist); margin-top: 6px; line-height: 1.35; }
@media (min-width: 600px) { .strip__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .strip__grid { grid-template-columns: repeat(6, 1fr); } }

/* ---------- The wall ---------- */

.wall {
  position: relative;
  background: var(--ink); color: var(--porcelain);
  padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(56px, 8vw, 120px);
}
.wall__grout {
  position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) / 2);
  width: 2px; background: var(--line-dark);
}
.wall__grout span {
  position: absolute; inset: 0; background: var(--marigold);
  transform-origin: 50% 0; transform: scaleY(0);
}
.no-motion .wall__grout span, html:not(.js-motion) .wall__grout span { transform: scaleY(1); }

.wall__head, .sector, .wall__foot { max-width: var(--max); margin: 0 auto; }
.wall__head { margin-bottom: clamp(40px, 6vw, 88px); }
.wall__title {
  font-size: clamp(52px, 9vw, 132px);
  max-width: 10ch;
  margin-bottom: 20px;
}
.wall__lead { max-width: 62ch; color: var(--mist); font-size: 18px; }

.sector {
  display: grid; grid-template-columns: 1fr;
  gap: 8px 40px;
  padding-top: 24px;
  margin-bottom: clamp(48px, 6vw, 96px);
  border-top: 2px solid var(--porcelain);
}
.sector__label { padding-bottom: 12px; }
.sector__name { font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; color: var(--marigold); }
.sector__count { color: var(--mist); font-size: 13px; margin: 6px 0 12px; }
.slot {
  margin: 0; padding: 12px 14px;
  border: 1px dashed var(--mist); color: var(--mist);
  font-family: var(--mono); font-size: 12px; line-height: 1.4;
  max-width: 280px;
}
/* One project photograph per sector in the label column: 696x464 asset,
   shown at 300px on desktop and the content width (335px at 375) below. */
.sector__photo { margin: 0 0 12px; max-width: 360px; }
.sector__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ink-2); }
.sector__photo figcaption { font-family: var(--mono); font-size: 12px; color: var(--mist); margin-top: 6px; line-height: 1.35; }
.sector__photo + .slot { margin-top: 4px; }

.row {
  display: grid;
  grid-template-columns: var(--row-w) 1fr;
  grid-template-areas:
    "thumb name"
    "thumb where"
    "thumb value";
  column-gap: 16px; row-gap: 2px;
  padding: 16px 0;
  border-top: 1px solid var(--line-dark);
  align-items: start;
}
.row:first-child { border-top: 0; }
.row__thumb {
  grid-area: thumb;
  width: var(--row-w); height: var(--row-h); overflow: hidden;
  display: grid; place-items: center;
  background: var(--ink-2);
}
.row__thumb img { width: auto; height: auto; max-width: none; } /* 2011 thumbnail at native size, never scaled */
.row__thumb--photo img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; } /* 390x260 crop, shrinks to the cell */
.row__thumb--empty {
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, var(--line-dark) 9px 10px),
    var(--ink-2);
}
.row__name {
  grid-area: name;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 0.95;
  color: var(--porcelain);
}
.row__name small { display: block; font-family: var(--body); font-weight: 400; font-size: 14px; line-height: 1.3; color: var(--mist); margin-top: 4px; }
.row__where { grid-area: where; color: var(--mist); font-size: 15px; margin-top: 4px; }
.row__value { grid-area: value; font-size: 15px; color: var(--porcelain); }
.row__value--np { color: var(--mist); font-family: var(--body); }

@media (min-width: 900px) {
  .sector { grid-template-columns: 300px 1fr; }
  .sector__label { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; }
  .row {
    grid-template-columns: var(--row-w) 1fr 180px 190px;
    grid-template-areas: "thumb name where value";
    align-items: center;
    padding: 14px 0;
  }
  .row__where { margin-top: 0; }
  .row__value { text-align: right; }
}

.wall__foot {
  border-top: 2px solid var(--porcelain);
  padding-top: 24px;
  color: var(--mist);
  max-width: var(--max);
}
.wall__foot strong { color: var(--porcelain); }

/* ---------- Scope ---------- */

.scope {
  background: var(--porcelain); color: var(--ink);
  padding: clamp(72px, 10vw, 140px) var(--gutter);
  --focus: var(--verde);
}
.scope__head, .scope__band { max-width: var(--max); margin: 0 auto; }
.scope__head { margin-bottom: clamp(40px, 6vw, 80px); }

.scope__band {
  display: grid; grid-template-columns: 1fr; gap: 28px 56px;
  padding: clamp(32px, 5vw, 64px) 0;
  border-top: 1px solid var(--line-light);
}
.scope__media { margin: 0; position: relative; }
.scope__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.scope__img img { width: 100%; height: 100%; object-fit: cover; }
.scope__cap {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--mono); font-size: 12px; color: var(--porcelain);
  background: rgba(22, 34, 30, 0.7); padding: 4px 8px;
}
/* Real photographs in the scope bands are 700x465; the 4:3 box is at most
   527px wide (5fr of 1320 less the gap), so the frame only ever shrinks. */
.scope__img--photo { max-width: 700px; }
.scope__code { color: var(--verde); font-size: 13px; margin-bottom: 10px; }
.scope__title { font-size: clamp(34px, 4vw, 56px); margin-bottom: 18px; color: var(--ink); }
.scope__text p { max-width: 62ch; color: var(--ink); }
.terms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.terms li {
  font-family: var(--mono); font-size: 13px; line-height: 1.2;
  padding: 8px 10px; border: 1px solid var(--slate); color: var(--slate);
  border-radius: 2px;
}

@media (min-width: 900px) {
  .scope__band { grid-template-columns: 5fr 7fr; align-items: start; }
  .scope__band--flip .scope__media { order: 2; }
  .scope__media { position: sticky; top: calc(var(--top-h) + 32px); }
}

/* ---------- Voices ---------- */

.voices {
  background: var(--verde); color: var(--porcelain);
  padding: clamp(72px, 10vw, 140px) var(--gutter);
}
.voices__head, .voices__grid { max-width: var(--max); margin: 0 auto; }
.voices__head { margin-bottom: clamp(32px, 5vw, 64px); }
.voices__head .eyebrow--light { color: var(--porcelain); }
.voices__head .section-title { max-width: 18ch; }
.voices__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.voice {
  margin: 0; padding: 26px 24px 22px;
  border: 1px solid rgba(241, 243, 240, 0.35);
  display: flex; flex-direction: column; gap: 18px;
}
.voice p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; margin: 0; font-weight: 500; }
.voice footer { font-size: 15px; color: var(--porcelain); border-top: 1px solid rgba(241, 243, 240, 0.35); padding-top: 12px; margin-top: auto; }
@media (min-width: 900px) {
  .voices__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Prequalification ---------- */

.prequal {
  background: var(--porcelain); color: var(--ink);
  padding: clamp(72px, 10vw, 140px) var(--gutter);
  --focus: var(--verde);
}
.prequal__head, .spec { max-width: var(--max); margin: 0 auto; }
.prequal__head { margin-bottom: clamp(32px, 5vw, 56px); }
.spec { border-top: 2px solid var(--ink); margin-top: 0; margin-bottom: 0; }
.spec__row {
  display: grid; grid-template-columns: 1fr; gap: 4px 32px;
  padding: 16px 0; border-bottom: 1px solid var(--line-light);
}
.spec dt { font-family: var(--mono); font-size: 13px; color: var(--verde); }
.spec dd { margin: 0; font-size: 17px; color: var(--ink); max-width: 70ch; }
@media (min-width: 760px) {
  .spec__row { grid-template-columns: 240px 1fr; padding: 18px 0; }
  .spec dt { padding-top: 3px; }
}

/* ---------- Contact ---------- */

.contact {
  background: var(--ink); color: var(--porcelain);
  padding: clamp(72px, 10vw, 140px) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: 48px 64px;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.contact__person { display: grid; grid-template-columns: 1fr; gap: 24px; align-content: start; }
.contact__photo { width: min(100%, 320px); aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.contact__name { font-size: clamp(52px, 7vw, 96px); }
.contact__role { color: var(--mist); font-size: 17px; margin: 8px 0 22px; }
.contact__lines { display: grid; gap: 10px; border-top: 1px solid var(--line-dark); padding-top: 16px; margin-bottom: 24px; }
.contact__lines li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; font-size: 16px; }
.contact__lines a { color: var(--porcelain); text-decoration-color: var(--marigold); text-underline-offset: 3px; }
.contact__k { font-family: var(--mono); font-size: 13px; color: var(--marigold); padding-top: 2px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__todo { font-family: var(--mono); font-size: 12px; color: var(--mist); margin-top: 10px; }

.invite {
  background: var(--ink-2); padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line-dark);
  align-self: start;
}
.invite__title { font-size: clamp(36px, 4vw, 52px); margin-bottom: 8px; }
.invite__lead { color: var(--mist); font-size: 15px; margin-bottom: 22px; max-width: 52ch; }
.invite__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field span { font-family: var(--mono); font-size: 13px; color: var(--mist); }
.field input, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--porcelain);
  background: var(--ink); border: 1px solid var(--mist); border-radius: 3px;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--mist); opacity: 0.8; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--marigold); outline-offset: 1px; border-color: var(--marigold); }
.invite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.invite__status { margin: 0; font-size: 15px; color: var(--marigold); }
.invite__mail { color: var(--porcelain); text-decoration-color: var(--marigold); text-underline-offset: 3px; overflow-wrap: anywhere; }

@media (min-width: 700px) {
  .invite__grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .contact { grid-template-columns: 6fr 6fr; }
  .contact__person { grid-template-columns: 240px 1fr; }
  .contact__photo { width: 240px; }
}

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

.foot {
  background: var(--ink); color: var(--mist);
  padding: 40px var(--gutter) 48px;
  border-top: 1px solid var(--line-dark);
  font-size: 15px;
}
.foot p { max-width: 70ch; }
.foot__mark { color: var(--porcelain); font-family: var(--display); font-weight: 900; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.foot__small { font-family: var(--mono); font-size: 12px; margin-bottom: 0; }

/* ---------- Motion guard ---------- */
/* Below the hero nothing is hidden by CSS. GSAP sets initial states
   only after it has loaded and only when motion is allowed. The hero
   keyframes above are gated on prefers-reduced-motion: no-preference and
   end at the natural state, so the fallback is the static page. */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .hero__media img, [data-hero-line], [data-hero-fact] { animation: none; }
}