/* ==========================================================================
   Homepage sections
   Implements the "homepage" design handoff for everything below the hero:
   specialties, differentiators, clients marquee, projects and contact.
   Prefixed `hp-` so it cannot collide with the Webflow classes the hero
   still uses, or with the cs-/sc- layers.
   ========================================================================== */

:root {
  --hp-blue: #272ccd;
  --hp-orange: #ff6237;
  --hp-ink: #333333;
  --hp-border: #b4b4be;
  --hp-surface: #eeeef1;
  --hp-white: #ffffff;
  --hp-tag-border: rgba(39, 44, 205, 0.3);
  --hp-on-blue: rgba(255, 255, 255, 0.85);
  --hp-on-blue-border: rgba(255, 255, 255, 0.3);

  --hp-font-mono: "Roboto Mono", monospace;
  --hp-font-ui: "Ubuntu", Helvetica, sans-serif;
  --hp-font-body: "Urbanist", sans-serif;

  /* the site gutter, so these sections line up with the nav and footer */
  --hp-pad-x: clamp(24px, 5vw, 80px);
  --hp-max: 1280px;
}

.hp-section {
  padding: clamp(70px, 9vw, 120px) var(--hp-pad-x);
  background: var(--hp-white);
}

.hp-section *,
.hp-section *::before,
.hp-section *::after {
  box-sizing: border-box;
}

.hp-inner {
  max-width: var(--hp-max);
  margin: 0 auto;
}

.hp-head {
  margin-bottom: 52px;
}

.hp-label {
  font-family: var(--hp-font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--hp-orange);
  margin-bottom: 12px;
}

.hp-h2 {
  font-family: var(--hp-font-mono);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--hp-ink);
  margin: 0;
}

/* ---- card grid (specialties + differentiators) --------------------------- */

/* 1px gap over a grey ground, so the gaps read as dividers rather than
   needing borders on every cell. */
.hp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--hp-border);
  border: 1px solid var(--hp-border);
  border-radius: 4px;
  overflow: hidden;
}

.hp-card {
  background: var(--hp-white);
  padding: 32px 28px;
}

.hp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}

.hp-index {
  font-family: var(--hp-font-mono);
  font-size: 15px;
  color: var(--hp-border);
}

/* Blue tile with the icons left unfiltered. Each icon is drawn in blue over
   white linework, so on this ground the blue drops away and the white reads
   as outline art. The design's `filter: brightness(0) invert(1)` would force
   both layers to white and fill the shapes solid instead. */
.hp-tile {
  width: 96px;
  height: 96px;
  border-radius: 4px;
  background: var(--hp-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hp-tile img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.hp-card h3 {
  font-family: var(--hp-font-ui);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--hp-blue);
  margin: 0 0 14px;
}

.hp-card p {
  font-family: var(--hp-font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--hp-ink);
  margin: 0;
}

.hp-card p strong {
  font-weight: 700;
}

.hp-section-grey {
  background: var(--hp-surface);
}

/* ---- clients marquee ----------------------------------------------------- */

.hp-clients {
  background: var(--hp-blue);
  padding: clamp(56px, 7vw, 90px) 0;
  overflow: hidden;
}

/* The marquee runs full width, so this section carries no padding of its own
   and the heading supplies its own gutter. That gutter sits inside the box,
   so the cap has to allow for it — capping at 1280 alone pushes the title up
   to 80px right of every other section title. */
.hp-clients .hp-head {
  max-width: calc(var(--hp-max) + 2 * var(--hp-pad-x));
  margin: 0 auto 34px;
  padding: 0 var(--hp-pad-x);
}

.hp-clients .hp-h2 {
  color: var(--hp-white);
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: normal;
}

.hp-marquee {
  display: flex;
  width: max-content;
  gap: 64px;
  align-items: center;
  animation: hp-marquee 32s linear infinite;
  opacity: 0.95;
}

.hp-marquee img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

@keyframes hp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---- projects ------------------------------------------------------------ */

.hp-projects .hp-head {
  margin-bottom: 44px;
}

.hp-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 24px);
  align-items: flex-start;
  padding: 28px clamp(10px, 2vw, 32px);
  border-top: 1px solid var(--hp-border);
  text-decoration: none;
  transition: background 0.3s ease;
}

.hp-row:hover,
.hp-row:focus-visible {
  background: var(--hp-surface);
}

.hp-row-end {
  border-top: 1px solid var(--hp-border);
}

/* Kept in the page but not shown. Remove the class from the row in
   index.html to bring the project back. */
.hp-row-hidden {
  display: none;
}

.hp-num {
  flex: 0 0 44px;
  font-family: var(--hp-font-mono);
  font-size: 30px;
  line-height: 1.1;
  color: var(--hp-orange);
}

.hp-thumb {
  flex: 1 1 200px;
  min-width: 165px;
  max-width: 260px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hp-border);
}

/* full height at the same width, so the shot is not cropped */
.hp-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.hp-row-text {
  flex: 1 1 280px;
  min-width: 0;
}

.hp-client {
  font-family: var(--hp-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--hp-blue);
  margin-bottom: 8px;
}

.hp-row-text h3 {
  font-family: var(--hp-font-ui);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.25;
  color: var(--hp-ink);
  margin: 0;
}

.hp-tags {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 7px;
  /* fixed, so tags are the same width in every row instead of each column
     sizing to its own longest label */
  width: 260px;
  padding-left: clamp(0px, 3vw, 48px);
}

.hp-tag {
  font-family: var(--hp-font-mono);
  font-size: 11px;
  color: var(--hp-blue);
  border: 1px solid var(--hp-tag-border);
  border-radius: 4px;
  padding: 4px 10px;
  text-align: center;
}

/* ---- contact ------------------------------------------------------------- */

.hp-contact {
  background: var(--hp-blue);
  color: var(--hp-white);
}

.hp-contact .hp-h2 {
  color: var(--hp-white);
}

.hp-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(30px, 4vw, 56px);
}

.hp-contact h3 {
  font-family: var(--hp-font-body);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--hp-white);
}

.hp-contact p {
  font-family: var(--hp-font-body);
  font-size: 17px;
  color: var(--hp-on-blue);
  margin: 0 0 24px;
}

.hp-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.hp-social {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--hp-on-blue-border);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.hp-social:hover,
.hp-social:focus-visible {
  border-color: var(--hp-orange);
  transform: translateY(-3px);
}

.hp-social img {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.hp-social span {
  font-family: var(--hp-font-mono);
  font-size: 14px;
  color: var(--hp-white);
}

.hp-direct {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-direct a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--hp-on-blue-border);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.hp-direct a:hover,
.hp-direct a:focus-visible {
  border-color: var(--hp-orange);
  transform: translateX(6px);
}

.hp-direct img {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.hp-direct span {
  font-family: var(--hp-font-mono);
  font-size: 16px;
  color: var(--hp-white);
}

/* ---- scroll reveal ------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-reveal].hp-revealed {
  opacity: 1;
  transform: none;
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .hp-num {
    flex: 0 0 100%;
  }

  .hp-thumb {
    flex: 0 0 100%;
    max-width: none;
  }

  .hp-row-text {
    flex: 0 0 100%;
  }

  .hp-tags {
    flex: 0 0 100%;
    width: auto;
    flex-direction: row;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-marquee {
    animation: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hp-social,
  .hp-direct a,
  .hp-row {
    transition: none;
  }

  .hp-social:hover,
  .hp-direct a:hover {
    transform: none;
  }
}

/* ==========================================================================
   Hero — from the homepage handoff
   ========================================================================== */

.hp-hero {
  position: relative;
  min-height: 112vh;
  display: flex;
  align-items: flex-start;
  padding: 59px var(--hp-pad-x) clamp(90px, 12vw, 160px);
  overflow: hidden;
  background: var(--hp-white);
  background-image: linear-gradient(rgba(39, 44, 205, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 44, 205, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
}

.hp-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hp-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--hp-max);
  margin: 0 auto;
}

.hp-hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  font-family: var(--hp-font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--hp-blue);
  margin-bottom: 40px;
}

.hp-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hp-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 14px;
  background: var(--hp-white);
  border: 1px solid rgba(39, 44, 205, 0.22);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(39, 44, 205, 0.06);
}

.hp-pill-status {
  position: relative;
  gap: 10px;
  padding: 0 10px 0 14px;
}

.hp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a9e77;
  box-shadow: 0 0 0 3px rgba(26, 158, 119, 0.16);
}

.hp-status-label {
  color: #1a9e77;
}

.hp-info {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 2px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8a8fb8;
  transition: color 0.2s ease;
}

.hp-info[aria-expanded="true"],
.hp-info:hover,
.hp-info:focus-visible {
  color: var(--hp-orange);
}

.hp-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: min(300px, 78vw);
  background: var(--hp-blue);
  color: var(--hp-white);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--hp-font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  line-height: 1.65;
  text-transform: none;
  box-shadow: 0 10px 26px rgba(39, 44, 205, 0.28);
  z-index: 20;
}

.hp-tooltip[hidden] {
  display: none;
}

.hp-tooltip::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: var(--hp-blue);
  transform: rotate(45deg);
}

.hp-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 40px;
  align-items: start;
}

.hp-hero-left {
  position: relative;
  z-index: 2;
}

.hp-h1 {
  font-family: var(--hp-font-mono);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 32px 0 6px;
  color: var(--hp-ink);
  text-transform: uppercase;
}

.hp-caret {
  color: var(--hp-orange);
  animation: hp-caret 1.1s step-end infinite;
}

@keyframes hp-caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.hp-hero-sub {
  font-family: var(--hp-font-ui);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 27px);
  margin: 18px 0 0;
  color: var(--hp-ink);
}

.hp-hero-sub span {
  color: var(--hp-blue);
}

.hp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 34px;
}

.hp-chip {
  font-family: var(--hp-font-mono);
  font-size: 13px;
  color: var(--hp-ink);
  border: 1px solid var(--hp-tag-border);
  border-radius: 4px;
  padding: 8px 14px;
}

.hp-untangle {
  margin-top: clamp(32px, 7vw, 96px);
}

/* Stacked, the tangle sits centred under the copy, so the line it belongs to
   is centred over it. The class is set by hero.js from the same measurement
   that switches the illustration, so the two can never disagree. */
.hp-hero-stacked .hp-untangle {
  text-align: center;
}

.hp-untangle h2 {
  font-family: var(--hp-font-ui);
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 6px;
  color: var(--hp-blue);
}

.hp-untangle p {
  font-family: var(--hp-font-mono);
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--hp-blue);
  margin: 14px 0 0;
}

.hp-untangle strong {
  font-weight: 700;
}

/* the canvas illustration occupies this column visually */
.hp-hero-spacer {
  height: clamp(300px, 52vw, 480px);
  min-width: 0;
}

/* Stacked the knot is drawn at 70% of the viewport (≈64vw tall), so the
   spacer has to hold that plus the run the escaping line needs below it. */
.hp-hero-stacked .hp-hero-spacer {
  height: clamp(340px, calc(64vw + 90px), 560px);
}

/* the default fade is deep enough to swallow that whole run */
.hp-hero-stacked .hp-hero-fade {
  height: 150px;
}

.hp-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 55%,
    #ffffff 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hp-scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--hp-blue);
  font-family: var(--hp-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  text-decoration: none;
}

.hp-arrow {
  font-size: 14px;
  animation: hp-bob 1.6s ease-in-out infinite;
}

@keyframes hp-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-caret,
  .hp-arrow {
    animation: none;
  }
}