@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2-variations");
}

/* Logo only (AGENTHUB) — the condensed cut from the mockup. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/oswald-variable.woff2") format("woff2");
}

:root {
  --bg: #f1f2ef;
  --green: #66e791;
  --ink: #10231a;
  --cta-bg: #0b2a19;
  --cta-ink: #7bf0a4;
  --font-display: "Space Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-logo: "Oswald", "Arial Narrow", var(--font-display);
  /* Horizontal inset shared by BOTH the projected photo frame and the
     floating chrome (brand, nav, intro), so the copy always sits inside the
     photo's side edges. They must clamp identically: when the photo used a
     raw vw inset while the chrome was capped, the two diverged past ~2667px
     (where 4.5vw exceeds 120px) and the copy/nav drifted outside the image
     on ultra-wide screens. Floored for phones, capped so neither sprawls. */
  --frame-x: clamp(18px, 4.5vw, 120px);
  --edge: var(--frame-x);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* Every page arrives like a slide dropping into the gate: bright and out
     of focus, settling sharp. Its counterpart, page-out, is driven by
     transition.js adding .is-leaving before internal navigations. */
  animation: page-in 0.55s ease-out;
}

html.is-leaving body {
  animation: page-out 0.24s steps(2, jump-none) forwards;
}

@keyframes page-in {
  0% {
    filter: blur(7px) brightness(1.28);
  }
  100% {
    filter: blur(0) brightness(1);
  }
}

@keyframes page-out {
  0% {
    filter: brightness(1);
  }
  55% {
    filter: brightness(0.6) contrast(0.88);
  }
  100% {
    /* A worn projector gate: dim and washed out, never true black. */
    filter: brightness(0.34) contrast(0.8) sepia(0.18);
  }
}

/* Secondary pages (about) are ordinary documents, not the locked scratch stage. */
body.scrollable {
  overflow: auto;
  overflow-x: clip;
  overscroll-behavior: auto;
}

/* ---------- Reveal layer (under the cover canvas) ---------- */

.beneath {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--green);
  user-select: none;
}

.hidden-message {
  text-align: right;
}

/* The small print above the wordmark, sharing its right edge. */
.kicker {
  margin: 0 0.4vw 1.4vh 0;
  font-weight: 460;
  text-transform: uppercase;
  font-size: clamp(12px, 1.25vw, 21px);
  letter-spacing: 0.18em;
  color: var(--ink);
}

/* As big as the viewport allows while staying fully readable: the vw term
   fits COLLABORATION (the longest line) horizontally, the vh term fits the
   three-line block vertically — whichever is tighter wins, so no window
   shape ever clips the text. */
.wordmark {
  margin: 0;
  font-weight: 340;
  text-transform: uppercase;
  font-size: min(12.6vw, 24vh);
  line-height: 1.12;
  letter-spacing: 0.005em;
  /* Rows share a right edge (HUMAN and AGENT flush with COLLABORATION's
     end) — the staggered look from the mockup. */
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}

.line {
  display: block;
}

/* ---------- Cover canvas (the scratch surface) ---------- */

.scratch-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  cursor: none;
  touch-action: none;
}

/* ---------- Projection layer ---------- */

/* Multiplied over both the paper cover and the scratched-open green, so the
   photo reads as light cast on the whole wall. Deliberately NOT full screen:
   the throw covers most of the wall, sits slightly crooked, and never quite
   holds still (drift keyframes on transform; lamp flicker on filter — two
   different properties so the animations can't fight). The slides' own
   feathered paper border does the edge falloff, so no CSS masking. */
.projection {
  position: fixed;
  /* Side insets share --frame-x with the chrome so the photo edges and the
     copy stay aligned at every viewport width. Top/bottom keep their own
     vh insets — vertical spacing doesn't diverge from the chrome the way the
     horizontal edges did. */
  inset: 4vh var(--frame-x) 6vh;
  z-index: 15;
  pointer-events: none;
  mix-blend-mode: multiply;
  animation:
    projector-lamp 3.1s linear infinite,
    projector-drift 11s ease-in-out infinite;
}

.projection .slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Dust dancing in the beam: a noise tile jumping between offsets. Sits over
   the slides, inside the blended container, so it only grains the throw. */
.projection .grain {
  position: absolute;
  inset: 0;
  background: url("/grain.png");
  background-size: 182px;
  mix-blend-mode: overlay;
  opacity: 0.14;
  animation: grain-jump 0.7s steps(1, end) infinite;
}

/* Carousel advance: the gate goes dark for a beat while the tray clunks
   forward, and the incoming slide settles into focus. */
.projection.is-switching {
  animation:
    projector-blink 0.5s steps(2, jump-none),
    projector-drift 11s ease-in-out infinite;
}

.projection.is-switching .slides {
  animation: slide-settle 0.7s ease-out;
}

@keyframes projector-lamp {
  0%,
  100% {
    filter: brightness(1);
  }
  31% {
    filter: brightness(1.035);
  }
  47% {
    filter: brightness(0.985);
  }
  63% {
    filter: brightness(1.02);
  }
  82% {
    filter: brightness(0.97);
  }
}

@keyframes projector-drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(0.18deg);
  }
  27% {
    transform: translate(3px, -2px) rotate(0.06deg);
  }
  52% {
    transform: translate(-2px, 2px) rotate(0.22deg);
  }
  78% {
    transform: translate(2px, 1px) rotate(0.1deg);
  }
}

@keyframes projector-blink {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(0.35) contrast(0.8);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes slide-settle {
  0% {
    filter: blur(6px) brightness(1.15);
  }
  100% {
    filter: blur(0) brightness(1);
  }
}

@keyframes grain-jump {
  0% {
    background-position: 0 0;
  }
  17% {
    background-position: -61px 43px;
  }
  34% {
    background-position: 44px -29px;
  }
  51% {
    background-position: -18px -71px;
  }
  68% {
    background-position: 73px 22px;
  }
  85% {
    background-position: -37px 60px;
  }
  100% {
    background-position: 0 0;
  }
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition:
    opacity 0.16s ease,
    transform 0.05s linear;
  z-index: 40;
}

.cursor-ring.is-visible {
  opacity: 1;
}

.cursor-ring-outer {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0.85;
}

.cursor-ring-inner {
  fill: var(--ink);
}

/* ---------- Chrome (always above the scratch surface) ----------
   Containers pass pointer events through so the whole page stays
   scratchable; only the links/button themselves are interactive. */

.chrome {
  pointer-events: none;
}

.chrome a {
  pointer-events: auto;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 1rem;
  padding: clamp(16px, 2.5vw, 26px) var(--edge);
}

.brand {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: clamp(14px, 2vw, 26px);
}

.topbar-actions a {
  color: var(--ink);
  opacity: 0.72;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar-actions a:hover,
.topbar-actions a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The primary CTA keeps its own colors inside the top bar — the quiet-link
   rule above must not wash it out. */
.topbar-actions a.cta {
  color: var(--cta-ink);
  opacity: 1;
}

.topbar-actions a.cta:hover {
  text-decoration: none;
}

.intro {
  position: fixed;
  /* Box left tracks the top bar / photo frame; the padding then sets the copy
     a little inside that edge so the tagline reads as sitting over the image
     with breathing room, not flush against the frame. */
  left: var(--edge);
  padding-left: clamp(14px, 1.8vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  max-width: min(46ch, 60vw);
}

.tagline {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.3vw, 31px);
  line-height: 1.25;
  color: var(--ink);
  transition: opacity 0.22s ease;
}

/* Fades out during the projector blink; the new line fades in with the
   incoming slide. */
.tagline.is-swapping {
  opacity: 0;
}

/* Soft fade behind the tagline, centered on the text itself, so it reads
   clearly no matter how light or busy the photo underneath happens to be.
   The buttons already sit on their own solid/outlined backgrounds and don't
   need this. */
.tagline::before {
  content: "";
  position: absolute;
  inset: -28px -20px -28px -60px;
  z-index: -1;
  background: radial-gradient(
    ellipse closest-side,
    rgba(241, 242, 239, 0.82) 0%,
    rgba(241, 242, 239, 0.5) 60%,
    rgba(241, 242, 239, 0) 100%
  );
}

.cta {
  display: inline-block;
  background: var(--cta-bg);
  color: var(--cta-ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 15px;
  border-radius: 3px;
  transition: background-color 0.18s ease;
}

.cta:hover {
  background: #123f26;
}

/* Secondary action: outlined, quiet next to the primary. */
.cta--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(16, 35, 26, 0.35);
  padding: 9px 14px;
}

.cta--secondary:hover {
  background: rgba(16, 35, 26, 0.07);
  border-color: rgba(16, 35, 26, 0.55);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Compact cut of the primary CTA for the top bar. */
.topbar .cta {
  padding: 8px 13px;
  font-size: 11.5px;
}

.cta:focus-visible,
.topbar-actions a:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Narrow screens: the wordmark owns the middle of the viewport, so the
   tagline + button move to the bottom instead of overlapping it. */
/* ---------- About page ---------- */

.about {
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(110px, 20vh, 180px) clamp(20px, 4vw, 40px) 72px;
}

.about h1 {
  margin: 0 0 26px;
  font-weight: 340;
  text-transform: uppercase;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: 0.005em;
}

.about p {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
}

.about .cta {
  margin-top: 12px;
}

/* Photo left, the two founder sections to its right; stacks on narrow screens. */
.team {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin: 38px 0 34px;
}

.team-photo {
  margin: 0;
}

.team-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.team-bios section + section {
  margin-top: 26px;
}

.team-bios h2 {
  margin: 0 0 8px;
  font-weight: 340;
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.005em;
}

.team-bios p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
}

.bio-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bio-head h2 {
  margin-bottom: 0;
}

.bio-head + p {
  margin-top: 8px;
}

.bio-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Optical alignment with the uppercase heading baseline. */
  transform: translateY(1px);
}

.bio-links a {
  display: inline-flex;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.bio-links a:hover,
.bio-links a:focus-visible {
  opacity: 1;
}

/* "Fullview" — dashed underline; hovering (or keyboard focus) floats a small
   framed preview of the site with a one-line description. Not a link. */
.peek {
  position: relative;
  color: inherit;
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: default;
}

.peek:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.peek-card {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(330px, 78vw);
  transform: translateX(-50%) translateY(4px);
  display: block;
  padding: 7px;
  background: var(--bg);
  border: 1px solid rgba(16, 35, 26, 0.16);
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(16, 35, 26, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
  z-index: 30;
}

.peek:hover .peek-card,
.peek:focus-visible .peek-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

.peek-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.peek-caption {
  display: block;
  margin: 8px 3px 3px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Learn page ---------- */

.learn h1 {
  max-width: 21ch;
}

.learn-section {
  margin-top: clamp(44px, 7vh, 64px);
  max-width: 46rem;
}

/* Green section labels, echoing the deck's slide kickers. */
.section-kicker {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1f7a4d;
}

.learn-section h2 {
  margin: 0 0 14px;
  font-weight: 340;
  text-transform: uppercase;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  letter-spacing: 0.005em;
}

/* Numbered Build / Operate / Scale steps. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 26px 0 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 58px;
  border-top: 1px solid rgba(16, 35, 26, 0.14);
}

.steps li:last-child {
  border-bottom: 1px solid rgba(16, 35, 26, 0.14);
}

.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #1f7a4d;
}

.steps h3,
.pillars h3 {
  margin: 0 0 4px;
  font-weight: 340;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.03em;
}

.learn .steps p,
.learn .pillars p {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
}

/* Enterprise pillars: compact two-column grid. */
.pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px clamp(20px, 3vw, 36px);
  margin: 24px 0 0;
  padding: 0;
}

.learn-closer .closer {
  max-width: 30ch;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
}

.closer-mark {
  color: #1f7a4d;
}

.learn-closer .cta-row {
  margin-top: 26px;
}

@media (max-width: 560px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ---------- "What about you?" ---------- */

.you {
  max-width: 42rem;
  margin-top: 46px;
}

.you h2 {
  margin: 0 0 14px;
  font-weight: 340;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: 0.005em;
}

.you p {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}

.you .cta {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .team {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  html.is-leaving body,
  .projection,
  .projection.is-switching,
  .projection .grain,
  .projection.is-switching .slides {
    animation: none;
  }
}

@media (max-width: 700px) {
  .intro {
    top: auto;
    bottom: max(28px, 6vh);
    right: 18px;
    padding-left: 0;
    transform: none;
    max-width: none;
  }
  .tagline {
    margin-bottom: 22px;
  }
  .cta-row {
    gap: 12px;
  }
  /* Roomier touch targets for thumbs. */
  .cta-row .cta {
    padding: 13px 19px;
    font-size: 12.5px;
  }
  .cta-row .cta--secondary {
    padding: 12px 18px;
  }
  .brand {
    font-size: 17px;
  }
  .topbar-actions {
    gap: 10px;
  }
  .topbar-actions a {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .topbar .cta {
    padding: 7px 10px;
    font-size: 10.5px;
  }
}