/* ==========================================================================
   AMINO — SERVICE LANDING PAGES
   Inner-page components. Same design language as the homepage, but tuned for
   long-form: denser rhythm, more editorial rules, a comparison table and a
   definition block that the homepage doesn't need.
   ========================================================================== */

/* ==========================================================================
   INNER HERO
   Left-weighted rather than centred, with the service name set as the mega
   wordmark cropping the section edge — the homepage move, transposed.
   ========================================================================== */

.shero {
  position: relative;
  min-height: 88svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block-start: clamp(8rem, 16vh, 12rem);
  background: linear-gradient(172deg, #0A0A0A 0%, #131211 55%, #0A0A0A 100%);
  color: var(--paper);
  overflow: clip;
  isolation: isolate;
}

.shero__art {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 90%;
  z-index: 0;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 78%);
}

.shero__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-content: start;
}

.shero__lead { grid-column: 1 / span 7; display: grid; gap: var(--s-6); justify-items: start; }

.shero__crumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-light);
}
.shero__crumb a { transition: color 0.3s var(--e-out); }
.shero__crumb a:hover { color: var(--ember-fg); }

.shero__t {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.038em;
  line-height: 0.98;
  max-width: 16ch;
}

.shero__aside {
  grid-column: 9 / span 4;
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: clamp(1.25rem, 1.9vw, 1.75rem);
  border-radius: var(--r-card);
  background: var(--glass);
  border: var(--hair) solid var(--glass-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.shero__mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  font-size: clamp(3rem, 15vw, 13rem);
  line-height: 0.76;
  letter-spacing: -0.05em;
  font-weight: var(--w-medium);
  color: rgba(245, 244, 242, 0.05);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  margin-block-end: clamp(-0.75rem, -1.4vw, -1.75rem);
}

/* ==========================================================================
   DEFINITION BLOCK — the AEO direct answer
   The one place on the site with a genuinely oversized paragraph. Answer
   engines want a clean definition; the design makes that a feature.
   ========================================================================== */

.define {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}

.define__k { grid-column: 1 / span 3; align-self: start; position: sticky; top: 8rem; }

.define__v { grid-column: 5 / span 8; display: grid; gap: var(--s-6); }

.define__answer {
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  font-weight: var(--w-light);
  letter-spacing: -0.028em;
  line-height: 1.34;
  color: var(--fg);
}
.define__answer strong { font-weight: var(--w-medium); }

/* ==========================================================================
   PROSE — long-form editorial blocks
   ========================================================================== */

.prose { display: grid; gap: var(--s-5); max-width: 62ch; }

.prose p { font-size: var(--t-body); line-height: 1.68; color: var(--fg-mute); }

.prose p.lede {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg);
  letter-spacing: -0.016em;
}

/* ==========================================================================
   ISSUE LIST — "the problems we solve"
   Numbered rows separated by hairlines. The number is the only ember on the
   whole block.
   ========================================================================== */

.issues { display: grid; }

.issue {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.5rem);
  border-top: var(--hair) solid var(--line);
  align-items: start;
  transition: background 0.5s var(--e-out);
}
.issue:last-child { border-bottom: var(--hair) solid var(--line); }

.issue__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--ember-fg);
  padding-block-start: 0.4em;
}

.issue__body { display: grid; gap: var(--s-3); }

.issue__t {
  font-size: clamp(1.125rem, 1.9vw, 1.625rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.026em;
  line-height: 1.16;
  max-width: 24ch;
}

.issue__d { font-size: var(--t-body); color: var(--fg-mute); line-height: 1.62; max-width: 60ch; }

/* ==========================================================================
   CAPABILITY GRID — "our services" detail
   ========================================================================== */

.caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
}

.cap {
  position: relative;
  padding: clamp(1.375rem, 2.1vw, 2rem);
  border-radius: var(--r-card);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  overflow: clip;
  isolation: isolate;
  transition: transform 0.6s var(--e-out), border-color 0.5s var(--e-out);
}
.cap:hover { transform: translateY(-0.375rem); border-color: var(--ember); }

.cap__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}

.cap__t {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.026em;
  line-height: 1.16;
}

.cap__d { font-size: 0.875rem; line-height: 1.6; color: var(--fg-mute); }

.cap__glow {
  position: absolute;
  inset: auto -40% -70% -40%;
  height: 80%;
  background: radial-gradient(60% 100% at 50% 100%, var(--ember-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.55s var(--e-out);
  z-index: -1;
}
.cap:hover .cap__glow { opacity: 0.7; }

/* ==========================================================================
   TAG CLOUD — "what we optimize" / "platforms" / "what we measure"
   ========================================================================== */

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--line);
  font-size: 0.8125rem;
  color: var(--fg-mute);
  line-height: 1;
  transition: color 0.4s var(--e-out), border-color 0.4s var(--e-out),
              background 0.4s var(--e-out), transform 0.5s var(--e-out);
}
.tag:hover {
  color: var(--fg);
  border-color: var(--fg);
  transform: translateY(-2px);
}

/* ==========================================================================
   COMPARISON — general agency vs Amino
   Not a <table> visually, but semantically it is one, so it stays a table.
   ========================================================================== */

.vs { width: 100%; border-collapse: collapse; }

.vs caption { text-align: left; padding-block-end: var(--s-6); }

.vs th, .vs td {
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(0.75rem, 1.5vw, 1.5rem);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--hair) solid var(--line);
  font-size: var(--t-body);
  font-weight: var(--w-book);
  line-height: 1.5;
}

.vs thead th {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-block: var(--s-3);
}

.vs tbody td:first-child { color: var(--fg-mute); width: 50%; }

/* the Amino column carries the accent edge */
.vs tbody td:last-child {
  color: var(--fg);
  position: relative;
  background: linear-gradient(90deg, rgba(255, 77, 13, 0.05), transparent 60%);
}
.vs tbody td:last-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ember);
}

.vs thead th:last-child { color: var(--ember-fg); }

/* ==========================================================================
   STAGE CARDS — "who we work with"
   ========================================================================== */

.stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.stage {
  padding: clamp(1.25rem, 1.9vw, 1.75rem);
  border-radius: var(--r-card);
  border: var(--hair) solid var(--line);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-height: 12rem;
  transition: background 0.5s var(--e-out), border-color 0.5s var(--e-out);
}
.stage:hover { background: var(--surface); border-color: transparent; }

.stage__t {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.024em;
  line-height: 1.18;
}

.stage__d { font-size: 0.8125rem; line-height: 1.58; color: var(--fg-mute); }

/* ==========================================================================
   CASE BLOCK — inner-page featured case study
   ========================================================================== */

.casebox {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: clip;
  isolation: isolate;
}

.casebox__art { grid-column: 1 / span 4; position: relative; border-radius: calc(var(--r-card) * 0.7); overflow: clip; min-height: 14rem; }

.casebox__body { grid-column: 6 / span 7; display: grid; gap: var(--s-5); align-content: center; }

.casebox__row { display: grid; gap: 0.375rem; }

.casebox__k {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember-fg);
}

.casebox__v { font-size: var(--t-body); color: var(--fg-mute); line-height: 1.6; }

/* A pending slot renders as an explicit placeholder rather than inventing
   a result — the client brief requires verified data only. */
.casebox__v[data-pending] {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--fg-mute);
  padding: 0.625rem 0.875rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  width: fit-content;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .shero__lead  { grid-column: 1 / span 8; }
  .shero__aside { grid-column: 1 / span 8; }
  .define__k { grid-column: 1 / span 12; position: static; }
  .define__v { grid-column: 1 / span 12; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casebox__art  { grid-column: 1 / span 12; min-height: 11rem; }
  .casebox__body { grid-column: 1 / span 12; }
}

@media (max-width: 900px) {
  .shero { min-height: auto; padding-block-start: 7.5rem; }
  .shero__lead, .shero__aside { grid-column: 1 / -1; }
  .caps { grid-template-columns: 1fr; }

  /* the comparison table becomes stacked pairs — a 2-col table at 400px is
     unreadable, and horizontal scrolling a table is worse */
  .vs, .vs thead, .vs tbody, .vs tr, .vs th, .vs td { display: block; }
  .vs thead { display: none; }
  .vs tr { padding-block: var(--s-5); border-bottom: var(--hair) solid var(--line); }
  .vs td { border: 0; padding: 0.375rem 0; }
  .vs tbody td:first-child::before {
    content: "General agency — ";
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-ghost);
  }
  .vs tbody td:last-child { background: none; padding-inline-start: 0.75rem; }
  .vs tbody td:last-child::before { width: 1px; }
}

@media (max-width: 640px) {
  .issue { grid-template-columns: 1fr; gap: var(--s-3); }
  .issue__n { padding-block-start: 0; }
  .stages { grid-template-columns: 1fr; }
  .stage { min-height: 0; }
  .shero__mark { font-size: 22vw; }
}

/* ==========================================================================
   METRIC GRID — replaces the flat pill dump
   ========================================================================== */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0;
  border-top: var(--hair) solid var(--line);
}

.metric {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(0.5rem, 1.2vw, 1.25rem);
  border-bottom: var(--hair) solid var(--line);
  border-right: var(--hair) solid var(--line);
  transition: background 0.45s var(--e-out), padding-left 0.45s var(--e-out);
}
.metric:hover { background: var(--surface); padding-left: clamp(1rem, 2vw, 2rem); }

.metric__n {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--ember-fg);
}

.metric__t {
  font-size: var(--t-small);
  line-height: 1.35;
  color: var(--fg);
  letter-spacing: -0.012em;
}

/* ==========================================================================
   WORK GRID — real client screenshots
   ========================================================================== */

.workgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.5rem);
}

.workcard {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.workcard__art {
  position: relative;
  display: block;
  aspect-ratio: 1.35;
  border-radius: var(--r-card);
  overflow: clip;
  background: var(--surface);
  isolation: isolate;
}

.workcard__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.02);
  transition: filter 0.7s var(--e-out), transform 1.1s var(--e-out);
}

.workcard:hover .workcard__art img { filter: grayscale(0); transform: scale(1.06); }

.workcard__meta { display: grid; gap: 0.125rem; }

.workcard__name {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.026em;
  transition: color 0.4s var(--e-out);
}
.workcard:hover .workcard__name { color: var(--ember-fg); }

.workcard__svc {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ==========================================================================
   MISC
   ========================================================================== */

.audit__scope {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--fg-mute);
  max-width: 44ch;
}

.casebox__art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* the neon service icon in the inner hero */
.shero__icon {
  width: clamp(3.25rem, 5vw, 4.5rem);
  aspect-ratio: 1;
  display: block;
  filter: drop-shadow(0 0 1.5rem rgba(255, 77, 13, 0.45));
  mix-blend-mode: screen;
}

@media (max-width: 900px) {
  .workgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .workgrid { grid-template-columns: 1fr; }
  .metrics  { grid-template-columns: 1fr; }
  .metric   { border-right: 0; }
}

/* ==========================================================================
   SERVICE ROWS — the Services page
   Big editorial rows with the neon icon, not another card grid.
   ========================================================================== */

.srows { display: grid; border-top: var(--hair) solid var(--line); }

.srow {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.2vw, 3rem);
  border-bottom: var(--hair) solid var(--line);
  transition: background 0.5s var(--e-out), padding-inline 0.5s var(--e-out);
}
.srow:hover { background: var(--surface); padding-inline: clamp(0.5rem, 1.5vw, 1.5rem); }

.srow__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--ember-fg);
  align-self: start;
  padding-block-start: 0.5em;
}

.srow__icon {
  width: clamp(2.75rem, 4vw, 3.75rem);
  aspect-ratio: 1;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 1rem rgba(255, 77, 13, 0.4));
  transition: transform 0.6s var(--e-out);
}
.srow:hover .srow__icon { transform: scale(1.08) rotate(-3deg); }

.srow__body { display: grid; gap: 0.5rem; }

.srow__t {
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.srow__d { font-size: var(--t-body); color: var(--fg-mute); line-height: 1.6; max-width: 52ch; }

.srow__tags {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-ghost);
  line-height: 1.7;
  max-width: 60ch;
}

.srow__go {
  font-size: 1.25rem;
  color: var(--fg-mute);
  transition: transform 0.5s var(--e-out), color 0.4s var(--e-out);
}
.srow:hover .srow__go { transform: translate(4px, -4px); color: var(--ember-fg); }

/* on paper the neon icons need a dark plate to read against */
[data-theme="paper"] .srow__icon,
[data-theme="paper"] .shero__icon {
  mix-blend-mode: normal;
  border-radius: var(--r-sm);
  background: var(--ink);
  padding: 0.375rem;
}

@media (max-width: 900px) {
  .srow { grid-template-columns: auto 1fr; gap: 1rem 1.25rem; }
  .srow__icon { grid-row: 1; }
  .srow__body { grid-column: 1 / -1; }
  .srow__go   { display: none; }
}