/* ==========================================================================
   SPR SIP Systems: about.css
   Page-specific styles for about.html. Loaded after site.css.
   The page is editorial: a photographic hero, large statements, short copy,
   one dark moment (the factory on OSB) and an honest progress line. The
   placeholder photo mosaic is kept for when factory photography exists.
   ========================================================================== */

/* ---------- Shared ------------------------------------------------------ */
.ab-gold { color: var(--gold); }
.ab-label {
  display: block; margin: 0 0 clamp(22px, 3vw, 36px);
  font: 500 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
  text-wrap: balance;
}
.ab-label::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--gold); }

/* ---------- Hero: over the half shell, half finished house -------------- */
.ab-hero {
  display: flex; align-items: flex-end; min-height: clamp(520px, 80vh, 780px);
  padding-bottom: clamp(56px, 8vw, 120px);
  background-color: var(--charcoal);
  background-image:
    linear-gradient(90deg, rgba(31,36,40,.95) 0%, rgba(31,36,40,.82) 38%, rgba(31,36,40,.35) 72%, rgba(31,36,40,.2)),
    linear-gradient(0deg, rgba(31,36,40,.7), rgba(31,36,40,0) 45%),
    url(../assets/img/house-1600.webp);
  background-size: cover; background-position: 62% 55%;
}
.ab-hero .section-inner { width: 100%; }
.ab-hero .display { margin: clamp(28px, 4vw, 48px) 0 clamp(22px, 3vw, 32px); }
.page-hero .lead { color: rgba(255, 255, 255, .86); max-width: 46ch; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); }
@media (max-width: 700px) {
  .ab-hero { background-image:
    linear-gradient(0deg, rgba(31,36,40,.96) 18%, rgba(31,36,40,.6) 60%, rgba(31,36,40,.35)),
    url(../assets/img/house-960.webp); background-position: 70% 40%; }
}

/* ---------- Big editorial statements ------------------------------------ */
.ab-statement, #people { padding-block: clamp(80px, 11vw, 170px); }
.ab-big {
  max-width: 24ch; font-family: var(--font-body); font-weight: 500; letter-spacing: -.025em;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 4rem); line-height: 1.12; color: var(--fg); text-wrap: balance;
}
.ab-big--s { max-width: 22ch; font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); }
.ab-big em { font-style: normal; color: var(--accent-display); }
.ab-small { margin-top: clamp(22px, 3vw, 36px); max-width: 46ch; font-size: var(--fs-lead); color: var(--fg-muted); }

/* ---------- What we do differently: three numbered points --------------- */
.ab-diff { padding-block: clamp(72px, 9vw, 140px); }
.ab-diff-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.ab-diff-list li { padding-top: 24px; border-top: 2px solid var(--fg); }
.ab-n { display: block; margin-bottom: 18px; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: var(--accent-display); }
.ab-diff-list h3 { font-size: var(--fs-h4); }
.ab-diff-list p { margin-top: 12px; max-width: 36ch; color: var(--fg-muted); }
@media (max-width: 860px) { .ab-diff-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Who we are: the statement beside the three disciplines ------ */
.ab-team { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.ab-roles li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); }
.ab-roles li:last-child { border-bottom: 1px solid var(--line); }
.ab-roles b { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; text-transform: uppercase; }
.ab-roles i { font-style: normal; font: 500 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.ab-roles span { color: var(--fg-muted); }
@media (max-width: 900px) { .ab-team { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Factory on OSB ---------------------------------------------- */
.ab-factory {
  background-color: var(--charcoal);
  background-image:
    linear-gradient(100deg, rgba(31,36,40,.96) 30%, rgba(31,36,40,.82) 60%, rgba(31,36,40,.62)),
    image-set(url(../assets/tex/osb-512.webp) type("image/webp"), url(../assets/tex/osb-512.jpg) type("image/jpeg"));
  background-size: cover, 512px auto;
  padding-block: clamp(80px, 10vw, 150px);
}
.ab-factory-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: clamp(40px, 6vw, 100px); }
.ab-factory .ab-label { color: var(--gold); }
.ab-factory-h {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.6rem); line-height: .94; color: #fff;
}
.ab-factory-p { margin-top: clamp(20px, 2.6vw, 30px); max-width: 40ch; font-size: var(--fs-lead); color: rgba(255,255,255,.78); }
.ab-figs { display: grid; gap: 0; margin: 0; }
.ab-figs > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.ab-figs > div:first-child { border-top: 1px solid rgba(255,255,255,.16); }
.ab-figs dt {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); line-height: 1; color: var(--gold);
}
.ab-figs dt small { margin-left: .2em; font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ab-figs dd { margin: 0; text-align: right; font-size: var(--fs-small); color: rgba(255,255,255,.72); }
@media (max-width: 900px) { .ab-factory-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Where we're up to: done, now, next on one line -------------- */
/* The track: grey the whole way, gold up to "Now" */
@media (max-width: 860px) {
  /* Vertical on a phone: the track runs down the left */
}

/* ---------- Contact in the closing band --------------------------------- */
.ab-contact { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: clamp(26px, 3vw, 36px) 0 0; }
.ab-contact dt { font: 500 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ab-contact dd { margin: 6px 0 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 500; }
.ab-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .25s, color .25s; }
.ab-contact a:hover { color: var(--gold); border-color: var(--gold); }

/* Separation from the CTA band, which is also charcoal */
#cta { border-top: 1px solid var(--line); }

/* ---------- Placeholder photo mosaic (for factory photography) -------------------- */
.mosaic {
  display: grid; grid-template-columns: 7fr 5fr; grid-auto-rows: clamp(200px, 22vw, 320px);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.ph {
  /* Dark photo placeholder: re-declare the dark tokens so gold text and mono
     annotations inside keep their contrast. */
  --fg: #fff; --fg-muted: #A3AAB3; --fg-faint: #8E97A1;
  --accent-text: var(--gold); --accent-display: var(--gold);
  position: relative; margin: 0; overflow: hidden; color: #fff;
  background-color: var(--charcoal);
  /* Charcoal overlay at about 80 percent over the OSB texture: on-brand placeholder */
  background-image:
    linear-gradient(rgba(31, 36, 40, .8), rgba(31, 36, 40, .8)),
    url(../assets/tex/osb-512.jpg);
  background-image:
    linear-gradient(rgba(31, 36, 40, .8), rgba(31, 36, 40, .8)),
    image-set(url(../assets/tex/osb-512.webp) type("image/webp"), url(../assets/tex/osb-512.jpg) type("image/jpeg"));
  background-size: auto, 512px 512px; background-repeat: repeat;
  /* Luminosity blend keeps the OSB grain as tone only, so the field stays charcoal */
  background-blend-mode: luminosity, normal;
}
.ph--wide { grid-row: span 2; }
/* Drafting convention for an image yet to be placed: crossed frame */
.ph::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(255, 255, 255, .13) calc(50% - .5px), rgba(255, 255, 255, .13) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), rgba(255, 255, 255, .13) calc(50% - .5px), rgba(255, 255, 255, .13) calc(50% + .5px), transparent calc(50% + .5px));
}
.ph::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .14); pointer-events: none; }
.ph .tag { position: absolute; top: 26px; left: 26px; z-index: 1; }
/* On a textured field a ghost tag has no reliable contrast, so fill it */
.ph .tag--ghost { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.ph figcaption {
  position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 1;
  color: rgba(255, 255, 255, .72); letter-spacing: .08em; text-transform: uppercase;
}
.ph .ph-centre {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  color: rgba(255, 255, 255, .62); text-transform: uppercase; letter-spacing: .14em; pointer-events: none;
}
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .ph--wide { grid-row: span 2; }
  .ph .tag { top: 24px; left: 24px; }
  .ph figcaption { left: 24px; right: 24px; bottom: 22px; }
}