/* ============================================================================
   LRT redesign — PAGE LAYER. The components the interior pages need and the
   homepage does not. Loads after tokens.css + main.css; tokens only, no raw
   values except where a value is a hairline alpha already established in main.

   The signature stays the ablation boundary: interior pages have no hero, so
   the boundary arrives as the lit rule under the masthead, the edge that lights
   on a card as you reach it, and the single hairline that carries you onward.
   Nothing here is a new visual idea — it is the hero's vocabulary at lower
   intensity, which is what the decay tiers in DESIGN.md ask for.
   ============================================================================ */

/* ==========================================================================  */
/* MASTHEAD — the interior page's opening band (decay 60%)                     */
/* ==========================================================================  */
.masthead {
  position: relative;
  padding: calc(var(--nav-h) + var(--s5)) 0 var(--s5);
  background: var(--surface);
  border-bottom: var(--hair) solid var(--edge-dim);
}
/* the boundary at rest, lit from the left — the same gradient the nav wears
   over the hero, so arriving on an interior page feels like the same site */
.masthead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--flash), rgba(253, 251, 244, 0.06) 46%, transparent 72%);
}
/* `.container` centres itself; giving it a narrower max-width would centre THAT
   too, indenting the masthead relative to every section below it. Constrain the
   children instead, so the measure is short but the left edge still lines up. */
.masthead__in > * { max-width: 54rem; }
.masthead__title {
  font-size: var(--t-d3);
  color: var(--ink-hi);
  margin-bottom: var(--s2);
}
.masthead .lead { max-width: 52ch; margin-top: 0; }

/* a compact spec strip under the standfirst — mono facts, no decoration */
.masthead__spec {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: var(--hair) solid var(--edge-dim);
  color: var(--ink-dim); font-size: var(--t-data-lg);
}
/* individual facts hold together via   where it matters; a blanket nowrap
   pushes a long one ("Industrial · commercial · residential") off a 320px screen */
.masthead__spec span { overflow-wrap: anywhere; }
.masthead__spec span::before { content: "· "; color: var(--accent-text); }

@media (max-width: 767px) {
  .masthead { padding: calc(var(--nav-h) + var(--s4)) 0 var(--s4); }
  .masthead__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ==========================================================================  */
/* CARDS — the benefit / capability blocks (decay 30%)                         */
/* ==========================================================================  */
.cards { list-style: none; padding: 0; display: grid; gap: 0; margin-top: var(--s4); }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  min-width: 0;                 /* see the note in main.css beside .split > * */
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-top: var(--hair) solid var(--edge-dim);
}
/* the display face is wide; a single long word ("environmentally") is otherwise
   enough to push a 320px screen sideways */
.card__title, .card p { overflow-wrap: break-word; }
@media (min-width: 720px) {
  .card { padding-right: var(--s4); }
  .card:nth-child(odd) { padding-left: 0; }
  .card:nth-child(even) { padding-left: var(--s4); border-left: var(--hair) solid var(--edge-dim); }
}
@media (min-width: 1100px) {
  /* four narrow columns cannot carry the display face at full size — without
     this, "environmentally" breaks mid-word */
  .cards--4 .card__title { font-size: 1.1rem; }
  .cards--4 .card { padding-left: var(--s3); padding-right: var(--s3); border-left: var(--hair) solid var(--edge-dim); }
  .cards--4 .card:first-child { padding-left: 0; border-left: 0; }
  .cards--4 .card:last-child { padding-right: 0; }
}
/* the edge arrives on the card you are reading */
.card::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px;
  background: var(--flash); transition: width var(--wipe-dur) var(--ease-pass);
}
.card:hover::before { width: 64px; }
@media (min-width: 720px) { .card:nth-child(even)::before { left: var(--s4); } }

.card__title {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 700; font-size: var(--t-d1); line-height: var(--lh-display);
  letter-spacing: var(--track-display); color: var(--ink-hi);
  margin-bottom: var(--s1);
}
.card p { color: var(--ink-dim); line-height: var(--lh-body); }
.card p + p { margin-top: var(--s2); }
.card__k {
  display: block; font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: var(--s1);
}
.section--panel .card { border-color: var(--edge-panel); }

/* must come AFTER .card__title's base rule, or source order defeats it */
@media (max-width: 719px) {
  .card { padding: var(--s3) 0; }
  .card__title { font-size: 1.2rem; }
}

/* ==========================================================================  */
/* PROSE — long-form runs, on the section rhythm (not the legal-page rhythm)   */
/* ==========================================================================  */
.prose { max-width: 62ch; }
.prose p { color: var(--ink-on-dark); line-height: var(--lh-body); margin-bottom: var(--s2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink-hi); font-weight: 600; }
.prose h3 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-lead);
  color: var(--ink-hi); margin: var(--s4) 0 var(--s1);
}
.prose ul { list-style: none; padding: 0; margin: var(--s2) 0; }
.prose li {
  position: relative; padding-left: 1.4em; margin-bottom: var(--s1);
  color: var(--ink-on-dark); line-height: var(--lh-body);
}
.prose li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.7em; height: var(--hair); background: var(--accent);
}
.prose a { color: var(--ink-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--edge-ui); }
.prose a:hover, .prose a:focus-visible { text-decoration-color: var(--aperture); }

/* ==========================================================================  */
/* CHECKS — the "at a glance" plate, in the spec-plate voice                   */
/* ==========================================================================  */
.checks { list-style: none; padding: 0; display: grid; gap: 0; margin-top: var(--s3); border-top: 2px solid var(--edge-dim); }
@media (min-width: 620px) { .checks { grid-template-columns: 1fr 1fr; column-gap: var(--s4); } }
@media (min-width: 1000px) { .checks--3 { grid-template-columns: repeat(3, 1fr); } }
.checks li {
  position: relative; min-width: 0; overflow-wrap: anywhere; padding: var(--s2) 0 var(--s2) 1.8em;
  border-bottom: var(--hair) solid var(--edge-dim);
  color: var(--ink-on-dark); font-size: var(--t-data-lg);
  font-family: var(--font-mono); letter-spacing: var(--track-mono); line-height: var(--lh-mono);
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: 1.25em;
  width: 0.9em; height: var(--hair); background: var(--flash);
}
/* --edge-dim IS --surface-2, so on a panel every rule in this list renders in
   the colour of the background it sits on. The panel gets the visible hairline. */
.section--panel .checks { border-top-color: var(--edge-panel); }
.section--panel .checks li { border-bottom-color: var(--edge-panel); color: var(--ink-dim-panel); }
.section--plate .checks { border-top-color: var(--ink-on-light); }
.section--plate .checks li { color: var(--ink-on-light); border-bottom-color: rgba(16, 18, 26, 0.22); }
.section--plate .checks li::before { background: var(--oxide); }

/* ==========================================================================  */
/* FIGURES — a page-width plate for the diagram and the market photographs     */
/* ==========================================================================  */
.figfull { margin: var(--s4) 0 0; }
.figfull img {
  display: block; width: 100%; height: auto;
  border-left: 2px solid var(--flash);
  background: var(--surface-2);
}
.figfull figcaption {
  margin-top: var(--s2); color: var(--ink-dim);
  font-family: var(--font-mono); font-size: var(--t-data); letter-spacing: var(--track-mono);
  line-height: var(--lh-mono);
}
/* a figure whose source is smaller than the slot — never upscale it */
.figfull--natural img { width: auto; max-width: 100%; }

.figpair { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 760px) { .figpair { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.figpair .figfull { margin-top: 0; }

@media (max-width: 767px) {
  .figfull img { margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); max-width: none; border-left: 0; border-top: 2px solid var(--flash); }
}

/* ==========================================================================  */
/* VIDEO GALLERY (decay 60% — these ARE the before/after, moving)              */
/* ==========================================================================  */
/* Every clip is cropped to a 720x720 square at ENCODE time (see
   tools/redesign-videos.mjs), so the cell and the footage are the same shape and
   nothing is letterboxed. The old 4:3-contain rule pillarboxed every vertical
   phone clip inside a black box; cropping to the action instead fills the tile.
   object-fit: cover is belt-and-braces for a clip that ever ships off-square.
   Three across on desktop, two on tablet, one on phone. */
.vgrid { list-style: none; padding: 0; display: grid; gap: var(--s4); margin-top: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .vgrid { grid-template-columns: repeat(3, 1fr); } }
/* A two-clip grid stops at two columns — a third empty cell reads as a missing
   video rather than a deliberate pair. */
@media (min-width: 940px) { .vgrid--pair { grid-template-columns: repeat(2, 1fr); } }

.vitem { position: relative; min-width: 0; margin: 0; }
.vitem video {
  display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;
  object-fit: cover; background: #0d0f12;
  border-left: 2px solid var(--flash);
}
.vitem__cap {
  display: flex; align-items: baseline; gap: var(--s2);
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: var(--hair) solid var(--edge-dim);
}
.vitem__n {
  font-family: var(--font-mono); font-size: var(--t-data); color: var(--accent-text);
  letter-spacing: var(--track-mono); flex: none;
}
.vitem__t { color: var(--ink-on-dark); line-height: 1.4; font-size: 0.95rem; }

/* ==========================================================================  */
/* ONWARD — the boundary carries you to the next page (decay 15%)              */
/* ==========================================================================  */
.onward { border-top: var(--hair) solid var(--edge-dim); background: var(--surface); }
.onward__a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s5) 0; position: relative; color: var(--ink-on-dark);
}
.onward__a::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px;
  background: var(--flash); transition: width var(--wipe-dur) var(--ease-pass);
}
.onward__a:hover::before, .onward__a:focus-visible::before { width: 100%; }
.onward__a > * { min-width: 0; }
.onward__k { font-family: var(--font-mono); font-size: var(--t-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); flex: none; }
.onward__t {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.05;
  letter-spacing: var(--track-display); text-transform: uppercase; color: var(--ink-hi);
  text-align: right;
}
.onward__a:hover .onward__t { color: var(--flash); }
@media (max-width: 559px) {
  .onward__a { flex-direction: column; align-items: flex-start; gap: var(--s1); padding: var(--s4) 0; }
  .onward__t { text-align: left; }
}

/* ==========================================================================  */
/* CONTACT — a person is a phone row with their mail address beneath it        */
/* main.css styles `.team a` as the flex phone row, so the mail line has to be  */
/* more specific than that or it inherits the row layout and its padding.       */
/* ==========================================================================  */
.team a.team__mail {
  display: block;
  padding: 0 0 var(--s3);
  color: var(--ink-dim);
  font-size: var(--t-data);
  letter-spacing: var(--track-mono);
  overflow-wrap: anywhere;
}
.team a.team__mail:hover,
.team a.team__mail:focus-visible { color: var(--ink-hi); }
/* close the gap between the two lines so they read as one person */
.team li:has(.team__mail) > a:not(.team__mail) { padding-bottom: var(--s1); }

/* ==========================================================================  */
/* CAROUSEL — the product gallery (scroll-snap; JS adds controls & auto-play)  */
/* No-JS: a native swipe/scroll filmstrip. The slides are pre-plated 4:3 images */
/* (the unit already floats on a steel plate, baked in by redesign-images.mjs). */
/* ==========================================================================  */
.carousel { position: relative; min-width: 0; }
.carousel__viewport {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel__viewport { scroll-behavior: auto; } }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; min-width: 0; }
.carousel__slide img { display: block; width: 100%; height: auto; background: var(--steel); border-left: 2px solid var(--flash); }

/* the no-JS affordance — replaced by the control rail once JS enhances */
.carousel__hint { margin-top: var(--s2); color: var(--ink-dim); font-size: var(--t-data); letter-spacing: var(--track-mono); }
.carousel.is-live .carousel__hint { display: none; }

/* the control rail — hidden until JS marks the carousel live */
.carousel__rail { display: none; }
.carousel.is-live .carousel__rail {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: var(--hair) solid var(--edge-dim);
  /* Four 44px controls plus the dots and the counter do not fit a 320px
     screen on one line. Wrapping keeps every control reachable at its full
     touch-target size instead of pushing the page sideways. */
  flex-wrap: wrap;
}
.carousel__mid { min-width: 0; }
.section--panel .carousel.is-live .carousel__rail { border-top-color: var(--edge-panel); }
.carousel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: var(--hair) solid var(--edge-dim); border-radius: 2px;
  color: var(--ink-hi); font-family: var(--font-mono); font-size: 1.35rem; line-height: 1;
  transition: border-color var(--aperture-dur) var(--ease-ui), background var(--aperture-dur) var(--ease-ui);
}
.carousel__btn:hover { border-color: var(--aperture); background: rgba(210, 31, 39, 0.12); }
.carousel__mid { display: flex; align-items: center; gap: var(--s2); }
.carousel__dots { display: flex; gap: 0.5rem; }
.carousel__dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: var(--edge-ui);
  transition: background var(--aperture-dur) var(--ease-ui), transform var(--aperture-dur) var(--ease-ui);
}
.carousel__dot::after { content: ""; position: absolute; inset: -8px; }   /* 24px hit target */
.carousel__dot:hover { background: var(--ink-dim); }
.carousel__dot[aria-current="true"] { background: var(--aperture); transform: scale(1.3); }
.carousel__count { color: var(--ink-dim); font-size: var(--t-data); letter-spacing: var(--track-mono); white-space: nowrap; }

/* a single pre-plated product slide shown outside the carousel */
.shot { margin: 0; min-width: 0; }
.shot img { display: block; width: 100%; height: auto; background: var(--steel); border-left: 2px solid var(--flash); }

/* ==========================================================================  */
/* HOME — the "read the whole thing" link a section grows once it has a page   */
/* ==========================================================================  */
.more { margin-top: var(--s3); }

/* the video teaser strip on the homepage: posters only, no video bytes at all */
.vstrip { list-style: none; padding: 0; display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 640px) { .vstrip { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.vstrip li { min-width: 0; }
.vstrip a { display: block; position: relative; color: var(--ink-on-dark); }
.vstrip img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: #000; border-left: 2px solid var(--edge-dim);
  transition: border-color var(--aperture-dur) var(--ease-ui);
}
.vstrip a:hover img, .vstrip a:focus-visible img { border-left-color: var(--flash); }
.vstrip__cap {
  display: block; margin-top: var(--s2); padding-top: var(--s2);
  border-top: var(--hair) solid var(--edge-dim);
  font-family: var(--font-mono); font-size: var(--t-data);
  letter-spacing: var(--track-mono); line-height: var(--lh-mono); color: var(--ink-dim);
}
.vstrip a:hover .vstrip__cap { color: var(--ink-hi); }
.section--panel .vstrip img { border-left-color: var(--edge-panel); }
.section--panel .vstrip__cap { border-top-color: var(--edge-panel); }