/* ============================================================
   HumanInc — 12-column full-screen site
   Fonts: Neue Montreal (self-hosted) + Roboto Mono (Google)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../assets/fonts/NeueMontreal-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cream:   #fff8f8;
  --ink:     #3a1506;
  --ink-2:   #401c0e;
  --red:     #ff4343;
  --red-2:   #ff7566;
  --red-mono:#e43838;
  --orange:  #ff4343;
  --black:   #171e21;
  --card:    #181818;
  --peach:   #f9b48d;

  --font: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* horizontal page frame — mirrors the 195/1920 ≈ 10% margin */
  --pad: clamp(20px, 10.1vw, 195px);
  --gap: clamp(12px, 1.6vw, 30px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.15;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
::selection { background: var(--red); color: var(--cream); }

/* ---------- Layout ---------- */
.container { width: 100%; padding-inline: var(--pad); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
}
.section { position: relative; }

/* column helpers (desktop) */
.c1  { grid-column: 1; }
.c2-9  { grid-column: 3 / 11; }
.c3-11 { grid-column: 3 / 12; }
.c3-10 { grid-column: 3 / 11; }
.c-right { grid-column: 9 / 13; justify-self: end; text-align: right; }

/* ============================================================
   HEADER
   ============================================================ */
.site-head {
  position: relative;
  z-index: 20;
  padding-top: clamp(28px, 3vw, 56px);
  padding-bottom: clamp(40px, 6vw, 90px);
}
.site-head .grid { align-items: start; }

/* crest sits in the left margin, top-aligned with the nav (like the design) */
.brand {
  position: absolute;
  left: clamp(16px, 2vw, 40px);
  top: clamp(28px, 3vw, 56px);
  z-index: 21;
}
.brand .crest { width: clamp(48px, 3.6vw, 74px); height: auto; }

.mainnav { grid-column: 1 / 7; }
.mainnav ul { display: flex; flex-direction: column; gap: 2px; }
.mainnav a {
  position: relative;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.35;
  color: var(--ink);
  width: max-content;
  transition: color .4s var(--ease);
}
.mainnav a::after {
  content: "";
  position: absolute; left: 0; bottom: .12em;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.mainnav a:hover { color: var(--red); }
.mainnav a:hover::after { transform: scaleX(1); }
.mainnav a.is-active { color: var(--red); }
.mainnav a.is-active::after { transform: scaleX(1); }

.working {
  position: absolute;
  top: clamp(28px, 3vw, 56px);
  right: clamp(16px, 2vw, 40px);      /* mirrors the crest's left inset */
  display: flex; align-items: flex-start; justify-content: flex-end;
  gap: clamp(12px, 1.2vw, 22px);
  text-align: right;
}
.working .lines { font-size: clamp(13px, 1.15vw, 22px); line-height: 1.32; }
.working .lines .muted { color: var(--ink-2); }
.working .lines a { color: var(--red); }
.working .lines a:hover { text-decoration: underline; }
.working .thumb {
  width: clamp(120px, 14.8vw, 284px);
  aspect-ratio: 284 / 130;
  border-radius: 10px;
  background: linear-gradient(120deg, #2a2a2a, #050505);
  flex: none;
  overflow: hidden;
  position: relative;
}
.working .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.working .thumb:empty::after {
  content: "▶";
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.55); font-size: clamp(12px, 1.4vw, 22px);
}

/* ============================================================
   TYPOGRAPHY BLOCKS
   ============================================================ */
.lead {
  font-weight: 500;
  font-size: clamp(26px, 3.9vw, 65px);
  line-height: 1.16;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.lead .link { color: var(--red); text-decoration: underline; text-underline-offset: .08em; }
.lead .link:hover { color: var(--ink); }

.para {
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 48px);
  line-height: 1.12;
  color: #000;
}
.para .accent { color: var(--red-mono); }

.eyebrow {
  position: relative;
  z-index: 2;               /* keep labels above the giant background type */
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(12px, 1.15vw, 20px);
  letter-spacing: 0.02em;
  color: var(--red-mono);
}

/* ============================================================
   GIANT BACKGROUND TYPE (watermark letters)
   ============================================================ */
.giant {
  font-weight: 500;
  color: #fff;
  line-height: .8;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  position: absolute;
  z-index: 0;
  white-space: nowrap;
}
.watermark {
  font-weight: 700;
  color: rgba(58, 21, 6, 0.16);
  letter-spacing: 0.01em;
  line-height: .8;
  text-align: center;
  pointer-events: none;
  user-select: none;
  font-size: clamp(58px, 20.5vw, 320px);
  width: 100%;
}

/* ---- Manifesto block (watermark on top, text below, first line indented) ---- */
.manifesto { position: relative; }
.manifesto > .watermark { position: absolute; top: clamp(16px, 2vw, 40px); left: 0; z-index: 0; }
/* clears the full height of the watermark so the text never overlaps it */
.mf-content { position: relative; z-index: 1; padding-top: clamp(155px, 22vw, 360px); }
.mf-top { display: grid; grid-template-columns: 18% 1fr; align-items: start; gap: clamp(10px, 1.4vw, 28px); }
.mf-arrow { width: clamp(48px, 5vw, 99px); height: auto; grid-column: 1; }
.mf-top .lead { grid-column: 2; }
/* the paragraphs flow tight, like the design — not a big block gap */
.mf-content .mt-lead { margin-top: clamp(10px, 1.1vw, 22px); }

/* ============================================================
   CTA PILL BUTTONS
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: clamp(14px, 1.4vw, 26px);
  background: #fff;
  border-radius: 100px;
  padding: clamp(16px, 1.6vw, 30px) clamp(26px, 2.4vw, 46px);
  width: max-content; max-width: 100%;
  will-change: transform;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.pill:hover { box-shadow: 0 24px 60px -24px rgba(58,21,6,.35); }
.pill .emoji { font-size: clamp(34px, 4vw, 64px); line-height: 1; }
.pill .label {
  font-family: var(--mono); font-weight: 600; text-transform: uppercase;
  color: var(--red-mono); font-size: clamp(13px, 1.35vw, 24px);
  letter-spacing: .01em; line-height: 1.2;
}

/* ============================================================
   MYMEMORYLANE CARDS
   ============================================================ */
.cards { position: relative; z-index: 1; }
/* three equal cards fill the content width (470/60/470/60/470 in the design) */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3.1vw, 60px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.card-row .card:nth-child(1) { margin-top: 16%; }
.card-row .card:nth-child(2) { margin-top: 0; }
.card-row .card:nth-child(3) { margin-top: 47%; }
.card {
  position: relative;
  aspect-ratio: 470 / 835;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(24,24,24,0) 40%, var(--card) 100%),
    radial-gradient(120% 90% at 50% 0%, #3a3a3a 0%, #1c1c1c 55%, #050505 100%);
  box-shadow: 0 40px 80px -40px rgba(58,21,6,.4);
}
.card-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* darkens the lower edge so the label stays legible over any footage */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%);
}
.card .play {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  width: clamp(30px,3vw,46px); aspect-ratio: 1; border-radius: 8px;
  border: 1px solid var(--peach);
  display: grid; place-items: center;
}
.card .play svg { width: 42%; fill: var(--peach); }
.card .meta {
  position: absolute; z-index: 2; left: 18px; bottom: 20px; right: 18px;
  display: flex; align-items: center; gap: 10px;
}
.card .meta img { height: clamp(26px, 2.4vw, 38px); width: auto; }

/* ============================================================
   PORTRAIT + PROFILE SECTION
   ============================================================ */
.portrait { border-radius: 2px; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   CLIENT LOGOS
   ============================================================ */
.clients .logos {
  display: flex; align-items: center; gap: clamp(30px, 5vw, 90px);
  flex-wrap: wrap;
}
.clients .logos img { height: clamp(34px, 3.4vw, 64px); width: auto; opacity: .92; }
.clients .list {
  font-weight: 400;
  font-size: clamp(20px, 2.9vw, 45px);
  line-height: 1.36;
  color: #000;
}

/* ============================================================
   INDEX (project table)
   ============================================================ */
.idx-head, .idx-row { display: grid; grid-template-columns: 2fr 3fr 6fr; gap: var(--gap); align-items: baseline; }
.idx-head {
  font-family: var(--mono); text-transform: uppercase;
  font-size: clamp(11px, 1vw, 16px); letter-spacing: .04em; color: var(--ink-2);
  padding-bottom: 18px; border-bottom: 1px solid rgba(58,21,6,.2);
}
.idx-list { border-top: 0; }
.idx-row {
  font-size: clamp(20px, 2.6vw, 40px); font-weight: 500;
  padding: clamp(14px, 1.4vw, 26px) 0;
  border-bottom: 1px solid rgba(58,21,6,.14);
  transition: color .4s var(--ease), padding-left .5s var(--ease);
}
.idx-row:hover { color: var(--red); padding-left: 14px; }
.idx-row .year { color: var(--ink-2); }
.idx-row:hover .year { color: var(--red); }

/* ============================================================
   METHOD (studio)
   ============================================================ */
.method-item {
  border-top: 1px solid rgba(0,0,0,.85);
  padding-top: clamp(22px, 2.4vw, 40px);
  display: grid;
  grid-template-columns: clamp(88px, 15%, 210px) 1fr;
  gap: clamp(20px, 3vw, 64px);
  align-items: start;
}
.method-item + .method-item { margin-top: clamp(44px, 5.5vw, 96px); }
.method-icon { width: 100%; height: auto; max-height: clamp(150px, 19vw, 292px); object-fit: contain; }
.method-title { font-weight: 700; font-size: clamp(26px, 3.3vw, 49px); line-height: 1; margin-bottom: clamp(18px, 2vw, 34px); }
.method-body { font-weight: 400; font-size: clamp(20px, 2.6vw, 40px); line-height: 1.1; max-width: 22em; }
.method-body .accent { color: var(--red-mono); }

/* ============================================================
   CONTACT
   ============================================================ */
body.contact-bg { background: var(--orange); color: var(--ink-2); }
body.contact-bg .lead { color: var(--ink-2); }
body.contact-bg .lead .u { color: var(--cream); text-decoration: underline; text-underline-offset: .08em; }
body.contact-bg .lead .u:hover { color: var(--ink); }
/* keep contrast on the red hero: red-on-red would vanish */
body.contact-bg .mainnav a:hover,
body.contact-bg .mainnav a.is-active { color: var(--cream); }
body.contact-bg .mainnav a.is-active::after { background: var(--cream); }
body.contact-bg .working .lines a { color: var(--cream); }
/* the red crest would vanish on the red hero → flip it to the light tone */
body.contact-bg .brand .crest { filter: brightness(0) invert(1); }
.contact-hero { background: var(--orange); color: var(--ink-2); }
.contact-hero .lead { color: var(--ink-2); }
.contact-hero .lead .u { color: var(--cream); text-decoration: underline; text-underline-offset: .08em; }
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 64px); }
.contact-card .ph { border-radius: 2px; overflow: hidden; aspect-ratio: 654/632; background:#111; }
.contact-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.contact-card .info { margin-top: clamp(18px, 2vw, 34px); font-weight: 400; color: var(--cream); font-size: clamp(22px, 2.4vw, 45px); line-height: 1.25; }

.contact-big { font-weight: 400; font-size: clamp(40px, 7vw, 110px); line-height: 1.1; }
.contact-big a { color: var(--orange); }
.contact-big a:hover { text-decoration: underline; }

/* ============================================================
   RESEARCH — SOON hero
   ============================================================ */
.soon {
  position: relative;
  background: #050505;
  border-radius: 2px;
  aspect-ratio: 1920 / 1081;
  display: grid; place-items: center;
  overflow: hidden;
}
.soon-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.soon::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.42));
}
.soon .soon-word {
  position: relative; z-index: 2;
  font-weight: 700; color: var(--cream);
  font-size: clamp(64px, 16vw, 300px); letter-spacing: .02em; line-height: 1;
  text-shadow: 0 8px 40px rgba(0,0,0,.4);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot { position: relative; background: var(--orange); color: var(--ink); margin-top: clamp(80px, 10vw, 180px); }
.site-foot.on-cream { background: var(--cream); }
.site-foot .grid { padding-block: clamp(50px, 6vw, 96px) clamp(40px, 4vw, 70px); row-gap: clamp(40px, 5vw, 80px); align-items: start; }
.foot-word { grid-column: 1 / 7; grid-row: 1; }
.foot-word img { width: clamp(180px, 22vw, 408px); height: auto; }
.foot-meta { grid-column: 1 / 6; grid-row: 2; align-self: start; }
.foot-meta .col { display: grid; gap: 10px; font-size: clamp(13px, 1.15vw, 22px); }
.foot-nav { grid-column: 10 / 13; grid-row: 1; }
.foot-nav ul { display: grid; gap: 6px; font-size: clamp(18px, 2vw, 38px); }
.foot-nav a { transition: opacity .35s var(--ease); }
.foot-nav a:hover { opacity: .55; }
.site-foot.on-cream .foot-nav a:hover { opacity: 1; color: var(--red); }
.foot-crest { grid-column: 1 / 3; grid-row: 3; }
.foot-crest img { width: clamp(110px, 12vw, 220px); height: auto; }
.foot-video {
  grid-column: 4 / 13; grid-row: 3;
  aspect-ratio: 1109 / 485; border-radius: 8px; overflow: hidden;
  background: linear-gradient(120deg, #1a1a1a, #000);
  position: relative;
}
.foot-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.foot-video:empty::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.5); font-size: clamp(28px, 4vw, 60px);
}
.foot-bottom { grid-column: 1 / 13; grid-row: 4; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: clamp(13px, 1.15vw, 22px); padding-top: clamp(30px,3vw,50px); }
.site-foot.on-cream .foot-bottom, .site-foot.on-cream .foot-meta, .site-foot.on-cream .foot-nav { color: var(--ink); }

/* ============================================================
   SPACING RHYTHM
   ============================================================ */
.block { padding-block: clamp(56px, 8vw, 150px); }
.block-sm { padding-block: clamp(36px, 5vw, 90px); }
.mt-lead { margin-top: clamp(30px, 3vw, 52px); }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference;
  translate: -50% -50%;
}
.cursor-dot { width: 7px; height: 7px; background: #fff; }
.cursor-ring {
  width: 42px; height: 42px; border: 1px solid #fff;
  transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
}
.cursor-ring.grow { width: 74px; height: 74px; background: rgba(255,255,255,.12); }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ink); color: var(--cream);
  overflow: hidden;
  transition: transform 1s var(--ease);
}
.preloader.done { transform: translateY(-101%); }
/* colour rises to fill the screen as it loads; a second logo layer inside the
   fill keeps the mark visible by flipping it to the light cream tone */
.pl-fill {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: #FF4343; z-index: 2; overflow: hidden; will-change: height;
}
.pl-inner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 44px);
}
/* the copy inside the fill spans the full viewport, anchored to the bottom, so
   it lines up pixel-for-pixel with the base mark and is revealed as red rises */
.pl-inner--fill { inset: auto auto 0 0; width: 100vw; height: 100vh; }
.pl-inner--fill .pl-mark img { filter: brightness(0) invert(1); }
.pl-inner--fill .pl-count { color: var(--cream); }
.pl-mark { width: clamp(96px, 12vw, 190px); height: auto; }
.pl-mark svg, .pl-mark img { width: 100%; height: auto; display: block; }
.pl-count { font-family: var(--mono); font-size: clamp(20px, 3vw, 40px); color: var(--cream); letter-spacing: .06em; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* line-mask reveal for headings */
.line-mask { overflow: hidden; }
.line-mask > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); }
.line-mask.in > span { transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .grid { column-gap: 14px; }
  .brand { position: static; grid-column: 1 / 4; }
  .mainnav { grid-column: 1 / 8; margin-top: 26px; }
  .working { position: static; grid-column: 8 / 13; flex-direction: column; align-items: flex-end; }
  .working .thumb { width: clamp(120px, 34vw, 200px); }

  .c2-9, .c3-11, .c3-10 { grid-column: 1 / 13; }
  .c-right { grid-column: 1 / 13; justify-self: start; text-align: left; }

  /* collapse desktop column placement on inline-positioned blocks */
  .grid > div[style*="grid-column"] { grid-column: 1 / -1 !important; margin-top: 0 !important; align-self: start !important; order: 0 !important; }
  .card-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .card-row .card { margin-top: 0 !important; }
  .pill { width: 100%; justify-content: center; }
  .portrait { max-width: 520px; }

  .contact-cols { grid-template-columns: 1fr; }
  .idx-head, .idx-row { grid-template-columns: 1.2fr 2fr; }
  .idx-row .proj, .idx-head .proj { display: none; }

  .foot-word, .foot-meta, .foot-nav, .foot-crest, .foot-video, .foot-bottom { grid-column: 1 / 13; grid-row: auto; }
  .foot-nav ul { grid-auto-flow: column; justify-content: start; gap: 22px; }
}

@media (max-width: 560px) {
  :root { --pad: 18px; }
  .lead { font-size: clamp(24px, 7vw, 34px); }
  .card { aspect-ratio: 3/4; }
  /* the oversized background type gets a big min on desktop — scale it down on phones */
  .giant { font-size: clamp(64px, 24vw, 200px) !important; }
  .watermark { font-size: clamp(44px, 17vw, 180px); }
  .mf-content { padding-top: clamp(96px, 30vw, 150px); }
  .mf-top { grid-template-columns: 9% 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal, .line-mask > span { transition: none !important; opacity: 1 !important; transform: none !important; }
  .preloader { display: none; }
}