/* ============================================================
   home-lab.css — homepage credibility rebuild (2026-07-14)
   Self-contained styles for the work-led homepage.
   Depends on engine-room.css for: nav, .sec/.wrap/.eyebrow/.lede,
   .turn, .rv reveal, .engine-grid/.engine-card, .receipt-row,
   .zorro*, .htesti*, .hv-*, .marks, .actions/.btn, .band-mark,
   .offer-slot, footer.
   ============================================================ */

/* ---------- HERO ---------- */
.lab-shell { padding-bottom: 8px; }

.lab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  column-gap: 56px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 72px 48px 84px;
}

@media (max-width: 640px) {
  .lab-hero { padding-left: 24px; padding-right: 24px; }
}

.lab-kicker {
  font-family: "Readex Pro", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f27830;
  margin: 0 0 18px;
}

.lab-h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 6.2vw, 78px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f5f6f7;
  margin: 0 0 22px;
}

.lab-h1 .turn {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #f27830;
}

.lab-sub {
  font-family: "Readex Pro", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: rgba(245, 246, 247, 0.82);
  max-width: 54ch;
  margin: 0 0 30px;
}

.lab-cta-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 14px; column-gap: 16px; }

/* ---------- HERO STATUS BOARD ---------- */
.lab-board {
  background: rgba(8, 18, 38, 0.72);
  border: 1px solid rgba(245, 246, 247, 0.14);
  border-radius: 14px;
  padding: 18px 18px 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

.lab-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 14px;
  border-bottom: 1px solid rgba(245, 246, 247, 0.1);
}

.lab-board-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 246, 247, 0.7);
}

.lab-live {
  display: inline-flex;
  align-items: center;
  column-gap: 7px;
  font-family: "Readex Pro", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6fcf8f;
}

.lab-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fcf8f;
  box-shadow: 0 0 0 0 rgba(111, 207, 143, 0.55);
  animation: lab-pulse 2.2s ease-out infinite;
}

@keyframes lab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 207, 143, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(111, 207, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 207, 143, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lab-live-dot { animation: none; }
}

.lab-row {
  display: flex;
  align-items: center;
  column-gap: 14px;
  padding: 15px 6px;
  border-bottom: 1px solid rgba(245, 246, 247, 0.08);
  text-decoration: none;
  transition: background 0.18s ease;
  border-radius: 8px;
}

.lab-row:last-child { border-bottom: none; }

.lab-row:hover, .lab-row:focus-visible { background: rgba(242, 120, 48, 0.09); }

.lab-row-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fcf8f;
}

.lab-row-body { display: flex; flex-direction: column; row-gap: 3px; min-width: 0; }

.lab-row-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f5f6f7;
}

.lab-row-desc {
  font-family: "Readex Pro", sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(245, 246, 247, 0.65);
}

.lab-row-arrow {
  margin-left: auto;
  color: #f27830;
  font-size: 18px;
  transition: transform 0.18s ease;
}

.lab-row:hover .lab-row-arrow { transform: translateX(4px); }

/* ---------- 2. THE WORK ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 22px;
  margin-top: 44px;
}

.work-card {
  display: flex;
  flex-direction: column;
  background: #fdfcf8;
  border: 1px solid rgba(8, 18, 38, 0.12);
  border-radius: 12px;
  padding: 26px 26px 24px;
  box-shadow: 0 10px 30px rgba(8, 18, 38, 0.06);
}

.work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.work-label {
  font-family: "Readex Pro", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 18, 38, 0.55);
}

.work-live {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  font-family: "Readex Pro", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d7a43;
}

.work-live .lab-live-dot { background: #2e9e5b; box-shadow: none; animation: none; }

/* navy brand plate: the product's own mark leads each lab card */
.work-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  background: #081226;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.work-brand img { display: block; width: auto; }

.work-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #081226;
  margin: 0 0 12px;
}

.work-body {
  font-family: "Readex Pro", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(8, 18, 38, 0.8);
  margin: 0 0 16px;
}

.work-foot {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: rgba(8, 18, 38, 0.62);
  margin: auto 0 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(8, 18, 38, 0.1);
}

.work-link {
  font-family: "Readex Pro", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: #c2571d;
  text-decoration: none;
}

.work-link:hover, .work-link:focus-visible { text-decoration: underline; }

.work-thesis {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.55;
  color: rgba(8, 18, 38, 0.85);
  max-width: 62ch;
  margin: 44px auto 0;
  text-align: center;
}

.work-thesis a { color: #c2571d; }

.work-soon {
  font-family: "Readex Pro", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 18, 38, 0.5);
  text-align: center;
  margin: 20px auto 0;
}

/* ---------- 3/4. DOOR CARD LINKS ---------- */
.card-link { color: inherit; text-decoration: none; }
.card-link:hover, .card-link:focus-visible { color: #f27830; }

/* training ladder runs four rungs: 2x2 on desktop */
.train-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .train-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 5. THE HUMAN ---------- */
.human-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  column-gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* the polaroid treatment (canonical recipe from engine-room's About section) */
.human-polaroid {
  margin: 20px;
  max-width: 360px;
  background: #f2eee5;
  border: 1.5px solid rgba(15, 32, 56, 0.25);
  border-radius: 8px;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.42);
  padding: 14px 14px 46px;
  transform: rotate(-1.2deg);
  transition: transform 0.35s ease;
}

.human-polaroid:hover { transform: rotate(0); }

.human-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.human-body {
  font-family: "Readex Pro", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.7;
  color: rgba(245, 246, 247, 0.85);
  margin: 0 0 26px;
}

.human-books {
  display: flex;
  align-items: flex-end;
  column-gap: 44px;
  row-gap: 26px;
  flex-wrap: wrap;
  margin: 34px 0 36px;
}

.human-book {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  width: 220px;
  text-decoration: none;
}

.human-book img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.55));
  transition: transform 0.35s ease;
}

.human-book:first-child img { transform: rotate(-2.5deg); }
.human-book:last-child img { transform: rotate(2.5deg); }
.human-book:hover img { transform: rotate(0) translateY(-6px); }

.human-book span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  color: rgba(245, 246, 247, 0.8);
}

.human-book:hover span { color: #f27830; }

.human-center {
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(245, 246, 247, 0.72);
  margin: 0;
}

.human-center a { color: #f4a06b; }

/* ---------- 6. THE FEED ---------- */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 22px;
  margin-top: 40px;
  margin-bottom: 44px;
}

.feed-card {
  display: flex;
  flex-direction: column;
  background: #fdfcf8;
  border: 1px solid rgba(8, 18, 38, 0.12);
  border-radius: 12px;
  padding: 22px 22px 20px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feed-card:hover, .feed-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(8, 18, 38, 0.1);
}

.feed-cat {
  font-family: "Readex Pro", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c2571d;
  margin-bottom: 12px;
}

.feed-title {
  font-family: "Readex Pro", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #081226;
  margin: 0 0 16px;
}

.feed-more {
  margin-top: auto;
  font-family: "Readex Pro", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #c2571d;
}

.feed-subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 18px;
  margin-top: 40px;
}

.feed-sub {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  background: rgba(8, 18, 38, 0.04);
  border: 1px solid rgba(8, 18, 38, 0.12);
  border-radius: 12px;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.feed-sub:hover, .feed-sub:focus-visible { border-color: #c2571d; }

.feed-sub-h {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #081226;
}

.feed-sub-p {
  font-family: "Readex Pro", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(8, 18, 38, 0.7);
}

/* ---------- 7. CLOSE ---------- */
.band-alt {
  font-family: "Readex Pro", sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  color: rgba(245, 246, 247, 0.75);
  margin-top: 22px;
}

.band-alt a { color: #f4a06b; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .lab-hero { column-gap: 36px; }
}

@media (max-width: 960px) {
  .lab-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
    padding: 52px 24px 64px;
  }
  .lab-board { max-width: 560px; }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .human-grid { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .human-polaroid { max-width: 300px; margin: 10px auto 0; }
  .feed-grid { grid-template-columns: minmax(0, 1fr); }
  .feed-subs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .lab-h1 { font-size: clamp(38px, 11vw, 48px); }
  .lab-board { padding: 14px 12px 6px; }
  .lab-row-name { font-size: 17px; }
}

/* ============================================================
   Ported proof-section components (from hero-chat.css + hub-flywheel.css)
   .zorro* / .htesti* / .hv-* / .offer-slot — markup reused on the rebuild
   ============================================================ */
/* ---- Zorro client-proof block (dark proof section) ---- */
.zorro{
  margin:38px 0 10px;padding:30px 34px;max-width:780px;
  background:rgba(242,120,48,.06);
  border:1px solid rgba(242,120,48,.28);border-left:4px solid var(--orange);
  border-radius:14px;
}
.zorro-eyebrow{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:12px;
}
.zorro-head{
  font-family:"Barlow Condensed",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,3vw,40px);line-height:.98;color:var(--cream);margin-bottom:16px;
}
.zorro-body{
  font-size:16px;font-weight:300;line-height:1.7;color:rgba(242,238,229,.82);
  max-width:60ch;margin-bottom:22px;
}
.zorro-quote{
  font-family:"Crimson Pro",serif;font-style:italic;font-size:21px;line-height:1.5;
  color:var(--cream);margin:0 0 10px;
}
.zorro-cite{
  display:flex;align-items:center;gap:12px;
  font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
.zorro-face{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(242,120,48,.5);flex:0 0 auto;
}

/* ---- 3-up corroborating testimonials (dark proof section) ---- */
.htesti-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0 10px}
.htesti{
  background:rgba(242,238,229,.04);border:1px solid rgba(242,238,229,.1);
  border-radius:14px;padding:24px 24px 22px;
}
.htesti-q{
  font-family:"Crimson Pro",serif;font-style:italic;font-size:17px;line-height:1.55;
  color:rgba(242,238,229,.9);margin:0 0 16px;
}
.htesti-cite{
  display:block;font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--cream);
}
.htesti-cite-row{display:flex;align-items:center;gap:13px;margin-top:auto}
.htesti-face{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(242,120,48,.5);flex:0 0 auto;
}
.htesti-meta{display:flex;flex-direction:column;min-width:0}
.htesti-role{display:block;font-size:12.5px;color:var(--slate);margin-top:4px;line-height:1.4}
.htesti{display:flex;flex-direction:column}
@media (max-width:900px){.htesti-row{grid-template-columns:1fr}}

/* ---- In conversation: podcast video strip (dark proof section) ---- */
.hv-label{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.38em;text-transform:uppercase;color:var(--orange);margin:54px 0 20px;
}
.hv-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.hv-video{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  aspect-ratio:16/9;background:#000;border:1px solid rgba(242,238,229,.14);
}
.hv-video img{width:100%;height:100%;object-fit:cover;display:block}
.hv-video iframe{width:100%;height:100%;border:0;display:block}
.hv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hv-play svg{width:66px;height:66px;fill:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));opacity:.95;transition:transform .18s ease}
.hv-video:hover .hv-play svg{transform:scale(1.08)}
.hv-video:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.hv-cap{margin-top:16px;font-family:"Crimson Pro",serif;font-style:italic;font-size:18px;color:rgba(242,238,229,.9)}
.hv-name{display:block;margin-top:10px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--cream)}
.hv-role{display:block;font-size:13px;color:var(--slate);margin-top:2px}
.hv-foot{margin-top:28px}
.hv-more{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--orange);text-decoration:none}
.hv-more:hover{color:var(--cream)}
@media (max-width:900px){.hv-grid{grid-template-columns:1fr}}
/* offer slot on the closing band (price drops in once locked) */
.offer-slot{
  margin-top:26px;max-width:640px;
  border:1px solid rgba(242,238,229,.18);border-radius:14px;
  background:rgba(15,32,56,.42);padding:24px 26px;
}
.offer-line{font-size:16px;line-height:1.62;color:var(--cream)}
.offer-price{margin-top:12px;font-family:"Crimson Pro",serif;font-style:italic;font-size:16px;color:var(--slate)}

/* receipt-row sits on paper in the feed section (engine-room styles it for dark) */
#the-feed .receipt-row .n { color: #081226; }
#the-feed .receipt-row .l { color: rgba(8, 18, 38, 0.62); }
#the-feed .receipt-row > div { border-color: rgba(8, 18, 38, 0.15); }

/* close-band CTAs: equal button heights + vertically centered text.
   Overrides engine-room's `.band .btn.solid{margin-top:30px}` (a standalone-CTA
   leftover) that drops only the solid button inside the flex row. */
#ask .actions { align-items: center; flex-wrap: wrap; }
#ask .actions .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; line-height: 1; margin-top: 0; }
#ask .actions .btn.ghost { border-color: rgba(242, 238, 229, 0.3); }