/* Elephant — agency homepage styles. Composes against tokens.css + site.css. */

/* ====================== Two-door hero ====================== */
.hero2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  /* Isolate the blend so the mix-blend-mode figure composites against THIS
     section's background, not the page behind it. Without this, Safari drops
     the backdrop during rubber-band overscroll and the elephant renders on
     black. Paired with the opaque --paper half below (an opaque backdrop on
     both sides is what keeps `difference` stable). */
  isolation: isolate;
  /* Two-tone backdrop for the split-tone elephant: opaque paper on the left
     (visually identical to the page behind), dark --ink on the right. */
  background: linear-gradient(to right, var(--paper) 0 50%, var(--ink) 50% 100%);
}
/* Split-tone elephant straddling the divide: its dark half lands on the light
   door, its light half on the dark door. Sits behind all door content (z-index
   0): door fill is below it (hero2 gradient), text/CTAs are above it (door z 1). */
.hero2__figure {
  position: absolute;
  left: calc(50% - 3px);
  bottom: 20px;
  transform: translateX(-50%);
  width: 60vw;
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  z-index: 0;
  opacity: 0.9;
  /* filter: invert(1); */
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
}
/* Animated loop by default; static image only for reduced-motion users. */
.hero2__figure--still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero2__figure--video { display: none; }
  .hero2__figure--still { display: block; }
}
.door {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--s-8) var(--s-8) var(--s-7);
  min-height: calc(100vh - 66px);
  position: relative;
  z-index: 1; /* door content sits above the elephant figure */
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-hover) linear;
}
.door--build { border-right: 1px solid var(--rule); }
.door--migrate { color: var(--paper); }
/* Whole panel responds to hover — translucent so the figure stays visible. */
.door--build[href]:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.door--migrate[href]:hover { background: color-mix(in srgb, var(--paper) 7%, transparent); }
.door__eye {
  font: 500 var(--text-eyebrow-size)/var(--text-eyebrow-lh) var(--font-text);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ink-3);
  margin-bottom: var(--s-6);
}
.door--migrate .door__eye { color: var(--inv-ink-3); }
.door__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  color: inherit;
}
.door__h em { font-style: italic; }
.door__p {
  font: 400 19px/1.55 var(--font-text);
  color: var(--ink-2);
  margin: var(--s-6) 0 0;
  max-width: 440px;
  text-wrap: pretty;
}
.door--migrate .door__p { color: var(--inv-ink-2); }
.door__spacer { flex: 1; min-height: var(--s-8); }
/* Bottom action row: label left, circular arrow button right. */
.door__cta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
/* Group each CTA toward its outer edge so the center stays clear of the figure. */
.door--build .door__cta { justify-content: flex-start; }
.door--migrate .door__cta { justify-content: flex-end; }
.door__act {
  font: 500 16px/1 var(--font-text);
  color: inherit;
  /* underline that draws in from the left on hover */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size var(--dur-hover) ease;
}
.door[href]:hover .door__act { background-size: 100% 1px; }
.door__go {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--r-full);
  font-size: 20px;
  line-height: 1;
  transition: background-color var(--dur-hover) linear,
              color var(--dur-hover) linear,
              transform var(--dur-hover) ease;
}
.door[href]:hover .door__go { transform: scale(1.08); }
.door--build[href]:hover .door__go { background: var(--ink); color: var(--paper); }
.door--migrate[href]:hover .door__go { background: var(--paper); color: var(--ink); }
/* before → after scan-grade scorecard inside the migrate door:
   the old grade reads faded/outlined, the new one solid and strong. */
.scoremini {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.scoremini__col {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.scoremini__grade {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font: 600 24px/1 var(--font-display);
}
.scoremini__col--old .scoremini__grade {
  border: 1px solid var(--inv-ink-3);
  color: var(--inv-ink-3);
}
.scoremini__col--new .scoremini__grade {
  background: var(--paper);
  color: var(--ink);
}
.scoremini__cap {
  font: 500 var(--text-caption-size)/1.25 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inv-ink-3);
}
.scoremini__col--new .scoremini__cap { color: var(--inv-ink-2); }
.scoremini__arrow {
  color: var(--inv-ink-3);
  font-size: 18px;
}
@media (max-width: 860px) {
  .hero2 { grid-template-columns: 1fr; }
  .door { min-height: 0; padding: var(--s-8) var(--s-6); }
  .door--build { border-right: 0; border-bottom: 1px solid var(--rule); }
  .door__h { font-size: 44px; }
  /* Doors stack vertically — the left/right split no longer maps. */
  .hero2__figure { display: none; }
  .hero2 { background: none; }
  .door--migrate { background: var(--ink); }
  /* Stacked: left-align the migrate CTA like the build door. */
  .door--migrate .door__cta { justify-content: flex-start; }
  /* Elephant still sits flush at the section bottom — no padding under it. */
  #approach { padding-bottom: 0; }
}

/* ====================== Approach ====================== */
/* Center the approach content horizontally. */
#approach .container { text-align: center; }
#approach .headline--measure,
#approach .lead { margin-left: auto; margin-right: auto; }
/* Elephant still under the approach content — mobile only (the hero figure is
   hidden there). 'lighten' drops its black background against the dark section. */
.approach__figure { display: none; }
@media (max-width: 860px) {
  .approach__figure {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: lighten;
  }
}

/* ====================== Services ====================== */
.svc { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-top: var(--s-9); }
.svc__cell { padding: var(--s-8) var(--s-7); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.svc__ord { font: 500 var(--text-mono-size)/1 var(--font-mono); color: var(--ink-3); letter-spacing: .06em; }
.svc__h { font: 400 34px/1.08 var(--font-display); letter-spacing: -0.015em; margin: var(--s-5) 0 var(--s-4); }
.svc__h em { font-style: normal; }
.svc__p { font: 400 16px/1.55 var(--font-text); color: var(--ink-2); margin: 0 0 var(--s-5); max-width: 460px; }
.svc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc__list li { font: 500 var(--text-caption-size)/1 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); padding: 7px 10px; border-radius: var(--r-1); white-space: nowrap; }
.svc__cell--link { text-decoration: none; color: inherit; background: var(--ink); transition: opacity var(--dur-hover) linear; }
.svc__cell--link .svc__ord { color: var(--inv-ink-3); }
.svc__cell--link .svc__h { color: var(--paper); }
.svc__cell--link .svc__p { color: var(--inv-ink-2); }
.svc__cell--link .svc__list li { color: var(--inv-ink-2); border-color: var(--inv-rule); }
.svc__cell--link:hover { opacity: 0.86; }
.svc__act { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-6); font: 500 15px/1 var(--font-text); color: var(--paper); }
.svc__act .arr { font-size: 18px; transition: transform var(--dur-hover) linear; }
.svc__cell--link:hover .svc__act .arr { transform: translateX(4px); }
@media (max-width: 760px) { .svc { grid-template-columns: 1fr; } .svc__cell { padding: 20px; } }

/* ====================== Work / portfolio ====================== */
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-9); }
.work__item { display: flex; flex-direction: column; gap: var(--s-4); }
/* placeholder tile until real portfolio imagery lands; swap for <img> then */
.work__ph { width: 100%; box-sizing: border-box; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); background: var(--paper-2); font: 500 var(--text-caption-size)/1.2 var(--font-mono); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 0 var(--s-4); }
.work__img { width: 100%; height: auto; box-sizing: border-box; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid var(--rule); background: var(--paper-2); }
.work__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.work__name { font: 400 20px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.work__tag { font: 500 var(--text-micro-size)/1 var(--font-mono); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
/* Optional per-item credit line (e.g. "Design by ..."). Pulled up to hug the
   caption above it, countering the .work__item flex gap. Reusable on any item. */
.work__credit { margin: calc(var(--s-2) - var(--s-4)) 0 0; font: 500 var(--text-micro-size)/1.3 var(--font-mono); color: var(--ink-3); letter-spacing: .04em; }
.work__credit a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color var(--dur-hover) linear; }
.work__credit a:hover { border-color: var(--ink); }
@media (max-width: 900px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .work__grid { grid-template-columns: 1fr; } }

/* ====================== Testimonials ====================== */
.tmons { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--s-9); border-top: 1px solid var(--rule); }
.tmon { padding: var(--s-8) var(--s-7) var(--s-7) 0; border-bottom: 1px solid var(--rule); }
.tmon:nth-child(odd) { padding-right: var(--s-8); border-right: 1px solid var(--rule); }
.tmon:nth-child(even) { padding-left: var(--s-7); }
.tmon__q { font: 400 23px/1.4 var(--font-display); letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: pretty; }
.tmon__q em { font-style: italic; }
.tmon__stars { display: block; color: var(--accent-amber); margin-bottom: var(--s-4); line-height: 0; }
.tmon__stars svg { width: 100px; height: 20px; display: block; }
.tmon__by { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-6); }
.tmon__n { font: 500 var(--text-small-size)/1.3 var(--font-text); color: var(--ink); }
.tmon__r { font: 500 var(--text-caption-size)/1.4 var(--font-mono); color: var(--ink-3); letter-spacing: .03em; }
@media (max-width: 760px) {
  .tmons { grid-template-columns: 1fr; }
  .tmon, .tmon:nth-child(odd) { padding: var(--s-7) 0; border-right: 0; }
}

/* ====================== Clients ====================== */
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-7); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
.clients span { font: 400 26px/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--ink-3); }
.clients span:nth-child(3n) { color: var(--ink); }
/* Forces the row to break after Torrent Capital. */
.clients__break { flex-basis: 100%; height: 0; }