/* ============================================================
   PerformaX V3 — built on the "Caldera" style reference
   risograph zine on warm concrete · rationed incandescent orange
   ============================================================ */

:root {
  /* Colours */
  --concrete: #e2e2df;
  --cream: #f7f6f2;
  --ink: #070607;
  --black: #000000;
  --paper: #ffffff;
  --orange: #fc5000;
  --violet: #524ae9;
  --yellow: #f5f28e;

  --line: rgba(7, 6, 7, 0.16);

  /* Type */
  --display: "Anton", ui-sans-serif, system-ui, sans-serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Spacing */
  --s-8: 8px;  --s-10: 10px; --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px;
  --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-80: 80px;

  --max: 1280px;
  --r-card: 40px;
  --r-pill: 800px;
  --r-tag: 20px;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--concrete);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--orange); color: var(--paper); }

/* ============================================================
   HALFTONE RISO ART (orange → violet with dot overlay)
   ============================================================ */
.halftone {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--orange) 0%, #f5360b 45%, var(--violet) 100%);
  overflow: hidden;
}
.halftone::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(var(--concrete) 28%, transparent 30%);
  background-size: 9px 9px;
  opacity: 0.85;
  mix-blend-mode: normal;
}
.halftone--violet {
  background: linear-gradient(135deg, var(--violet) 0%, #6a3fd6 50%, var(--orange) 120%);
}

/* ============================================================
   SHARED TYPE
   ============================================================ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-16);
}

.display-xl {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.94;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.heading-lg {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.lead {
  font-size: 18px;
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ink);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  padding: 13px 24px;
  border-radius: var(--r-card);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, color 0.18s ease;
}
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--pill { border-radius: var(--r-pill); background: var(--orange); color: var(--ink); font-size: 14px; padding: 9px 18px; }
.btn--lg { font-size: 18px; padding: 16px 30px; }

/* ============================================================
   NAV — floating pill
   ============================================================ */
.navwrap {
  position: sticky;
  top: var(--s-16);
  z-index: 50;
  padding: 0 var(--s-24);
  margin-top: var(--s-16);
}
.nav {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  gap: var(--s-24);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.nav__links {
  display: flex;
  gap: var(--s-24);
  margin: 0 auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--orange); }
.nav__right { display: flex; align-items: center; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav__burger span { width: 16px; height: 2px; background: var(--ink); }

/* ============================================================
   WRAP / SECTIONS
   ============================================================ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s-24); }
.section { padding: var(--s-80) 0; }
.section__head { max-width: 720px; margin-bottom: var(--s-48); }
.section__head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-32);
  flex-wrap: wrap;
}
.section__sub {
  font-size: 18px;
  color: var(--ink);
  opacity: 0.7;
  margin-top: var(--s-16);
  max-width: 52ch;
}
.section__sub--right { text-align: right; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-48);
  align-items: center;
  padding: var(--s-64) 0 var(--s-80);
}
.hero__left { max-width: 560px; }
.display-xl + .lead { margin-top: var(--s-24); }
.hero__actions {
  margin-top: var(--s-32);
  display: flex;
  gap: var(--s-12);
  flex-wrap: wrap;
}
.hero__note {
  margin-top: var(--s-20);
  font-size: 14px;
  color: var(--ink);
  opacity: 0.6;
}
.hero__panel {
  position: relative;
  height: 500px;
  border-radius: var(--r-card);
}
.halftone--hero { border-radius: var(--r-card); }
.hero__floatcard {
  position: absolute;
  left: -22px;
  bottom: -28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: var(--s-20) var(--s-24);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
}
.floatcard__label { font-size: 13px; opacity: 0.6; }
.floatcard__num {
  font-family: var(--display);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--orange);
}
.floatcard__sub { font-size: 14px; opacity: 0.7; }

/* ============================================================
   STATS — four orange cards
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-16);
  padding: var(--s-24) 0 var(--s-80);
}
.stat {
  background: var(--orange);
  border-radius: var(--r-card);
  padding: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  min-height: 160px;
}
.stat__label { font-size: 14px; font-weight: 500; color: var(--paper); }
.stat__num {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-top: auto;
}

/* ============================================================
   LOGO STRIP
   ============================================================ */
.logos { padding-bottom: var(--s-80); }
.logos__label {
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
  margin-bottom: var(--s-20);
}
.logos__strip {
  background: var(--paper);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.logos__strip span {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-24) var(--s-12);
  border-right: 1px solid var(--concrete);
  color: var(--ink);
}
.logos__strip span:last-child { border-right: none; }

/* ============================================================
   WHAT WE DO
   ============================================================ */
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-16);
}
.help {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-40);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.help__no {
  font-family: var(--display);
  font-size: 30px;
  color: var(--orange);
  letter-spacing: 0.02em;
}
.help__title {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.help__copy { font-size: 16px; color: var(--ink); opacity: 0.78; }

/* ============================================================
   BELIEF / WHY US
   ============================================================ */
.belief {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-48);
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-48);
  margin: var(--s-24) 0 var(--s-80);
}
.belief__art {
  position: relative;
  height: 380px;
  border-radius: var(--r-card);
}
.belief__art .halftone { border-radius: var(--r-card); }
.belief__copy {
  font-size: 18px;
  line-height: 1.5;
  margin: var(--s-20) 0 var(--s-24);
  opacity: 0.82;
  max-width: 52ch;
}
.belief__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-12); }
.belief__list li { display: flex; align-items: center; gap: var(--s-12); font-size: 16px; }
.check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
  position: relative;
}
.check::after {
  content: "";
  position: absolute;
  left: 6px; top: 4px;
  width: 5px; height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================
   RESULTS CAROUSEL
   ============================================================ */
.carousel {
  display: flex;
  gap: var(--s-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-12);
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.proof {
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.proof__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
}
.proof__thumb .halftone { border-radius: 28px; }
.proof__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  background: var(--paper);
}
.tag {
  position: absolute;
  top: var(--s-12);
  left: var(--s-12);
  z-index: 1;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-tag);
}
.proof__name {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 var(--s-8);
}
.proof__copy { font-size: 15px; opacity: 0.78; padding: 0 var(--s-8); }
.proof__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-8) var(--s-12);
  margin-top: auto;
}
.proof__stats span {
  font-size: 13px;
  font-weight: 500;
  background: var(--concrete);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.carousel__nav { display: flex; gap: var(--s-12); margin-top: var(--s-24); }
.arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.arrow:hover { background: var(--ink); color: var(--cream); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-16);
}
.step {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.step__no {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--paper);
  font-family: var(--display);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__title {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.step__copy { font-size: 15px; opacity: 0.78; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.quote {
  background: var(--yellow);
  border-radius: var(--r-card);
  padding: var(--s-64) var(--s-48);
  text-align: center;
  margin: 0 0 var(--s-80);
}
.quote__text {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 18ch;
  margin: 0 auto;
}
.quote__by {
  margin-top: var(--s-24);
  font-size: 15px;
  font-weight: 500;
  opacity: 0.7;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-16) var(--s-32);
}
.qa { border-bottom: 1px solid var(--line); }
.qa:last-child { border-bottom: none; }
.qa__q {
  list-style: none;
  cursor: pointer;
  padding: var(--s-24) 0;
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after { content: "+"; color: var(--orange); font-size: 28px; }
.qa[open] .qa__q::after { content: "\2013"; }
.qa__a { padding: 0 0 var(--s-24); font-size: 16px; opacity: 0.8; max-width: 70ch; }

/* ============================================================
   CTA
   ============================================================ */
.cta { padding: 0 0 var(--s-80); }
.cta__inner {
  background: var(--ink);
  border-radius: var(--r-card);
  padding: var(--s-80) var(--s-48);
  text-align: center;
}
.cta__head { color: var(--cream); }
.cta__sub {
  color: var(--concrete);
  opacity: 0.8;
  font-size: 18px;
  max-width: 48ch;
  margin: var(--s-20) auto var(--s-32);
}
.form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}
.form input {
  flex: 1 1 200px;
  font-family: var(--sans);
  font-size: 16px;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 14px 22px;
  color: var(--ink);
}
.form input::placeholder { color: #8a8a88; }
.form input:focus { outline: none; border-color: var(--orange); }
.form .btn { flex: 0 0 auto; }
.form__note {
  margin-top: var(--s-20);
  font-size: 14px;
  color: var(--concrete);
  opacity: 0.7;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { max-width: var(--max); margin: 0 auto; padding: var(--s-48) var(--s-24) var(--s-64); }
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-24);
  padding-top: var(--s-32);
  border-top: 1px solid var(--line);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-24); }
.footer__nav a { font-size: 14px; opacity: 0.75; }
.footer__nav a:hover { opacity: 1; color: var(--orange); }
.footer__fine { margin-top: var(--s-20); font-size: 13px; opacity: 0.55; }

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--concrete);
  display: none;
  flex-direction: column;
  padding: var(--s-24);
}
.overlay.is-open { display: flex; }
.overlay__close {
  align-self: flex-end;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  cursor: pointer;
}
.overlay__nav { margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-32); }
.overlay__nav a {
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.overlay__nav .btn { font-family: var(--sans); font-size: 16px; }

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-16);
}
.pcard {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  min-height: 240px;
}
.ptag {
  align-self: flex-start;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--r-tag);
}
.pcard__title {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.pcard__copy { font-size: 15px; opacity: 0.78; }
.pcard__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: auto;
  padding-top: var(--s-12);
}
.pcard__stats span {
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  background: var(--orange);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

/* Projects CTA band (home page) */
.projects-cta {
  background: var(--orange);
  border-radius: var(--r-card);
  padding: var(--s-48);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-24);
}
.projects-cta__text { max-width: 60ch; }
.projects-cta__text h2 { color: var(--ink); margin-bottom: var(--s-12); }
.projects-cta__note { color: var(--ink); font-weight: 500; opacity: 0.85; }

/* Clickable work cards */
.is-link { cursor: pointer; }
.proof.is-link { transition: transform 0.15s ease; }
.proof.is-link:hover { transform: translateY(-3px); }
.proof.is-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.projects-cta .btn--ink {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-card);
  padding: 14px 26px;
  font-size: 16px;
}

@media (max-width: 940px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } }

/* Campaign proof gallery */
.proof-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-16);
}
.shot {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-12);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.shot figcaption {
  padding: 0 var(--s-8) var(--s-8);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 560px) { .proof-gallery { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__right { display: none; }
  .nav__burger { display: flex; }

  .hero { grid-template-columns: 1fr; }
  .hero__panel { height: 360px; order: -1; }
  .hero__floatcard { left: auto; right: 16px; bottom: 16px; }

  .belief { grid-template-columns: 1fr; }
  .belief__art { height: 240px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .help-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .logos__strip { grid-template-columns: repeat(3, 1fr); }
  .logos__strip span:nth-child(3) { border-right: none; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .logos__strip { grid-template-columns: repeat(2, 1fr); }
  .section__head--row { flex-direction: column; align-items: flex-start; }
  .section__sub--right { text-align: left; }
  .proof { flex-basis: 80%; }
}