/* ==========================================================================
   Home hero (run 3): 1F, locked 2026-11-09, and the photos still in the running:
   explore/hero-1f (Meadow), explore/bg-2 (Night tower), explore/bg-4 (Peaks).
   Earlier rounds and options are in git history.

   The nav sits transparent over the hero (ink or white to suit the photo) and
   turns solid white when the phone menu opens.
   ========================================================================== */

:root {
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --lime: #CFF24E;     /* run 2, Farmora lime (board b02) */
  --teal: #00463E;     /* run 2, Verden teal (board b01) */
  --paper: #F3F4EE;    /* board b00 drawing paper */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- the nav over a full-bleed hero ---------- */
.nav-over .nav { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; transition: background .3s, border-color .3s; }
.nav-light .nav .brand, .nav-light .nav-links a, .nav-light .nav-links a[aria-current="page"] { color: #fff; }
.nav-light .nav-links a { color: rgba(255, 255, 255, .78); }
.nav-light .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-light .nav-end .nav-cta { background: #fff; color: var(--ink); }
.nav-light .menu-btn { color: #fff; border-color: rgba(255, 255, 255, .45); }
.nav-dark .nav-links a:hover { background: rgba(17, 18, 18, .06); }
.nav-over.menu-open .nav { background: var(--bg); border-bottom-color: var(--line); }
.nav-over.menu-open .nav .brand { color: var(--ink); }
.nav-over.menu-open .menu-btn { color: var(--ink); border-color: var(--line); }
.nav-over.menu-open .nav-end .nav-cta { background: var(--ink); color: #fff; }

/* ---------- the hero: one screen, edge to edge ---------- */
.fb { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; display: grid; isolation: isolate; color: #fff; }
.fb-media { position: absolute; inset: 0; z-index: -2; }
.fb-media img, .fb-media canvas, .fb-media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fb-media img { object-fit: cover; }
.fb-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fb-in { width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--nav-h) + clamp(24px, 5vh, 56px)) var(--gut) clamp(32px, 7vh, 80px); display: grid; }
.fb-copy { display: grid; gap: 22px; justify-items: start; }
.fb-h1 { margin: 0; font-family: var(--display); font-weight: 300; line-height: 1.02; letter-spacing: -.038em; text-wrap: balance; }
.fb-h1 .l2 { display: block; font-weight: 500; }
.fb-sub { margin: 0; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.55; max-width: 58ch; text-wrap: pretty; }
.btn-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 22px; margin-top: 6px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: left; text-wrap: balance; transition: background .2s, color .2s; }
.btn-cta svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease-out); }
.btn-cta:hover svg { transform: translateX(3px); }
.btn-cta--white { background: #fff; color: var(--ink); }
.btn-cta--white:hover { background: #EDEDEA; }

/* entrance: the copy rises in once, then everything stays still */
.fb-js .fb-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.fb-js .fb.in .fb-copy > * { opacity: 1; transform: none; }
.fb-js .fb.in .fb-copy > :nth-child(2) { transition-delay: .12s; }
.fb-js .fb.in .fb-copy > :nth-child(3) { transition-delay: .24s; }
.fb-slow img { transform: scale(1.06); transition: transform 9s var(--ease-out); }
.fb.in .fb-slow img { transform: scale(1); }

/* ==========================================================================
   1F (locked): white type stacked on the left in the vertical middle. The first
   sentence on one line, "and dominate your market." below it in bold. The fog
   darkens toward the left behind the copy; the top stays clear for the nav.
   ========================================================================== */
.v-f { color: #fff; }
.v-f .fb-shade { background: linear-gradient(90deg, rgba(18, 26, 14, .6) 0%, rgba(18, 26, 14, .5) 30%, rgba(18, 26, 14, .3) 50%, rgba(18, 26, 14, .08) 66%, rgba(18, 26, 14, 0) 76%), linear-gradient(0deg, rgba(18, 26, 14, .45) 0%, rgba(18, 26, 14, 0) 40%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
.v-f .fb-in { align-content: center; }
.v-f .fb-copy { max-width: 820px; }
.v-f .fb-h1 { font-size: clamp(40px, 4.8vw, 76px); max-width: 11.5em; text-shadow: 0 1px 28px rgba(10, 14, 8, .18); }
.v-f .fb-sub { color: rgba(255, 255, 255, .9); max-width: 52ch; text-shadow: 0 1px 14px rgba(10, 14, 8, .45); }
/* The first sentence on one line (from 761px up), sized so it ends around 62 to 74% of the screen;
   the shade reaches further right to cover it. Phones wrap it (below). */
.oneline .fb-copy { max-width: none; }
.oneline .fb-h1 { font-size: clamp(32px, 3.5vw, 58px); max-width: none; }
.oneline .fb-h1 .l1 { display: block; white-space: nowrap; }
.oneline .fb-shade { background: linear-gradient(90deg, rgba(18, 26, 14, .62) 0%, rgba(18, 26, 14, .54) 38%, rgba(18, 26, 14, .38) 60%, rgba(18, 26, 14, .14) 76%, rgba(18, 26, 14, 0) 88%), linear-gradient(0deg, rgba(18, 26, 14, .45) 0%, rgba(18, 26, 14, 0) 40%); }

/* Two buttons: the white proof-of-concept button and a liquid-glass "See What We Do". Hard edges like every button. */
.fb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.fb-ctas .btn-cta { margin-top: 0; }
.btn-glass { display: inline-flex; align-items: center; min-height: 54px; padding: 10px 22px; border-radius: var(--radius); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 24px rgba(10, 14, 8, .14); transition: background .2s, border-color .2s; }
.btn-glass:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .12)); border-color: rgba(255, 255, 255, .62); }
.fb-ctas a:focus-visible { outline-color: #fff; }
/* Fade the buttons themselves, not their row, so the glass blur renders during the entrance. */
.fb-js .fb-copy > .fb-ctas { opacity: 1; transform: none; transition: none; }
.fb-js .fb-ctas > a { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), background .2s, border-color .2s; }
.fb-js .fb.in .fb-ctas > a { opacity: 1; transform: none; transition-delay: .24s, .24s, 0s, 0s; }
.fb-js .fb.in .fb-ctas > a + a { transition-delay: .32s, .32s, 0s, 0s; }

/* ---------- the photos (the fill shows while a photo loads) ---------- */
.fb--meadow { background: #E9EBE6; }                              /* hero-1f */
.fb--meadow .fb-media img { object-position: 60% 35%; }
.bg--tower { background: #0A2A4A; }                               /* bg-2 */
.bg--tower .fb-media img { object-position: 50% 40%; }
.bg--peaks { background: #2B302D; }                               /* bg-4 */

/* ==========================================================================
   SMALLER SCREENS
   ========================================================================== */
@media (max-width: 1100px) {
  .v-f .fb-shade { background: linear-gradient(90deg, rgba(18, 26, 14, .62) 0%, rgba(18, 26, 14, .55) 45%, rgba(18, 26, 14, .34) 68%, rgba(18, 26, 14, .1) 86%, rgba(18, 26, 14, 0) 100%), linear-gradient(0deg, rgba(18, 26, 14, .45) 0%, rgba(18, 26, 14, 0) 40%); }
}
@media (max-width: 760px) {
  .fb { min-height: 560px; }
  .fb-h1 { font-size: clamp(30px, 9.2vw, 44px) !important; }
  .oneline .fb-h1 { font-size: min(44px, calc((100vw - 2 * var(--gut)) / 11.4)) !important; }
  .oneline .fb-h1 .l1 { white-space: normal; }
  .fb--meadow .fb-media img { object-position: 72% 50%; }
  .bg--tower .fb-media img { object-position: 56% 50%; }
  .bg--peaks .fb-media img { object-position: 30% 50%; }
  .v-f .fb-shade { background: linear-gradient(180deg, rgba(18, 26, 14, .5) 0%, rgba(18, 26, 14, .56) 60%, rgba(18, 26, 14, .72) 100%); }
}
@media (max-width: 579px) {
  .fb-ctas > a { flex: 1 1 100%; justify-content: space-between; }
}
@media (max-width: 374px) {
  .btn-cta { font-size: 15px; padding-inline: 18px; gap: 12px; }
  .btn-glass { font-size: 15px; padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-js .fb-copy > *, .fb-js .fb-ctas > a, .fb-slow img { transition: none; transform: none; opacity: 1; }
}

/* a phone on its side: the hero is exactly one short screen, with tighter type, so the button stays in view */
@media (max-height: 480px) and (orientation: landscape) {
  .fb { min-height: 0; }
  .fb-in { padding-top: calc(var(--nav-h) + 6px); padding-bottom: 14px; }
  .fb-copy { gap: 12px; }
  .fb-h1, .oneline .fb-h1 { font-size: clamp(24px, 4.5vw, 34px) !important; }
  .fb-sub { font-size: 14.5px; line-height: 1.45; }
  .btn-cta { min-height: 44px; margin-top: 2px; }
}