/* Modern Tile Company, option Cadence A, "The setting bed".
   The page is a grouted field: the body is the grout, every content block
   is a tile sitting on it. Rules between ledger rows are grout gaps, not
   hairlines. Tokens only; no literal colors in components. */

:root {
  --grout: #d6dcd4;      /* page field, light grey-green */
  --tile: #f8f9f6;       /* tile surface */
  --ink: #131c16;        /* text */
  --ink-soft: #3f4c44;   /* secondary text, 8.5:1 on tile */
  --green: #1b5e3b;      /* brand green, 7.3:1 on tile, 5.5:1 on grout */
  --slab: #182620;       /* dark band */
  --mint: #9eddb4;       /* figures on slab, 10:1 */
  --slab-text: #e6ece5;

  --font-display: "Big Shoulders Display", "Archivo Narrow", "Arial Narrow", sans-serif-condensed, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  --grout-w: 4px;        /* the joint */
  --radius: 2px;         /* rectified edge, not zero, not rounded */
  --pad: 16px;
  --measure: 62ch;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grout);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  padding: var(--grout-w);
  padding-bottom: 88px; /* room for the mobile dock */
  display: grid;
  gap: var(--grout-w);
}

main { display: grid; gap: var(--grout-w); }

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

a { color: var(--green); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.slab :focus-visible { outline-color: var(--mint); }

.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  background: var(--ink);
  color: var(--tile);
  padding: 10px 14px;
  z-index: 20;
}
.skip:focus-visible { top: var(--pad); }

.tile {
  background: var(--tile);
  border-radius: var(--radius);
  padding: var(--pad);
}

.todo, .todo-inline {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: .8125rem;
  background: var(--grout);
  border-radius: var(--radius);
  padding: 1px 4px;
}
.todo { display: inline-block; margin: 8px 0 0; padding: 6px 8px; }

/* Type */
.eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.005em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.75rem, 11vw, 6.75rem); max-width: 14ch; }
h2 { font-size: clamp(2rem, 7vw, 3.75rem); max-width: 18ch; }
h3 { font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 700; }
.lede { font-size: 1.0625rem; max-width: var(--measure); margin: 16px 0 0; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Masthead */
.mast {
  background: var(--tile);
  border-radius: var(--radius);
  padding: var(--pad);
  display: grid;
  gap: 12px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__mark {
  width: 26px; height: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  flex: none;
}
.wordmark__mark::before, .wordmark__mark::after {
  content: "";
  display: block;
  border-radius: 1px;
}
.wordmark__mark::before { background: var(--green); grid-row: 1 / span 2; }
.wordmark__mark::after { background: var(--ink-soft); grid-row: 2; }
.wordmark__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.wordmark__text small { font-weight: 500; font-size: .7em; letter-spacing: .04em; }
.mast__line { margin: 0; color: var(--ink-soft); max-width: var(--measure); font-size: .9375rem; }
.mast__nav { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: .9375rem; font-weight: 500; }
.mast__nav a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* mobile touch target; 36px from 720px */
  padding: 0 2px;
}
.mast__nav a:hover { text-decoration: underline; }
.mast__phone {
  font-family: var(--font-mono);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  justify-self: start;
}

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.actions--stack { flex-direction: column; align-items: stretch; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  color: var(--green);
  background: var(--tile);
  border: 2px solid var(--green);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { background: var(--grout); color: var(--ink); }
.btn--primary { background: var(--green); color: var(--tile); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--tile); }
.btn--quiet { border-style: dashed; color: var(--ink-soft); border-color: var(--ink-soft); cursor: default; }
.btn--quiet:hover { background: var(--tile); color: var(--ink-soft); }
.btn--sm { min-height: 44px; padding: 8px 14px; font-size: .9375rem; }

/* Opening */
.open { padding-top: 32px; padding-bottom: 32px; }
.tally {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grout-w);
  background: var(--grout);
  border-radius: var(--radius);
  overflow: hidden;
}
.tally div { background: var(--tile); padding: 12px 12px 10px; display: grid; }
.tally dt { font-size: .8125rem; color: var(--ink-soft); order: 2; margin: 2px 0 0; }
.tally dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  order: 1;
}
.tally dd.num { font-family: var(--font-mono); font-weight: 500; font-size: 1.1875rem; padding-top: 8px; letter-spacing: -.02em; }

/* The tag: the four prequalification facts an estimator checks first and
   the person the invitation goes to, one short course under the opening.
   Small tiles, no motion, so the record below stays the centerpiece. */
.tag { display: grid; gap: var(--grout-w); }
.tag__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grout-w);
}
.tag__fact {
  padding: 10px 12px 12px;
  display: grid;
  gap: 3px;
  align-content: start;
  border-top: 3px solid var(--green);
}
.tag__fact dt { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-soft); }
.tag__fact dd { margin: 0; font-weight: 500; font-size: .9375rem; line-height: 1.3; }
.tag__fact dd.num { font-size: 1rem; }
.tag__card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "photo who" "links links";
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  padding: 12px;
}
.tag__photo { grid-area: photo; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); }
.tag__who { grid-area: who; }
.tag__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.tag__title { margin: 4px 0 0; color: var(--ink-soft); font-size: .9375rem; }
.tag__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 8px; }

/* Photo band: the company's own project photographs, one or two per
   course, each a tile on the grout. Sources are 700px wide and are only
   ever shown at or below that width. */
.band { display: grid; gap: var(--grout-w); }
.band__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grout-w);
}
.plate { margin: 0; padding: 0; overflow: hidden; display: grid; }
.plate img { width: 100%; max-width: 700px; aspect-ratio: 3 / 2; object-fit: cover; }
.plate figcaption, .rail__item figcaption, .service__figure figcaption {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-soft);
  padding: 8px 10px 10px;
  line-height: 1.35;
}
.plate__course { display: block; color: var(--green); margin-bottom: 2px; }
.band__note { margin: 0; background: var(--tile); border-radius: var(--radius); padding: 10px var(--pad); font-size: .875rem; color: var(--ink-soft); max-width: none; }

/* Gallery rail: the trophy projects at native size. Frames are 700x465 or
   399x600; every frame is set to one row height and the browser only
   downscales (240px tall on a phone, the native 465px from 720px up). */
.gallery { display: grid; gap: var(--grout-w); }
.rail {
  background: var(--tile);
  border-radius: var(--radius);
  padding: var(--pad) 0;
  display: flex;
  gap: var(--grout-w);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  align-items: start;
}
.rail::before, .rail::after { content: ""; flex: none; width: calc(var(--pad) - var(--grout-w)); }
.rail__item { margin: 0; flex: none; display: grid; grid-template-columns: max-content; scroll-snap-align: start; background: var(--grout); border-radius: var(--radius); overflow: hidden; }
.rail__item img { height: 240px; width: auto; max-width: none; }
/* width 0 + min-width 100%: the caption wraps to the image's width and
   never widens the figure */
.rail__item figcaption { width: 0; min-width: 100%; }

/* Section heads */
.section-head { display: grid; gap: 6px; padding-top: 28px; padding-bottom: 28px; }
.section-head__note { margin: 10px 0 0; max-width: var(--measure); color: var(--ink-soft); font-size: .9375rem; }

/* The ledger */
.ledger { display: grid; gap: var(--grout-w); }
.course { display: grid; gap: var(--grout-w); }
.course__head {
  background: var(--green);
  color: var(--tile);
  border-radius: var(--radius);
  padding: 12px var(--pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.course__count { font-family: var(--font-mono); font-size: .875rem; font-weight: 400; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grout-w); }
.row {
  background: var(--tile);
  border-radius: var(--radius);
  padding: 10px 12px 10px 10px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name value"
    "thumb where value";
  column-gap: 12px;
  align-items: start;
}
.row__thumb {
  grid-area: thumb;
  width: 96px; height: 64px;
  object-fit: cover;
  border-radius: 1px;
  background: var(--grout);
}
.row__thumb--empty { display: block; }
.row__name { grid-area: name; font-weight: 600; line-height: 1.3; }
.row__note { display: block; font-weight: 400; color: var(--ink-soft); font-size: .875rem; }
.row__where { grid-area: where; color: var(--ink-soft); font-size: .9375rem; }
.row__value {
  grid-area: value;
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  align-self: start;
}
.row__value--np { font-weight: 400; color: var(--ink-soft); font-size: .8125rem; padding-top: 3px; }
.row--todo .row__name { font-weight: 400; }
.course__foot {
  margin: 0;
  background: var(--tile);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: .875rem;
  color: var(--ink-soft);
  border-left: 6px solid var(--green);
}
.course__foot [data-sum] { color: var(--ink); font-weight: 500; font-size: 1rem; }
.ledger__foot { padding-top: 24px; padding-bottom: 24px; border-left: 6px solid var(--green); }
.ledger__total { display: grid; gap: 4px; }
.ledger__total-label { font-size: .9375rem; color: var(--ink-soft); }
.ledger__total-num {
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: 1;
  font-weight: 500;
  color: var(--green);
  min-width: 11ch;
}
.ledger__fine { margin: 12px 0 0; font-size: .875rem; color: var(--ink-soft); max-width: var(--measure); }

/* History */
.history { display: grid; gap: var(--grout-w); }
.dates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grout-w); }
.date { display: grid; gap: 4px; }
.date__year { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--green); }
.date__text { max-width: var(--measure); }

/* Services */
.services { display: grid; gap: var(--grout-w); }
.service { display: grid; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.service__code { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.service__csi { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.service__csi span {
  font-family: var(--font-mono);
  font-size: .8125rem;
  background: var(--grout);
  border-radius: var(--radius);
  padding: 3px 7px;
}
.service__body { display: grid; gap: 14px; max-width: 72ch; }
.service__body p { margin: 0; }
.spec { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--grout-w); }
.spec li {
  padding: 8px 10px 8px 14px;
  border-left: 3px solid var(--green);
  background: var(--grout);
  border-radius: var(--radius);
  font-size: .9375rem;
}
.service__warranty { font-family: var(--font-mono); font-size: .875rem; color: var(--green); }
.service__figure { margin: 6px 0 0; background: var(--grout); border-radius: var(--radius); overflow: hidden; width: fit-content; max-width: 100%; }
.service__figure img { width: auto; max-width: 100%; }
.service__figure figcaption { max-width: 402px; }

/* References */
.refs { display: grid; gap: var(--grout-w); }
.refs__grid { display: grid; gap: var(--grout-w); }
.ref { margin: 0; display: grid; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.ref p { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.ref footer { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-soft); }
.ref cite { font-style: normal; color: var(--ink); font-weight: 500; }

/* Prequalification slab */
.slab {
  background: var(--slab);
  color: var(--slab-text);
  border-radius: var(--radius);
  padding: var(--pad);
  display: grid;
  gap: var(--grout-w);
}
.slab .section-head { background: transparent; padding-left: 0; padding-right: 0; }
.slab .eyebrow { color: var(--mint); }
.slab h2 { color: var(--slab-text); }
.slab .todo-inline { background: var(--ink); color: var(--mint); }
.facts { margin: 0; display: grid; gap: var(--grout-w); }
.fact {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-top: 2px solid var(--green);
}
.fact dt { font-family: var(--font-mono); font-size: .8125rem; color: var(--mint); }
.fact dd { margin: 0; }
.fact dd.num { font-size: 1.125rem; }

/* Contact */
.contact { display: grid; gap: var(--grout-w); }
.contact__grid { display: grid; gap: var(--grout-w); }
.portrait { margin: 0; padding: var(--pad); }
.portrait img { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.card { display: grid; gap: 10px; }
.card__name { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 2.5rem; line-height: 1; }
.card__title { margin: 0; color: var(--ink-soft); }
.card__lines { margin: 8px 0 0; display: grid; gap: 6px; }
.card__lines div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.card__lines dt { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-soft); padding-top: 3px; }
.card__lines dd { margin: 0; }
.card__note { margin: 4px 0 0; font-size: .9375rem; color: var(--ink-soft); max-width: var(--measure); }

/* Footer */
.foot { background: var(--tile); border-radius: var(--radius); padding: var(--pad); color: var(--ink-soft); font-size: .875rem; display: grid; gap: 8px; }
.foot p { margin: 0; max-width: 80ch; }

/* Mobile dock: the two actions an estimator on a phone wants */
.dock {
  position: fixed;
  left: var(--grout-w); right: var(--grout-w); bottom: var(--grout-w);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grout-w);
  padding: var(--grout-w);
  background: var(--grout);
  border-radius: var(--radius);
  z-index: 10;
}
.dock .btn { min-height: 52px; padding-left: 8px; padding-right: 8px; font-size: .9375rem; }

/* Motion: one orchestrated moment. Rows and course heads rise into place
   as the ledger enters view; the grand total counts up once. JS adds .js
   so a script failure never leaves the record hidden. */
.js .row, .js .course__head, .js .course__foot {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js .is-in .row, .js .is-in .course__head, .js .is-in .course__foot,
.js .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .row, .js .course__head, .js .course__foot {
    opacity: 1; transform: none; transition: none;
  }
  .btn { transition: none; }
}

/* 720px and up */
@media (min-width: 720px) {
  :root { --pad: 24px; }
  body { font-size: 1.0625rem; padding-bottom: var(--grout-w); }
  .dock { display: none; }
  .mast {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand phone" "nav nav";
    align-items: start;
  }
  .mast__brand { grid-area: brand; }
  .mast__phone { grid-area: phone; }
  .mast__nav { grid-area: nav; gap: 0 16px; }
  .mast__nav a, .mast__phone { min-height: 36px; }
  .open { padding-top: 56px; padding-bottom: 48px; }
  .tally { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tag__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tag__card {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "photo who links";
    padding: 12px var(--pad) 12px 12px;
  }
  .rail__item img { height: 465px; }
  .row {
    grid-template-columns: 96px minmax(0, 1fr) 200px 150px;
    grid-template-areas: "thumb name where value";
    align-items: center;
    padding: 8px 16px 8px 10px;
  }
  .row__where { padding-top: 0; }
  .course__foot { padding-right: 16px; }
  .date { grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
  .service { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
  .service__label { position: sticky; top: 16px; align-self: start; }
  .spec--two { grid-template-columns: 1fr 1fr; }
  .refs__grid { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; gap: 16px 32px; }
  .contact__grid { grid-template-columns: 360px minmax(0, 1fr); }
  .actions--stack { flex-direction: row; }
}

/* 1200px and up: the ledger gets a fixed reading width, the rest stretches */
@media (min-width: 1200px) {
  :root { --pad: 32px; }
  body { padding: 8px; gap: 8px; }
  main { gap: 8px; }
  .ledger, .history, .services, .refs, .contact, .tag, .band, .gallery { gap: 8px; }
  .course, .rows, .dates, .refs__grid, .contact__grid, .tag__facts, .band__grid, .rail { gap: 8px; }
  .band__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tag { grid-template-columns: minmax(0, 1fr) 420px; align-items: stretch; }
  .tag__card {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "photo who" "links links";
    align-content: center;
  }
  .open { padding-top: 80px; padding-bottom: 64px; }
  .ledger__total { grid-template-columns: 1fr auto; align-items: end; }
  .service { grid-template-columns: 320px minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(3, 1fr); }
}