/* ================================================================
   TARABA BizComm — Home (the 5-minute showroom tour)
   css/pages/home.css | Loaded by index.html only, after
   base.css, layout.css, showroom.css, showroom-motion.css, modal.css.

   Rebuilt for the showroom restructure (Phase 7). Everything shared
   lives in css/showroom*.css; this file only lays out Home's 8 rooms.
   The pre-rebuild version is kept in _archive/pre-showroom/home.css.
================================================================ */

/* The fixed 70px nav sits over the hero, and anchor jumps
   ("Start the tour") must land below it. */
html {
  scroll-padding-top: 70px;
}
.hero-room {
  padding-top: calc(70px + var(--s-8));
}

/* Hero right side: the client's guide + logo animation (transparent,
   straight on the dark room). A wider right column than before (6/5
   instead of 7/5) keeps the guide and logo readable while the
   headline still breaks over three lines. */
.hero-room .wrap {
  grid-template-columns: 6fr 5fr;
}

/* Hero card wall (client request, 2026-10-31): the nine room-04 cards
   behind the headline, set a little up and down (not one straight line).
   Slot 7 on the right is the lit card; one softened card waits to its
   right and the other seven sit to its left. Every 1.2s each card moves
   one slot to the right, so the next card steps into the lit slot
   (js/pages/index.js sets --slot; the card leaving the right edge comes
   back in at the far left). */
.hero-wall {
  --cw: clamp(150px, 11.5vw, 230px);
  --pitch: calc(var(--cw) * 1.08);
  /* centre of the lit slot: well to the right, with room for one card after it */
  --hx: min(calc(50% + 3 * var(--pitch)), calc(100% - 1.6 * var(--pitch)));
  --zig: calc(var(--cw) * 0.16);
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-wall__card {
  --slot: 0;
  --y: 0px;
  --sc: 1;
  position: absolute;
  top: 50%;
  left: calc(var(--hx) + (var(--slot) - 7) * var(--pitch) - var(--cw) / 2);
  width: var(--cw);
  aspect-ratio: 3 / 7;
  border-radius: var(--r-lg);
  overflow: hidden;
  transform: translateY(calc(-50% + var(--y))) scale(var(--sc));
  filter: brightness(0.5) saturate(0.8) blur(2px);
  transition:
    left 700ms var(--ease-out),
    transform 700ms var(--ease-out),
    filter 600ms var(--ease-out),
    box-shadow 600ms ease-out,
    opacity 400ms ease-out;
}
.hero-wall__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-wall__card.is-lit {
  z-index: 1;
  filter: none;
  box-shadow:
    0 0 0 3px var(--orange),
    0 24px 50px rgba(0, 0, 0, 0.5);
}
/* the card wrapping from the right edge to the far left doesn't slide across */
.hero-wall__card.is-jump {
  transition: none;
  opacity: 0;
}
.hero-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(13, 27, 62, 0.9) 0%,
      rgba(13, 27, 62, 0.72) 38%,
      rgba(13, 27, 62, 0.2) 62%,
      rgba(13, 27, 62, 0.1) 100%
    ),
    linear-gradient(0deg, rgba(13, 27, 62, 0.7), transparent 25%),
    linear-gradient(180deg, rgba(13, 27, 62, 0.6), transparent 20%);
}
.js-motion .hero-wall {
  animation: wall-in 900ms var(--ease-out) 200ms both;
}
@keyframes wall-in {
  from {
    opacity: 0;
  }
}
@media (max-width: 1023px) {
  .hero-wall::after {
    background: rgba(13, 27, 62, 0.66);
  }
}
@media (max-width: 639px) {
  .hero-wall {
    --cw: 110px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wall__card {
    transition: none;
  }
}

/* Centred rooms (02 Gap, 07 Principle) */
.room-center {
  text-align: center;
}
.room-center h2 {
  margin-left: auto;
  margin-right: auto;
}
.gap-exhibit figcaption {
  margin: var(--s-5) auto 0;
  max-width: 40ch;
}
.gap-exhibit figcaption strong {
  color: var(--navy);
}

/* ── Room 03 — What we do ───────────────────── */
.room-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-6);
}
.exhibits {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 8 cards: 4 + 4 */
  gap: var(--s-4);
  margin-top: var(--s-7);
}

/* ── Room 04 — Industries ───────────────────── */
/* Square cards (client, 2026-10-31): the artwork cut square out of each
   tall card, with the name and line as page text underneath; 3 × 3,
   kept a little narrower than the room so the art stays sharp. Hover
   or focus turns a card over. */
#industries .industries {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  max-width: 820px;
  margin: var(--s-6) auto 0;
}
@media (min-width: 1024px) {
  #industries .industries {
    grid-template-columns: repeat(10, 1fr);
    max-width: none;
  }
  #industries .industry {
    grid-column: span 2;
  }
  #industries .industry:nth-child(6) {
    grid-column: 2 / span 2;
  }
}
#industries .industry {
  overflow: visible;
  border-radius: var(--r-lg);
  box-shadow: none;
}
.industry__in {
  display: block;
  height: 100%;
  perspective: 1000px;
}
.industry__card {
  position: relative;
  display: block;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
}
.industry:hover .industry__card,
.industry:focus-visible .industry__card {
  transform: rotateY(180deg);
}
.industry__face {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-mid);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.7);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#industries .industry img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.industry__text {
  padding: var(--s-3) var(--s-4);
}
.industry__name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}
.industry__line {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
/* the back: what we make for this sector, and the way to the work */
.industry__face--back {
  position: absolute;
  inset: 0;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--white);
  border-color: transparent;
  transform: rotateY(180deg);
}
.industry__face--back .industry__name {
  font-size: 20px;
  color: var(--navy);
}
.industry__face--back .industry__line {
  color: var(--text-body);
}
.industry__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--orange-ink);
}
.industry__more .icon {
  width: 16px;
  height: 16px;
}
/* Card i flips in, one after another */
.js-motion [data-motion="industries"] .industry__in {
  transition:
    transform 500ms var(--ease-out),
    opacity 300ms ease-out;
  transition-delay: calc(180ms + var(--i, 0) * 200ms);
  transform-origin: 50% 50%;
}
.js-motion [data-motion="industries"]:not(.is-in) .industry__in {
  opacity: 0;
  transform: perspective(1000px) rotateY(-90deg);
}
@media (max-width: 639px) {
  /* phones: one row that swipes sideways (as the tall cards did) */
  #industries .industries {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--pad-x) * -1);
    padding: 0 var(--pad-x) var(--s-4) 0;
    scrollbar-width: none;
  }
  #industries .industry {
    scroll-snap-align: start;
  }
  .industry__name {
    font-size: 15px;
  }
  .industry__face--back {
    padding: var(--s-4) var(--s-3);
  }
  .industry__face--back .industry__name {
    font-size: 17px;
  }
  .industry__line {
    font-size: 13px;
  }
}

/* ── Room 06 — Our Principal ────────────────── */
/* Execute: the same sentence as before, with a small icon before each
   output (client, 2026-10-31) */
.step__out .icon {
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.25em;
  vertical-align: -0.2em;
  color: var(--brand-navy);
}
/* End state: every step lit orange (the arrow completed the path) */
#principal .step__badge {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--navy);
  --icon-dot: var(--white);
}
/* Badges pop in as before; each turns orange when the arrow lands on
   its step (js/pages/index.js adds .is-lit) */
.js-motion #principal [data-motion="steps"] .step__badge {
  transition:
    opacity 250ms var(--ease-out),
    transform 350ms cubic-bezier(0.3, 1.4, 0.5, 1),
    background-color 220ms ease-out,
    border-color 220ms ease-out,
    color 220ms ease-out;
  transition-delay:
    calc(var(--i, 1) * 280ms - 120ms),
    calc(var(--i, 1) * 280ms - 120ms),
    0s,
    0s,
    0s;
}
.js-motion #principal [data-motion="steps"] .step:not(.is-lit) .step__badge {
  background: var(--white);
  border-color: var(--border-h);
  color: var(--brand-navy);
}
.js-motion #principal .step.is-lit .step__badge {
  animation: step-lit 420ms ease-out;
}
@keyframes step-lit {
  40% {
    transform: scale(1.14);
    box-shadow: 0 0 0 8px rgba(234, 162, 33, 0.18);
  }
}
/* The logo's arrow + the dotted path it draws (js/pages/index.js) */
.steps__arrow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 40px;
  height: 32px;
  margin: -16px 0 0 -20px; /* transform places its centre */
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(13, 27, 62, 0.25));
}
.steps__arrow svg {
  display: block;
}
.steps__trail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.steps__trail-dots {
  fill: none;
  stroke: #c48413;
  stroke-opacity: 0.6;
  stroke-width: 2;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
}
.steps__trail-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 14;
}
/* the arrow draws its own path, so the static line steps aside */
.has-flight .steps__line {
  display: none;
}
.kpi {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lead);
  color: var(--text-soft);
  /* client, 2026-11-02: one line wherever it fits (was max 60ch) */
  max-width: none;
}
.kpi strong {
  color: var(--navy);
  font-weight: 600;
}

/* ── Room 06 — Proof ────────────────────────── */
.proof {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-8);
  align-items: center;
}
.proof .stats {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: var(--s-6) var(--s-8);
}
.quote {
  padding: var(--s-6);
  border-left: 3px solid var(--orange);
  background: var(--white);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--shadow-sm);
}
.quote p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--navy);
}
.quote cite {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--text-soft);
}
.quotes__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.quotes__nav .btn-link {
  margin-left: auto;
}
.proof__logos {
  margin-top: var(--s-8);
}
/* Client logos in their own colours, a size up from the shared strip */
.proof__logos .logo-strip img {
  height: 64px;
  padding: 8px 14px;
  filter: none;
  opacity: 1;
}
/* less empty space under the logos, before Let's talk */
#proof {
  padding-bottom: calc(var(--room-y) / 2);
}
@media (max-width: 639px) {
  .proof__logos .logo-strip img {
    height: 52px;
  }
}

/* ── Room 02 — Fundamental Principle ─────────── */
#principle .statement {
  max-width: 30ch;
}
/* A white room (right after the dark hero, so the two read as separate
   rooms): navy text, struck words in slate, CHARACTER in orange-ink */
#principle .statement {
  color: var(--navy);
}
#principle .statement em {
  color: var(--slate);
}
#principle .statement strong {
  color: var(--orange-ink-lg);
}
/* Client, 2026-10-31: a serif face for the statement, and no strike
   lines over TRICKS / TOOLS / TECHNIQUES (they just turn slate) */
#principle .statement {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
#principle .statement em::after {
  display: none;
}
.js-motion #principle [data-motion="statement"] em {
  transition-delay: calc(100ms + var(--i, 0) * 150ms);
}
.js-motion #principle [data-motion="statement"]:not(.is-in) em,
.js-motion #principle [data-motion="statement"]:not(.is-in) strong {
  color: var(--navy);
}

/* "But that of CHARACTER." types itself out after the three strikes
   (js/pages/index.js splits it into .tw-ch spans, index --c) */
.js-motion #principle .statement [data-motion="statement"] strong.tw {
  color: var(--orange-ink-lg);
  transition: none;
}
.tw-ch {
  position: relative;
}
.tw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* the caret: rides each letter for its 40ms, then blinks on the last */
.tw-ch::after {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.05em;
  right: -0.06em;
  width: 0.07em;
  background: currentColor;
  opacity: 0;
}
.js-motion [data-motion="statement"] .tw-ch {
  opacity: 0;
}
.js-motion [data-motion="statement"].is-in .tw-ch {
  opacity: 1;
  transition: opacity 0s linear;
  transition-delay: calc(0.55s + var(--c) * 40ms);
}
.js-motion [data-motion="statement"].is-in .tw-ch::after {
  animation: tw-caret 40ms linear calc(0.55s + var(--c) * 40ms);
}
.js-motion [data-motion="statement"].is-in .tw-ch--last::after {
  animation: tw-blink 1s steps(1) calc(0.55s + var(--c) * 40ms) infinite;
}
@keyframes tw-caret {
  from,
  to {
    opacity: 1;
  }
}
@keyframes tw-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ── Room 08 — CTA ──────────────────────────── */
#talk {
  background: var(--navy-deep);
}

/* ─────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .exhibits {
    grid-template-columns: repeat(2, 1fr);
  }
  .proof {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .hero-room .wrap {
    grid-template-columns: 1fr;
  }
  /* still flush with the right edge (the guide enters from off screen) */
  .hero-show {
    max-width: 600px;
    justify-self: end;
    width: 100%;
  }
}
@media (max-width: 639px) {
  .hero-room {
    padding-top: calc(70px + var(--s-6));
    min-height: 0;
  }
  .room-head {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .exhibits {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .exhibit {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--s-4);
    column-gap: var(--s-4);
  }
  .exhibit__icon {
    width: 52px;
    height: 52px;
  }
  .exhibit__num {
    display: none;
  }
  .exhibit h3 {
    flex: 1;
  }
  .exhibit p {
    flex-basis: 100%;
  }
  .proof .stats {
    gap: var(--s-5) var(--s-6);
  }
  .quotes__nav {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry__card {
    transition: none;
  }
  .industry:hover .industry__card,
  .industry:focus-visible .industry__card {
    transform: none;
  }
}