/* Agents page layout (Paper: 9.0 New Site, "Agents · Custom agentic solutions").
   Shell classes come from styles/site.css; only page-specific layout lives here. */

/* ---------- Shared section heads ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sec-head__title { display: flex; flex-direction: column; gap: 16px; }
.sec-head .mono { font-size: 11px; line-height: 16px; letter-spacing: 0.12em; color: var(--np-ink); }
.sec-head h2 { font-size: clamp(40px, 4.3vw, 62px); line-height: 1.065; letter-spacing: -0.015em; }
.sec-head p { max-width: 440px; flex: none; font-size: 16px; line-height: 27px; color: var(--np-text-2); }

/* Character cursors: lime arrow, dark chip with an avatar disc (page variant of .agent-cursor) */
.agents-cursor::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'><path d='M2 2 L2 17 L6.3 13.2 L9 19.6 L11.8 18.4 L9.1 12.1 L15 12.1 Z' fill='%2385EE00' stroke='%23F5F2EC' stroke-linejoin='round'/></svg>");
}
.agent-cursor.agents-cursor > span { background: #20242b; color: #fffffe; }
.agent-cursor.agents-cursor > span::before { content: none; }
.agents-cursor img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------- Hero ---------- */
.agents-hero { padding: 88px 0 64px; }
.agents-hero .wrap { position: relative; display: flex; flex-direction: column; gap: 48px; }
.agents-hero__meta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.agents-hero__meta .mono { font-size: 12px; line-height: 18px; letter-spacing: 0.14em; color: var(--np-ink); }
.agents-hero__meta .mono.text-2 { font-size: 11px; letter-spacing: 0.1em; color: var(--np-text-2); }
.agents-hero__grid {
  display: grid; grid-template-columns: minmax(0, 650fr) minmax(0, 550fr);
  gap: 80px; align-items: center;
}
.agents-hero__copy { display: flex; flex-direction: column; gap: 28px; }
.agents-hero__copy h1 { font-size: clamp(64px, 6.95vw, 100px); line-height: 1; letter-spacing: -0.025em; }
.agents-hero__lede { max-width: 560px; font-size: 19px; line-height: 31px; color: var(--np-text-2); }
.agents-hero__body { max-width: 560px; font-size: 16px; line-height: 27px; color: var(--np-text-2); }
.agents-hero__copy .btn { align-self: flex-start; padding: 16px 24px; gap: 32px; font-size: 15px; line-height: 20px; font-weight: 400; }

/* Illustrative run card */
.run { display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: 16px; background: var(--np-dark); color: var(--np-dark-text); }
.run__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.run__who { display: flex; align-items: center; gap: 14px; }
.run__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.run__who div { display: flex; flex-direction: column; gap: 5px; }
.run__name { font-size: 30px; line-height: 34px; }
.run__role { font-size: 12px; line-height: 18px; color: var(--np-dark-muted); }
.run__tag { font-size: 10px; line-height: 12px; letter-spacing: 0.08em; color: var(--np-dark-muted); white-space: nowrap; }
.run__enquiry { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 8px; background: #2b3037; border: 1px solid #42474e; }
.run__enquiry .mono { font-size: 10px; line-height: 12px; letter-spacing: 0.1em; color: var(--np-dark-muted); }
.run__enquiry p { font-size: 16px; line-height: 25px; }
.run__steps { display: flex; flex-direction: column; gap: 24px; }
.run__steps li { display: flex; gap: 16px; }
.run__num {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--np-text-2);
  font-family: var(--np-font-mono); font-size: 11px; line-height: 14px; color: var(--np-dark-muted);
}
.run__steps div { display: flex; flex-direction: column; gap: 6px; }
.run__steps h3 { font-weight: 400; font-size: 14px; line-height: 20px; }
.run__steps p { font-size: 13px; line-height: 21px; color: var(--np-dark-muted); }
.run__result { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border-radius: 8px; background: var(--np-ground); color: var(--np-ink); }
.run__result div { display: flex; flex-direction: column; gap: 6px; }
.run__result p { font-size: 14px; line-height: 18px; }
.run__result small { font-size: 12px; line-height: 16px; color: var(--np-text-2); }
.run__cta { display: inline-flex; flex: none; padding: 10px 14px; border-radius: 6px; background: var(--np-lime); color: var(--np-ink); font-size: 12px; line-height: 16px; white-space: nowrap; }
.run__cta:hover { background: #93ff10; }

/* ---------- A clearer starting point ---------- */
.start { padding: 72px 0; }
.start .wrap { display: flex; flex-direction: column; gap: 48px; }
.start__eyebrow { font-size: 12px; line-height: 18px; letter-spacing: 0.06em; color: var(--np-ink); }
.start__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 80px; }
.start__head h2 { max-width: 570px; font-size: clamp(40px, 4.45vw, 64px); line-height: 1.03; letter-spacing: 0; }
.start__head p { max-width: 510px; font-size: 18px; line-height: 29px; color: #4f555c; }
.start__grid { display: grid; grid-template-columns: minmax(0, 776fr) minmax(0, 440fr); gap: 64px; }
.start__list li { display: flex; gap: 24px; padding: 28px 0; border-top: 1px solid #d8d9d6; }
.start__list .idx { width: 32px; flex: none; font-family: var(--np-font-mono); font-size: 12px; line-height: 24px; color: var(--np-text-2); }
.start__list div { display: flex; flex-direction: column; gap: 12px; }
.start__list h3 { font-size: 32px; line-height: 36px; color: #000; }
.start__list p { font-size: 17px; line-height: 27px; color: #4f555c; }
.commit {
  position: relative; 
  display: flex; flex-direction: column; gap: 22px; padding: 36px;
  background: var(--np-dark); color: var(--np-dark-text);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px, 16px 16px);
}
.commit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(133, 238, 0, .14), rgba(133, 238, 0, 0) 55%); pointer-events: none; }
.commit > .mono { display: flex; align-items: center; gap: 10px; font-family: var(--np-font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--np-lime); }
.commit > .mono::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--np-lime); box-shadow: 0 0 0 4px rgba(133, 238, 0, .18); }
.commit h3 { font-family: var(--np-font-display); font-weight: 400; font-size: 44px; line-height: 46px; letter-spacing: -0.01em; color: var(--np-dark-text); }
.commit h3 i { color: var(--np-lime); }
.commit > p:not(.commit__agreed):not(.commit__agreed-note) { font-size: 16px; line-height: 26px; color: var(--np-dark-muted); }
.commit .commit__agreed { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--np-dark-hair-2); }
.commit .commit__agreed span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--np-dark-hair-2); font-family: var(--np-font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--np-dark-text); }
.commit .commit__agreed span::before { content: "✓"; color: var(--np-lime); font-weight: 600; }
.commit .commit__agreed-note { width: 100%; margin: 4px 0 0; font-family: var(--np-font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--np-dark-muted); }

/* ---------- Meet your AI specialists ---------- */
.team { padding: 88px 0; }
.team .wrap { position: relative; display: flex; flex-direction: column; gap: 40px; }
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.agent { display: flex; flex-direction: column; gap: 22px; }
.agent--marnie { --tone: #3157d5; }
.agent--kit { --tone: #745085; }
.agent--rafi { --tone: #416556; }
.agent--pip { --tone: #946311; }
.agent__img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px, 16px 16px);
}
.agent__id { display: flex; flex-direction: column; gap: 8px; }
.agent__name { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 46px; line-height: 50px; }
.agent__name .mono { font-size: 10px; line-height: 12px; letter-spacing: 0.1em; color: var(--tone); }
.agent__role { font-size: 15px; line-height: 22px; color: var(--tone); }
.agent__traits { font-size: 12px; line-height: 20px; color: var(--np-text-2); }
.agent__more { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--np-hair); }
.agent__quote { font-size: 25px; line-height: 30px; color: var(--tone); }
.agent__desc { min-height: 120px; font-size: 14px; line-height: 24px; color: var(--np-text-2); }
.agent__tags { font-size: 11px; line-height: 18px; color: var(--tone); }

/* ---------- The thinking behind the agent ---------- */
.think { padding: 88px 0; }
.think .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 620fr); gap: 100px; align-items: start; }
.think__copy { display: flex; flex-direction: column; gap: 28px; }
.think__copy .mono { font-size: 11px; line-height: 16px; letter-spacing: 0.12em; color: var(--np-lime); }
.think h2 { font-size: clamp(40px, 4.72vw, 68px); line-height: 1.06; letter-spacing: -0.015em; }
.think__lede { max-width: 500px; font-size: 17px; line-height: 29px; color: var(--np-dark-muted); }
.think__note { max-width: 480px; font-size: 14px; line-height: 24px; color: var(--np-dark-muted); }
.think__list { display: flex; flex-direction: column; gap: 12px; }
.think__list li { display: flex; gap: 22px; padding: 24px; border-radius: 8px; background: #2b3037; border: 1px solid #42474e; }
.think__list .mono { width: 58px; flex: none; font-size: 10px; line-height: 18px; letter-spacing: 0.08em; color: var(--np-lime); }
.think__list div { display: flex; flex-direction: column; gap: 8px; }
.think__list h3 { font-weight: 400; font-size: 16px; line-height: 22px; }
.think__list p { font-size: 13px; line-height: 22px; color: var(--np-dark-muted); }

/* ---------- Start small ---------- */
.process { padding: 88px 0; }
.process .wrap { position: relative; display: flex; flex-direction: column; gap: 48px; }
.process .sec-head h2 { letter-spacing: 0; }
.process__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.process__grid li { display: flex; flex-direction: column; gap: 22px; padding-top: 24px; border-top: 1px solid var(--np-hair); }
.process__grid .mono { font-size: 11px; line-height: 16px; letter-spacing: 0.1em; color: var(--np-ink); }
.process__grid h3 { font-size: 34px; line-height: 40px; }
.process__grid p { min-height: 78px; font-size: 15px; line-height: 26px; color: var(--np-text-2); }
.process__grid b { font-weight: 400; font-size: 13px; line-height: 22px; color: var(--np-ink); }

/* ---------- You don't need a finished brief ---------- */
.next { padding: 64px 0; }
.next .wrap { display: flex; flex-direction: column; gap: 48px; }
.next__head { display: flex; justify-content: space-between; align-items: center; gap: 80px; }
.next__copy { max-width: 780px; display: flex; flex-direction: column; gap: 16px; }
.next h2 { font-size: clamp(40px, 4.17vw, 60px); line-height: 1.07; letter-spacing: 0; }
.next__copy p { font-size: 18px; line-height: 29px; color: var(--np-dark-muted); }
.next .btn { flex: none; padding: 16px 24px; gap: 24px; font-size: 16px; line-height: 22px; font-weight: 400; }
.next__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.next__steps li { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid #42474e; }
.next__steps .mono { font-size: 12px; line-height: 18px; letter-spacing: 0; color: var(--np-dark-muted); }
.next__steps h3 { font-size: 30px; line-height: 34px; }
.next__steps p { font-size: 16px; line-height: 26px; color: var(--np-dark-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .agents-hero__grid { gap: 48px; }
  .think .wrap { gap: 56px; }
  .run__head { flex-wrap: wrap; }
  .agent__desc { min-height: 0; }
}

@media (max-width: 900px) {
  .agents-hero { padding: 56px 0 64px; }
  .agents-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .agents-hero__copy h1 { font-size: 64px; }
  .agents-hero__copy .btn { align-self: stretch; justify-content: space-between; }
  .run { padding: 24px; }
  .run__head { flex-direction: column; align-items: flex-start; }
  .run__result { flex-direction: column; align-items: flex-start; }

  .start { padding: 64px 0; }
  .start .wrap { gap: 32px; }
  .start__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .start__head h2 { font-size: 44px; }
  .start__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .start__list h3 { font-size: 30px; line-height: 34px; }
  .start__list p { font-size: 16px; line-height: 26px; }
  .commit { padding: 24px; }
  .commit h3 { font-size: 32px; line-height: 36px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .sec-head h2 { font-size: 44px; }
  .sec-head p { max-width: none; }

  .team, .think, .process { padding: 64px 0; }
  .team .wrap { gap: 32px; }
  .think .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .think h2 { font-size: 44px; }
  .think__list li { flex-direction: column; gap: 12px; }
  .think__list .mono { width: auto; }

  .process__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .process__grid p { min-height: 0; }

  .next { padding: 56px 0; }
  .next__head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .next h2 { font-size: 44px; }
  .next .btn { align-self: stretch; justify-content: space-between; }
  .next__steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 720px) {
  .team__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .agent__desc { min-height: 0; }
  .agent__name { font-size: 40px; line-height: 44px; }
}

@media (max-width: 480px) {
  .agents-hero__copy h1 { font-size: 52px; }
  .agents-hero__lede { font-size: 18px; line-height: 29px; }
  .agents-hero__meta .mono.text-2 { display: none; }
  .run__tag { display: none; }
  .run__enquiry br, .next__copy p br { display: none; }
  .run__name { font-size: 26px; line-height: 30px; }
  .start__head h2, .sec-head h2, .think h2, .next h2 { font-size: 40px; }
}