/* ==========================================================================
   SMA Estimating — home.css
   Home page sections only. Depends on tokens from base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(82% 110% at 84% 4%, #0b46b0 0%, transparent 58%),
    linear-gradient(168deg, var(--blue-900) 0%, #05205a 58%, #012a7d 100%);
  color: #fff;
  padding-block: clamp(3rem, 5.5vw, 5.25rem) clamp(3rem, 5vw, 4.5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  border: 1px solid rgba(250, 170, 23, 0.4);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.5rem;
}
.hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero__lede {
  font-size: var(--fs-lede);
  color: var(--on-dark);
  max-width: 52ch;
  margin-top: 1.4rem;
  line-height: 1.62;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.hero__assure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--on-dark-dim);
}
.hero__assure li { display: flex; align-items: center; gap: 0.4rem; }
.hero__assure svg { width: 14px; height: 14px; color: var(--gold); flex: none; }

/* Title-block panel — the hero's one bold element */
.sheet {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  border-top: 5px solid var(--gold);
}
.sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.sheet__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.sheet__rev { font-family: var(--sans); font-size: 0.72rem; color: var(--muted-2); }

.sheet__table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.sheet__table th {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  text-align: left;
  padding: 0.7rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.sheet__table th:last-child, .sheet__table td:last-child { text-align: right; }
.sheet__table td {
  padding: 0.62rem 1.35rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sheet__table td:first-child {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.78rem;
}
.sheet__table tr:last-child td { border-bottom: 0; }
.sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.35rem;
  background: var(--blue-900);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 0.74rem;
}
.sheet__foot strong { color: var(--gold); font-weight: 600; }

/* Measured stat band */
.gauge {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 4vw, 3.75rem);
  border-top: 1px solid var(--line-dark);
  padding-top: 1.75rem;
}
.gauge > li { position: relative; padding-inline: 1.25rem; }
.gauge > li:first-child { padding-left: 0; }
.gauge > li + li { border-left: 1px solid var(--line-dark); }
.gauge > li::before {
  content: "";
  position: absolute;
  top: -1.76rem;
  left: 0;
  width: 26px;
  height: 3px;
  background: var(--gold);
}
.gauge > li:first-child::before { left: 0; }
.gauge__n {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  display: block;
  line-height: 1.05;
}
.gauge__l {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--on-dark-dim);
  display: block;
  margin-top: 0.4rem;
  line-height: 1.35;
}

@media (max-width: 520px) {
  /* Tighten the title block so scope descriptions stop wrapping to three lines */
  .sheet__head { padding-inline: 1rem; }
  .sheet__table { font-size: 0.78rem; }
  .sheet__table th, .sheet__table td { padding-inline: 1rem; }
  .sheet__table td { padding-block: 0.55rem; }
  .sheet__foot { padding-inline: 1rem; font-size: 0.7rem; flex-wrap: wrap; gap: 0.35rem; }
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero h1 { max-width: 20ch; }
  .gauge { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .gauge > li:nth-child(3) { padding-left: 0; border-left: 0; }
  .gauge > li:nth-child(n+3)::before { display: none; }
}
@media (max-width: 420px) {
  .gauge { grid-template-columns: 1fr; }
  .gauge > li { padding-left: 0; border-left: 0; }
  .gauge > li:nth-child(n+2)::before { display: none; }
}

/* --------------------------------------------------------------------------
   2. Credentials strip
   -------------------------------------------------------------------------- */
.credbar { background: var(--white); border-bottom: 1px solid var(--line); }
.credbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.credbar__label {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.credbar__label span {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted-2);
  margin-top: 0.3rem;
}
.credbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.credbar__list li {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.45rem 0.95rem;
  background: var(--paper);
}
@media (max-width: 720px) {
  .credbar__inner { grid-template-columns: 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   3. Services
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.svc {
  background: var(--white);
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s var(--ease);
}
.svc:hover { background: var(--paper); }
.svc__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--gold);
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
}
.svc__icon svg { width: 21px; height: 21px; }
.svc h3 { margin-bottom: 0.6rem; }
.svc p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.62; }
.svc__link {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  border-top: 1px solid var(--line);
  display: inline-block;
}
.svc__link:hover { color: var(--gold-700); }

/* --------------------------------------------------------------------------
   4. Trades (CSI divisions) — cards
   -------------------------------------------------------------------------- */
.trades {
  display: grid;
  /* 15 items / 3 columns = 5 full rows, so no orphan cell at any width. */
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
}
.trades li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num note";
  align-items: center;
  gap: 0.1rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  box-shadow:
    0 1px 2px rgba(7, 26, 60, 0.04),
    0 8px 20px -14px rgba(7, 26, 60, 0.22);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.trades li:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(7, 26, 60, 0.05),
    0 16px 30px -18px rgba(7, 26, 60, 0.35);
}
.trades .num {
  grid-area: num;
  align-self: center;
  color: var(--gold-700);
  font-size: 0.82rem;
}
.trades a {
  grid-area: name;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.trades a::after {
  /* Whole card is the hit area, not just the label. */
  content: "";
  position: absolute;
  inset: 0;
}
.trades li { position: relative; }
.trades li:hover a { color: var(--blue); }
.trades small {
  grid-area: note;
  color: var(--muted-2);
  font-size: 0.76rem;
  font-family: var(--sans);
  line-height: 1.35;
  margin-top: 2px;
}
.trades-note {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
.trades-note p { color: var(--muted); font-size: var(--fs-sm); max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. Deliverables
   -------------------------------------------------------------------------- */
.deliver {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.deliver li {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.4rem;
}
.deliver h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.deliver p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   6. Process (a real sequence — numbering earned)
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
.steps > li { position: relative; padding-top: 2.6rem; }
.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.steps > li::after {
  content: "";
  position: absolute;
  top: 1.9rem;
  left: 0;
  right: 1.5rem;
  height: 2px;
  background: var(--line-strong);
}
.steps > li:last-child::after { background: var(--gold); }
.steps h3 { margin-bottom: 0.6rem; }
.steps p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.62; }
.steps__meta {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--gold-700);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Expertise / E-E-A-T panel
   -------------------------------------------------------------------------- */
.expertise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.expertise__body p { color: var(--muted); }
.expertise__body p + p { margin-top: 1rem; }

.people { margin-top: 2rem; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.people li {
  background: var(--white);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
}
.people__badge {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}
.people__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
}
.people__role { color: var(--muted-2); font-size: 0.82rem; font-family: var(--sans); }

.sources {
  background: var(--blue-900);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-top: 5px solid var(--gold);
}
.sources h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1.2rem; }
.sources li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.sources li:last-child { border-bottom: 0; padding-bottom: 0; }
.sources strong {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.sources__note {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--on-dark-dim);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .expertise { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   9. Case studies
   -------------------------------------------------------------------------- */
.cases { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.case {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case__art {
  background: var(--blue-900);
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.case__art img { width: 100%; height: auto; }
.case__body { padding: clamp(1.5rem, 3vw, 2.1rem); }
.case__place {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gold-700);
  letter-spacing: 0.04em;
}
.case h3 { margin: 0.4rem 0 0.9rem; }
.case p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }
.case__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.case__facts li {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.35rem 0.7rem;
  font-variant-numeric: tabular-nums;
}
.case__facts li:first-child { background: var(--blue); color: #fff; border-color: var(--blue); }
@media (max-width: 780px) {
  .case { grid-template-columns: 1fr; }
  .case__art { padding: 1.5rem clamp(1.15rem, 5vw, 2rem); }
}

/* --------------------------------------------------------------------------
   10. Coverage
   -------------------------------------------------------------------------- */
.coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.coverage > li { background: var(--white); padding: 1.4rem 1.5rem; }
.coverage h3 {
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.coverage h3 svg { width: 15px; height: 15px; color: var(--gold-700); flex: none; }
.coverage ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.coverage ul li {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}
.coverage ul li:not(:last-child)::after { content: ","; }

/* --------------------------------------------------------------------------
   11. Reviews — snap slider

   The logo slot expects the OFFICIAL Google brand asset. A neutral dashed
   placeholder ships in assets/img/ — replace it, don't redraw the logo.
   Track scrolls with CSS scroll-snap: native momentum on touch, smooth
   programmatic scrolling from the arrows. No layout shift, no scroll listener.
   -------------------------------------------------------------------------- */
.gr {
  position: relative;
  /* Bleed the track to the viewport edge on small screens so cards can
     peek past the gutter instead of being clipped mid-card. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.gr-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.35rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 4px;
}
.gr-track::-webkit-scrollbar { display: none; }

.gr-card {
  flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.35rem)) / 3);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.2vw, 1.65rem);
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s var(--ease);
}
.gr-card:hover { border-color: var(--line-strong); }

.gr-card__top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.gr-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  flex: none;
}
.gr-avatar--a { background: #2255bb; }
.gr-avatar--b { background: #0f7a5f; }
.gr-avatar--c { background: #8a4b1f; }
.gr-avatar--d { background: #6b3f96; }

.gr-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.3;
}
.gr-name svg { width: 14px; height: 14px; color: var(--blue); flex: none; }
.gr-when {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted-2);
  display: block;
  margin-top: 2px;
}
.gr-mark { align-self: flex-start; line-height: 0; }
.gr-mark img { width: 22px; height: 22px; }

.gr-card__stars { display: flex; gap: 2px; margin-bottom: 0.8rem; }
.gr-card__stars svg { width: 15px; height: 15px; color: var(--gold); }

.gr-card blockquote {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--muted);
}
.gr-card__meta {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted-2);
}

/* --- Slider controls --- */
.gr-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.gr-dots { display: flex; gap: 0.45rem; }
.gr-dots button {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  padding: 0;
  transition: background-color 0.2s var(--ease), width 0.2s var(--ease);
}
.gr-dots button[aria-current="true"] { background: var(--gold); width: 38px; }

.gr-arrows { display: flex; gap: 0.5rem; }
.gr-arrows button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease),
              background-color 0.18s var(--ease);
}
.gr-arrows button:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}
.gr-arrows button:disabled { opacity: 0.35; cursor: default; }
.gr-arrows svg { width: 18px; height: 18px; }

@media (max-width: 980px) {
  .gr-card { flex-basis: calc((100% - clamp(1rem, 2vw, 1.35rem)) / 2); }
}
@media (max-width: 680px) {
  .gr-card { flex-basis: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  .gr-track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  list-style: none;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background:
    linear-gradient(var(--blue), var(--blue)) center/12px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center/2px 12px no-repeat;
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after {
  background:
    linear-gradient(var(--gold-700), var(--gold-700)) center/12px 2px no-repeat;
}
.faq__a { padding: 0 0 1.4rem; color: var(--muted); max-width: 72ch; }

/* --------------------------------------------------------------------------
   14. Hero entrance — single orchestrated moment
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__grid > * { animation: rise 0.6s var(--ease) both; }
  .hero__grid > *:nth-child(2) { animation-delay: 0.12s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   Animated takeoff figure — process section

   The plan is SVG; the quantity readout is HTML. Keeping the readout out of
   the SVG means its text scales with the page instead of with the viewBox —
   an 880-wide viewBox on a 390px screen would have rendered 13px labels at
   under 5px.

   One 12s loop. Every element shares the duration and encodes its timing as
   keyframe percentages, so nothing drifts out of sync the way staggered
   animation-delay does after a few cycles. Only opacity, transform and
   stroke-dashoffset animate — no layout, no expensive paint.

   Idle until scrolled into view (inherits the existing [data-reveal] .is-in
   flag) and completely static under prefers-reduced-motion.
   ========================================================================== */

.tk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
}
.tk__plan { width: 100%; height: auto; display: block; overflow: visible; }

/* --- Plan: static state is the finished drawing -------------------------- */
.tk-ink   { fill: none; stroke: var(--blue-900); stroke-width: 2; stroke-linejoin: round; }
.tk-wall  { fill: none; stroke: #7d93bb; stroke-width: 1.5; }
.tk-room  { fill: var(--blue); opacity: 0.07; }
.tk-dim   { fill: none; stroke: var(--gold-700); stroke-width: 1.4; }
.tk-label { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--gold-700); }
.tk-scan  { display: none; }

/* --- Readout ------------------------------------------------------------- */
.tk__head {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--muted-2);
  margin: 0 0 0.75rem;
}
.tk__rows { border-top: 1px solid var(--line); }
.tk__rows li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.88rem;
}
.tk__n   { font-weight: 700; font-size: 0.78rem; color: var(--gold-700); font-variant-numeric: tabular-nums; }
.tk__q   { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; text-align: right; }

.tk__stamp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding: 0.6rem 0.8rem;
  background: var(--paper);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.tk__stamp svg { width: 16px; height: 16px; color: var(--gold-700); flex: none; }

.tk__caption {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}
.tk__caption strong { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .tk { grid-template-columns: 1fr; }
}

/* --- Animation ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .tk.is-in .tk-outline { stroke-dasharray: 1200; animation: tk-draw 12s linear infinite; }
  .js .tk.is-in .tk-wall    { stroke-dasharray: 600;  animation: tk-wall 12s linear infinite; }
  .js .tk.is-in .tk-room    { animation: tk-room 12s linear infinite; }
  .js .tk.is-in .tk-dimgroup { animation: tk-dim 12s linear infinite; }
  .js .tk.is-in .tk-scan    { display: block; animation: tk-scan 12s linear infinite; }
  .js .tk.is-in .tk__rows li { animation: tk-row 12s linear infinite; }
  .js .tk.is-in .tk__rows li:nth-child(2) { animation-name: tk-row2; }
  .js .tk.is-in .tk__rows li:nth-child(3) { animation-name: tk-row3; }
  .js .tk.is-in .tk__rows li:nth-child(4) { animation-name: tk-row4; }
  .js .tk.is-in .tk__stamp  { animation: tk-stamp 12s linear infinite; }
}

@keyframes tk-draw {
  0%        { stroke-dashoffset: 1200; }
  14%, 92%  { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes tk-wall {
  0%, 12%   { stroke-dashoffset: 600; opacity: 1; }
  26%, 92%  { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes tk-room {
  0%, 24%   { opacity: 0; }
  36%, 92%  { opacity: 0.07; }
  98%, 100% { opacity: 0; }
}
@keyframes tk-dim {
  0%, 30%   { opacity: 0; }
  42%, 92%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes tk-scan {
  0%, 12%   { opacity: 0; transform: translateX(0); }
  17%       { opacity: 1; }
  46%       { opacity: 1; transform: translateX(380px); }
  52%, 100% { opacity: 0; transform: translateX(380px); }
}
@keyframes tk-row {
  0%, 44%   { opacity: 0; transform: translateX(-8px); }
  53%, 92%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes tk-row2 {
  0%, 52%   { opacity: 0; transform: translateX(-8px); }
  61%, 92%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes tk-row3 {
  0%, 60%   { opacity: 0; transform: translateX(-8px); }
  69%, 92%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes tk-row4 {
  0%, 68%   { opacity: 0; transform: translateX(-8px); }
  77%, 92%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes tk-stamp {
  0%, 78%   { opacity: 0; }
  87%, 92%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}