/* MonoBlock — design tokens and layout.
   Recreated from the .dc.html prototypes; see README.md for the authoritative spec. */

:root {
  --canvas:#F5F3EE; --ink:#1c1b18; --logo:#16253B; --heroink:#1C2E4A;
  --em:#6A8CAE; --mut:#6d6a62; --sub:#9b968b; --hair:#d9d4c8;
  --tile:#edeae2; --tileline:#e3dfd6; --card:#FBFAF7; --eyebrow:#40608a;
  --navy:#1C2E4A; --charcoal:#201f1c; --paleblue:#8FA9C4; --offwhite:#f4f2ec;
  --charmut:#99958c;
  --pad: clamp(32px, 6vw, 96px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(150deg, #0d1626 0%, #1C2E4A 30%, #3d5a7e 55%, #6A8CAE 78%, #8fabc6 100%) fixed;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;  /* replaced Hanken Grotesk after the handoff; sizes are the README values */
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--eyebrow); }
img { max-width: 100%; }

.outer { padding: clamp(24px, 4vw, 64px); }

.sheet {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--canvas);
  box-shadow: 0 30px 80px rgba(6,14,26,0.45);
  padding: 44px var(--pad) 0;
}

/* Full-bleed bands break out of the sheet padding, then re-apply it. */
.band {
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  padding: 100px var(--pad);
}
.band--navy { background: var(--navy); color: #fff; }
/* The hero has no bottom spacing of its own; the band that follows supplies it. */
.hero + .band { margin-top: 100px; }
.band--charcoal { background: var(--charcoal); text-align: center; }
.band--cream { background: var(--canvas); color: var(--ink); }

.section { padding: 100px 0; }
[id] { scroll-margin-top: 40px; }

/* ---- Header ---- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-family: 'Bungee', system-ui, sans-serif; font-weight: 400; font-size: 22px; color: var(--logo); }
.site-nav { display: flex; gap: 24px; font-size: 14px; flex-wrap: wrap; }
.site-nav a { color: var(--mut); }

/* ---- Shared type ---- */
.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 18px;
}
.band--navy .eyebrow { color: rgba(176,198,220,0.9); }
.band--charcoal .eyebrow { color: var(--paleblue); }

.h2 {
  font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; margin: 0;
}
.h2--tight { line-height: 1.25; }
.h1 {
  font-weight: 600; font-size: clamp(2rem, 3.2vw, 2.7rem);
  line-height: 1.2; letter-spacing: -0.015em; margin: 0; color: var(--navy);
}
.lede { font-size: 18px; line-height: 1.7; color: var(--mut); margin: 16px 0 0; }
.band--navy .lede { color: rgba(214,224,234,0.85); }
.measure { max-width: 560px; }

/* ---- Hero ---- */
.hero { position: relative; margin-top: 110px; }
/* Kept under the source's native 340px: this is a raster mark, unlike the spark SVG it
   replaced, so sizing past that only softens it. The offset is a fraction of --pad rather
   than a fixed value, so the mark sits hard right at every width without ever escaping the
   sheet, which a fixed -80px would do once --pad clamps down on narrow viewports. */
.hero__mark {
  position: absolute; right: calc(var(--pad) * -0.8); top: -60px;
  width: min(300px, 34vw); height: auto; opacity: 0.07;
  pointer-events: none; user-select: none;
}
.hero__inner { max-width: 640px; position: relative; }
.hero__title {
  font-weight: 600; font-size: 36px; line-height: 1.25;
  letter-spacing: -0.015em; margin: 0; color: var(--heroink);
}
.hero__title span { color: var(--em); }
.cta-row { display: flex; align-items: center; gap: 16px; margin-top: 64px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 32px; border-radius: 6px; font-weight: 600; font-size: 15px;
  transition: background-color 0.2s ease;
}
.btn--primary {
  background: var(--navy); border: 1px solid #141310; color: var(--offwhite);
  box-shadow: 0 10px 24px rgba(28,20,8,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn--primary:hover { background: #292825; color: var(--offwhite); }
.btn--ghost { background: transparent; border: 1px solid var(--hair); color: var(--ink); }
.btn--ghost:hover { background: rgba(127,127,127,0.08); color: var(--ink); }
.btn--navy { background: var(--navy); border: 1px solid var(--logo); color: var(--offwhite); }
.btn--navy:hover { background: #233650; color: var(--offwhite); }
.btn--email {
  display: inline-flex; align-items: center; background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 28px; border: 1px solid #141310; box-shadow: 0 4px 0 #000; border-radius: 0;
}
.btn--email:hover { background: #fff; color: var(--ink); }

/* ---- Grids of bordered items ---- */
.grid { display: grid; margin-top: 52px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: 44px 56px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: 44px 56px; }
.grid--bios { grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 56px; }

.item { border-top: 1px solid var(--hair); padding-top: 22px; }

/* Level the two rows of "What we do" so the section ends on a straight edge. Scoped to
   #what deliberately: .grid--2 is shared with the founder bios on the homepage and About,
   where the columns are long prose and forcing equal rows would only add dead space. */
#what .grid--2 { grid-auto-rows: 1fr; }
.band--navy .item { border-top-color: rgba(255,255,255,0.3); }
/* The pillar icon and its number share one row. The 12px that used to sit under the number
   moves to the row, so the icon does not push the heading down. */
.item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.item__icon { width: 22px; height: 22px; flex: none; color: var(--navy); }
.item__num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--sub); }
.item h3 { font-weight: 600; font-size: 20px; margin: 0 0 10px; color: var(--ink); }
.band--navy .item h3 { color: #fff; margin-bottom: 8px; }
.item p { font-size: 14.5px; line-height: 1.65; color: var(--mut); margin: 0; }
.band--navy .item p { font-size: 14px; color: rgba(214,224,234,0.85); }

.bio {
  border-top: 1px solid rgba(255,255,255,0.3); padding-top: 24px;
  font-size: 16px; line-height: 1.75; color: rgba(214,224,234,0.85); margin: 0;
}

/* ---- Logo pills (Why MonoBlock) ----
   The supplied logos are full-colour on white plates and mixed in value: India Today is a
   red box, Sony and Dubizzle are near-black. None of them can sit on the navy band directly,
   and knocking them out to white would destroy the brand colours. Each gets its own light
   pill instead, echoing the chip the testimonial already puts behind the RAD Sports mark.
   The plates are pure white, so they blend into the pill.

   Marks range from 1.05:1 (India Today) to 7.45:1 (Oracle), so each pill is a fixed box and
   the logo is contained inside it. That puts them on a common optical baseline, which sizing
   by width alone would not. */
.logos { margin-top: 64px; }
.logos__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(176,198,220,0.9);
  margin-bottom: 20px;
}
.logos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.logos__grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 18px;
  background: #fff;
  /* 6px, matching the buttons. The design system is square everywhere else, so a full pill
     radius reads as borrowed from somewhere other than this site. */
  border-radius: 6px;
}
.logos__grid img {
  max-width: 100%;
  max-height: 30px;
  width: auto;
  height: auto;
  display: block;
}

/* ---- Products ---- */
.products { display: flex; flex-direction: column; gap: 32px; margin-top: 64px; }
.product {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  border: 1px solid var(--tileline); padding: 40px;
}
/* An <a>, so it needs display:block to keep the aspect-ratio box. The border shifts to the
   accent on hover for the same reason the work cards lift: a clickable image with no
   feedback reads as decoration. It matches the hover on the domain link beside it. */
.product__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--tileline);
  transition: border-color 0.2s ease;
}
.product__media:hover { border-color: var(--eyebrow); }
.product--flip .product__media { order: 2; }
.product__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.product__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.product p { font-size: 15px; line-height: 1.7; color: var(--mut); margin: 14px 0 24px; }
.domain {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--sub); white-space: nowrap;
}
.domain:hover { color: var(--eyebrow); }

/* ---- Testimonial ---- */
.quote-wrap { max-width: 720px; margin: 0 auto; }
.band--charcoal .eyebrow { margin-bottom: 24px; }
blockquote {
  font-weight: 500; font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.45;
  letter-spacing: -0.01em; color: var(--offwhite); margin: 0;
}
.attribution { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.attribution img { height: 36px; width: auto; display: block; background: var(--offwhite); padding: 6px 10px; border-radius: 4px; }
.attribution__name { font-size: 14px; color: var(--charmut); }
.attribution__name b { color: var(--offwhite); }

/* ---- Work cards ---- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 32px; margin-top: 64px; }
.case { transition: transform 0.3s ease; }
.case:hover { transform: translateY(-6px); }
.case__frame {
  display: block; background: var(--card); border: 1px solid var(--tileline);
  box-shadow: 0 18px 40px rgba(10,18,30,0.16); padding: 10px 10px 0;
}
.case__shot { aspect-ratio: 16 / 10; border: 1px solid var(--tileline); border-bottom: none; overflow: hidden; }
.case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.case__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 14px;
}
.case__name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
a.case__name:hover { color: var(--eyebrow); }
.case__meta .domain { font-size: 11.5px; }
.case__cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sub); white-space: nowrap;
}
.case__desc { font-size: 16px; line-height: 1.6; color: var(--mut); margin: 6px 0 0; }
.case__link { font-size: 13px; font-weight: 600; color: var(--eyebrow); }
.case__link:hover { color: var(--navy); }
.center-row { display: flex; justify-content: center; margin-top: 64px; }

/* ---- Contact / footer ---- */
.band--charcoal h2 {
  font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.15;
  color: var(--offwhite); margin: 0 0 14px;
}
.band--charcoal p { font-size: 18px; line-height: 1.7; color: var(--charmut); max-width: 420px; margin: 0 auto 32px; }
#contact { padding-top: 96px; padding-bottom: 96px; }
#contact .eyebrow { margin-bottom: 20px; }

.site-footer {
  margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
  background: var(--charcoal); border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px var(--pad); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--charmut);
}
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__nav { display: flex; gap: 20px; }
.site-footer .wordmark { font-size: 15px; color: var(--offwhite); }
.site-footer a { color: var(--charmut); }
.site-footer a:hover { color: var(--paleblue); text-decoration: underline; }

/* ---- Case study page ---- */
.case-hero { margin-top: 90px; }
.back-link { font-size: 13px; font-weight: 600; color: var(--sub); }
.back-link:hover { color: var(--eyebrow); }
.case-hero__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 28px;
}
.case-hero__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub); }
.case-hero__desc { font-size: 17px; line-height: 1.7; color: var(--mut); max-width: 640px; margin: 16px 0 0; }
.case-facts {
  display: flex; gap: 40px; flex-wrap: wrap; margin-top: 36px;
  border-top: 1px solid var(--hair); padding-top: 20px; font-size: 13.5px;
}
.case-facts dt { color: var(--sub); margin-bottom: 4px; }
.case-facts dd { font-weight: 600; margin: 0; }
.case-facts .domain { font-size: 12.5px; font-weight: 600; color: var(--eyebrow); }
.case-facts .domain:hover { color: var(--navy); }
.case-shot-wrap {
  margin-top: 56px; background: var(--card); border: 1px solid var(--tileline);
  box-shadow: 0 18px 40px rgba(10,18,30,0.16); padding: 12px;
}
.case-shot { aspect-ratio: 16 / 9; border: 1px solid var(--tileline); overflow: hidden; }
/* Two supporting screens under the hero shot. Same gap as the sheet's own rhythm, and the
   pair keeps the 16/9 of the shot above so the three read as one set. */
.case-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.case-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.case-story { padding: 88px 0 100px; }
/* Optional pull-stat row above the story. Capped to the same 720px as the prose so the
   two blocks share a right edge; only projects that declare `stats` render it. */
.case-stats {
  list-style: none; margin: 0 0 64px; padding: 0; max-width: 720px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.case-stats li {
  border-top: 1px solid var(--hair); padding-top: 16px;
  font-size: 14.5px; line-height: 1.55; color: var(--mut);
}
.case-story__blocks { display: flex; flex-direction: column; gap: 64px; max-width: 720px; }
.case-story__blocks .eyebrow { margin-bottom: 14px; }
.case-story__blocks p { font-size: 16px; line-height: 1.8; color: var(--ink); margin: 0; }
.case-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 88px; border-top: 1px solid var(--hair); padding-top: 28px;
}
.case-nav a { font-size: 13.5px; font-weight: 600; color: var(--sub); }
.case-nav a:hover { color: var(--eyebrow); }

/* ---- Blog ----
   The post column is 680px rather than the 720px the case studies use: this is continuous
   long-form prose, where the shorter measure keeps the line length readable. */
.post-list { display: flex; flex-direction: column; margin: 72px 0 100px; }
.post-card {
  display: block; border-top: 1px solid var(--hair); padding: 28px 0 32px;
  transition: background-color 0.2s ease;
}
.post-card:last-child { border-bottom: 1px solid var(--hair); }
.post-card:hover { background: rgba(28,46,74,0.03); color: inherit; }
.post-card__meta {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px;
}
.post-card__meta time { color: var(--sub); letter-spacing: 0.08em; }
.post-card__title { font-weight: 600; font-size: 24px; line-height: 1.25; margin: 0; color: var(--ink); }
.post-card__dek { font-size: 16px; line-height: 1.7; color: var(--mut); margin: 10px 0 0; max-width: 620px; }
.post-card__more { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--eyebrow); }

.post-hero { margin-top: 90px; max-width: 680px; }
/* Two classes, so this outranks the .h1 clamp rather than racing it. */
.post-hero .h1 { font-size: 40px; line-height: 1.2; margin-top: 26px; }
/* Byline sits directly under the title, so it carries no rule of its own; the dek below
   is what separates it from the body. */
.post-meta {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px;
  padding-bottom: 26px; border-bottom: 1px solid var(--hair);
  font-size: 12.5px; color: var(--sub);
}

.post { max-width: 680px; padding: 48px 0 100px; }
.post p { font-size: 17px; line-height: 1.8; color: var(--ink); margin: 0 0 24px; }
.post strong { font-weight: 600; }
.post code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--tile); padding: 2px 5px;
}
/* The number sits in the left margin on wide screens and folds back inline when there is
   no room, so the heading never loses its counter. */
.post__step { display: flex; align-items: baseline; gap: 14px; margin: 52px 0 22px; }
/* The number is set like the heading it belongs to, not as a label beside it: same family,
   size, weight and colour, baseline-aligned by the flex row above. */
.post__step-num {
  font-size: 24px; font-weight: 900; line-height: 1.3;
  color: var(--navy); flex: none;
}
/* 900 resolves to Manrope's 800, its heaviest real face, which is why 800 is in the font
   request. Without it the browser would synthesise a fake bold off 700. */
.post__step h2 { font-weight: 900; font-size: 24px; line-height: 1.3; margin: 0; color: var(--navy); }
.post__prompts {
  border-left: 2px solid var(--navy); background: var(--card);
  padding: 22px 26px; margin: 0 0 28px;
}
.post__prompts p {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; line-height: 1.65; color: var(--ink); margin: 0 0 12px;
}
.post__prompts p:last-child { margin-bottom: 0; }
.post__closer { border-top: 1px solid var(--hair); margin-top: 56px; padding-top: 36px; }
.post__closer p:last-child { margin-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .logos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid--3, .grid--2, .grid--bios, .work-grid { grid-template-columns: 1fr; }
  .section, .band { padding-top: 72px; padding-bottom: 72px; }
  .hero { margin-top: 72px; }
  .hero__title { font-size: 28px; }
  .hero__mark { top: -40px; width: min(260px, 55vw); }
  .product { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .product--flip .product__media { order: 0; }
  .case-hero { margin-top: 64px; }
  .case-shots { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .post-hero { margin-top: 64px; }
  .post-hero .h1 { font-size: 30px; margin-top: 20px; }
  .post { padding: 36px 0 72px; }
  .post p { font-size: 16px; }
  .post__step { margin: 40px 0 18px; }
  .post__step h2, .post__step-num { font-size: 22px; }
  .post-card__title { font-size: 21px; }
  .post-list { margin: 56px 0 72px; }
  .case-facts { gap: 24px 32px; }
  .case-story { padding: 64px 0 72px; }
  .case-story__blocks { gap: 44px; }
  .case-stats { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  .site-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-nav { gap: 16px; }
  .cta-row { gap: 12px; }
  .btn { padding: 14px 24px; }
  .logos { margin-top: 44px; }
  .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .logos__grid li { height: 48px; padding: 0 12px; }
  .logos__grid img { max-height: 22px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .case, .btn, .product__media { transition: none; }
  .case:hover { transform: none; }
}