/* Shared styles for the pages that mirror the live bespokelabs.ai (Framer) site.
   Page styles live next to this file: home.css, about.css, contact.css, blog.css, legal.css.
   Breakpoints match Framer's: phone < 810px, tablet 810–1439px, desktop >= 1440px. */

@font-face {
  font-family: "GT Alpina Light";
  src: url("../../fonts/live/gt-alpina-light.27f9edd371.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Inter v4 (SIL Open Font License, see fonts/live/inter-LICENSE.txt): one variable file per
   script range, weights 300-700, as Google Fonts serves it. Self-hosted to avoid a third-party
   request before first paint. */
@font-face {
  font-family: "Inter";
  src: url("../../fonts/live/inter-latin.c940764593.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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";
  src: url("../../fonts/live/inter-latin-ext.a28eb6d3cc.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "MD IO";
  src: url("../../fonts/live/md-io.ea35d8ad52.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal: #11484e;        /* ink, dark sections, primary button */
  --teal-2: #235458;
  --teal-mid: #446b6e;    /* secondary ink */
  --sage: #bcccc8;
  --cream: #f0ece4;       /* page background */
  --paper: #f7f4ed;       /* cards, chips, text on teal */
  --stone: #cfcac2;       /* hairlines, announcement bar */
  --muted: #625f5d;       /* labels */
  --red: #f44029;         /* brackets and markers */
  --white: #fff;

  --serif: "GT Alpina Light", "GT Alpina", Georgia, serif;
  --sans: Inter, "Inter Placeholder", system-ui, -apple-system, sans-serif;
  --mono: "MD IO", ui-monospace, monospace;

  --gutter: 40px;
  --max: 1920px;
}
@media (max-width: 1439px) { :root { --gutter: 32px; } }
@media (max-width: 809px)  { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--teal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Like Framer, a short page still fills the window and the footer sits at the bottom. */
body { min-height: 100vh; display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
[id] { scroll-margin-top: 88px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--teal); color: var(--paper); padding: 8px 14px; font-size: 14px;
}
.skip:focus { top: 12px; }
.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;
}

/* ── type ── */
.serif { font-family: var(--serif); font-weight: 300; }
.mono  { font-family: var(--mono); font-weight: 400; }
.brk   { color: var(--red); }

/* small mono label with a dotted underline, e.g. "What We Do" */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-color: var(--stone);
  text-underline-offset: 3px;
}

/* boxed mono tag, e.g. "ICLR 2026" or "For Talent" (add .chip-red / .chip-teal for the coloured left edge) */
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 12px; line-height: 14.4px; letter-spacing: 0.6px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--teal-mid);
  padding: 5px 7px 4px;
  white-space: nowrap;
}
.chip-red  { box-shadow: inset 3px 0 0 var(--red); padding-left: 9px; }
.chip-teal { box-shadow: inset 3px 0 0 var(--teal); padding-left: 9px; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 40px; padding: 8px 8px 8px 14px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.7;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn .arr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; }
.btn-teal    { background: var(--teal); color: var(--white); }
.btn-teal:hover { background: var(--teal-2); }
.btn-outline { background: var(--cream); color: var(--teal); border: 1px solid var(--teal); padding-right: 16px; }
.btn-outline:hover { background: var(--paper); }
.btn-white   { background: var(--white); color: var(--teal); }
.btn-white:hover { background: var(--paper); }

/* text link with a trailing arrow, e.g. "See open roles ↗" */
.link-arr {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--teal);
}
.link-arr .arr { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; transition: transform .2s ease; }
.link-arr:hover .arr { transform: translate(2px, -2px); }

/* square grid backdrop used behind cards and stat strips */
.grid-bg {
  background-color: var(--cream);
  background-image:
    linear-gradient(to right, rgba(207, 202, 194, .7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(207, 202, 194, .7) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ── announcement bar ── */
.announce {
  background: var(--stone);
  color: var(--teal);
  padding: 10px;
  text-align: center;
  font-size: 12px; font-weight: 500; line-height: 15.6px;
}
.announce a { text-decoration: underline; text-underline-offset: 2px; }

/* ── nav: sticky teal bar inset from the page edges ── */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 24px 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  position: relative;
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 4px 8px 4px 20px;
  background: var(--teal);
}
.nav-logo { display: block; color: var(--paper); }
.nav-logo .logo { width: 148px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links > a[data-nav="contact"] { margin-left: 8px; }
.nav-links > a:not(.btn) {
  padding: 5px 0;
  color: var(--paper);
  font-size: 14px; font-weight: 500; line-height: 22.4px;
  transition: opacity .2s ease;
}
.nav-links > a:not(.btn):hover { opacity: .7; }
.nav-links .btn { margin-left: 4px; }
.nav-toggle { display: none; }

@media (max-width: 809px) {
  /* Framer's phone navbar box is 200px tall and in the page flow, so phone content starts below it */
  .nav-wrap { padding: 12px 8px 0; height: 200px; }
  .nav { height: 48px; padding: 0 0 0 20px; flex-wrap: wrap; }
  .nav-logo .logo { width: 124px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 60px; height: 48px; padding: 0 16px;
  }
  .nav-toggle span { display: block; height: 1.5px; background: var(--paper); transition: transform .25s ease; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 64px 20px 24px;
    background: var(--teal);
  }
  .nav-links > a:not(.btn) { font-size: 16px; padding: 12px 0; }
  .nav-links > a[data-nav="contact"] { margin-left: 0; }
  .nav-links .btn { margin: 28px 0 0; height: 40px; font-size: 16px; }
  .nav.is-open { height: auto; }
  .nav.is-open .nav-links { display: flex; }
  .nav.is-open .nav-logo, .nav.is-open .nav-toggle { position: relative; z-index: 1; }
  .nav.is-open .nav-toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .nav.is-open .nav-toggle span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }
}

/* ── footer ── */
/* The footer starts 200px low and slides up to its place as the page bottom comes into view (as on live).
   The clip keeps the shifted footer from adding scroll height. */
.footer-clip { overflow: clip; }
.footer { will-change: transform; }
.footer { background: var(--teal); color: var(--paper); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 56px 40px 32px; min-height: 400px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; }
.footer-brand { display: flex; align-items: flex-start; gap: 10px; }
.footer-mark { flex: none; width: 54px; }
.footer-mark .mark { width: auto; height: 40px; }
.footer-tag { font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; text-wrap: balance; }
@media (min-width: 1440px) { .footer-tag { font-size: 20.8px; line-height: 22.88px; letter-spacing: -0.208px; } }
.footer-cols { display: flex; gap: 64px; }
.footer-k { font-family: var(--mono); font-size: 12px; line-height: 12px; text-transform: uppercase; color: rgba(255, 255, 255, .3); margin-bottom: 24px; }
.footer-col ul { display: flex; flex-direction: column; gap: 13px; }
.footer-col li { display: flex; align-items: center; gap: 8px; }
.footer-col a { font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; transition: opacity .2s ease; }
.footer-col a:hover { opacity: .7; }
.footer-col .up { font-family: var(--sans); font-size: 12px; margin-left: 2px; }
.tag-new { font-family: var(--sans); font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: .4px; text-transform: uppercase; background: var(--paper); color: var(--teal); padding: 2px 3px; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12px; line-height: 12px; text-transform: uppercase; color: rgba(255, 255, 255, .3); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer-legal a { color: rgba(255, 255, 255, .6); transition: color .2s ease; }
.footer-legal a:hover { color: var(--paper); }

@media (max-width: 809px) {
  .footer-inner { min-height: 0; padding: 32px 16px 24px; gap: 61px; }
  .footer-mark { width: 48px; }
  .footer-mark .mark { height: 33px; }
  .footer-top { flex-direction: column; gap: 48px; }
  .footer-cols { flex-wrap: wrap; gap: 33px 40px; }
  .footer-base { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}