/* ════════════════════════════════════════════════════════════
   AI TRANSFORMATION — canonical page (prefix atc-)
   Promoted from the -caleb candidate in S127; the prior
   "know where to invest" wireframe port (prefix t3-) is retired
   to _archive/ as ai-transformation-replaced-s127.{html,css}.
   Thesis: find the one AI project worth doing before the big
   spend. Hero ported from hero-redesign.html tf-1; board + arc
   restored from the v2 archive; "where AI creates value" tiles
   carried over from the retired page; case studies via the
   shared triptych template.
   Rhythm: hero dark → board gray → arc dark → tiles gray →
   outcomes dark → case studies gray → CTA dark.
   ════════════════════════════════════════════════════════════ */

.atc-wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 96px);
}

/* shared scroll-reveal unit */
.atc-rv { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.44, 1); }
.atc-rv.in { opacity: 1; transform: none; }

/* S01 · HERO — shared services formula: markup rendered by
   /js/svc-heroes.js, styles in /css/services/svc-hero.css */

/* ── S02 · YOUR LIST IS TOO LONG ────────────────────────── */
.atc-board {
  background: var(--jg-dark-inlay);
  padding: clamp(84px, 11vh, 150px) 0;
}
.atc-board__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  gap: clamp(44px, 6vw, 96px);
  align-items: center;
}
.atc-board__copy h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 22px;
}
.atc-board__copy h2 em { font-style: normal; color: var(--jg-primary); }
.atc-board__copy p { max-width: 52ch; margin: 0 0 16px; }

/* the chaos → clarity stage */
.atc-resolve {
  background: var(--jg-dark);
  border: 1px solid rgba(244,244,244,0.1);
  padding: clamp(16px, 2vw, 26px);
}
.atc-resolve__stage {
  position: relative;
  height: clamp(300px, 40vw, 384px);
  overflow: hidden;
}
.atc-resolve__cap {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.35);
}
.atc-resolve__cap .on { color: var(--jg-primary); }

/* competing ideas — appear as noise, then get let go */
.atc-idea {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(244,244,244,0.5);
  background: var(--jg-dark-inlay);
  border: 1px solid rgba(244,244,244,0.12);
  padding: 4px 8px;
  opacity: 0;
  /* anchored by center (translate -50%) so shrinking keeps placements exact */
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  animation: atc-idea-life 9s ease-in-out infinite;
}
@keyframes atc-idea-life {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.96); }
  9%   { opacity: 1; }
  40%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); }
  56%  { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(0.9); }
}

/* the survivor — doesn't get let go, then becomes the chosen one */
.atc-idea--keep {
  z-index: 2;
  animation-name: atc-keep-life;
}
@keyframes atc-keep-life {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.96);
         color: rgba(244,244,244,0.5); border-color: rgba(244,244,244,0.12);
         background: #202124; box-shadow: 0 0 0 rgba(0,189,255,0); }
  9%   { opacity: 1; }
  /* blends with the crowd while the others hold */
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1);
         color: rgba(244,244,244,0.5); border-color: rgba(244,244,244,0.12);
         background: #202124; box-shadow: 0 0 0 rgba(0,189,255,0); }
  /* the rest drift away 40→56% — this one stays and gets chosen */
  66%  { opacity: 1; transform: translate(-50%, -50%) scale(1.55);
         color: #00BDFF; border-color: rgba(0,189,255,0.7);
         background: #16242b; box-shadow: 0 0 30px rgba(0,189,255,0.35); }
  92%  { opacity: 1; transform: translate(-50%, -50%) scale(1.55);
         color: #00BDFF; border-color: rgba(0,189,255,0.7);
         background: #16242b; box-shadow: 0 0 30px rgba(0,189,255,0.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5);
         color: #00BDFF; border-color: rgba(0,189,255,0.7);
         background: #16242b; box-shadow: 0 0 30px rgba(0,189,255,0.35); }
}

.atc-resolve.paused .atc-idea { animation-play-state: paused; }

/* ── S03 · THE ENGAGEMENT ARC ───────────────────────────── */
.atc-arc {
  background: var(--jg-dark);
  padding: clamp(84px, 11vh, 150px) 0;
}
.atc-arc__head { margin-bottom: clamp(44px, 6vh, 72px); max-width: 640px; }
.atc-arc__head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0;
}
.atc-arc__head h2 em { font-style: normal; color: var(--jg-primary); }
.atc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 28px);
  position: relative;
}
/* connector rail behind the step markers */
.atc-steps::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 4px;
  right: 22%;
  height: 1px;
  background: rgba(244,244,244,0.12);
}
.atc-step { position: relative; padding-top: 30px; }
.atc-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--jg-dark);
  border: 2px solid rgba(0,189,255,0.7);
  transition: box-shadow 0.4s ease;
}
.atc-step.in::before { box-shadow: 0 0 14px rgba(0,189,255,0.6); }
.atc-step--optional::before { border-style: dashed; border-color: rgba(244,244,244,0.35); }
.atc-step__idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jg-primary);
  display: block;
  margin-bottom: 10px;
}
.atc-step--optional .atc-step__idx { color: rgba(244,244,244,0.45); }
.atc-step__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 1.7vw, 24px);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--jg-light);
  margin: 0 0 12px;
}
.atc-step__b { margin: 0; }
/* the one card that opens doors — stacked rows sized for a narrow column, not ship rows */
.atc-step__links { margin-top: 20px; }
.atc-step__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(244,244,244,0.12);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.7);
  text-decoration: none;
  transition: color 0.25s ease;
}
.atc-step__link:last-of-type { border-bottom: 1px solid rgba(244,244,244,0.12); }
.atc-step__link:hover { color: var(--jg-primary); }
.atc-step__link svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--jg-primary);
  transition: transform 0.25s ease;
}
.atc-step__link:hover svg { transform: translateX(4px); }

/* ── S04 · WHERE AI CREATES VALUE ───────────────────────────
   Ported from the canonical page (t3-tiles). Tiles unfold
   sequentially on scroll entry — name, then divider, then the
   initiative tags one at a time; page script drives the classes. */
.atc-tiles {
  background: var(--jg-dark-inlay);
  padding: clamp(90px, 13vh, 150px) 0;
}
.atc-tiles__head { max-width: 640px; margin-bottom: clamp(56px, 8vh, 80px); }
.atc-tiles__h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 22px;
}
.atc-tiles__h2 em { font-style: normal; color: var(--jg-primary); }
.atc-tiles__sub { margin: 0; }

.atc-tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.atc-tile {
  padding: 36px;
  border: 1px solid rgba(244,244,244,0.09);
  background: rgba(244,244,244,0.018);
  transition: border-color 0.26s ease,
              transform 0.26s cubic-bezier(0.22,0.68,0,1.18),
              background 0.26s ease;
  will-change: transform;
}
.atc-tile.tile-revealed:hover {
  border-color: rgba(0,189,255,0.35);
  transform: translateY(-3px);
  background: rgba(244,244,244,0.034);
}

.atc-tile__header { margin-bottom: 18px; }
/* growing divider — width animates when .tile-divider is added */
.atc-tile__header::after {
  content: '';
  display: block; height: 1px; width: 0;
  background: rgba(244,244,244,0.1);
  margin-top: 18px;
  transition: width 0.44s ease, background 0.25s ease;
}
.atc-tile.tile-divider .atc-tile__header::after { width: 100%; }
.atc-tile.tile-revealed:hover .atc-tile__header::after { background: rgba(0,189,255,0.3); }

.atc-tile__num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--jg-primary);
  margin-bottom: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.atc-tile.tile-revealed .atc-tile__num { opacity: 1; }

/* Structure tier — solid white, never faded. The reveal is the
   opacity animation; the resting colour stays at full strength. */
.atc-tile__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.atc-tile.tile-revealed .atc-tile__name { opacity: 1; transform: translateY(0); }

/* layout only — .prose owns size / colour / line-height */
.atc-tile__desc {
  margin: 8px 0 0;
  opacity: 0;
  transition: opacity 0.32s ease 0.08s;
}
.atc-tile.tile-revealed .atc-tile__desc { opacity: 1; }

.atc-tile__items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
/* mono chips are Structure tier — white text; the hover reads on
   the border + fill instead of brightening the label */
.atc-tile__item {
  display: inline-block; width: fit-content;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 400; letter-spacing: 0.02em;
  color: var(--jg-light);
  padding: 5px 10px;
  border: 1px solid rgba(244,244,244,0.12);
  background: rgba(244,244,244,0.022);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.28s ease, transform 0.28s ease,
              border-color 0.25s ease, background 0.25s ease;
}
.atc-tile__item.item-visible { opacity: 1; transform: translateY(0); }
.atc-tile.tile-revealed:hover .atc-tile__item.item-visible {
  border-color: rgba(0,189,255,0.28);
  background: rgba(0,189,255,0.05);
}

/* ── S05 · HOW WE ENGAGE ────────────────────────────────────
   Three-column layout ported from ai-legacy-modernization
   (lmc-out): cyan top rule, mono index, Anton head, prose. Each
   column closes on the one thing the client walks away with, so
   the columns stretch to equal height and the deliverable line
   is pushed to a shared baseline. No motion beyond the page's
   shared atc-rv reveal — the copy carries it.
   Prefix is atc-oc-, NOT atc-out- — the retired ledger
   section's dead CSS still owns .atc-out as a two-column grid
   row and would clobber this. */
.atc-oc {
  background: var(--jg-dark);
  padding: clamp(84px, 11vh, 150px) 0;
}
/* wider + a step down from the page's other h2s: this heading is
   a full sentence, not a two-word display line */
/* Same head treatment as .atc-board__copy / .atc-arc__head /
   .atc-tiles__h2 — one section-headline size for the whole page.
   (Was 44px/820px to carry a three-clause line; the copy is short
   now, so it rejoins the standard.) */
.atc-oc__head { margin-bottom: clamp(44px, 6vh, 80px); max-width: 640px; }
.atc-oc__head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0;
}
.atc-oc__head h2 em { font-style: normal; color: var(--jg-primary); }

.atc-oc__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 72px);
  align-items: stretch;
}
.atc-oc-col {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 189, 255, 0.35);
  padding-top: 22px;
}
.atc-oc-col__idx {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;   /* matches the tiles' mono index */
  letter-spacing: 0.2em;
  color: var(--jg-primary);
  margin-bottom: 16px;
}
.atc-oc-col__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 14px;
}
/* scoped to .prose so it can't outrank the deliverable's
   margin-top:auto below (element selectors add specificity).
   The bottom margin is the floor on the gap above the hairline —
   the auto margin only pads the columns that have slack, so
   without it the longest column's rule sits on its last line. */
.atc-oc-col .prose { margin: 0 0 34px; }

/* the payoff line — quiet mono label, cyan value, sitting on a
   hairline at the foot of every column */
.atc-oc-col__deliv {
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(244,244,244,0.1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--prose-size);   /* the 17.5px floor — this is a value, not chrome */
  line-height: 1.35;
  color: var(--jg-primary);       /* Accent tier */
}
/* mono label — Structure tier, solid white */
.atc-oc-col__deliv span {
  display: block;
  margin-bottom: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jg-light);
}

/* ── S04 · WHAT YOU LEAVE WITH ──────────────────────────── */
.atc-ledger {
  background: var(--jg-dark-inlay);
  padding: clamp(84px, 11vh, 150px) 0;
}
.atc-ledger__h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 clamp(40px, 5vh, 60px);
}
.atc-ledger__h2 em { font-style: normal; color: var(--jg-primary); }
.atc-out {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(18px, 2.6vw, 40px);
  padding: clamp(24px, 3vh, 36px) 0;
  border-top: 1px solid rgba(244,244,244,0.1);
  align-items: start;
}
.atc-out:last-of-type { border-bottom: 1px solid rgba(244,244,244,0.1); }
.atc-out__check { width: 34px; height: 34px; margin-top: 2px; }
.atc-out__check circle { fill: none; stroke: rgba(0,189,255,0.4); stroke-width: 1.5; }
.atc-out__check path {
  fill: none;
  stroke: var(--jg-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) 0.25s;
}
.atc-out.in .atc-out__check path { stroke-dashoffset: 0; }
.atc-out__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 27px);
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 8px;
}
.atc-out__b { margin: 0; max-width: 70ch; }

/* ── S05 · STRATEGY FROM PEOPLE WHO SHIP ────────────────── */
.atc-ship {
  background: var(--jg-dark);
  padding: clamp(72px, 9vh, 120px) 0;
}
.atc-ship__grid { display: block; }
.atc-ship__h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}
.atc-ship__h2 em { font-style: normal; color: var(--jg-primary); }
.atc-ship__body { margin: 0 0 clamp(40px, 4.5vw, 64px); max-width: 60ch; }
.atc-ship__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.atc-ship__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.2vw, 30px);
  border: 1px solid rgba(244,244,244,0.12);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.atc-ship__row:hover { background: rgba(0,189,255,0.05); border-color: rgba(0,189,255,0.4); }
.atc-ship__t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.7vw, 23px);
  text-transform: uppercase;
  color: var(--jg-light);
  display: block;
  margin-bottom: 4px;
}
.atc-ship__d {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13.5px;
  color: rgba(244,244,244,0.5);
  display: block;
}
.atc-ship__row svg {
  width: 20px;
  height: 20px;
  color: var(--jg-primary);
  transition: transform 0.25s ease;
}
.atc-ship__row:hover svg { transform: translateX(5px); }

/* ── S07 · CTA ──────────────────────────────────────────── */
.atc-cta {
  background: var(--jg-dark-inlay);  /* flipped — case studies removed, keeps dark/gray rhythm (S143) */
  padding: clamp(90px, 12vh, 160px) 0;
  text-align: center;
}
.atc-cta__h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(42px, 6vw, 92px);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--jg-light);
  margin: 0 0 20px;
}
.atc-cta__h2 em { font-style: normal; color: var(--jg-primary); }
.atc-cta__b { max-width: 52ch; margin: 0 auto 34px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .atc-tiles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .atc-tiles__grid { grid-template-columns: 1fr; }
  .atc-tile { padding: 28px; }
}
@media (max-width: 900px) {
  .atc-oc__cols { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 980px) {
  .atc-board__grid { grid-template-columns: 1fr; }
  .atc-steps { grid-template-columns: 1fr; gap: 34px; }
  .atc-steps::before { top: 7px; bottom: 7px; left: 7px; right: auto; width: 1px; height: auto; }
  .atc-step { padding-top: 0; padding-left: 34px; }
  .atc-step::before { top: 2px; }
  .atc-ship__links { grid-template-columns: 1fr; }
}

/* ── Reduced motion — settle on the clarity frame ───────── */
@media (prefers-reduced-motion: reduce) {
  .atc-idea { display: none; }
  .atc-idea--keep {
    display: block; opacity: 1; animation: none;
    transform: translate(-50%, -50%) scale(1.55);
    color: #00BDFF; border-color: rgba(0,189,255,0.7);
    background: #16242b; box-shadow: 0 0 30px rgba(0,189,255,0.35);
  }
  .atc-rv { opacity: 1; transform: none; transition: none; }
  .atc-out__check path { stroke-dashoffset: 0; transition: none; }
  .atc-ship__row, .atc-ship__row svg { transition: none; }
  .atc-tile, .atc-tile__num, .atc-tile__name,
  .atc-tile__desc, .atc-tile__item, .atc-tile__header::after { transition: none; }
}