/* ARC IT — subpage photography (v2).
   Extends the Signal Grid system (tokens + site.css) with a documentary photo
   language. Photos are cells in the ruled grid — full-bleed, flush to
   hairlines, radius 0, desaturated toward slate, dissolving to Ink where text
   sits, and stamped with a mono field caption (the shared signature).

   Each interior page gets its OWN signature device so no two read as the same
   template: About = photo hero + horizon strip; Services = filmstrip index;
   Healthcare = clinic triptych; AI-Automation = before/after diptych;
   Customer-AI = split hero; Custom-AI = spec-plate bench; IT = macro grid.

   The photo DEVICES below are deliberately NOT wired into the site.js
   scroll-reveal system: heroes must paint instantly for LCP and the
   bands/grids read as fixed evidence. (Ordinary text elements such as
   .arc-section__lead do still participate in reveals.)
   Loaded after site.css, before booking.css. */

/* A lead paragraph under a section head (used to frame a full-bleed device). */
.arc-section__lead { font-size: 16px; color: var(--text-secondary); line-height: var(--leading-body); max-width: 620px; margin: 18px 0 0; }

/* ---------------- Shared frame + mono field caption ---------------- */
.arc-shot { position: relative; margin: 0; overflow: hidden; background: var(--ink-900); }
.arc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); }
.arc-shot__cap {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%;
  padding: 24px 20px 12px 22px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--slate-200);
  background: linear-gradient(180deg, rgba(6, 10, 18, 0), rgba(6, 10, 18, 0.82));
}

/* ================ About — full-bleed photo hero ================ */
.arc-phead {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(480px, 64vh, 640px);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.arc-phead__media, .arc-phead__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc-phead__media img { object-fit: cover; filter: saturate(0.85); }
.arc-phead__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0.55), rgba(6, 10, 18, 0.32) 36%, rgba(6, 10, 18, 0.9) 80%, var(--ink-950));
}
.arc-phead__inner {
  position: relative; margin-top: auto; width: 100%;
  max-width: var(--container); margin-left: auto; margin-right: auto;
  padding: 128px 28px 60px;
}
.arc-phead .arc-label { color: var(--accent); }
.arc-phead h1 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  letter-spacing: var(--tracking-display); margin: 16px 0 0; text-wrap: balance;
}
.arc-phead__sub { font-size: 18px; color: var(--slate-200); line-height: var(--leading-body); margin: 22px 0 0; max-width: 600px; }
.arc-phead__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* ================ Services — filmstrip index (4 linked frames) ================ */
.arc-filmstrip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.arc-filmstrip__frame {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  min-height: 380px; border-right: 1px solid var(--line);
}
.arc-filmstrip__frame:last-child { border-right: none; }
.arc-filmstrip__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78); transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.arc-filmstrip__frame:hover img { transform: scale(1.04); filter: saturate(0.95); }
.arc-filmstrip__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0.12) 18%, rgba(6, 10, 18, 0.55) 52%, rgba(6, 10, 18, 0.93));
}
.arc-filmstrip__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 20px; }
.arc-filmstrip__ref { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.arc-filmstrip__t { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--slate-50); margin: 9px 0 0; line-height: 1.2; }
.arc-filmstrip__d { font-size: 12.5px; color: var(--slate-200); line-height: 1.4; margin: 8px 0 0; max-width: 30ch; }
.arc-filmstrip__more { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-secondary); margin-top: 10px; transition: color var(--dur-fast) var(--ease-out); }
.arc-filmstrip__frame:hover .arc-filmstrip__more { color: var(--accent); }
.arc-filmstrip__frame:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ================ AI-Automation — before/after diptych ================ */
.arc-diptych {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.arc-diptych .arc-shot img { height: auto; }
.arc-diptych .arc-shot:first-child { border-right: 1px solid var(--line); }

/* ================ Customer-AI — split hero (photo | headline panel) ================ */
.arc-splithero {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  min-height: clamp(480px, 62vh, 620px); border-bottom: 1px solid var(--line);
}
.arc-splithero__media { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.arc-splithero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
/* The split-hero photo caption reuses the shared .arc-shot__cap rule. */
.arc-splithero__panel { display: flex; flex-direction: column; justify-content: center; padding: 72px 56px; background: var(--surface-panel); }
.arc-splithero__panel .arc-label { color: var(--accent); }
.arc-splithero__panel h1 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.06;
  letter-spacing: var(--tracking-display); margin: 16px 0 0; text-wrap: balance;
}
.arc-splithero__sub { font-size: 17px; color: var(--slate-200); line-height: var(--leading-body); margin: 20px 0 0; max-width: 460px; }
.arc-splithero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* ================ Custom-AI — spec-plate bench ================ */
.arc-specplate { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.arc-specplate img { display: block; width: 100%; height: auto; filter: saturate(0.82); }
.arc-specplate__card {
  position: absolute; top: 28px; right: 28px; z-index: 2; max-width: 300px;
  background: rgba(6, 10, 18, 0.72); border: 1px solid var(--line-strong);
  padding: 18px 20px; font-family: var(--font-mono);
}
.arc-specplate__card-h { font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.arc-specplate__card ul { list-style: none; margin: 12px 0 0; padding: 0; }
.arc-specplate__card li { font-size: 11.5px; color: var(--slate-200); line-height: 1.5; padding-left: 16px; position: relative; }
.arc-specplate__card li::before { content: "├"; position: absolute; left: 0; color: var(--text-faint); }
.arc-specplate__card li:last-child::before { content: "└"; }
.arc-specplate__cap {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 24px 20px 12px 22px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--slate-200);
  background: linear-gradient(90deg, rgba(6, 10, 18, 0.82), rgba(6, 10, 18, 0));
  padding-right: 60px;
}

/* ================ IT — systems macro grid (2×2) ================ */
.arc-macrogrid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.arc-macrogrid .arc-shot { min-height: 260px; }
.arc-macrogrid .arc-shot:nth-child(odd) { border-right: 1px solid var(--line); }
.arc-macrogrid .arc-shot:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

/* ================ Plain full-bleed band (Custom-AI sketch strip) ================ */
.arc-pband { border-bottom: 1px solid var(--line); }
.arc-pband > .arc-shot img { height: auto; }

/* Photo heroes join the shared column too: past --container the photo insets to
   the centered 1120px column (no floor, so below that width they keep their
   full-bleed edge-to-edge impact). Hairline dividers still span full width. */
.arc-phead, .arc-splithero { --hero-gutter: max(0px, calc((100% - var(--container)) / 2)); }
.arc-phead__media { width: auto; height: auto; inset: 0 var(--hero-gutter); }
.arc-phead__scrim { inset: 0 var(--hero-gutter); }
.arc-splithero { padding-inline: var(--hero-gutter); }

/* Mid-page photo bands share the same max-width column as the text (matching the
   home page and the section content). Their hairline dividers still span full
   width — only the photo content insets. */
.arc-filmstrip, .arc-diptych, .arc-macrogrid, .arc-specplate, .arc-pband {
  --band-floor: 28px; /* matches .arc-section side padding; drops to 24px below (see 900px query) */
  --band-gutter: max(var(--band-floor), calc((100% - var(--container)) / 2));
  padding-inline: var(--band-gutter);
}
/* Spec-plate overlays are absolutely positioned, so re-anchor them to the inset
   image rather than the full-width element edge. */
.arc-specplate__card { right: calc(var(--band-gutter) + 28px); }
.arc-specplate__cap { left: var(--band-gutter); }

/* Small inline photo (Customer-AI couch) sitting inside a normal section split */
.arc-inlinesplit { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 44px; align-items: center; }
/* Alternating: image on the right for the flipped scene. The markup puts the
   copy first in the DOM for these, so visual order matches reading order with
   no CSS reordering (keyboard/screen-reader safe on every breakpoint). */
.arc-inlinesplit--flip { grid-template-columns: 1.05fr 0.95fr; }
.arc-inlinesplit__figure { min-height: 320px; border: 1px solid var(--line); }
.arc-inlinesplit__figure.arc-shot img { position: absolute; inset: 0; }
.arc-inlinesplit__copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: var(--tracking-display); line-height: 1.14; margin: 14px 0 0; }
.arc-inlinesplit__copy p:not(.arc-label) { font-size: 16px; color: var(--text-secondary); line-height: var(--leading-body); margin: 14px 0 0; }

/* ---------------- Responsive: collapse in step with the nav burger (820px) ---------------- */
@media (max-width: 980px) {
  .arc-filmstrip { grid-template-columns: 1fr 1fr; }
  .arc-filmstrip__frame:nth-child(2) { border-right: none; }
  .arc-filmstrip__frame:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
/* .arc-section drops to 24px side padding here, so the band gutter follows it. */
@media (max-width: 900px) {
  .arc-filmstrip, .arc-diptych, .arc-macrogrid, .arc-specplate, .arc-pband { --band-floor: 24px; }
}
@media (max-width: 820px) {
  .arc-phead__inner { padding: 104px 22px 44px; }
  .arc-phead__sub { font-size: 16px; }
  .arc-diptych { grid-template-columns: 1fr; }
  .arc-diptych .arc-shot:first-child { border-right: none; border-bottom: 1px solid var(--line); }
  .arc-splithero { grid-template-columns: 1fr; }
  .arc-splithero__media { min-height: 300px; border-right: none; border-bottom: 1px solid var(--line); }
  .arc-splithero__panel { padding: 44px 22px; }
  .arc-macrogrid .arc-shot { min-height: 200px; }
  /* Spec-plate stacks in flow (image -> caption -> build-log card) so the
     absolute caption can no longer collide with the card. */
  .arc-specplate { display: flex; flex-direction: column; }
  .arc-specplate__cap { position: static; order: 1; background: none; padding: 14px 22px 2px; color: var(--text-faint); }
  .arc-specplate__card { position: static; order: 2; max-width: none; margin: 6px 0 18px; border-left: none; border-right: none; border-bottom: none; }
  .arc-inlinesplit { grid-template-columns: 1fr; gap: 24px; }
  .arc-inlinesplit__figure { min-height: 240px; }
}
@media (max-width: 560px) {
  .arc-filmstrip { grid-template-columns: 1fr; }
  .arc-filmstrip__frame { border-right: none; border-bottom: 1px solid var(--line); min-height: 300px; }
  .arc-filmstrip__frame:last-child { border-bottom: none; }
  /* Macro grid: the landscape frames get too short 2-up on a phone, so go single-column. */
  .arc-macrogrid { grid-template-columns: 1fr; }
  .arc-macrogrid .arc-shot:nth-child(odd) { border-right: none; }
  .arc-macrogrid .arc-shot { border-bottom: 1px solid var(--line); }
  .arc-macrogrid .arc-shot:last-child { border-bottom: none; }
}