/* ClaimRight — public site. Brand by Brandon's brother (Oct 2026): electric blue, black, white,
   Archivo Black for the big type, DM Sans for everything else, film grain over the whole page. */

@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0920fd;
  --blue-deep: #0a1472;
  --black: #08080c;
  --white: #ffffff;
  --text: #e4e5ec;
  --muted: #9a9cab;
  --rule: rgba(255, 255, 255, 0.14);
  --label: #7d93ff;

  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 72px);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain over everything, taken from the brand background */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/grain-brand.png") repeat;
  background-size: 244px 244px;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 50;
}

/* The overlay grain fades out on near-black, so the darker page below the landing
   screen also gets a light speckle of the same grain. One layer for the whole page,
   faded in gently, so it never starts or stops at a section edge. */
body { position: relative; }
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 49;
  background: url("../img/grain-brand-dark.png") repeat;
  background-size: 244px 244px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 95svh, #000 140svh);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 95svh, #000 140svh);
  pointer-events: none;
}

h1, h2, p { margin: 0; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 2px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header ---------- */

.brand img { height: 46px; width: auto; }
.end .email { color: var(--white); }
.end .email a { color: inherit; text-decoration: none; }

/* ---------- Hero: the logo animation, then the figure ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  background: #06060a url("../media/poster.jpg") center / cover no-repeat;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-still { display: none; }

/* The video is 16:9 and covers the hero. These work out where its frame sits, so the
   text can hang a fixed gap under the logo (whose bottom edge is 57.9% down the frame). */
.hero {
  --frame-h: max(100svh, 56.25vw);
  --frame-top: calc((100svh - var(--frame-h)) / 2);
  --logo-bottom: calc(var(--frame-top) + 0.579 * var(--frame-h));
}
.hero-text {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  top: calc(var(--logo-bottom) + clamp(20px, 3vh, 34px));
  padding: 0 var(--gutter);
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  animation: rise 0.9s ease-out 2.3s forwards;
}
/* The landing screen stays clean right to its bottom edge: the hero runs on below
   the screen by --below, and the next section fades in over that part as you scroll. */
.hero { --below: clamp(90px, 15vh, 170px); }

/* Big screens: lift the logo, figure and bar a little higher. Below the video, the
   same video plays upside down, so its bottom edge carries on as a mirror image.
   Being the same video, its colours match exactly on every screen and browser. */
.hero-mirror { display: none; }
@media (min-width: 861px) {
  .hero-video, .hero-text { translate: 0 -7vh; }
  .hero-video { height: 100svh; bottom: auto; }
  .hero-mirror {
    display: block;
    position: absolute;
    left: 0;
    top: -7vh;
    width: 100%;
    height: 100svh;
    object-fit: cover;
    /* Flipped at the video's bottom edge and stretched, so the last few rows of the
       video carry on downward and only ever get darker: no doubled glow. */
    transform-origin: 50% 100%;
    transform: scaleY(-2);
    pointer-events: none;
  }
  .hero {
    height: calc(100svh + var(--below));
    background:
      url("../media/poster.jpg") 50% calc(50svh - 0.5 * var(--frame-h) - 7vh) / calc(var(--frame-h) * 16 / 9) var(--frame-h) no-repeat,
      #06060a;
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.num {
  font-family: var(--display);
  font-size: clamp(3.5rem, min(10vw, 17vh), 10rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.num-cap {
  margin: 16px auto 0;
  max-width: 60ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 500;
  color: var(--white);
}
/* Same speckle as the logo in the video, so the text sits on the same layer */
.num, .num-cap {
  color: transparent;
  background: url("../img/grain-dark.png") 0 0 / 96px 96px repeat, var(--white);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blue bar, as on the brand's social posts */
.bar {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 18px;
  background: var(--blue);
  color: var(--white);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
}
.bar-lead { margin: 0 0 1.6em; }

/* ---------- Blue statement ---------- */

.statement {
  /* Flows straight on from the hero: same dark at the top, the hero's blue continuing
     down the left, and soft blue folds at both edges like the brand's LinkedIn banner. */
  /* Overlaps the bottom of the hero and fades in over it, so there is no edge
     at the top whatever colour a given screen shows the video in. */
  --blend: clamp(90px, 15vh, 170px);
  margin-top: calc(-1 * var(--blend));
  padding: calc(var(--blend) + clamp(72px, 9vw, 128px)) 0 clamp(96px, 12vw, 168px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
  color: var(--white);
  /* Top layer is the film grain, to match the hero. It is part of the background
     (not a separate layer on top) so it adds texture without lifting the blacks.
     The grain image fades out over the lower part of the section, and the colour
     eases into the page black, so the bottom edge has no line. */
  background:
    url("../img/grain-film-fade.png") 0 0 / 128px 100% repeat-x,
    url("../media/folds.jpg?v=2") center / 100% 100% no-repeat,
    linear-gradient(to bottom, #141620 0%, #13151e 19%, #101119 38%, #0c0d13 57%, #090a0e 76%, var(--black) 95%);
  background-blend-mode: overlay, screen, normal;
}
.statement { position: relative; }
.statement .wrap { position: relative; z-index: 1; }
.statement h1 {
  margin: 0;
  font-weight: 400;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.8vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: balance;
}

/* ---------- Text sections ---------- */

.block { padding: clamp(64px, 8vw, 104px) 0; }


.row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.label {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  padding-top: 0.45em;
}

.text { max-width: 680px; }
.text p + p { margin-top: 1.4em; }
.text .big {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--white);
  max-width: 18ch;
  text-wrap: balance;
}
.text .big + p { margin-top: 1.2em; }


.boxed {
  border: 1px solid rgba(9, 32, 253, 0.9);
  border-left-width: 6px;
  padding: 26px 28px;
  color: var(--white);
}

.founder { color: var(--muted); }

/* Transparency section: the brand gradient again */
/* The streaks reach past the top and bottom of this section and fade out,
   so it blends into the sections around it with no dividing line. */
.glow {
  --streak-reach: clamp(100px, 16vh, 200px);
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
}
.glow::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--streak-reach));
  bottom: calc(-1 * var(--streak-reach));
  z-index: -1;
  background: url("../media/waves.jpg") right center / cover no-repeat;
  --fade-x: linear-gradient(90deg, transparent 0%, transparent 62%, rgba(0, 0, 0, 0.3) 80%, rgba(0, 0, 0, 0.7) 100%);
  --fade-y: linear-gradient(to bottom, transparent 0, #000 var(--streak-reach), #000 calc(100% - var(--streak-reach)), transparent 100%);
  -webkit-mask-image: var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y);
  mask-composite: intersect;
  pointer-events: none;
}

/* ---------- Footer ---------- */

.end {
  /* No line: the brand backdrop rises out of the page's dark, so the top of the
     footer matches the section above it exactly. */
  background:
    linear-gradient(to bottom, var(--black) 0%, rgba(8, 8, 12, 0.92) 22%, rgba(8, 8, 12, 0.6) 50%, rgba(8, 8, 12, 0.2) 78%, rgba(8, 8, 12, 0) 100%),
    /* A light cool tint: the picture's plain greys read warm next to the page's black. */
    linear-gradient(hsla(232, 55%, 50%, 0.12), hsla(232, 55%, 50%, 0.12)),
    #06060a url("../media/backdrop.jpg?v=2") center / cover no-repeat;
  background-blend-mode: normal, color, normal;
  padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 6vw, 72px);
  color: var(--white);
}
.end-mark { height: 80px; width: auto; margin-bottom: clamp(48px, 7vw, 96px); }
.end .text p + p { margin-top: 0.5em; }
.end a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.end a:hover { text-decoration-thickness: 2px; }
.contact-line { font-size: 1rem; }
.founder { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.85); }
.legal { margin-top: 2.2em !important; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); }

/* ---------- Narrow screens ---------- */

@media (max-height: 760px) and (min-width: 861px) {
  .num { font-size: min(8vw, 14vh); }
  .num-cap { margin-top: 10px; font-size: 1rem; }
  .bar { margin-top: 14px; padding: 8px 14px; font-size: 1rem; }
}

@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; row-gap: 18px; }
  .label { padding-top: 0; }
  .hero {
    height: auto;
    min-height: calc(100svh + var(--below));
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("../media/backdrop.jpg?v=2");
    padding: 110px var(--gutter) var(--below);
  }
  /* Phones: tighter gap between the landing screen and "We build tools". */
  .hero { --below: 64px; }
  .statement { --blend: 64px; padding-top: calc(var(--blend) + 16px); }
  .hero-video { display: none; }
  .glow::before {
    background: url("../media/waves.jpg") 80% center / 250% 100% no-repeat;
    filter: blur(3px);
    top: 0;
    --fade-x: linear-gradient(90deg, transparent 0%, transparent 58%, rgba(0, 0, 0, 0.28) 78%, rgba(0, 0, 0, 0.42) 100%);
    --fade-y: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - var(--streak-reach)), transparent 100%);
  }
  .statement {
    background:
      url("../img/grain-film-strong-fade.png?v=2") 0 0 / 128px 100% repeat-x,
      url("../media/folds.jpg?v=2") center / 100% 100% no-repeat,
      radial-gradient(70% 40% at 0% 0%, rgba(9, 32, 253, 0.12) 0%, rgba(9, 32, 253, 0) 100%),
      linear-gradient(to bottom, #1b1c21 0%, #191a1f 19%, #14151a 38%, #0f0f13 57%, #0a0a0e 76%, var(--black) 95%);
    background-blend-mode: overlay, screen, normal, normal;
  }
  .hero-still { display: block; width: min(72vw, 340px); height: auto; margin: 0 auto 28px; }
  .hero-text { position: static; padding: 0; opacity: 1; animation: none; }
  .num-cap { margin-left: auto; margin-right: auto; }
  .num { font-size: clamp(3.5rem, 15vw, 5.5rem); }
  .num-cap { max-width: 32ch; }
  .statement p { max-width: none; }
}

@media (max-width: 560px) {
  .end-mark { height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-text { opacity: 1; animation: none; }
  .hero-video, .hero-mirror { display: none; }
}

/* 404 page */
.notfound { min-height: 100svh; display: flex; align-items: center; padding: 48px 0; }
.notfound h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); margin: 40px 0 16px; }
.notfound a { color: inherit; }