/* DDR Contracting · b1 "Real work first" · additions to direction B
   Everything new lives here; b.css is B's file, byte for byte.
   New pieces: A-150 work rail + bathroom film, A-300 before/after (shared/bkit/compare),
   A-600 key plan stretches (shared/bkit/keyplan), inline Call / Text / Email rows.
   Uses B's tokens and type roles only. */

/* ---------- inline contact rows (A-150, A-300; the close has B's own links) ---------- */
.contact-row { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; }
.contact-row a, .contact-row__txt {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase;
}
.contact-row a { text-decoration: underline; text-decoration-color: var(--red); }
@media (hover: hover) { .contact-row a:hover { color: var(--red-ink); } }
.contact-row__txt { gap: 0.6em; color: var(--ink-soft); }
.contact-row--after { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--rule); }
.close__txt { display: inline-block; padding: 12px 0; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-soft); }
/* sms: works on phones; on desktops the number is shown as text instead */
@media (pointer: coarse) { .contact-row__txt, .close__txt { display: none; } }

/* ---------- A-150 work on file: native scroll-snap rail ---------- */
.rail { --rail-h: clamp(220px, 21vw, 300px); margin-top: 40px; }
.rail__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ink); }
.rail__count { margin: 0; color: var(--red-ink); }
.rail__btns { display: flex; }
.rail__btn { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; background: none; border: 0; border-left: 1px solid var(--rule); cursor: pointer; }
.rail__btn:last-child { border-right: 1px solid var(--rule); }
.rail__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rail__btn:disabled { color: var(--rule); cursor: default; }
@media (hover: hover) { .rail__btn:not(:disabled):hover { color: var(--red-ink); } }
.rail__track {
  list-style: none; margin: 8px calc(-1 * var(--gutter)) 0 0; padding: 0 var(--gutter) 14px 0;
  display: flex; gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.rail__track:focus-visible { outline-offset: 2px; }
.rail__item { flex: none; scroll-snap-align: start; }
.rail__item figure { margin: 0; }
.rail__item img { height: var(--rail-h); width: auto; max-width: min(86vw, 640px); object-fit: cover; background: var(--sheet); }
.rail__item figcaption { margin-top: 10px; color: var(--ink-soft); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 599px) { .rail__item figcaption { white-space: normal; max-width: 86vw; } }

/* bathroom film + contact */
.work__foot { display: grid; gap: 40px; margin-top: 56px; }
.film { margin: 0; width: min(100%, 320px); background: var(--sheet); border: 1px solid var(--ink); }
.film__frame { position: relative; aspect-ratio: 576 / 1024; overflow: hidden; background: #1C1E1D; }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__btn {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px 0 11px;
  background: var(--sheet); border: 1px solid var(--ink); cursor: pointer;
  font-weight: 400; font-size: var(--t-l); letter-spacing: 0.2em; text-transform: uppercase;
}
.film__btn svg { width: 16px; height: 16px; fill: currentColor; }
.film__i-pause, .film.is-playing .film__i-play { display: none; }
.film.is-playing .film__i-pause { display: block; }
@media (hover: hover) { .film__btn:hover { color: var(--red-ink); } }
.film__tb { display: flex; align-items: stretch; border-top: 1px solid var(--ink); }
.film__tb > span { padding: 12px 16px; display: flex; align-items: center; }
.film__tb > .mono { color: var(--red-ink); border-right: 1px solid var(--rule); }
.film__tb > span + span { font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase; }
.work__talk .kicker { margin-bottom: 14px; }
.work__h { margin: 0; font-size: var(--t-t); line-height: 1.3; font-weight: 300; }
.work__talk .body { margin-top: 12px; }
@media (min-width: 720px) {
  .work__foot { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
}

/* ---------- A-300 before and after (kit: shared/bkit/compare) ---------- */
.ba .bcmp { margin-top: 40px; max-width: 1120px; }
.ba .contact-row--after { max-width: 1120px; }

/* ---------- A-600 key plan (kit: shared/bkit/keyplan, section mode) ---------- */
.area .kp__intro { margin-bottom: 40px; }
.kp-stretch__no { margin: 0; color: var(--red-ink); text-transform: uppercase; }
.kp-stretch h3 { margin: 6px 0 0; font-size: var(--t-t); line-height: 1.3; }
.kp-stretch p:not(.kp-stretch__no) { margin: 10px 0 0; color: var(--ink-soft); max-width: 44ch; }
.kp-fig { margin: 24px 0 0; max-width: 30rem; }
.kp-fig img { width: 100%; height: auto; }
.kp-fig figcaption { margin-top: 10px; color: var(--ink-soft); text-transform: uppercase; }
.area .area__lists { margin-top: 56px; }
@media (min-width: 720px) { .area .area__lists { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* no JS: the browser shows the video's own controls; the rail scrolls natively */
html:not(.js) .film__btn, html:not(.js) .rail__btns { display: none; }