/* 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;
}
/* every arrow (↗) on a button or arrow link turns to point right (→) on hover */
.btn .arr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.btn:is(:hover, :focus-visible) .arr { transform: rotate(45deg); }
/* Arrows sit 1px below the line's centre. Centred exactly, they line up with the capitals and read
   ~1.3px high next to mostly lowercase labels ("Start a conversation"). Same nudge on .fi-box
   (about.css) and the blog's .arr-box (blog.css). */
.btn .arr, .link-arr .arr { position: relative; top: 1px; }
.btn-teal    { background: var(--teal); color: var(--white); }
.btn-teal:hover { background: var(--teal-2); }
/* the cream outline button fades into the solid teal button on hover */
.btn-outline { background: var(--cream); color: var(--teal); border: 1px solid var(--teal); padding-right: 16px; transition: background-color .25s ease, color .25s ease; }
.btn-outline:hover { background: var(--teal); color: var(--white); }
.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 .3s cubic-bezier(.22, 1, .36, 1); }
.link-arr:is(:hover, :focus-visible) .arr { transform: rotate(45deg); }

/* 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) {
  position: relative;
  padding: 5px 0;
  color: var(--paper);
  font-size: 14px; font-weight: 500; line-height: 22.4px;
}
/* Orange underline on hover. base.js sets --ul-from: moving across from another nav item, the line
   grows in from that side; arriving from outside the nav, it grows from the middle. Leaving, it
   shrinks toward the side the pointer left by. */
.nav-links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1.5px;
  background: var(--red);
  transform: scaleX(0); transform-origin: var(--ul-from, center);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.nav-links > a:not(.btn):focus-visible::after { transform: scaleX(1); }
@media (hover: hover) { .nav-links > a:not(.btn):hover::after { transform: scaleX(1); } }
.nav-links .btn { margin-left: 4px; }
/* Get Nimble: on hover only the arrow moves (see .btn .arr) */
.nav-links .btn-white:hover { background: var(--white); }
.nav-toggle { display: none; }

@media (max-width: 809px) {
  /* Framer reserved a 200px box for the 48px phone navbar, leaving ~140px of dead space above every
     page. The box now fits the bar; the open menu still drops down over the page. */
  .nav-wrap { padding: 12px 8px 0; }
  .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:not(.btn)::after { bottom: 10px; }
  .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 { position: relative; font-family: var(--serif); font-weight: 300; font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; }
/* Orange underline, the same as the nav's: it grows in from the left on hover and slides out to the right after. */
.footer-col a::after, .footer-legal a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.footer-col a:is(:hover, :focus-visible)::after, .footer-legal a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; }
.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 { position: relative; 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; }
}