/* The landing's own rules around the Spartan home page (2 November 2026). Hand-written; the embed build never
   touches it. The page is the Spartan app's code (Landing/src/framer), rendered under #main; rules about the page's
   own layout live in its components, and these cover how it sits in the Turbo Labs site: the reset Framer assumes,
   the nav, the theme palette, the hero hold and the label type. ?parity disables this sheet. */

/* Framer's page reset, which its published pages carry in the head and its components assume: border-box sizing,
   no default margins on text, the form controls' base font. Scoped to #main so the Turbo Labs nav keeps its own. */
html, body { box-sizing: border-box; margin: 0; padding: 0; }
#main { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(#main) * { box-sizing: border-box; -webkit-font-smoothing: inherit; }
:where(#main) :is(h1, h2, h3, h4, h5, h6, p, figure) { margin: 0; }
:where(#main) :is(input, textarea, select, button) { font-family: sans-serif; font-size: 12px; }

/* Spartan's own nav and Hire Team button: the site nav replaces them. They stay in the markup, hidden, because
   removing them would force Framer to redraw the page on the client. */
body.page-landing #main .framer-1qu0ub1-container,
body.page-landing #main .framer-1ord3gc-container { display: none; }

/* Spartan's palette on the site's (2 November 2026). Framer colours the page through its --token-* variables; every
   one is an alias here, so the page takes the site's light and dark themes with the nav and every other page.
   Spartan's colours do two jobs each (#1a1a1a is ink on its light surfaces and the ground of its dark bands; #fff is
   the page and the ink on those bands), so the aliases go through five roles, set per zone:

     --sp-ink    #1a1a1a and its alpha steps      --sp-card    #f0f0f0, the cards
     --sp-paper  #fff and its alpha steps         --sp-card-2  #242424 and #292828, cards on a dark ground
     --sp-grey   #d6d6d6                          (#000 and #0a0a0a are night everywhere)

   The page zone inverts with the theme: in dark mode the page is the ground, the cards a step above it and the ink
   light. Stage zones (the dark bands, the text and gradient over the hero photograph, the footer photograph) stay dark
   in both themes, on the site's --stage tokens, so photographs, the line drawings and the logos made for a dark ground
   keep it. Framer declares its tokens on #main (its body rule, scoped by the embed build), so the aliases are declared
   on #main and again on every zone, where they resolve against that zone's roles. */
body.page-landing {
  --sp-ink: var(--ink); --sp-paper: var(--ground); --sp-card: var(--ground-3); --sp-card-2: var(--inverse-ground-3);
  --sp-grey: color-mix(in srgb, var(--ink) 16%, var(--ground));
}
/* Stage zones: the Our Works to Capabilities band, the video, the Vision band, the strip that rounds a band's foot,
   the hero photograph's caption, logos and shade, the featured (Pro) pricing card over its dark photograph, the
   footer, and the founder's band. */
body.page-landing #main :is(.framer-1r64yog, .framer-s7sf2i, .framer-1gchb34, .framer-uric3t, .framer-ksfjr4, .framer-1entcjc, .framer-fgmqry-container, .framer-no1ell-container, .turbo-founder-band) {
  --sp-ink: var(--stage); --sp-paper: var(--stage-ink); --sp-card: var(--stage-ink); --sp-card-2: var(--stage-2);
  --sp-grey: color-mix(in srgb, var(--stage-ink) 84%, var(--stage));
}
/* Page zones inside a band: the Our Works panel, the strip under the Vision band's rounded foot (Pricing's) and the
   strip under the news ticker's rounded foot at the top of the video. */
body.page-landing #main :is(.framer-1jrwazz, .framer-1lp9ggh, .framer-8k74u5) {
  --sp-ink: var(--ink); --sp-paper: var(--ground); --sp-card: var(--ground-3); --sp-card-2: var(--inverse-ground-3);
  --sp-grey: color-mix(in srgb, var(--ink) 16%, var(--ground));
}
body.page-landing, body.page-landing #main,
body.page-landing #main :is(.framer-1r64yog, .framer-s7sf2i, .framer-1gchb34, .framer-uric3t, .framer-ksfjr4, .framer-1entcjc, .framer-fgmqry-container, .framer-no1ell-container, .turbo-founder-band, .framer-1jrwazz, .framer-1lp9ggh, .framer-8k74u5, .framer-1w8qob2 .framer-ErT1I) {
  --token-2ddcea38-bb42-4986-8e36-4a45eb0c9596: var(--sp-ink); /* #1a1a1a */
  --token-7bbf4f4d-a8fb-4fe0-a164-a8cf2fd0048a: var(--sp-paper); /* #fff */
  --token-8bd3e8bd-c381-4ace-be55-ac65455a2545: color-mix(in srgb, var(--sp-ink) 60%, transparent); /* #1a1a1a99 */
  --token-33836810-f1ab-4f26-b82a-4305c66cf00f: color-mix(in srgb, var(--sp-ink) 30%, transparent); /* #1a1a1a4d */
  --token-d3af06b0-5cad-4c44-a925-0c22a061eaca: var(--sp-card-2); /* #242424 */
  --token-d3bc1994-3a14-4152-a790-1b3882b755dc: color-mix(in srgb, var(--sp-ink) 40%, transparent); /* #1a1a1a66 */
  --token-4a25c684-3670-4b2a-bae7-5c23bcc7c2d3: color-mix(in srgb, var(--sp-ink) 10%, transparent); /* #1a1a1a1a */
  --token-bde2e395-c009-40f0-b913-fdb5327aebb7: color-mix(in srgb, var(--sp-ink) 6%, transparent); /* #1a1a1a0f */
  --token-1273543a-0813-435f-bd61-d8398d80d684: var(--sp-card); /* #f0f0f0 */
  --token-9087304d-dc78-44e9-8bf8-71fff2eb7ef1: color-mix(in srgb, var(--sp-ink) 20%, transparent); /* #1a1a1a33 */
  --token-bbaf1060-f1d7-4624-b075-babee38ad93f: color-mix(in srgb, var(--sp-ink) 3%, transparent); /* #1a1a1a08 */
  --token-68cb5350-d7de-4cae-b85f-81a8e1f86d99: color-mix(in srgb, var(--sp-paper) 50%, transparent); /* #ffffff80 */
  --token-0449e3ad-ea85-4da4-854b-661563415781: color-mix(in srgb, var(--sp-paper) 40%, transparent); /* #fff6 */
  --token-1c899963-4323-4f4a-be40-f1a16bdaf0d9: color-mix(in srgb, var(--sp-paper) 30%, transparent); /* #ffffff4d */
  --token-8d5270b2-3ef8-45f9-aca7-edfb9ba84dc2: color-mix(in srgb, var(--sp-paper) 20%, transparent); /* #fff3 */
  --token-0cf17914-9942-4dff-aad2-e59c848a43bb: color-mix(in srgb, var(--sp-paper) 10%, transparent); /* #ffffff1a */
  --token-f215d3fa-f230-4c8a-bca2-b70d1dd8eb16: color-mix(in srgb, var(--sp-paper) 6%, transparent); /* #ffffff0f */
  --token-70621049-13a0-49bc-81dd-0fd3bbfd7856: color-mix(in srgb, var(--sp-paper) 80%, transparent); /* #fffc */
  --token-41350212-a7bf-4726-bdc8-a9ad66e2bba8: color-mix(in srgb, var(--sp-paper) 4%, transparent); /* #ffffff0a */
  --token-43e12fc0-2708-44e1-b97f-f643a4a4a7dc: color-mix(in srgb, var(--sp-paper) 3%, transparent); /* #ffffff08 */
  --token-3d0dce7f-24c3-499c-99ff-039a98540bfd: color-mix(in srgb, var(--sp-ink) 80%, transparent); /* #1a1a1acc */
  --token-12bdb585-eb60-40ed-9a8e-f96b7019ea83: color-mix(in srgb, var(--sp-ink) 70%, transparent); /* #1a1a1ab3 */
  --token-5538b25a-ad9a-416e-9d06-e53d4977ce82: color-mix(in srgb, var(--sp-paper) 70%, transparent); /* #ffffffb3 */
  --token-d6ac6310-44f8-463f-a50e-6b3aae01ac2d: var(--sp-card-2); /* #292828 */
  --token-cb03b36a-fc35-49b5-9cdf-dbfb396d4164: var(--sp-grey); /* #d6d6d6 */
  --token-15071ff6-b43a-413c-ac70-6d0e32bfc698: var(--night); /* #000 */
  --token-121e2cc5-898f-445c-b734-97130960abd9: var(--night); /* #0a0a0a */
  --token-c7c2b276-2b40-4e00-95e5-efbbb0ba2d9b: color-mix(in srgb, var(--sp-paper) 20%, transparent); /* #fff3 */
}
/* The loop sits on the Services panel, a page zone. It and its step list are drawn for a dark band in the paper token
   and tints mixed from it, so inside the loop the paper and ink tokens trade places and the tints, and the white
   literals Framer writes for frames and fills, mix from the ink. Its secondary button paints with the card token; its
   icon is drawn in the ink token and inverted by the button, which after the trade is what a light box needs. */
body.page-landing #main .framer-1jrwazz .framer-12ikk9e {
  --token-7bbf4f4d-a8fb-4fe0-a164-a8cf2fd0048a: var(--sp-ink);
  --token-2ddcea38-bb42-4986-8e36-4a45eb0c9596: var(--sp-paper);
  --token-0449e3ad-ea85-4da4-854b-661563415781: color-mix(in srgb, var(--sp-ink) 45%, transparent);
  --token-8d5270b2-3ef8-45f9-aca7-edfb9ba84dc2: color-mix(in srgb, var(--sp-ink) 16%, transparent);
  --token-0cf17914-9942-4dff-aad2-e59c848a43bb: color-mix(in srgb, var(--sp-ink) 12%, transparent);
  --token-f215d3fa-f230-4c8a-bca2-b70d1dd8eb16: color-mix(in srgb, var(--sp-ink) 5%, transparent);
  --token-41350212-a7bf-4726-bdc8-a9ad66e2bba8: color-mix(in srgb, var(--sp-ink) 4%, transparent);
  --token-43e12fc0-2708-44e1-b97f-f643a4a4a7dc: color-mix(in srgb, var(--sp-ink) 3%, transparent);
  --token-d3af06b0-5cad-4c44-a925-0c22a061eaca: var(--sp-card);
}
body.page-landing #main .framer-1jrwazz .framer-12ikk9e :is([style*="--border-color:rgba(255, 255, 255, 0.1)"], [style*="--border-color: rgba(255, 255, 255, 0.1)"]) { --border-color: color-mix(in srgb, var(--sp-ink) 12%, transparent) !important; }
body.page-landing #main .framer-1jrwazz .framer-12ikk9e :is([style*="--border-color:rgba(255, 255, 255, 0.2)"], [style*="--border-color: rgba(255, 255, 255, 0.2)"]) { --border-color: color-mix(in srgb, var(--sp-ink) 18%, transparent) !important; }
body.page-landing #main .framer-1jrwazz .framer-12ikk9e :is([style*="--border-color:rgba(255, 255, 255, 0.4)"], [style*="--border-color: rgba(255, 255, 255, 0.4)"]) { --border-color: color-mix(in srgb, var(--sp-ink) 40%, transparent) !important; }
body.page-landing #main .framer-1jrwazz .framer-12ikk9e :is([style*="background-color:rgba(255, 255, 255, 0.1)"], [style*="background-color: rgba(255, 255, 255, 0.1)"]) { background-color: color-mix(in srgb, var(--sp-ink) 6%, transparent) !important; }
:root body.page-landing { background: var(--ground); }

/* The hero's "What is forward-deployed engineering?" card is glass over a light photograph. In light mode it keeps
   the paper tones; in dark mode it turns with the page: the card takes the page's dark tokens back and the photograph
   under it dims to a dark, faintly tinted glass, so the title and the arrow read in the light ink. */
body.page-landing #main .framer-1w8qob2 .framer-ErT1I {
  --sp-ink: var(--obsidian); --sp-paper: var(--turbo-paper); --sp-card: color-mix(in srgb, var(--obsidian) 5%, var(--turbo-paper));
  --sp-card-2: var(--obsidian); --sp-grey: color-mix(in srgb, var(--obsidian) 16%, var(--turbo-paper));
}
/* Dark is the default unless the theme is set light, or the system prefers light and no theme is set (as in
   landing-brand.css), so the card's dark rule takes the same two conditions. */
:root:not([data-theme="light"]) body.page-landing #main .framer-1w8qob2 .framer-ErT1I {
  --sp-ink: inherit; --sp-paper: inherit; --sp-card: inherit; --sp-card-2: inherit; --sp-grey: inherit;
}
:root:not([data-theme="light"]) body.page-landing #main .framer-1w8qob2 .framer-ErT1I .framer-d7tyka { filter: brightness(0.26) saturate(1.25); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body.page-landing #main .framer-1w8qob2 .framer-ErT1I {
    --sp-ink: var(--obsidian); --sp-paper: var(--turbo-paper); --sp-card: color-mix(in srgb, var(--obsidian) 5%, var(--turbo-paper));
    --sp-card-2: var(--obsidian); --sp-grey: color-mix(in srgb, var(--obsidian) 16%, var(--turbo-paper));
  }
  :root:not([data-theme]) body.page-landing #main .framer-1w8qob2 .framer-ErT1I .framer-d7tyka { filter: none; }
}

/* Colours Framer writes as literals rather than tokens (some fills, pills and borders, in the server markup and in
   the style React writes): the same roles, matched in both serialisations of the style attribute. */
body.page-landing #main [style*="background-color:rgb(255, 255, 255)"], body.page-landing #main [style*="background-color: rgb(255, 255, 255)"] { background-color: var(--sp-paper) !important; }
body.page-landing #main [style*="background-color:rgba(255, 255, 255, 0.1)"], body.page-landing #main [style*="background-color: rgba(255, 255, 255, 0.1)"] { background-color: color-mix(in srgb, var(--sp-paper) 10%, transparent) !important; }
body.page-landing #main [style*="background-color:rgb(26, 26, 26)"], body.page-landing #main [style*="background-color: rgb(26, 26, 26)"] { background-color: var(--sp-ink) !important; }
body.page-landing #main [style*="background-color:rgb(23, 23, 23)"], body.page-landing #main [style*="background-color: rgb(23, 23, 23)"] { background-color: var(--sp-ink) !important; }
body.page-landing #main [style*="background-color:rgba(0, 0, 0, 0.1)"], body.page-landing #main [style*="background-color: rgba(0, 0, 0, 0.1)"] { background-color: color-mix(in srgb, var(--sp-ink) 10%, transparent) !important; }
body.page-landing #main [style*="background-color:rgba(22, 22, 22, 0.06)"], body.page-landing #main [style*="background-color: rgba(22, 22, 22, 0.06)"] { background-color: color-mix(in srgb, var(--sp-ink) 6%, transparent) !important; }
body.page-landing #main [style*="background-color:rgb(224, 224, 224)"], body.page-landing #main [style*="background-color: rgb(224, 224, 224)"] { background-color: color-mix(in srgb, var(--sp-ink) 12%, var(--sp-paper)) !important; }
body.page-landing #main [style*="--border-color:rgb(219, 219, 219)"], body.page-landing #main [style*="--border-color: rgb(219, 219, 219)"] { --border-color: color-mix(in srgb, var(--sp-ink) 14%, var(--sp-paper)) !important; }
body.page-landing #main [style*="--border-color:rgb(0, 0, 0)"], body.page-landing #main [style*="--border-color: rgb(0, 0, 0)"] { --border-color: var(--sp-ink) !important; }
body.page-landing #main [style*="--border-color:rgb(23, 23, 23)"], body.page-landing #main [style*="--border-color: rgb(23, 23, 23)"] { --border-color: var(--sp-ink) !important; }
body.page-landing #main [style*="--border-color:rgba(22, 22, 22, 0.3)"], body.page-landing #main [style*="--border-color: rgba(22, 22, 22, 0.3)"] { --border-color: color-mix(in srgb, var(--sp-ink) 30%, transparent) !important; }
body.page-landing #main [style*="--border-color:rgba(22, 22, 22, 0.1)"], body.page-landing #main [style*="--border-color: rgba(22, 22, 22, 0.1)"] { --border-color: color-mix(in srgb, var(--sp-ink) 10%, transparent) !important; }
body.page-landing #main [style*="--border-color:rgba(255, 255, 255, 0.4)"], body.page-landing #main [style*="--border-color: rgba(255, 255, 255, 0.4)"] { --border-color: color-mix(in srgb, var(--sp-paper) 40%, transparent) !important; }
body.page-landing #main [style*="--border-color:rgba(255, 255, 255, 0.2)"], body.page-landing #main [style*="--border-color: rgba(255, 255, 255, 0.2)"] { --border-color: color-mix(in srgb, var(--sp-paper) 20%, transparent) !important; }
body.page-landing #main [style*="--border-color:rgba(255, 255, 255, 0.1)"], body.page-landing #main [style*="--border-color: rgba(255, 255, 255, 0.1)"] { --border-color: color-mix(in srgb, var(--sp-paper) 10%, transparent) !important; }

/* Single-colour artwork on the page zone inverts with the theme: the client logos on the Our Works cards, the quote
   card and the testimonial pills, and the slideshow's arrows (white on a button that turns light). */
body.page-landing #main :is(.framer-jh1g71, .framer-j385ju, .framer-14manb6, .framer-1t99cj0 .framer--slideshow-controls) img { filter: invert(var(--art-invert, 0)); }

/* The hero sits below the nav, as Vectura's does: the section's top padding is the nav strip (bar height plus the
   card's 12px frame, --landing-strip from landing.js), so the card still fills the first screen and the nav never
   covers the image. From 810px wide landing.js holds the section while the next one slides over it
   (landing-hero-held) and eases the card back to 95% (--landing-hero-scale). */
body.page-landing #main .framer-e1K44 .framer-hmw7d8 { padding-top: var(--landing-strip, 59px); }
body.page-landing.landing-hero-held #main .framer-e1K44 .framer-hmw7d8 { position: sticky; top: 0; }
body.page-landing #main .framer-e1K44 .framer-1w8qob2 { scale: var(--landing-hero-scale, 1); }
/* The scale is set on the card itself and does not inherit, so a scroll frame restyles the card alone, not the page;
   the card keeps its own layer while it moves. */
@property --landing-hero-scale { syntax: "<number>"; inherits: false; initial-value: 1; }
body.page-landing.landing-hero-held #main .framer-e1K44 .framer-1w8qob2 { will-change: scale; }
/* The section that slides over the held hero keeps the 12px frame above its card. */
body.page-landing.landing-hero-held #main .framer-e1K44 .framer-hmw7d8 + section { box-shadow: 0 -12px 0 0 var(--ground); }

/* The site nav on the landing. landing.js drives four variables from the scroll position: --nav-l and --nav-r,
   how far the bar's left and right groups sit in so they line up with the hero's content, --nav-y, which centres
   the bar in the strip above the card, and --nav-ground, 0 for no ground and hairlines, 1 for the site bar. The
   colours are the active theme's at every position: light stays light, dark stays dark. Until landing.js runs, the
   nav paints in its top-of-page state with the insets it measures at each width. */
body.page-landing .nav { --nav-ground: 0; --nav-y: 6px; --nav-l: 34px; --nav-r: 32px; }
@media (max-width: 809.98px) { body.page-landing .nav { --nav-l: 18px; --nav-r: 12px; } }
body.page-landing .nav-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
body.page-landing .nav-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--ground) 97%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-bar-line);
  opacity: var(--nav-ground, 1);
}
body.page-landing .nav-bar { isolation: isolate; transform: translate3d(0, var(--nav-y, 0px), 0); }
body.page-landing .nav-bar > .brand, body.page-landing .nav-bar > .menu { transform: translate3d(var(--nav-l, 0px), 0, 0); }
body.page-landing .nav-bar > .theme-toggle, body.page-landing .nav-bar > .nav-cta, body.page-landing .nav-bar > .mobile-menu-toggle {
  transform: translate3d(calc(var(--nav-r, 0px) * -1), 0, 0);
}
body.page-landing .nav-bar .brand, body.page-landing .nav-bar .mbtn { border-right-color: color-mix(in srgb, var(--nav-bar-line) calc(var(--nav-ground, 1) * 100%), transparent); }
body.page-landing .nav-bar .theme-toggle, body.page-landing .nav-bar .mobile-menu-toggle { border-left-color: color-mix(in srgb, var(--nav-bar-line) calc(var(--nav-ground, 1) * 100%), transparent); }
/* "Start the conversation" has no fill at the top and fills with the ground; its ink crosses from the page's to
   the fill's. */
body.page-landing .nav-cta {
  background: color-mix(in srgb, var(--accent) calc(var(--nav-ground, 1) * 100%), transparent);
  color: color-mix(in srgb, var(--on-accent) calc(var(--nav-ground, 1) * 100%), var(--ink));
}

/* Type: Spartan's mono and all-caps text styles take the Turbo brand's label face instead (31 October 2026: Archivo
   for labels and figures, at 450, in sentence case). These are the five Framer text styles that set Geist Mono or IBM
   Plex Mono: card tags, section labels, card numbers, stat figures and names. */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
body.page-landing #main :is(.framer-styles-preset-hsw7qb, .framer-styles-preset-1kttsz8, .framer-styles-preset-n4t9aj, .framer-styles-preset-dcu79h, .framer-styles-preset-19f16e4) {
  --framer-font-family: "Archivo", "Inter Display", sans-serif;
  --framer-text-transform: none;
  --framer-letter-spacing: 0em;
  --framer-font-weight: 450;
}
body.page-landing #main .framer-styles-preset-hsw7qb { --framer-font-size: 12px; }
body.page-landing #main :is(.framer-styles-preset-1kttsz8, .framer-styles-preset-n4t9aj) { --framer-font-size: 13px; }
body.page-landing #main .framer-styles-preset-19f16e4 { --framer-font-size: 14px; }

/* The hero strip: real wordmarks, each at its own optical height (--h, set per logo in the page: wide marks sit
   lower, compact or light ones taller, so every logo reads at the same weight), with a hairline between the three
   groups (models we build on, teams we build for, products we've shipped). */
body.page-landing #main .turbo-logo { display: block; height: var(--h); width: auto; max-width: none; }
body.page-landing #main .turbo-logo-rule { display: block; width: 1px; height: 22px; background: rgba(255, 255, 255, 0.28); }
@media (max-width: 809.98px) {
  body.page-landing #main .turbo-logo { height: calc(var(--h) * 0.78); }
  body.page-landing #main .turbo-logo-rule { height: 17px; }
}

/* The hero headline: "Forward-deployed engineering" in the ink, the audience line under it in a muted ink (the
   page sets --turbo-hero-muted per theme). */
body.page-landing { --turbo-hero-muted: color-mix(in srgb, var(--ink, #2e2e31) 52%, transparent); }

/* Compositing (4 November 2026; measured with Landing/tools/Scroll Lag.mjs). While the hero holds it is sticky and its
   card scales on its own layer, so Chrome assumes everything painted after it may overlap it and squashed the page
   below into one layer over 5,000px tall, recorded again whenever anything in it changed (the lit headline, the
   counter, the How we work clock): one such update took 382 ms. Each section after the hero gets its own layer, and
   so does the text the scroll lights letter by letter, so a change repaints only the layer it is in. The Services
   panel's hairline is drawn on the panel: Framer's border overlay, a ::after over the whole panel above its
   composited children, had become a second layer the panel's height. */
body.page-landing #main .framer-hmw7d8 ~ :is(section, div),
body.page-landing #main :is(.framer-epleic-container, .framer-1iccwkb-container) { will-change: transform; }
/* A layer is a stacking context: the Straata section, the one section Framer leaves at z-index auto, would then paint
   under the reveal footer (z-index 1), so it takes its siblings' 4. */
body.page-landing #main .framer-s7sf2i { z-index: 4; }
body.page-landing #main .framer-1jrwazz[data-border="true"]::after { content: none; }
body.page-landing #main .framer-1jrwazz { border-bottom: 1px solid var(--token-bde2e395-c009-40f0-b913-fdb5327aebb7, rgba(31, 31, 31, 0.06)); }

/* The hero's art (the flywheel in a sea of bits, Landing/src/framer/turbo/HeroBits.js) runs on behind the logo strip,
   its deep muted by a gradient under the label and the logos. The strip sits a little lower than Spartan set it, its
   label stands a little higher over the logos (Zac, 4 November 2026), and in the light theme its label, wordmarks and
   rules print in ink (dark unless the theme is set light or the system prefers light). */
body.page-landing #main .framer-e1K44 .framer-ksfjr4 { gap: 26px; }
@media (min-width: 1200px) { body.page-landing #main .framer-e1K44 .framer-ksfjr4 { padding-bottom: 30px; } }
@media (max-width: 1199.98px) {
  body.page-landing #main .framer-e1K44 .framer-1w8qob2 { padding-bottom: 24px; }
  /* in the stacked layout the art gets its own band between the card and the strip */
  body.page-landing #main .framer-e1K44 .framer-ksfjr4 { margin-top: 150px; }
}
:root[data-theme="light"] body.page-landing #main .framer-ksfjr4 { --token-7bbf4f4d-a8fb-4fe0-a164-a8cf2fd0048a: var(--ink); }
:root[data-theme="light"] body.page-landing #main .framer-ksfjr4 .turbo-logo { filter: brightness(0) opacity(0.8); }
:root[data-theme="light"] body.page-landing #main .framer-ksfjr4 .turbo-logo-rule { background: color-mix(in srgb, var(--ink) 28%, transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body.page-landing #main .framer-ksfjr4 { --token-7bbf4f4d-a8fb-4fe0-a164-a8cf2fd0048a: var(--ink); }
  :root:not([data-theme]) body.page-landing #main .framer-ksfjr4 .turbo-logo { filter: brightness(0) opacity(0.8); }
  :root:not([data-theme]) body.page-landing #main .framer-ksfjr4 .turbo-logo-rule { background: color-mix(in srgb, var(--ink) 28%, transparent); }
}

/* The page's sections each sit on their own compositor layer (4b698e9), and while the page scrolls each layer is
   snapped to whole device pixels on its own: where two sections meet on a fractional pixel they could round apart and
   open a 1 px gap, through which the footer, fixed behind the page, showed (Zac, 5 November 2026; at fractional
   densities such as 1.25x and 1.5x the edges fade over more than a pixel, so 1 px of overlap left a faint line). Each
   section overlaps the one above by 2 px, so the join is always covered. The Services section ends on its hairline,
   so 2 px of its own ground go under the overlap and the line stays where it was. */
body.page-landing #main .framer-e1K44 > * + * { margin-top: -2px; }
body.page-landing #main .framer-e1K44 > .framer-1r64yog { padding-bottom: 2px; }

/* Locked links on the Framer-native parts (5 November 2026). release.json switches page families off; build-release.py
   locks every link into one in the first paint and landing.js locks the ones React draws again (no href, data-soon,
   aria-disabled), and release.css mutes the words and adds a Soon tag after them. A card is simply not a link: it
   looks the same and goes nowhere (Zac, 5 November 2026), as the Our Works cards (Engineering, Design, Advisory) and
   the landing's own cards (turbo/Pains.js, Articles.js, ReelTile.js) do. Framer's other parts colour their words inside
   their own text containers, with the colour written inline, so there the muting is an opacity on the container and
   the tag goes after the words: the Secondary buttons (View portfolio, Explore Jettison) and the footer menu. */
body.page-landing #main a[class*="framer-"][data-soon] { color: inherit; }
body.page-landing #main a[data-soon]::after { content: none; }
body.page-landing #main a[class*="framer-"]:not(.framer-cFRyW)[data-soon] [data-framer-component-type="RichTextContainer"] { opacity: 0.55 !important; }
/* the tag after the words: the footer menu's item and the buttons' label */
body.page-landing #main a.framer-xEqSd[data-soon] .framer-text::after,
body.page-landing #main a.framer-vm9ze[data-soon] .framer-text::after {
  content: "Soon"; display: inline-block; vertical-align: 0.14em; margin-left: 0.6em; padding: 0.22em 0.5em 0.18em;
  font: 450 10.5px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 60%, transparent);
}
/* the Secondary buttons: the arrows stop and their box dims */
body.page-landing #main a.framer-vm9ze[data-soon] .turbo-arrows-strip { animation-play-state: paused; }
body.page-landing #main a.framer-vm9ze[data-soon] .framer-x5l8-container { opacity: 0.4 !important; }

/* The Services cards' four cells (5 November 2026): Framer starts each cell at the top of its grid row at its own
   height, so where one cell's line wraps (on a phone, "Into the stack you already have") its neighbour stopped short
   and the card's ground showed under it as a strip. Each cell fills its row, its words at the top as before. */
body.page-landing #main .framer-17k2gmo > * { align-self: stretch; height: auto !important; justify-content: flex-start; }