/* ==========================================================================
   base.css — reset, design tokens, global typography
   Kings Pro Media (KPM) · Video Production landing page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — Mango Grotesque (display) self-hosted from the official package
   (Rajesh Rajput · free for commercial use). Satoshi (body) & Kanit (buttons)
   are loaded via <link> in index.html.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Mango Grotesque";
  src: url("../assets/fonts/MangoGrotesque-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mango Grotesque";
  src: url("../assets/fonts/MangoGrotesque-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mango Grotesque";
  src: url("../assets/fonts/MangoGrotesque-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mango Grotesque";
  src: url("../assets/fonts/MangoGrotesque-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mango Grotesque";
  src: url("../assets/fonts/MangoGrotesque-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design tokens (mapped from the Figma file)
   -------------------------------------------------------------------------- */
:root {
  /* Colour ---------------------------------------------------------------- */
  --color-bg: #101010;            /* page background (Figma 04_Video Production) */
  --color-bg-gray: #202020;       /* alternating lighter section band */
  --color-bg-alt: #0b0b0b;        /* subtly darker band */
  --color-surface: #1a1a1a;       /* cards */
  --color-surface-2: #161616;     /* alt cards / insets */
  --color-accent: #c9a24b;        /* brand gold (from the KPM logo) */
  --color-accent-hover: #dbb765;  /* brighter gold on hover */
  --color-accent-2: #c9a24b;      /* gold — stat labels */
  --color-accent-tint: rgba(201, 162, 75, 0.14); /* stat label chip bg */
  --color-on-accent: #17130a;     /* dark text/icons on gold fills */
  --color-red: #ff3116;           /* secondary hot accent — primary CTAs */
  --color-red-hover: #e32a10;
  --color-amber: #ffa600;         /* service "+" list markers */
  --color-white: #ffffff;         /* White/Neutral 01 */
  --color-text: #ffffff;
  --color-muted: #b2b2b2;         /* secondary text */
  --color-muted-dark: #7c7c7c;    /* tertiary text */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.24);

  /* Typography ------------------------------------------------------------ */
  /* Figma's real display typeface, self-hosted (Oswald only as a fallback). */
  --font-display: "Mango Grotesque", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-button: "Kanit", var(--font-body);

  /* Fluid type scale */
  --fs-body: 1rem;                /* 16px */
  --fs-small: 0.8125rem;          /* 13px */
  --fs-lead: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  --fs-h2: clamp(2.5rem, 6.25vw, 10rem);   /* Figma section titles: 120px @1920 */
  --fs-h3: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-display: clamp(4rem, 12vw, 21.5rem);

  /* Layout — Figma frame is 1920px wide with two content widths:
     · text column   1290 / 1920 ≈ 67.2%  (about, services, testimonials, stats, blog, footer)
     · media/wide     1810 / 1920 ≈ 94.3%  (hero, brands, categories, awards, team, gallery, nav) */
  --container: 1290px;        /* fallback cap below the desktop breakpoint */
  --container-wide: 1810px;   /* fallback cap below the desktop breakpoint */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Radius ---------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 0.28s;
}

/* --------------------------------------------------------------------------
   Reset / normalize (minimal)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500; /* Satoshi Medium — Figma body baseline */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Global typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 0.9; /* Figma: 108/120 */
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  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;
  left: 1rem;
  top: -3rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  transition: top var(--speed) var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}