/* ============================================================
   The tab pages: /services, /about, /gallery, /process
   Loaded after styles.css, on those four pages only.

   The site is "The Drawing Sheet", so each tab is drawn as one sheet of a
   set: a photographic header that ends in an architect's title block
   (sheet number, title, the facts that matter on that sheet), then a
   layout built for that page alone. Home stays the one-page overview.
   ============================================================ */

/* The one colour outside paper, ink and slate: a muted brick, used only to
   mark what goes wrong the usual way (the crosses on /about). Kept rare so
   it reads as a warning, not decoration. */
:root { --warn: #A8442F; }

/* ---------- sheet header ----------
   Same construction as the home hero (photo layer, scrim layer, copy on
   top) so the nav, which is styled for a dark top until it scrolls, reads
   the same on every page. Shorter than the home hero: this is a sheet,
   not the cover. */
.sheet-hero {
  position: relative; overflow: hidden;
  min-height: min(86svh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sheet-hero-photo { position: absolute; inset: 0; }
.sheet-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.sheet-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(17,17,16,0.92) 0%, rgba(17,17,16,0.80) 34%, rgba(17,17,16,0.45) 62%, rgba(17,17,16,0.18) 100%),
    linear-gradient(to top, rgba(17,17,16,0.96) 0%, rgba(17,17,16,0.5) 32%, rgba(17,17,16,0) 60%),
    linear-gradient(to bottom, rgba(17,17,16,0.7) 0%, rgba(17,17,16,0) 20%);
}
@media (max-width: 860px) {
  .sheet-hero-scrim {
    background: linear-gradient(to top, rgba(17,17,16,0.96) 0%, rgba(17,17,16,0.86) 45%, rgba(17,17,16,0.62) 100%);
  }
}
.sheet-hero-main, .title-block { position: relative; z-index: 1; }
.sheet-hero-main {
  max-width: 1440px; width: 100%; margin: 0 auto;
  padding: clamp(8rem, 16vh, 11rem) var(--pad-x) clamp(2.2rem, 5vh, 3.6rem);
}
.sheet-no {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--slate-lt); margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: 14px;
}
.sheet-no::after { content: ""; width: 72px; height: 1px; background: var(--line-ink); }
.sheet-title {
  font-size: clamp(2.9rem, 8.6vw, 7.6rem);
  font-weight: 600; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95;
}
.sheet-title .dim { color: rgba(242, 242, 240, 0.55); }
.sheet-title .ln { display: block; overflow: hidden; }
.sheet-title .ln > span { display: block; animation: sheet-rise 0.9s cubic-bezier(0.22, 1.18, 0.36, 1) both; }
.sheet-title .ln:nth-child(2) > span { animation-delay: 0.12s; }
.sheet-title .ln:nth-child(3) > span { animation-delay: 0.24s; }
@keyframes sheet-rise { from { transform: translateY(110%); } to { transform: none; } }
.sheet-lede {
  margin-top: 1.6rem; max-width: 52ch; font-size: 1.04rem; color: var(--paper-soft);
  animation: sheet-fade 0.9s var(--ease) 0.4s both;
}
@keyframes sheet-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the title block: a drawing's stamp, here the page's key facts */
.title-block {
  display: grid; grid-template-columns: 0.7fr 1fr 1fr 1fr;
  max-width: 1440px; width: 100%; margin: 0 auto;
  border-top: 1px solid var(--line-ink);
}
.tb-cell { padding: 1.3rem 1.4rem 1.5rem; border-right: 1px solid var(--line-ink); }
.tb-cell:first-child { padding-left: var(--pad-x); }
.tb-cell:last-child { border-right: 0; padding-right: var(--pad-x); }
.tb-cell small {
  display: block; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--slate-lt); margin-bottom: 0.4rem;
}
.tb-cell strong { font-size: clamp(0.92rem, 1.35vw, 1.15rem); font-weight: 600; }
.tb-cell.tb-sheet strong { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: 0.02em; }
@media (max-width: 860px) {
  .title-block { grid-template-columns: 1fr 1fr; }
  .tb-cell { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-ink); }
  .tb-cell:nth-child(2n) { border-right: 0; }
  .tb-cell:nth-child(2n+1) { padding-left: var(--pad-x); }
  .tb-cell:nth-child(n+3) { border-bottom: 0; }
}

/* shared bits */
.lede-lg { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.5; max-width: 40ch; }
.text-link {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color 0.3s;
}
.text-link:hover { color: var(--slate); }
.on-ink .text-link:hover { color: var(--slate-lt); }
.fig-cap {
  display: flex; gap: 14px; align-items: baseline; padding-top: 0.7rem;
  font-size: 0.74rem; color: var(--slate);
}
.fig-cap b { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.28em; color: var(--slate); }
.frame { display: block; overflow: hidden; border: 1px solid var(--line); background: var(--paper-hi); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
a:hover > .frame img, .frame:hover img { transform: scale(1.03); }

/* ==================== SERVICES ==================== */
/* jump strip: the five trades as a ruled index under the header */
.jump {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.jump a {
  padding: 1.3rem 1.2rem 1.4rem; text-decoration: none; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.35rem;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.jump a:first-child { padding-left: var(--pad-x); }
.jump a:last-child { border-right: 0; }
.jump a small { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.28em; color: var(--slate); }
.jump a span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.jump a:hover { background: var(--ink); color: var(--paper); }
.jump a:hover small { color: var(--slate-lt); }
@media (max-width: 900px) {
  .jump { grid-template-columns: 1fr 1fr; }
  .jump a { padding-left: 1.2rem; border-bottom: 1px solid var(--line); }
  .jump a:nth-child(2n) { border-right: 0; }
  .jump a:nth-child(2n+1) { padding-left: var(--pad-x); }
  .jump a:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* one chapter per trade: photo and text side by side, alternating */
.chapter {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: start;
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-bottom: 1px solid var(--line);
}
.chapter:last-of-type { border-bottom: 0; }
.chapter-media { grid-column: 1 / span 7; }
.chapter-body { grid-column: 8 / span 5; position: relative; }
.chapter.flip .chapter-media { grid-column: 6 / span 7; grid-row: 1; }
.chapter.flip .chapter-body { grid-column: 1 / span 5; grid-row: 1; }
.chapter-media .frame img { aspect-ratio: 4 / 3; }
.chapter-num {
  display: block; font-weight: 600; line-height: 0.8; letter-spacing: -0.04em;
  font-size: clamp(5rem, 11vw, 9.5rem);
  color: transparent; -webkit-text-stroke: 1px rgba(17, 17, 16, 0.28);
  margin-bottom: 1.4rem;
}
@supports not (-webkit-text-stroke: 1px black) { .chapter-num { color: rgba(17, 17, 16, 0.12); } }
.chapter h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 1; margin-bottom: 1.2rem;
}
.chapter-body > p { color: var(--slate); max-width: 46ch; }
.incl { list-style: none; margin: 1.8rem 0 2rem; border-top: 1px solid var(--line); }
.incl li {
  position: relative; padding: 0.75rem 0 0.75rem 1.9rem; border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.incl li::before {
  content: ""; position: absolute; left: 2px; top: 1.3rem; width: 11px; height: 1px; background: var(--ink);
}
.chapter-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
/* a row of three small plates under the main photo, for trades with range */
.mini-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 0.8rem; }
.mini-strip .frame img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter-media, .chapter-body,
  .chapter.flip .chapter-media, .chapter.flip .chapter-body { grid-column: 1; grid-row: auto; }
  .chapter-num { font-size: 4.4rem; margin-bottom: 0.8rem; }
}

/* commercial has no photographed jobs yet, so it is a typeset panel */
.panel {
  margin: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end;
}
.panel .chapter-num { -webkit-text-stroke-color: rgba(242, 242, 240, 0.3); }
.panel .incl { border-top-color: var(--line-ink); margin-bottom: 0; }
.panel .incl li { border-bottom-color: var(--line-ink); color: var(--paper-soft); }
.panel .incl li::before { background: var(--slate-lt); }
.panel p { color: var(--paper-soft); max-width: 44ch; margin-bottom: 2rem; }
.panel h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 600; text-transform: uppercase; line-height: 1; margin-bottom: 1.2rem; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }

/* ==================== ABOUT ==================== */
/* the usual way versus ours: two columns side by side at every width.
   Left is hatched like demolition on a drawing, its firms drawn as separate
   boxes with broken links; right is one solid ink block holding the same
   four jobs. The shape carries the argument before anyone reads a word. */
.versus {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 2vw, 1.6rem);
  margin-top: 3rem; align-items: stretch;
}
.vs-col { display: flex; flex-direction: column; padding: clamp(1rem, 3vw, 2.2rem); border: 1px solid var(--line); }
.vs-col.bad {
  color: var(--slate);
  background: repeating-linear-gradient(135deg, rgba(17, 17, 16, 0.045) 0 1px, transparent 1px 8px), var(--paper);
}
.vs-col.good { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vs-tag {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
}
.vs-mark {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; letter-spacing: 0;
}
.bad .vs-mark { border: 1px solid var(--warn); color: var(--warn); }
.good .vs-mark { background: var(--paper); color: var(--ink); }
.vs-stat { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.03em; margin: 1.1rem 0 0.35rem; }
.bad .vs-stat { color: var(--slate); }
.vs-sub { font-size: 0.8rem; margin-bottom: 1.4rem; }
.good .vs-sub { color: var(--paper-soft); }
.chain { display: flex; flex-direction: column; flex: 1; }
.chain span, .one-block span {
  font-size: clamp(0.62rem, 1.4vw, 0.74rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.6rem 0.7rem;
}
.chain span { border: 1px dashed var(--slate-lt); background: var(--paper-hi); color: var(--slate); }
/* the gap between two firms: a broken line with a cross on it */
.chain i { position: relative; height: 1.7rem; display: block; }
.chain i::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--slate-lt); }
.chain i::after {
  content: "✕"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--warn); font-size: 0.7rem; font-style: normal; background: var(--paper); padding: 0 3px; line-height: 1;
}
.one-block { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--paper); }
.one-block span { flex: 1; display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid var(--line-ink); }
.one-block span:last-child { border-bottom: 0; }
.one-block span::before { content: "✓"; color: var(--paper); font-size: 0.8rem; letter-spacing: 0; }

/* the line-by-line comparison under the two columns */
.vs-table { margin-top: clamp(2rem, 4vw, 3rem); }
.vs-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0 clamp(0.8rem, 2vw, 1.6rem);
  padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.vs-row.head { border-bottom: 1px solid var(--ink); padding-top: 0; }
.vs-row.head span { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--slate); }
.vs-row.head span:last-child { color: var(--ink); }
.vs-row b { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); }
.vs-row .no, .vs-row .yes { display: flex; gap: 0.5rem; font-size: 0.92rem; line-height: 1.35; }
.vs-row .no { color: var(--slate); }
.vs-row .no::before { content: "✕"; flex: 0 0 auto; color: var(--warn); }
.vs-row .yes { font-weight: 600; }
.vs-row .yes::before { content: "✓"; flex: 0 0 auto; }
@media (max-width: 640px) {
  .vs-row { grid-template-columns: 1fr 1fr; row-gap: 0.4rem; }
  .vs-row b { grid-column: 1 / -1; }
  .vs-row.head span:first-child { display: none; }
  .vs-row .no, .vs-row .yes { font-size: 0.86rem; }
}

/* the four disciplines, one ruled row each */
.disc { margin-top: 3rem; border-top: 1px solid var(--line-ink); }
.disc-row {
  display: grid; grid-template-columns: 6rem 1fr 1.4fr; gap: clamp(1.2rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.4vw, 2.8rem) 0; border-bottom: 1px solid var(--line-ink); align-items: baseline;
}
.disc-row .letter {
  font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 242, 240, 0.4);
}
.disc-row h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; }
.disc-row p { color: var(--paper-soft); max-width: 52ch; }
@media (max-width: 760px) {
  .disc-row { grid-template-columns: 3.4rem 1fr; }
  .disc-row p { grid-column: 2; }
}

/* the record */
.record {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 3rem;
}
.record-cell { padding: 1.5rem 1.4rem 1.7rem; border-right: 1px solid var(--line); }
.record-cell:first-child { padding-left: 0; }
.record-cell:last-child { border-right: 0; }
.record-cell small {
  display: block; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 0.45rem;
}
.record-cell strong { font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 600; }
.record-cell a { font-size: 0.78rem; color: var(--slate); }
@media (max-width: 860px) {
  .record { grid-template-columns: 1fr 1fr; }
  .record-cell { border-bottom: 1px solid var(--line); padding-left: 1.2rem; }
  .record-cell:nth-child(2n) { border-right: 0; }
  .record-cell:nth-child(2n+1) { padding-left: 0; }
  .record-cell:nth-child(n+3) { border-bottom: 0; }
}
.cities {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin-top: 2.4rem; border-left: 1px solid var(--line);
}
.cities li {
  list-style: none; padding: 0.8rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.02em;
}
.cities li:nth-child(-n+2) { font-weight: 600; }
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.split-head p { color: var(--slate); max-width: 46ch; }
@media (max-width: 860px) { .split-head { grid-template-columns: 1fr; } }
.strip3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); margin-top: 3rem; }
.strip3 a { text-decoration: none; }
.strip3 .frame img { aspect-ratio: 4 / 5; }
@media (max-width: 700px) { .strip3 { grid-template-columns: 1fr 1fr; } .strip3 a:last-child { display: none; } }

/* ==================== PROCESS ==================== */
.step {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(3.6rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--line);
}
.step:first-of-type { padding-top: 0; }
.step-head { position: sticky; top: 110px; align-self: start; }
.step-head .chapter-num { margin-bottom: 1rem; }
.step-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 600; text-transform: uppercase; line-height: 1; letter-spacing: -0.015em; }
.step-body .lede-lg { margin-bottom: 1.8rem; }
/* each step's three cues: an icon, a two-word label, one short line */
.cues { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.cue { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.3rem 1.2rem 0 0; }
.cue + .cue { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.cue svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.cue h3 { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.3rem; }
.cue p { font-size: 0.98rem; font-weight: 500; line-height: 1.4; }
@media (max-width: 900px) {
  /* a numbered rail down the left: the steps read as one path, not four essays */
  .step {
    grid-template-columns: 1fr; gap: 0.6rem; position: relative;
    padding: 0 0 2.6rem 3.4rem; border-bottom: 0;
  }
  .step::before {
    content: ""; position: absolute; left: 1.15rem; top: 2.4rem; bottom: 0;
    border-left: 1px solid var(--line);
  }
  .step:last-of-type::before { display: none; }
  .step::after {
    content: attr(data-n); position: absolute; left: 0; top: 0;
    width: 2.3rem; height: 2.3rem; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  }
  .step-head { position: static; }
  .step-head .chapter-num { display: none; }
  .step-head h2 { font-size: 1.35rem; padding-top: 0.35rem; }
  .step-body .lede-lg { font-size: 1rem; color: var(--slate); margin-bottom: 1rem; }
  .cues { grid-template-columns: 1fr; border-top: 0; }
  .cue, .cue + .cue { padding: 0.75rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .cue p { font-size: 0.94rem; }
}



/* protections under California law */
.protect { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3rem; border-top: 1px solid var(--line-ink); }
.protect > div { padding: 1.6rem 1.4rem 1.8rem; border-right: 1px solid var(--line-ink); }
.protect > div:first-child { padding-left: 0; }
.protect > div:last-child { border-right: 0; }
.protect b { display: block; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.protect h3 { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.45rem; }
.protect p { font-size: 0.87rem; color: var(--paper-soft); }
.protect-note { margin-top: 2rem; font-size: 0.8rem; color: var(--slate-lt); max-width: 70ch; }
.protect-note a { color: var(--paper); }
@media (max-width: 960px) {
  .protect { grid-template-columns: 1fr 1fr; }
  .protect > div { border-bottom: 1px solid var(--line-ink); }
  .protect > div:nth-child(2n) { border-right: 0; }
  .protect > div:nth-child(2n+1) { padding-left: 0; }
}

/* FAQ: native <details>, no script */
.faq { margin-top: 2.6rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.4rem 3rem 1.4rem 0; position: relative;
  font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq details p { padding: 0 0 1.6rem; max-width: 64ch; color: var(--slate); }

/* ==================== GALLERY ==================== */
/* featured project: one large plate, four small, the story beside them */
.feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.4rem, 3.5vw, 3.6rem); align-items: end; margin-top: 3rem; }
.feature-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.feature-plates .big { grid-column: 1 / -1; }
.feature-plates button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.feature-plates button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.feature-plates .big .frame img { aspect-ratio: 16 / 10; }
.feature-plates .frame img { aspect-ratio: 1 / 1; }
.feature-plates button:hover .frame img { transform: scale(1.03); }
.feature-body h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 600; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; }
.feature-body .loc { display: block; margin: 0.8rem 0 1.4rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); }
.feature-body p { color: var(--slate); max-width: 40ch; margin-bottom: 1.8rem; }
.room-counts { list-style: none; border-top: 1px solid var(--line); margin-bottom: 2rem; }
.room-counts li { display: flex; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.room-counts li span { color: var(--slate); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }

/* room filter */
.gal-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 2.6rem 0 2.4rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.gal-tab {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink); background: none;
  border: 1px solid var(--line); padding: 0.75rem 1.1rem; cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.gal-tab small { font-size: inherit; color: var(--slate); margin-left: 0.4rem; letter-spacing: 0.08em; }
.gal-tab:hover { border-color: var(--ink); }
.gal-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gal-tab[aria-pressed="true"] small { color: var(--slate-lt); }
.gal-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the wall: a four-column grid where every seventh plate takes a 2x2 slot,
   and `dense` packing closes the gaps, so it reads like a pinned-up wall
   rather than a spreadsheet of thumbnails */
.gal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(9rem, 15vw, 14rem); grid-auto-flow: dense;
  gap: clamp(0.5rem, 1vw, 0.8rem);
}
.gal-item { position: relative; margin: 0; }
.gal-item.big { grid-column: span 2; grid-row: span 2; }
.gal-item button {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--paper-hi);
  cursor: pointer; overflow: hidden; position: relative;
}
.gal-item button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gal-item button:hover img { transform: scale(1.04); }
/* the house a photo comes from: one small tag, since the room is already
   named by the group heading above it */
.house-chip {
  position: absolute; left: 0.5rem; top: 0.5rem; pointer-events: none;
  background: rgba(242, 242, 240, 0.92); color: var(--ink);
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.5rem; line-height: 1.2;
}
.gal-group + .gal-group { margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.gal-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 1rem; }
.gal-group-head h3 { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; }
.gal-group-head span { font-size: 0.74rem; color: var(--slate); letter-spacing: 0.06em; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 40vw; } }



/* project cards */
.proj-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem); margin-top: 3rem; }
.proj-card { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.proj-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.proj-card .frame img { aspect-ratio: 3 / 2; }
.proj-card:hover .frame img { transform: scale(1.03); }
.proj-meta { display: flex; align-items: baseline; gap: 12px; padding-top: 0.8rem; }
.proj-meta b { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.28em; color: var(--slate); }
.proj-meta strong { font-size: 0.92rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.proj-meta span { margin-left: auto; font-size: 0.76rem; color: var(--slate); }
.proj-rooms { margin-top: 0.35rem; font-size: 0.76rem; color: var(--slate); }
.proj-tour { display: inline-block; margin-top: 0.7rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; }
@media (max-width: 960px) { .proj-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proj-cards { grid-template-columns: 1fr; } }

/* the two before/afters side by side */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); }
.ba-pair .ba { margin-top: 2.4rem; }
.ba-pair .ba-head { display: block; }
.ba-pair .ba-head .label { margin-bottom: 0.6rem; }
@media (max-width: 900px) { .ba-pair { grid-template-columns: 1fr; } }

/* Whipple: three views, each a before stacked over its after */
.tn { margin-top: clamp(3rem, 6vw, 4.6rem); padding-top: 2.4rem; border-top: 1px solid var(--line); }
.tn-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.tn-head .label { margin: 0; }
.tn-head .ba-copy { margin: 0; }
.tn-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); margin-top: 1.8rem; }
.tn-col { margin: 0; display: grid; gap: 0.6rem; align-content: start; }
.tn-col .fig-cap { order: -1; padding: 0; }
.tn-shot { position: relative; }
.tn-shot img { aspect-ratio: 4 / 3; }
.tn-tag {
  position: absolute; left: 0.6rem; top: 0.6rem; padding: 0.3rem 0.55rem;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
}
.tn-tag.now { background: var(--ink); color: var(--paper); }
@media (max-width: 860px) { .tn-head { grid-template-columns: 1fr; gap: 0.6rem; } }

/* About, The Record: "Where we build" with the cities and a short note on
   the left, the crew photo on the right. The photo is a soft phone shot
   (swapped 10/29/2026 for the original, replacing an AI-upscaled copy whose
   faces came out wrong), and the sign behind the crew was retouched out
   because it reads "Integrity General Construction Inc", the old name kept
   off public pages. Keep it small; it is not a hero image. */
.build-row {
  display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start; margin-top: 2.4rem;
}
/* twelve cities, so four, three or two columns always fill every row */
.build-row .cities { margin-top: 0; grid-template-columns: repeat(4, 1fr); }
.crew-note {
  margin-top: 1.6rem; max-width: 40ch;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink);
}
.crew { margin: 0; }
.crew .frame img { aspect-ratio: 4 / 3; }
.crew .fig-cap { margin-top: 0.5rem; }
.crew .fig-cap b { white-space: nowrap; }
@media (max-width: 860px) {
  .build-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .build-row .cities { grid-template-columns: repeat(3, 1fr); }
  .crew { width: min(100%, 260px); }
}
@media (max-width: 560px) {
  .build-row .cities { grid-template-columns: 1fr 1fr; }
}

/* ==================== PHONE ====================
   A phone visitor is scrolling with a thumb, so anything that was a grid of
   facts or a long ruled list becomes one swipeable row or a set of chips. */
@media (max-width: 760px) {
  .sheet-hero { min-height: 0; }
  .sheet-hero-main { padding-top: 7.5rem; }
  .sheet-lede { font-size: 0.96rem; }
  /* header facts: the sheet number and the one fact that matters most */
  .title-block .tb-cell:nth-child(n+3) { display: none; }
  .title-block .tb-cell { border-bottom: 0; }

  /* one swipeable row instead of a stacked grid */
  .jump, .gal-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .jump::-webkit-scrollbar, .gal-tabs::-webkit-scrollbar { display: none; }
  .jump a, .jump a:nth-child(2n+1), .jump a:last-child {
    flex: 0 0 auto; padding: 0.9rem 1.1rem; border-bottom: 0; grid-column: auto;
    scroll-snap-align: start; border-right: 1px solid var(--line);
  }
  .jump a:first-child { padding-left: var(--pad-x); }
  .jump a span { font-size: 0.74rem; white-space: nowrap; }

  /* room tabs stay pinned under the nav while you scroll the wall */
  .gal-tabs {
    position: sticky; top: 59px; z-index: 5; background: var(--paper);
    gap: 0.4rem; margin: 1.6rem calc(-1 * var(--pad-x)) 1.4rem; padding: 0.7rem var(--pad-x);
    border-bottom: 1px solid var(--line);
  }
  .gal-tab { flex: 0 0 auto; padding: 0.6rem 0.8rem; letter-spacing: 0.12em; scroll-snap-align: start; }

  /* "includes" lists as chips */
  .incl { display: flex; flex-wrap: wrap; gap: 0.4rem; border-top: 0; margin: 1.2rem 0 1.4rem; }
  .incl li { border: 1px solid var(--line); padding: 0.4rem 0.7rem; font-size: 0.82rem; }
  .incl li::before { display: none; }
  .panel .incl li { border-color: var(--line-ink); }
  .chapter { padding: 3rem 0; }
  .chapter-body > p { font-size: 0.95rem; }
  .mini-strip { display: none; }

  /* Whipple's three before/after views: a swipeable row, the next peeking in */
  .tn-cols {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x));
    padding: 0 var(--pad-x) 0.4rem; scroll-padding: 0 var(--pad-x);
  }
  .tn-cols::-webkit-scrollbar { display: none; }
  .tn-col { scroll-snap-align: start; }

  /* project cards: a swipeable row instead of ten stacked cards */
  .proj-cards {
    display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x));
    padding: 0 var(--pad-x) 0.4rem; scroll-padding: 0 var(--pad-x);
  }
  .proj-cards::-webkit-scrollbar { display: none; }
  .proj-card { scroll-snap-align: start; }
  .proj-meta { flex-wrap: wrap; }
  .proj-meta span { margin-left: 0; flex-basis: 100%; }

  /* protections: a tight 2x2 of numbers */
  .protect { grid-template-columns: 1fr 1fr; }
  .protect > div, .protect > div:nth-child(2n+1) { padding: 1.1rem 0.9rem 1.2rem 0; border-right: 0; border-bottom: 1px solid var(--line-ink); }
  .protect > div:nth-child(2n) { padding-left: 0.9rem; border-left: 1px solid var(--line-ink); }
  .protect b { font-size: 1.5rem; }
  .protect h3 { font-size: 0.8rem; }
  .protect p { font-size: 0.8rem; }

  .disc-row { padding: 1.4rem 0; }
  .disc-row p { font-size: 0.92rem; }
  .feature-body p { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-title .ln > span, .sheet-lede { animation: none; }
}