/* ==========================================================================
   CGR Fabrication: interior pages.
   Capability pages (template-capability.php), Industries Served, About,
   Get in touch. Every value below is a token from style.css or a step on the
   guideline spacing scale (4 8 12 16 24 32 48 64 96). No new colours, faces,
   radii or shadows. Brand guideline v1.0 §5–8 and §13.
   Breakpoints: 767 (phone), 899 (two columns collapse), 1023 (tablet).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared
   -------------------------------------------------------------------------- */

/* Prose column: 760px measure (guideline §6.2), headings and lists inside. */
.prose { max-width: 760px; display: grid; gap: 16px; }
.prose p,
.prose li { font-size: 1rem; line-height: 1.6; }
.prose h2 { margin-bottom: 4px; }
.prose ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.prose li { padding-left: 2px; }
.prose .text-link { display: inline-block; }

.lead { font-size: 1.125rem; line-height: 1.6; color: var(--cgr-ink-soft); }
.caption { font-size: 0.875rem; line-height: 1.5; color: var(--cgr-ink-soft); }

/* A zone band that sits directly above the closer drops its bottom rule so the two 1px lines don't double. */
.band--last.zone { border-bottom: 0; }

/* Image ratios. cgr_image_slot() knows 4:3 and 16:9; the wrapper sets the rest.
   Applies to the filled state too (the slot keeps its aspect-ratio when filled). */
.media { min-width: 0; }
.ratio-3x2 .img-slot { aspect-ratio: 3 / 2; }
.ratio-16x7 .img-slot { aspect-ratio: 16 / 7; }
.ratio-3x1 .img-slot { aspect-ratio: 3 / 1; }
.ratio-21x9 .img-slot { aspect-ratio: 21 / 9; }
.ratio-3x4 .img-slot { aspect-ratio: 3 / 4; }
@media (max-width: 767px) {
  .ratio-16x7 .img-slot,
  .ratio-3x1 .img-slot { aspect-ratio: 3 / 2; }
  .ratio-21x9 .img-slot,
  .ratio-3x4 .img-slot { aspect-ratio: 4 / 3; }
}

@media (max-width: 767px) {
  .lead { font-size: 1.0625rem; }
  /* Text links become full-row tap targets on phones. */
  .prose .text-link { display: block; padding: 10px 0; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   2. Capability pages
   -------------------------------------------------------------------------- */

/* Compact hero: H1, promise, 3:2 image. No CTA. The part grid must start within
   the first viewport on a 13-inch laptop, so this is shorter than Home's hero. */
.cap-hero { padding: 32px 0 28px; }
.cap-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px 48px;
  align-items: center;
}
.cap-hero__copy { display: grid; gap: 14px; align-content: center; }
.cap-hero__promise {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 560px;
  color: var(--cgr-ink-soft);
}
@media (max-width: 899px) {
  .cap-hero__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
  .cap-hero { padding: 24px 0; }
  .cap-hero__promise { font-size: 1.0625rem; }
}

/* Part grid band: the reason the page exists. Dense, never truncated, never scrolls. */
.cap-grid { padding: 32px 0 40px; }
.cap-grid__group + .cap-grid__group { margin-top: 24px; }
.cap-grid__label {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cgr-ink-soft);
}
@media (max-width: 767px) {
  .cap-grid { padding: 24px 0 32px; }
  .cap-grid__group + .cap-grid__group { margin-top: 20px; }
}

/* Part grid (guideline §8.3): 1px rules between cells, name in Plex Sans 600,
   descriptor in Plex Mono 13px. Three columns desktop, two tablet, one phone.
   Cells carry right and bottom rules pulled 1px under the frame, so any count
   of entries closes cleanly without a stray grey cell. */
.parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--cgr-surface);
  border: 1px solid var(--cgr-line);
  border-radius: var(--cgr-radius);
  overflow: hidden;
}
.parts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.part {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  margin: 0 -1px -1px 0;
  padding: 14px 16px;
  border-right: 1px solid var(--cgr-line);
  border-bottom: 1px solid var(--cgr-line);
}
.part__name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--cgr-ink);
  overflow-wrap: anywhere;
}
.part__desc {
  font: 500 13px/1.4 var(--cgr-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cgr-ink-soft);
  overflow-wrap: anywhere;
}
/* .part--provisional marks entries pending client confirmation. It carries no style on purpose:
   provisional entries render like every other entry on the live site. */
@media (max-width: 1023px) {
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .parts,
  .parts--2 { grid-template-columns: 1fr; }
  .part { padding: 12px 14px; }
}

/* Materials and finishes + How to order: two columns on desktop, stacked below.
   Columns are not padded to match heights (Repairs' materials block is short on purpose). */
.cap-pair__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  align-items: start;
}
.cap-pair__col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cap-pair__col h2 { margin-bottom: 2px; }
.cap-pair__col p { font-size: 1rem; line-height: 1.6; max-width: 560px; }
.cap-pair__col .caption { margin-top: 2px; }
.cap-pair__col .media { margin-top: 8px; max-width: 560px; }
@media (max-width: 899px) {
  .cap-pair__grid { grid-template-columns: 1fr; gap: 32px; }
  .cap-pair__col p,
  .cap-pair__col .media { max-width: 760px; }
}

/* Industries we build this for: one paragraph, optional caption, one named link. */
.cap-industries .prose { gap: 12px; }

/* Common questions: accordion (guideline §8.4). 1px rules, orange plus/minus
   drawn in CSS, question text always in the DOM, panel hidden by default. */
.cap-faq .faq { max-width: 760px; }
.faq { border-top: 1px solid var(--cgr-line); }
.faq__item { border-bottom: 1px solid var(--cgr-line); }
.faq__q { margin: 0; font: inherit; }
.faq__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: 600 1.25rem/1.3 var(--cgr-font);
  color: var(--cgr-heading);
  text-wrap: balance;
}
.faq__trigger:hover { color: var(--cgr-navy-deep); }
.faq__trigger:focus-visible { outline-offset: 2px; }
.faq__text { flex: 1 1 auto; min-width: 0; }
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 2px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--cgr-accent);
  transition: transform .15s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__panel { padding: 0 40px 18px 0; }
.faq__panel p {
  max-width: 640px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cgr-ink-soft);
}
@media (max-width: 767px) {
  .faq__trigger { font-size: 1.1875rem; padding: 14px 0; }
  .faq__panel { padding: 0 0 16px; }
}

/* --------------------------------------------------------------------------
   3. Industries Served
   -------------------------------------------------------------------------- */

/* Compact hero: H1, one paragraph, service-area caption. No CTA. The image is
   optional and the hero is copy-only until one is set. */
.ind-hero { padding: 32px 0 28px; }
.ind-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px 48px;
  align-items: center;
}
.ind-hero__grid--copy-only { grid-template-columns: 1fr; }
.ind-hero__copy { display: grid; gap: 14px; max-width: 620px; }
@media (max-width: 899px) {
  .ind-hero__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
  .ind-hero { padding: 24px 0; }
}

/* Industry block: one repeating component (image, H2, one or two paragraphs,
   one or two named links). Odd blocks sit on the zone band with the image
   left; even blocks are white with the image right. A sixth instance slots in
   and the pattern re-flows. The wide block (Commercial construction) runs the
   21:9 image full width with the H2 beside the copy beneath it. */
.ind-blocks { border-top: 1px solid var(--cgr-line); }
.ind-block { padding: 40px 0; border-bottom: 1px solid var(--cgr-line); }
.ind-blocks > .ind-block:nth-child(odd) { background: var(--cgr-zone); }
.ind-blocks > .ind-block:last-child { border-bottom: 0; }
.ind-block__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px;
  align-items: center;
}
.ind-blocks > .ind-block:nth-child(even) .ind-block__grid { grid-template-columns: 7fr 5fr; }
.ind-blocks > .ind-block:nth-child(even) .ind-block__media { order: 2; }
.ind-block__media { min-width: 0; }
.ind-block__body { display: grid; gap: 14px; max-width: 600px; min-width: 0; }
.ind-block__copy { display: grid; gap: 14px; }
.ind-block__copy p { font-size: 1rem; line-height: 1.6; }
.ind-block__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ind-block__links .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
}

/* The wide block must out-rank the odd/even alternation rules above, hence the longer selectors. */
.ind-block--wide { padding: 48px 0; }
.ind-blocks > .ind-block.ind-block--wide:nth-child(n) .ind-block__grid { grid-template-columns: 1fr; gap: 24px; }
.ind-blocks > .ind-block.ind-block--wide:nth-child(n) .ind-block__media { order: 0; }
.ind-block--wide .ind-block__body {
  grid-template-columns: 5fr 7fr;
  gap: 32px;
  max-width: none;
  align-items: start;
}
.ind-block--wide .ind-block__copy { max-width: 620px; }

@media (max-width: 899px) {
  .ind-block,
  .ind-block--wide { padding: 32px 0; }
  .ind-block__grid,
  .ind-blocks > .ind-block:nth-child(even) .ind-block__grid,
  .ind-blocks > .ind-block.ind-block--wide:nth-child(n) .ind-block__grid,
  .ind-block--wide .ind-block__body { grid-template-columns: 1fr; gap: 16px; }
  .ind-blocks > .ind-block:nth-child(even) .ind-block__media { order: 0; }
  .ind-block__body { max-width: 760px; }
  .ind-block__links { flex-direction: column; gap: 0; }
  .ind-block__links .text-link { padding: 10px 0; }
}
@media (max-width: 767px) {
  .ind-block,
  .ind-block--wide { padding: 24px 0 28px; }
  .ind-block__grid { gap: 14px; }
  .ind-block__body { gap: 12px; }
}

/* --------------------------------------------------------------------------
   4. About
   -------------------------------------------------------------------------- */

/* Quieter hero than Home's: H1, one paragraph, the real shop photo. No CTA. */
.about-hero { padding: 40px 0; }
.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: center;
}
.about-hero__copy { display: grid; gap: 16px; max-width: 540px; }
@media (max-width: 899px) {
  .about-hero__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
  .about-hero { padding: 24px 0; }
}

/* Where we started + Our mission: story left, mission right as a quiet
   quote-like block. DOM order is story then mission, matching the mobile stack. */
.about-story__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px 48px;
  align-items: start;
}
.about-story__col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.about-story__col p { font-size: 1.0625rem; line-height: 1.65; }
.about-mission {
  border-left: 2px solid var(--cgr-line-strong);
  padding-left: 24px;
}
.about-mission__text { font-size: 1.125rem; line-height: 1.5; color: var(--cgr-ink); }
@media (max-width: 899px) {
  .about-story__grid { grid-template-columns: 1fr; gap: 28px; }
  .about-mission { padding-left: 16px; }
}
@media (max-width: 767px) {
  .about-story__col p { font-size: 1rem; }
  .about-mission__text { font-size: 1.0625rem; }
}

/* How we work: four value blocks of equal weight. Four across, 2 x 2 on tablet, stacked on phones. No icons. */
.about-values .section-head { margin-bottom: 24px; }
.about-values .section-head p { font-size: 1rem; }
.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cgr-gutter);
}
.value {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  background: var(--cgr-surface);
  border: 1px solid var(--cgr-line);
  border-radius: var(--cgr-radius);
}
.value h3 { font-size: 1.125rem; }
.value p { font-size: 0.9375rem; line-height: 1.55; color: var(--cgr-ink-soft); }
@media (max-width: 1023px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .values { grid-template-columns: 1fr; gap: 12px; }
  .value { padding: 14px; }
}

/* The shop: three paragraphs with inline links, the 3:4 photo beside them.
   On phones the photo sits below paragraph 2 (design 07, mobile frame). */
.about-shop__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px 48px;
  align-items: center;
}
.about-shop__copy { display: grid; gap: 16px; min-width: 0; }
.about-shop__copy h2 { margin-bottom: 2px; }
.about-shop__copy p { font-size: 1rem; line-height: 1.65; max-width: 620px; }
.about-shop__media { min-width: 0; }
@media (max-width: 899px) {
  .about-shop__grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .about-shop__copy { display: contents; }
  .about-shop__copy > * { order: 0; }
  .about-shop__media { order: 1; }
  .about-shop__copy > :nth-child(n + 4) { order: 2; }
  .about-shop__copy p { max-width: 760px; }
}

/* --------------------------------------------------------------------------
   5. Get in touch
   -------------------------------------------------------------------------- */

/* Two columns: form left, "Call, email, or come by the shop" right. Stacked on
   phones, aside below the form with the phone first and largest. No closer. */
.contact { padding: 40px 0 56px; }
.contact__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px 48px;
  align-items: start;
}
.contact__main { display: grid; gap: 28px; min-width: 0; }
.contact__intro { display: grid; gap: 12px; max-width: 600px; }
.contact__intro p { font-size: 1.0625rem; line-height: 1.6; }
.contact__form { min-width: 0; scroll-margin-top: calc(var(--cgr-header-h) + 16px); }

/* Stand-in until Gravity Forms is installed and cgr_gf_form_id is set. */
.form-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 24px;
  border: 1px dashed var(--cgr-line-strong);
  border-radius: var(--cgr-radius);
  background: var(--cgr-zone);
}
.form-pending__label {
  font: 500 12px/1.2 var(--cgr-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cgr-ink-muted);
  text-align: center;
}

.contact-aside {
  position: sticky;
  top: calc(var(--cgr-header-h) + 24px);
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  background: var(--cgr-zone);
  border: 1px solid var(--cgr-line);
  border-radius: var(--cgr-radius);
}
.contact-aside h2 { font-size: 1.5rem; }
.contact-aside .btn { justify-self: start; }
.contact-aside p { font-size: 1rem; line-height: 1.6; }
.contact-aside__details { display: grid; gap: 8px; font-size: 0.9375rem; }
.contact-aside__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-aside address { font-style: normal; line-height: 1.5; }
.contact-aside .media { margin-top: 4px; }
@media (max-width: 1023px) {
  .contact-aside { position: static; }
}
@media (max-width: 899px) {
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .contact { padding: 24px 0 40px; }
  .contact__main { gap: 20px; }
  .contact-aside { padding: 20px 16px; }
  .contact-aside .btn { justify-self: stretch; width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq__icon::before,
  .faq__icon::after { transition: none; }
}

/* v2: photo heroes replace the split heroes */
.hero-photo .caption { color: var(--cgr-on-dark-muted); }
.hero-photo .eyebrow + h1 { margin-top: -6px; }

/* v2: richer capability body */
.cap-fabricate__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.cap-fabricate__media { min-width: 0; position: sticky; top: calc(var(--cgr-header-h) + 24px); }
.ratio-4x5 .img-slot { aspect-ratio: 4 / 5; }
.cap-pair__col .media + .media { margin-top: 12px; }
.cap-ind-strip { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cap-ind-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--cgr-radius); background: var(--cgr-navy); color: #fff; text-decoration: none; }
.cap-ind-tile .img-slot { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border: 0; border-radius: 0; margin: 0; }
.cap-ind-tile .img-slot--filled img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cap-ind-tile:hover .img-slot--filled img { transform: scale(1.04); }
.cap-ind-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,23,71,.05) 35%, rgba(8,23,71,.88) 100%); }
.cap-ind-tile__label { position: relative; z-index: 2; padding: 12px; font-weight: 600; font-size: .875rem; color: #fff; }
.cap-ind-tile:hover .cap-ind-tile__label { color: var(--cgr-orange-bright); }
@media (max-width: 1023px) { .cap-ind-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .cap-fabricate__grid { grid-template-columns: 1fr; gap: 24px; } .cap-fabricate__media { position: static; } .ratio-4x5 .img-slot { aspect-ratio: 3 / 2; } }
@media (max-width: 767px) { .cap-ind-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Industries ribbon above the closer on interior pages (client call, Oct 23 2026). Reuses the strip tiles. */
.ind-ribbon { padding: 44px 0 48px; background: var(--cgr-surface); border-top: 1px solid var(--cgr-line); }
.ind-ribbon__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.ind-ribbon__head .section__title { margin: 0; }
.ind-ribbon .cap-ind-strip { margin-top: 24px; }
.ind-ribbon .cap-ind-tile__icon { position: absolute; top: 12px; left: 12px; z-index: 2; width: 26px; height: 26px; color: var(--cgr-orange); }
@media (max-width: 767px) { .ind-ribbon { padding: 32px 0 36px; } .ind-ribbon .cap-ind-strip { margin-top: 20px; } }

/* Review fixes (8 Sept 2026) */
.parts { background: transparent; gap: 1px; border: 0; }
.part { box-shadow: 0 0 0 1px var(--cgr-line); background: var(--cgr-surface); }
.parts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .parts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .parts--4 { grid-template-columns: 1fr; } }
.cap-pair__col { display: flex; flex-direction: column; gap: 14px; }
.cap-pair__col .media { margin-top: auto; }
.ind-blocks > .ind-block:nth-child(5) .ind-block__grid { grid-template-columns: 7fr 5fr; }
.ind-blocks > .ind-block:nth-child(5) .ind-block__media { order: 2; }
@media (max-width: 899px) { .ind-blocks > .ind-block:nth-child(5) .ind-block__grid { grid-template-columns: 1fr; } .ind-blocks > .ind-block:nth-child(5) .ind-block__media { order: 0; } }
.cap-ind-tile .img-slot--filled img { filter: saturate(0.85) contrast(1.05); }
.cap-ind-tile::after { background: linear-gradient(180deg, rgba(8,23,71,.32) 0%, rgba(8,23,71,.5) 45%, rgba(8,23,71,.9) 100%); }
@media (max-width: 767px) {
  .cap-ind-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 28px calc(-1 * var(--cgr-pad)) 0; padding: 0 var(--cgr-pad) 8px; scroll-padding: 0 var(--cgr-pad); }
  .cap-ind-strip li { flex: 0 0 200px; scroll-snap-align: start; }
  .cap-ind-tile { width: 200px; }
}