/* Mendota AI — 04 · Dusk. Tokens from the design system, then its components, then this page. */
body{margin:0}
:root{--bone:#eae1dc;--bone-2:#e0dade;--bone-3:#d2c8cb;--void:#0f0a15;--bone-text:#eae1dc;--void-2:#1a1420;--slate:#655862;--slate-2:#a999a3;--sky:#f1ae9b;--sky-2:#cfb1b0;--maroon:#8c4b52;--maroon-2:#4d3748;--steel:#4c789d;--steel-2:#527194;--blue:#03afe1;--blue-lit:#80c2f5;--blue-deep:#078bb7;--rim:#f7e2eb;--cast:#0f0a15;--line:#0f0a1533;--line-strong:#0f0a15;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;--space-5:64px;--space-6:120px;--gutter:clamp(24px,5.5vw,100px);--header-height:88px;--letterbox:48px;--focus-offset:4px;--radius-none:0;--shadow-cel:8px 8px 0 #0f0a15;--shadow-cel-lg:16px 16px 0 #0f0a15;--hover-fade:.6;--haze:.35;--font-display:"Barlow Condensed","Arial Narrow",sans-serif;--font-sans:"DM Sans",Arial,sans-serif;--gutter-x:var(--gutter)}
a{color:inherit}a:hover{color:#03afe1}
.md-scene{height:clamp(640px,92vh,860px)}
.md-scene-copy h1{font-size:clamp(64px,11vw,160px)}
.night{--bone:#0f0a15;--bone-2:#1a1420;--bone-3:#2a2230;--void:#eae1dc;--slate:#a999a3;--slate-2:#655862;--sky:#8c4b52;--sky-2:#4d3748;--cast:#03afe1;--line:#eae1dc33;--line-strong:#eae1dc;--shadow-cel:8px 8px 0 #03afe1;--shadow-cel-lg:16px 16px 0 #03afe1}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
@media(max-width:800px){.cols{grid-template-columns:repeat(1,minmax(0,1fr));gap:32px}.md-card-wide{grid-template-columns:repeat(1,minmax(0,1fr))!important}.md-nav>a:not(.md-nav-cta){display:none}.footer-mark{font-size:22vw!important}}

/* ---- design-system components ---- */
/* Mendota AI — Dusk. Hand-written static components; every colour reads a token, every surface is cel-shaded: a lit face, a shadow face, a hard offset shadow, no gradients, no blur, no radius. */
body{margin:0;background:var(--bone);color:var(--void);font-family:var(--font-sans,"DM Sans",Arial,sans-serif);-webkit-font-smoothing:antialiased}
.md-stage{padding:24px 32px;box-sizing:border-box;position:relative}
.md-stage.is-void{background:var(--void-2);color:var(--bone-text)}
.md-stage.is-sky{background:var(--sky);color:var(--void)}
.md-stage a:focus-visible,.md-stage button:focus-visible,.md-stage summary:focus-visible{outline:2px solid currentColor;outline-offset:var(--focus-offset,4px)}
::selection{background:var(--blue);color:var(--void)}

/* BrandLockup */
.md-brand{display:inline-flex;align-items:center;gap:12px;font-size:29px;font-weight:600;letter-spacing:-1px;line-height:1;color:inherit;text-decoration:none}
.md-brand img{width:32px;height:29px;filter:brightness(0) invert(var(--logo-invert,0))}
.md-brand.is-light img{--logo-invert:1}
.md-brand-ai{font-size:10px;font-weight:400;letter-spacing:0;align-self:flex-start;margin-top:1px}

/* ChapterLabel */
.md-chapter{display:inline-flex;align-items:baseline;gap:var(--space-2,16px);font-family:var(--font-sans);text-transform:uppercase}
.md-chapter-no{font-family:var(--font-display,"Barlow Condensed",sans-serif);font-size:28px;line-height:1;font-weight:500;letter-spacing:.08em}
.md-chapter-no b{color:var(--blue);font-weight:inherit}
.md-chapter-title{font-size:13px;line-height:1.2;font-weight:500;letter-spacing:.12em;padding-left:var(--space-2,16px);border-left:2px solid currentColor}

/* TextLink */
.md-text-link{display:inline-flex;align-items:center;gap:var(--space-4,40px);border-bottom:2px solid currentColor;padding:0 0 8px;font-size:15px;line-height:1.5;font-weight:500;color:inherit;text-decoration:none;transition:color .15s}
.md-text-link span{font-size:20px;transition:transform .25s}
.md-text-link:hover{color:var(--blue)}
.md-text-link:hover span{transform:translate(3px,-3px)}
.md-stage.is-sky .md-text-link:hover{color:var(--void);border-color:var(--blue)}

/* SiteHeader */
.md-header{height:var(--header-height,88px);display:flex;align-items:center;justify-content:space-between;position:relative;border-bottom:1px solid var(--line)}
.md-nav{display:flex;align-items:center;gap:var(--space-4,40px);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.md-nav>a{padding:12px 0;color:inherit;text-decoration:none;position:relative}
.md-nav>a:hover{opacity:var(--hover-fade,.6)}
.md-nav>a[aria-current]{opacity:1}
.md-nav>a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--blue)}
.md-nav>.md-nav-cta{padding:12px 20px;background:var(--void);color:var(--bone);box-shadow:var(--shadow-cel);border:2px solid var(--line-strong)}
.md-nav>.md-nav-cta:hover{opacity:1;background:var(--blue);color:var(--void);border-color:var(--blue)}
.md-stage.is-void .md-nav>.md-nav-cta{background:var(--blue);color:#0f0a15;border-color:var(--blue);box-shadow:8px 8px 0 var(--blue-deep)}

/* SceneCard */
.md-card{position:relative;background:var(--bone-2);color:var(--void);border:2px solid var(--line-strong);box-shadow:var(--shadow-cel);padding:var(--space-3,24px);box-sizing:border-box}
.md-card.is-void{background:var(--void-2);color:var(--bone-text)}
.md-card.is-steel{background:var(--steel);color:var(--bone-text)}
.md-card.is-sky{background:var(--sky);color:var(--void)}
.md-card-rim{position:absolute;left:0;top:0;right:0;height:2px;background:var(--rim)}
.md-card h3{margin:0 0 12px;font-family:var(--font-display,"Barlow Condensed",sans-serif);font-size:clamp(40px,5vw,64px);line-height:.95;font-weight:600;letter-spacing:-.01em}
.md-card p{margin:0;font-size:16px;line-height:1.6}
.md-card .md-facts{margin:16px 0 24px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:12px;flex-wrap:wrap}
.md-card .md-facts span{white-space:nowrap}.md-card .md-facts i{font-style:normal;opacity:.5}
.md-card-art{margin:-24px -24px 20px;height:160px;position:relative;overflow:hidden;background:var(--sky);border-bottom:2px solid var(--line-strong)}
.md-card-art svg{display:block;width:100%;height:100%}
.md-card-art .far{fill:var(--slate-2);opacity:var(--haze,.35)}
.md-card-art .floor{fill:var(--bone)}
.md-card-art .floor-shade{fill:var(--bone-3)}
.md-card-art .mono{fill:var(--blue)}
.md-card-art .mono-shade{fill:var(--blue-deep)}
.md-card-art .ink{fill:var(--void)}
.md-card-art .cast{fill:var(--cast)}

/* SceneHero */
.md-scene{position:relative;background:var(--sky);color:var(--void);overflow:hidden}
.md-scene::before,.md-scene::after{content:'';position:absolute;left:0;right:0;height:var(--letterbox,48px);background:#0f0a15;z-index:3}
.md-scene::before{top:0}.md-scene::after{bottom:0}
.md-scene svg{display:block;width:100%;height:100%}
.md-scene .far{fill:var(--slate-2);opacity:var(--haze,.35)}
.md-scene .tier{fill:var(--slate-2)}
.md-scene .tier-shade{fill:var(--maroon)}
.md-scene .tier-deep{fill:var(--maroon-2)}
.md-scene .floor{fill:var(--bone)}
.md-scene .floor-2{fill:var(--bone-2)}
.md-scene .floor-shade{fill:var(--bone-3)}
.md-scene .wall{fill:var(--bone-2)}
.md-scene .tile{fill:var(--steel)}
.md-scene .tile-shade{fill:var(--steel-2)}
.md-scene .ink{fill:var(--void)}
.md-scene .cast{fill:var(--cast)}
.md-scene .mono{fill:var(--blue)}
.md-scene .mono-shade{fill:var(--blue-deep)}
.md-scene .mono-lit{fill:var(--blue-lit)}
.md-scene .rim{stroke:var(--rim);stroke-width:2;fill:none}
.md-scene .outline{stroke:var(--line-strong);stroke-width:2;fill:none}
.md-scene .grid{stroke:var(--void);stroke-opacity:.25;stroke-width:1}
.md-scene-copy{position:absolute;left:var(--gutter-x,64px);bottom:calc(var(--letterbox,48px) + 48px);z-index:2;max-width:640px}
.md-scene-copy h1{margin:0;font-family:var(--font-display,"Barlow Condensed",sans-serif);font-size:clamp(72px,12vw,160px);line-height:.86;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.md-scene-copy h1 em{font-style:normal;color:var(--bone);background:var(--void);padding:0 .08em;box-shadow:8px 8px 0 var(--blue)}
.md-scene-copy p{margin:24px 0 0;max-width:460px;font-size:19px;line-height:1.55;font-weight:450}
.md-scene-label{position:absolute;top:calc(var(--letterbox,48px) + 24px);left:var(--gutter-x,64px);z-index:2}


/* ---- page ---- */
.skip-link{position:absolute;z-index:30;top:10px;left:12px;background:var(--bone);color:var(--void);padding:14px;transform:translateY(-150%)}.skip-link:focus{transform:none}
.md-scene [data-depth]{will-change:transform}
.md-nav-cta{white-space:nowrap}

.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px}.footer-links a{text-decoration:none}.footer-links a:hover{color:var(--blue)}
.link-row{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5)}

/* ---- careers ---- */
.page-hero{background:var(--sky);color:var(--void);padding:var(--space-5) var(--gutter) var(--space-6);position:relative;overflow:hidden;border-top:var(--letterbox) solid #0f0a15}
.page-hero h1{margin:var(--space-4) 0 0;font-family:var(--font-display);font-size:clamp(64px,10vw,140px);line-height:.88;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.page-hero h1 em{font-style:normal;color:var(--bone);background:var(--void);padding:0 .08em;box-shadow:8px 8px 0 var(--blue)}
.page-hero p{margin:var(--space-4) 0 0;max-width:520px;font-size:19px;line-height:1.55;font-weight:450}
.roles{list-style:none;margin:0;padding:0;border-top:2px solid var(--line-strong)}
.role{border-bottom:2px solid var(--line-strong)}
.role a{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-3);color:inherit;text-decoration:none;transition:background .15s,color .15s}
.role h3{margin:0;font-family:var(--font-display);font-size:clamp(36px,4vw,56px);line-height:.95;font-weight:600;letter-spacing:-.01em}
.role .meta{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.role .apply{display:inline-flex;align-items:center;gap:16px;padding:12px 20px;background:var(--void);color:var(--bone);border:2px solid var(--line-strong);box-shadow:var(--shadow-cel);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.role a:hover{background:var(--bone-2);color:var(--void)}
.role a:hover .apply{background:var(--blue);color:var(--void);border-color:var(--blue);transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--void)}
.role a:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}

/* ---- phone ---- */
@media(max-width:800px){
  :root{--header-height:72px;--letterbox:16px}
  .md-brand{font-size:24px;gap:8px}
  .md-brand img{width:28px;height:25px}
  .md-nav>.md-nav-cta{padding:10px 14px;font-size:12px;letter-spacing:.08em;box-shadow:4px 4px 0 var(--void)}
  /* hero: copy sits in the open sky, the figure stays visible on the floor below */
  .md-scene-copy{top:calc(var(--letterbox) + 72px);bottom:auto;right:var(--gutter-x)}
  .md-scene-copy p{font-size:17px;margin-top:20px}
  .md-scene-copy h1 em{box-shadow:5px 5px 0 var(--blue)}
  .md-card .md-facts{gap:6px 20px;letter-spacing:.1em}
  .md-card .md-facts i{display:none}
  .role a{grid-template-columns:1fr;gap:12px;padding:var(--space-3) 0}
  .role .apply{justify-self:start;margin-top:8px;box-shadow:4px 4px 0 var(--void)}
  .page-hero{padding-bottom:170px}
  .page-hero h1 em{box-shadow:5px 5px 0 var(--blue)}
  .md-card-flip>.md-card-art{order:-1;border-left:0!important;border-bottom:2px solid var(--line-strong)!important}
}
@media(max-width:400px){.md-nav-cta-long{display:none}}
@media(prefers-reduced-motion:reduce){.md-scene [data-depth]{transform:none!important}}