/* ==========================================================================
   Ops Flow — global styles
   Design tokens, resets, shared components, global header + footer.
   Page-specific styles live in their own file (e.g. home.css).
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------- */
/* Product Sans is a licensed font and is not served by Google Fonts, so it is
   self-hosted from assets/fonts/. */
@font-face {
  font-family: 'Product Sans';
  src: url('../fonts/ProductSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('../fonts/ProductSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('../fonts/ProductSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('../fonts/ProductSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Product Sans';
  src: url('../fonts/ProductSans-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* Brand */
  --of-orange: #fe8225;
  --of-orange-deep: #fe2c09;
  --of-orange-light: #fd8123;
  --of-gradient: linear-gradient(90deg, #fe2c09 0%, #fd8123 100%);

  /* Neutrals */
  --of-ink: #0c0000;
  --of-muted: #626262;
  --of-border: #b8b8b8;
  --of-border-soft: #acabaf;
  --of-white: #ffffff;
  --of-dark-btn: #27242c;
  --of-dark-panel: #13142a;
  --of-heading-dim: #b6b5b9;
  --of-heading-dim-2: #acabaf;
  --of-nav: #f2f2f2;

  /* Tints */
  --of-tint: rgba(255, 140, 114, 0.12);
  --of-tint-solid: #ffeada;

  /* Type */
  --font-display: 'Product Sans', 'Poppins', Arial, sans-serif;
  --font-body: 'Poppins', Arial, sans-serif;
  --font-alt: 'Manrope', Arial, sans-serif;
  --font-ui: 'Figtree', Arial, sans-serif;
  --font-outfit: 'Outfit', Arial, sans-serif;

  /* Layout — Figma frame is 1601px: 1473px content + 64px gutters.
     Every length in this project is authored in rem at 1rem = 16px, so the
     numbers still read as the Figma pixels (1473 / 16 = 92.0625rem). */
  --of-container: 92.0625rem;
  --of-gutter: 4rem;
}

/* --------------------------------------------------------------------------
   Design scale

   The Figma frame is 1601px wide; the site renders it at 1300px on desktop.
   Because every length is in rem, that is one number: the root font size.
   1601 -> 1300 is 16px * 1300 / 1601 = 12.99px, and the whole page — type,
   spacing, cards, artwork — scales together, exactly as in the Figma.

   To render at a different width, change 1300 below (1601 = 1:1 with Figma).
   -------------------------------------------------------------------------- */
html { font-size: calc(16px * 1300 / 1601); }

/* Between 1200px and the 1300px design width the same scale simply follows
   the viewport, so the desktop layout never has to break. */
@media (max-width: 1300px) {
  html { font-size: calc(100vw * 16 / 1601); }
}

/* Below 1200px the layout re-flows for tablet/mobile, so type returns to its
   natural size instead of continuing to shrink. */
@media (max-width: 1200px) {
  html { font-size: 16px; }
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--of-ink);
  background: var(--of-white);
  overflow-x: hidden;
}

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

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

ul { margin: 0; padding: 0; list-style: none; }

p,
blockquote,
figure { margin: 0; }

button { font: inherit; }

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

/* ---------- Shared typography -------------------------------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 3.9375rem;
  letter-spacing: -0.034rem;
  text-transform: capitalize;
  color: var(--of-ink);
  margin: 0;
}

.section-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: var(--of-muted);
  margin: 0;
}

.text-gradient {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--of-gradient);
  /* Without this the ramp is sliced across a wrapped heading: line 2 picks up
     where line 1 left off instead of restarting, which reads as the wrong
     colour. clone gives every line its own full gradient. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 624.9375rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.675rem;
  color: var(--of-white);
  white-space: nowrap;
  cursor: pointer;
  filter: drop-shadow(0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.05));
}

.btn--primary { background: var(--of-gradient); }

.btn--dark { background: var(--of-dark-btn); }

/* Figma "Component 2" is a fixed 337 x 59 button: 32 padding, a 20 icon, then a
   245-wide text slot. Short labels keep the icon on the left rather than
   centring the pair. */
.btn--wide {
  width: 21.0625rem;
  max-width: 100%;
  justify-content: flex-start;
}

.btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  flex: none;
}

.btn__icon img { width: 1rem; height: 1rem; margin: 0.125rem; }

/* ---------- Global header ------------------------------------------------ */
.site-header {
  position: absolute;
  top: 1.8125rem;
  left: 0;
  right: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  max-width: 92rem;
  height: 5.0625rem;
  margin: 0 auto;
  padding: 0 0.5rem 0 1rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.16);
  border-radius: 7.5rem;
  background: rgba(20, 16, 27, 0.26);
}

/* Figma 1:5181 — the 223 x 41.7 header logo export */
.site-header__logo {
  display: block;
  width: 13.9375rem;
  height: 2.60619rem;
  flex: none;
}

.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-nav { margin-left: 6.125rem; }

.main-nav__list {
  display: flex;
  align-items: center;
}

.main-nav__list a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 2.02819rem;
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--of-nav);
  white-space: nowrap;
}

.main-nav__list li + li::before {
  content: '';
  display: block;
  flex: none;
  width: max(0.0625rem, 1px);
  height: 1.375rem;
  margin: 0 1.625rem;
  /* Figma peaks this at rgba(207,207,207,0.529). At the 0.812 design scale the
     dividers land on half device pixels, and a half-covered 0.53 line vanishes
     against the dark pill — so the peak is lifted to hold up at any position. */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(207, 207, 207, 0.8) 47.12%,
    rgba(153, 153, 153, 0) 100%);
}

.main-nav__list li {
  display: flex;
  align-items: center;
}

.site-header__cta { margin-left: auto; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 1.375rem;
  height: 0.125rem;
  margin: 0.25rem auto;
  border-radius: 0.125rem;
  background: var(--of-white);
}

/* ---------- Global footer ------------------------------------------------ */
.site-footer {
  padding-bottom: 2.875rem;
  background: #0e0918;
  color: var(--of-white);
}

.site-footer__inner {
  position: relative;
  padding-top: 2.125rem;
}

.site-footer__logo {
  position: relative;
  display: block;
  /* the artwork carries 4px of empty pixels down its left edge, which left the
     mark sitting proud of the text below it — pull it back by exactly that */
  margin-left: -0.25rem;
  width: 19.5625rem;
  height: 3.625rem;
  overflow: hidden;
}

.site-footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: -2.5625rem;
  margin-left: 26.5rem;
}

.site-footer__meta p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.98125rem;
  line-height: 1.5rem;
  color: var(--of-white);
}

.site-footer__meta .sep {
  width: max(0.0625rem, 1px);
  height: 1.375rem;
  background: rgba(255, 255, 255, 0.35);
  flex: none;
}

.site-footer__rule {
  height: max(0.0625rem, 1px);
  margin: 3.0625rem 0 1rem;
  background: rgba(255, 255, 255, 0.15);
}

.site-footer__owner {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.10625rem;
  line-height: 1.75rem;
  letter-spacing: 0.02813rem;
  color: var(--of-white);
  text-align: center;
}

/* ==========================================================================
   Responsive

   Above 1200px the whole design scales with the root font size, so the
   desktop layout never needs to be broken up. Below 1200px it re-flows.
   ========================================================================== */
/* --- Below 1200: nav collapses to a menu button -------------------------- */
@media (max-width: 1200px) {
  :root { --of-gutter: 2.5rem; }

  .site-footer__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
  }
  .site-footer__meta .sep { display: none; }
  .site-footer__rule { margin: 1.75rem 0 1rem; }

  .section-title { font-size: 2.625rem; line-height: 3.125rem; }

  .site-header__inner { height: 4.25rem; padding: 0 0.5rem 0 0.75rem; }
  .site-header__logo { width: 11.875rem; height: 2.25rem; }

  .nav-toggle { display: block; }

  .main-nav {
    position: absolute;
    top: 4.875rem;
    left: 0;
    right: 0;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.16);
    border-radius: 1.5rem;
    background: #14101b;
    display: none;
  }

  .main-nav.is-open { display: block; }

  .main-nav__list { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .main-nav__list a { font-size: 1.0625rem; }
  .main-nav__list li + li::before { display: none; }

  /* main.js moves the CTA into the drawer below 1200 and back out above it,
     so the header bar keeps just the logo and the toggle. */
  .site-header__cta { display: none; }

  /* ---- Footer centres on tablet ----------------------------------------
     Stacked in a full-width column, a left-ragged footer read as unaligned
     against the already-centred owner line. */
  .site-footer__inner { text-align: center; }

  /* auto margins beat the -0.25rem ink correction, which only matters when the
     logo is flush left against the text */
  .site-footer__logo { margin-left: auto; margin-right: auto; }

  .site-footer__meta {
    align-items: center;
    text-align: center;
  }

  .main-nav .site-header__cta {
    display: inline-flex;
    width: 100%;
    margin-top: 1.125rem;
    justify-content: center;
  }
}

/* --- Below 768 ----------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --of-gutter: 1.25rem; }

  .section-title { font-size: 2rem; line-height: 2.5rem; }
  .section-lead { font-size: 1rem; line-height: 1.625rem; }

  .site-header__logo { width: 10.625rem; height: 2rem; }
  .site-footer__logo { width: 13.75rem; height: 2.5625rem; }

  .btn { font-size: 1rem; padding: 0.875rem 1.25rem; }
  .btn__icon { width: 1.125rem; height: 1.125rem; }
  .btn__icon img { width: 0.875rem; height: 0.875rem; }

  /* the fixed 337 slot is wider than the viewport — let it hug instead */
  .btn--wide { width: auto; justify-content: center; }
}