/* Lazy Cat Media — studio site (lazycat.media)
   Recreated from the approved design handoff. Static, no JS.
   Fonts self-hosted (no third-party CDN) to keep the privacy policy's
   "no cookies / no third-party tracking" claim honest. */

/* ============ Self-hosted fonts ============ */
/* Bricolage Grotesque — variable (opsz + wght). Display / headings. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree — variable (wght). Body. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ Design tokens ============ */
:root {
  --ink: #1A1614;
  --cream: #FBF8F4;
  --cream-2: #F1EAE0;
  --hairline: #E7DECF;
  --muted: #6E655D;
  --legal: #3C3630;
  --orange: #F37536;
  --orange-hover: #E5661F;
  --rust: #B7572C;
  --rust-hover: #9E4A24;

  --on-dark: #FBF8F4;
  --on-dark-muted: rgba(251, 248, 244, 0.72);
  --on-dark-faint: rgba(251, 248, 244, 0.6);
  --on-dark-hairline: rgba(251, 248, 244, 0.14);
  --on-dark-border: rgba(251, 248, 244, 0.4);

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Figtree', sans-serif;

  --wrap: 1120px;
  --wrap-legal: 820px;
  --pad-x: 32px;
}

/* ============ Base / reset ============ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

img { display: block; }

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

/* ============ Shared bits ============ */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--on-dark); }
.brand__badge { width: 40px; height: 40px; border-radius: 50%; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.01em;
}

.body-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 40em;
  text-wrap: pretty;
}

/* two-column editorial pattern */
.col-label { flex: 1 1 220px; display: flex; flex-direction: column; gap: 16px; }
.col-body  { flex: 2.2 1 340px; }
.col-eyebrow { flex: 1 1 220px; }

/* buttons */
.btn-orange {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 15px 30px;
  border-radius: 10px;
}
.btn-orange:hover { background: var(--orange-hover); }

.btn-rust {
  display: inline-block;
  background: var(--rust);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 10px;
}
.btn-rust:hover { background: var(--rust-hover); }

/* ============ Header (homepage, on dark) ============ */
.hero-block { background: var(--ink); color: var(--on-dark); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--on-dark-hairline);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.site-nav a { color: var(--on-dark-muted); text-decoration: none; }
.site-nav a:hover { color: var(--orange); }

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; }
.hero__glow {
  position: absolute;
  top: 50%;
  right: -140px;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(243, 117, 54, 0.16), rgba(243, 117, 54, 0) 62%);
  pointer-events: none;
}
.hero__cat {
  position: absolute;
  top: 50%;
  right: -130px;
  transform: translateY(-50%);
  width: 660px;
  height: auto;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
.hero__inner { position: relative; padding-top: 108px; padding-bottom: 120px; }
.hero__eyebrow { margin: 0 0 28px; }
.hero__title {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 12em;
  text-wrap: balance;
}
.hero__lede {
  margin: 0 0 48px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 33em;
  text-wrap: pretty;
}
.hero__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.link-underline {
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid var(--on-dark-border);
  padding-bottom: 3px;
}
.link-underline:hover { border-bottom-color: var(--orange); }

/* ============ Editorial sections (cream) ============ */
.editorial {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-top: 104px;
  padding-bottom: 104px;
}
.editorial--ruled { border-bottom: 1px solid var(--hairline); }

.pull-quote {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ============ Products ============ */
.products { padding-top: 104px; padding-bottom: 104px; }
.products__head {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-bottom: 64px;
}
.products__intro {
  margin: 0;
  flex: 2.2 1 340px;
  align-self: flex-end;
  font-size: 19px;
  color: var(--muted);
}

.product-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 40px 0 48px;
}
.product-row--flagship { border-top: 2px solid var(--ink); }
.product-row--beta { border-top: 1px solid var(--hairline); }

.product__head {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.product__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 40px);
  letter-spacing: -0.01em;
}
.product__body {
  flex: 2.2 1 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.product__desc { line-height: 1.7; }
.product__kicker {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}

.pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
}
.pill--ink { border: 1.5px solid var(--ink); color: var(--ink); }
.pill--rust { border: 1.5px solid var(--rust); color: var(--rust); }

.link-rust {
  color: var(--rust);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}
.link-rust:hover { border-bottom-color: var(--orange); }

.products__closing {
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 32px;
  color: var(--muted);
  font-size: 16px;
}

/* ============ Services band ============ */
.services { background: var(--cream-2); }
.services__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-top: 88px;
  padding-bottom: 88px;
}
.services__body {
  flex: 2.2 1 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.services__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.services__body .body-text { max-width: 42em; }

/* ============ About ============ */
.about {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-top: 96px;
  padding-bottom: 96px;
}
.about__body {
  flex: 2.2 1 340px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about__lede {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.about__body p:last-child {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}

/* ============ Footer (dark) ============ */
.site-footer { background: var(--ink); color: var(--on-dark); }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 52px;
  padding-bottom: 52px;
}
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__brand img { width: 32px; height: 32px; border-radius: 50%; }
.site-footer__brand span { font-size: 14px; color: var(--on-dark-faint); }
.site-footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  flex-wrap: wrap;
}
.site-footer__links a { color: var(--on-dark-faint); text-decoration: none; }
.site-footer__links a:hover { color: var(--orange); }
.site-footer__links a.is-email { color: var(--orange); font-weight: 600; }
.site-footer__links a.is-email:hover { color: var(--on-dark); }

/* ============ Legal pages (privacy / terms) ============ */
body.legal { line-height: 1.7; }
.wrap-legal { max-width: var(--wrap-legal); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--hairline);
}
.legal-header .brand { color: var(--ink); gap: 12px; }
.legal-header .brand__badge { width: 38px; height: 38px; }
.legal-header .brand__name { font-weight: 700; font-size: 17px; letter-spacing: normal; }
.back-link { color: var(--rust); text-decoration: none; font-weight: 600; font-size: 15px; }
.back-link:hover { color: var(--orange); }

.legal-main { padding-top: 72px; padding-bottom: 112px; }
.legal-eyebrow { margin: 0 0 20px; }
.legal-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing: -0.015em;
}
.legal-date { margin: 0 0 56px; color: var(--muted); font-size: 15px; }

.legal-sections { display: flex; flex-direction: column; gap: 44px; max-width: 44em; }
.legal-sections h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
}
.legal-sections p { margin: 0; color: var(--legal); }
.legal-sections ul {
  margin: 0;
  padding-left: 22px;
  color: var(--legal);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-sections .legal-lead { margin: 0 0 16px; }
.legal-sections .rights-list { gap: 8px; margin: 0 0 16px; }
.legal-sections a { color: var(--rust); font-weight: 600; text-decoration: none; }

.legal-footer { border-top: 1px solid var(--hairline); }
.legal-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 36px;
  padding-bottom: 36px;
  font-size: 14px;
  color: var(--muted);
}
.legal-footer__links { display: flex; align-items: center; gap: 20px; }
.legal-footer__links a { color: var(--muted); text-decoration: none; }
.legal-footer__links a:hover { color: var(--rust); }
.legal-footer__links a.is-back { color: var(--rust); font-weight: 600; }
.legal-footer__links a.is-back:hover { color: var(--orange); }