/* ==========================================================================
   TMR — base.css
   Reset, design tokens, self-hosted fonts, typography, layout primitives.
   Edit tokens here; nothing else in the project hard-codes a colour or size.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted woff2
   The "latin" files are the standard Google Fonts latin subset. The
   "latin-ext" files have been cut down to the single character the site
   actually needs from that range — the rupee sign — which takes them from
   ~85 KB each to ~1 KB each. See README.md, "Fonts", to widen them again.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-tight-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-tight-500-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-tight-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-tight-600-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The rupee sign for monospace text. JetBrains Mono has no U+20B9 glyph of its
   own, so this face lends Inter's rupee to the 'JetBrains Mono' family for that
   one character. Without it the sign falls back to whatever monospace font the
   visitor's OS picks, which differs on every platform. The file is the same one
   Inter already uses, so it costs no extra download. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+20B9;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* colour */
  --bg: #08090A;
  --bg-raised: #101113;
  --bg-inset: #0C0D0F;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #F5F5F7;
  --text-muted: #A1A1A6;
  --text-dim: #8A8A90;         /* 4.6:1 on --bg — AA for body copy */
  --accent: #FFFFFF;
  --accent-ink: #08090A;
  /* Warm accent. Not a new colour — it is the FORNO 900 project accent
     promoted to a site-wide token, used only for small marks: mono eyebrows,
     timeline node rings, tick marks and the pricing badge. Buttons stay
     white-on-black. 5.4:1 on --bg, so it is AA for body-sized text. */
  --accent-warm: #E8551F;
  --accent-warm-dim: rgba(232, 85, 31, 0.32);
  --whatsapp: #25D366;
  --whatsapp-ink: #06110A;

  /* per-project accent — overridden on each case-study page */
  --project-accent: #FFFFFF;

  /* type */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing scale — use these only, never arbitrary px */
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;
  --s128: 128px;
  --s180: 180px;

  /* rhythm + layout */
  --section-y: var(--s96);
  --gutter: var(--s24);
  --maxw: 1280px;
  --maxw-wide: 1440px;

  /* radii */
  --r0: 0;
  --r4: 4px;
  --r12: 12px;
  --r20: 20px;
  --r-btn: 999px;

  /* elevation — two levels only */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 24px 64px rgba(0, 0, 0, 0.5);

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-nav: 200ms;
  --t-accordion: 250ms;
  --t-reveal: 500ms;

  /* chrome */
  --nav-h: 64px;
  --bar-h: 65px;   /* 1px hairline + 8 + 48px buttons + 8 — the sticky call bar on phones */
  color-scheme: dark;
}

@media (min-width: 768px) {
  :root { --section-y: 140px; --gutter: var(--s48); }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--s64); }
}
@media (min-width: 1280px) {
  :root { --section-y: var(--s180); }
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s24));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: var(--r4);
}

::selection { background: var(--text); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 18ch;
}

.h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 22ch;
}

.h3 {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 48ch;
  text-wrap: pretty;
}

.body { max-width: 62ch; text-wrap: pretty; }
.body + .body { margin-top: var(--s16); }

.small { font-size: 0.875rem; line-height: 1.5; }

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (min-width: 768px) { .mono { font-size: 0.75rem; } }

.eyebrow {
  display: block;
  margin-bottom: var(--s16);
}

.eyebrow--accent { color: var(--project-accent); }

/* Text link with an arrow glyph (SVG — the font subsets omit U+2192) */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  font-weight: 500;
  color: var(--text);
  min-height: 44px;
  transition: gap var(--t-fast) ease, opacity var(--t-fast) ease;
}
.arrow-link .icon { flex: none; transition: transform var(--t-fast) ease; }
.arrow-link:hover .icon { transform: translateX(3px); }

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; }

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--maxw-wide) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--raised { background: var(--bg-raised); }

.section__head { margin-bottom: var(--s48); }
@media (min-width: 768px) { .section__head { margin-bottom: var(--s64); } }
.stack-24 > * + * { margin-top: var(--s24); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12);
  align-items: center;
}

/* Hairline-separated rows — the site's default list pattern (never cards) */
.rows { border-top: 1px solid var(--border); }
.rows > li, .rows > .row {
  border-bottom: 1px solid var(--border);
  padding-block: var(--s24);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s8);
  left: var(--s8);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--s12) var(--s16);
  border-radius: var(--r-btn);
  font-weight: 500;
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   6. MOTION — fade + 12px rise, once, on entry
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* No JS? Never leave content hidden. */
.no-js .reveal { opacity: 1; transform: none; }

/* Reduced motion is handled by collapsing the duration tokens to ~0 and
   switching off the handful of transform-based affordances. No !important
   is needed because every transition on the site reads one of these tokens. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-nav: 0.01ms;
    --t-accordion: 0.01ms;
    --t-reveal: 0.01ms;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .arrow-link:hover .icon { transform: none; }
}