/* Stillwater V8.4 | Reference-driven desktop composition
   Source: original 1672x941 generated hero reference, measured 29 Oct 2026.
   Core coordinates on reference (CSS px):
     nav 68,36 1512x110
     overline 143,262
     title 143,307 (~810x225) three EVEN-WEIGHT lines
     introduction 148,562 (~760x136)
     project card 1219,265 350x494
     actions 393,732 (313x74 + 25gap + 309x74).
   Our existing authentic image differs from the generated mockup's photo;
   this file matches composition without misrepresenting invented imagery.
   Original V8.2, V8.3 and V7 SHA snapshots remain untouched.
 */
@font-face{
 font-family:"Stillwater Manrope";
 src:url("/fonts/manrope-latin-variable.woff2") format("woff2");
 font-weight:400 800;font-style:normal;font-display:swap;
}
:root{--v84-font:"Stillwater Manrope",Manrope,Inter,"Segoe UI",Arial,sans-serif;}
html,body,body > header,body > main{font-family:var(--v84-font)!important;}
body > header :is(a,button,span),body > main :is(h1,h2,h3,p,a,button){font-family:var(--v84-font)!important;}
/* The preview identification stays readable, but moves out of the mockup's
   upper composition and does not consume page-flow height. */
html body > .prototype{
 position:fixed!important;left:auto!important;right:12px!important;
 top:auto!important;bottom:10px!important;
 width:max-content!important;max-width:min(340px,calc(100vw - 24px))!important;
 z-index:150!important;margin:0!important;
 padding:5px 12px!important;min-height:0!important;
 font-size:9px!important;line-height:1.3!important;
 border:1px solid rgba(229,249,255,.33)!important;
 border-radius:99px!important;background:rgba(10,45,75,.7)!important;
 -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
 color:#d7efff!important;
 box-shadow:none!important;
}
/* Draw nav ON the hero photograph, at mockup coordinates. Stay sticky on scroll. */
html body > header{
 position:sticky!important;top:36px!important;z-index:130!important;
 width:calc(100% - 8.15vw)!important;max-width:none!important;
 height:110px!important;min-height:110px!important;
 margin:36px auto 0!important;padding:0!important;
 border-radius:33px!important;
 background:linear-gradient(122deg,rgba(78,156,209,.44),rgba(61,141,191,.32))!important;
 border:1px solid rgba(219,247,255,.56)!important;
 -webkit-backdrop-filter:blur(19px) saturate(135%)!important;
 backdrop-filter:blur(19px) saturate(135%)!important;
 box-shadow:none!important;
}
html body > header > .brand-row{
 display:flex!important;align-items:center!important;
 height:108px!important;min-height:108px!important;
 width:calc(100% - 52px)!important;max-width:none!important;
 margin:0 26px!important;padding:0!important;
}
html body > header .brand{
 flex:0 0 auto!important;
}
html body > header .desktop-nav{
 margin-left:auto!important;min-width:0!important;
 align-items:center!important;justify-content:flex-end!important;
 gap:clamp(17px,2vw,35px)!important;
}
html body > header .desktop-nav > a,
html body > header .desktop-nav .cskt-v15-resource-control > a{
 font-family:var(--v84-font)!important;
 font-size:16px!important;font-weight:630!important;
 letter-spacing:-.018em!important;
 color:#fff!important;text-decoration:none!important;
 text-shadow:none!important;
}
html body > header .desktop-nav > a:hover,
html body > header .desktop-nav .cskt-v15-resource-control > a:hover{
 color:#eaf9ff!important;
}
/* Full viewport photograph. The header and buttons are placed against its
   visual rather than inside a nested 1450px rounded rectangle. */
html body > main{
 margin-top:-146px!important;
 padding:0!important;position:relative;
}
html body > main > section.hero{
 position:relative!important;
 width:100%!important;max-width:100%!important;
 min-height:941px!important;height:max(941px,100vh)!important;
 margin:0!important;padding:0!important;
 border:0!important;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;
 overflow:hidden!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body > main > section.hero::before,
html body > main > section.hero::after{display:none!important;content:none!important;}
html body > main > section.hero > div.wrap.hero-grid{
 display:block!important;position:relative!important;
 width:100%!important;max-width:none!important;
 min-height:941px!important;height:100%!important;
 margin:0!important;padding:1px 0 0!important;
 overflow:hidden!important;
}
/* V6 already uses the actual DEWR landscape as a fixed full-page image.
   Keep its photographic provenance; remove unwanted boxed media masks. */
html body > main > section.hero .hero-media{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 background:transparent!important;box-shadow:none!important;border:0!important;
 border-radius:0!important;pointer-events:none!important;
 overflow:hidden!important;
}
html.v6-landscape-ready body > main > section.hero .hero-media img{opacity:0!important}
html body > main > section.hero .hero-media::before,
html body > main > section.hero .hero-media::after{
 display:none!important;content:none!important;
}
html.v6-landscape-ready body:has(> main > section.hero){
 background-image:
  linear-gradient(90deg,rgba(2,23,42,.37) 0%,rgba(2,28,52,.18) 50%,rgba(3,31,55,.10) 100%),
  var(--v6-landscape,linear-gradient(145deg,#264f66,#061b31))!important;
 background-size:cover!important;background-position:center center!important;
 background-repeat:no-repeat!important;background-attachment:fixed!important;
}
html body > main > section.hero .hero-content{
 position:relative!important;z-index:3!important;
 width:920px!important;max-width:calc(100% - 660px)!important;
 min-height:0!important;
 margin:260px 0 0 8.5vw!important;padding:0!important;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 text-shadow:none!important;
}
html body > main > section.hero .hero-content::before,
html body > main > section.hero .hero-content::after{display:none!important;}
html body > main > section.hero .hero-content .eyebrow{
 width:max-content!important;max-width:100%!important;
 margin:0 0 25px!important;
 font-family:var(--v84-font)!important;
 font-size:17px!important;font-weight:760!important;
 line-height:20px!important;letter-spacing:.15em!important;
 color:#fff!important;text-transform:uppercase!important;
 text-shadow:none!important;
}
html body > main > section.hero .hero-content .v84-visually-hidden{
 position:absolute!important;width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;overflow:hidden!important;
 clip:rect(0,0,0,0)!important;white-space:nowrap!important;
 border:0!important;
}
html body > main > section.hero .hero-content h1{
 display:block!important;width:100%!important;max-width:none!important;
 margin:0 0 32px!important;padding:0!important;
 font-family:var(--v84-font)!important;
 font-size:79px!important;font-weight:800!important;line-height:75px!important;
 letter-spacing:-.055em!important;
 color:#fff!important;text-shadow:none!important;
 text-wrap:initial!important;
}
html body > main > section.hero .hero-content h1 .v84-title-line{
 display:block!important;white-space:nowrap!important;
 font:inherit!important;letter-spacing:inherit!important;line-height:inherit!important;
}
html body > main > section.hero .hero-content p{
 width:780px!important;max-width:780px!important;
 margin:0!important;padding:0!important;
 font-family:var(--v84-font)!important;
 font-size:25px!important;font-weight:470!important;line-height:1.4!important;
 letter-spacing:-.017em!important;
 color:#f6faff!important;text-shadow:none!important;
}
html body > main > section.hero .v5-feature-card{
 position:absolute!important;z-index:4!important;
 top:265px!important;left:auto!important;right:6.1vw!important;
 width:351px!important;max-width:351px!important;min-width:351px!important;
 height:494px!important;max-height:494px!important;min-height:494px!important;
 margin:0!important;padding:0!important;
 transform:none!important;
 border:1px solid rgba(244,254,255,.78)!important;
 border-radius:34px!important;overflow:hidden!important;
 box-shadow:none!important;
}
html body > main > section.hero .v5-feature-card:hover{transform:none!important}
html body > main > section.hero .v5-feature-title{
 font-family:var(--v84-font)!important;
 font-size:31px!important;font-weight:790!important;
 letter-spacing:-.048em!important;line-height:1.13!important;
}
html body > main > section.hero .v82-hero-actions{
 position:absolute!important;z-index:6!important;
 left:42.9%!important;right:auto!important;
 top:732px!important;bottom:auto!important;
 width:646px!important;max-width:none!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:25px!important;padding:0!important;margin:0!important;
 flex-wrap:nowrap!important;
 transform:translateX(-50%)!important;
}
html body > main > section.hero .v82-hero-actions a.button{
 width:311px!important;min-width:0!important;max-width:none!important;
 height:74px!important;min-height:74px!important;
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 padding:19px 39px!important;border-radius:50px!important;
 font-family:var(--v84-font)!important;font-size:19px!important;font-weight:730!important;
 letter-spacing:-.022em!important;line-height:1.1!important;
 box-shadow:none!important;text-shadow:none!important;
}
html body > main > section.hero .v82-hero-actions a.button:hover{
 transform:none!important;filter:brightness(1.05);
}
/* The next page section starts below the intended hero portrait, not mid-shot. */
html body > main > section.nav-landing{margin-top:28px!important;}
/* Match reference on large screens; preserve realistic reading and link
   functionality at smaller breakpoints rather than forcing desktop pixels. */
@media(min-width:1850px){
 html body > main > section.hero .hero-content{margin-left:clamp(144px,8.5vw,190px)!important;}
 html body > main > section.hero .v5-feature-card{right:6.1vw!important;}
}
@media(max-width:1450px) and (min-width:921px){
 html body > header{height:94px!important;min-height:94px!important;top:26px!important;margin-top:26px!important;}
 html body > header > .brand-row{height:92px!important;min-height:92px!important;}
 html body > main{margin-top:-120px!important;}
 html body > main > section.hero .hero-content{
  margin:clamp(198px,18vw,245px) 0 0 7.7vw!important;
  width:64%!important;max-width:64%!important;
 }
 html body > main > section.hero .hero-content .eyebrow{font-size:13px!important;line-height:18px!important;}
 html body > main > section.hero .hero-content h1{font-size:clamp(56px,5.1vw,73px)!important;}
 html body > main > section.hero .hero-content p{
  font-size:clamp(17px,1.55vw,23px)!important;
  width:min(670px,100%)!important;max-width:100%!important;
 }
 html body > main > section.hero .v5-feature-card{
  width:29vw!important;min-width:0!important;max-width:340px!important;
  height:clamp(355px,33vw,475px)!important;min-height:0!important;
  max-height:475px!important;top:260px!important;right:5vw!important;
 }
 html body > main > section.hero .v82-hero-actions{
  top:clamp(688px,53vw,732px)!important;width:clamp(430px,45vw,646px)!important;
  left:43%!important;gap:17px!important;
 }
 html body > main > section.hero .v82-hero-actions a.button{
  width:calc((100% - 17px)/2)!important;
  height:65px!important;min-height:65px!important;font-size:16px!important;padding:15px 25px!important;
 }
 html body > main > section.hero,html body > main > section.hero > div.wrap.hero-grid{
  min-height:850px!important;height:max(850px,100vh)!important;
 }
}
@media(max-width:920px) and (min-width:681px){
 html body > header{top:17px!important;margin-top:17px!important;
  width:calc(100% - 38px)!important;
  height:79px!important;min-height:79px!important;border-radius:25px!important;}
 html body > header > .brand-row{height:77px!important;min-height:77px!important;width:calc(100% - 30px)!important;margin:0 15px!important;}
 html body > header .desktop-nav{gap:12px!important;}
 html body > header .desktop-nav > a,html body > header .desktop-nav .cskt-v15-resource-control>a{font-size:10px!important;}
 html body > main{margin-top:-96px!important;}
 html body > main > section.hero,html body > main > section.hero > div.wrap.hero-grid{
  min-height:800px!important;height:max(800px,100vh)!important;
 }
 html body > main > section.hero .hero-content{
  margin:208px 0 0 5vw!important;width:64%!important;max-width:64%!important;
 }
 html body > main > section.hero .hero-content .eyebrow{
  font-size:9px!important;line-height:15px!important;letter-spacing:.09em!important;
  margin-bottom:14px!important;
 }
 html body > main > section.hero .hero-content h1{font-size:clamp(37px,5.3vw,51px)!important;line-height:1.05!important;letter-spacing:-.05em!important;}
 html body > main > section.hero .hero-content p{width:100%!important;max-width:100%!important;font-size:15px!important;line-height:1.55!important;}
 html body > main > section.hero .v5-feature-card{
  top:288px!important;right:3%!important;width:26%!important;min-width:0!important;
  max-width:260px!important;height:325px!important;min-height:0!important;max-height:325px!important;border-radius:23px!important;
 }
 html body > main > section.hero .v5-feature-title{font-size:20px!important;}
 html body > main > section.hero .v82-hero-actions{
  left:43%!important;top:695px!important;width:420px!important;max-width:75%!important;
  gap:14px!important;
 }
 html body > main > section.hero .v82-hero-actions a.button{
  flex:1!important;width:200px!important;height:58px!important;min-height:58px!important;
  font-size:14px!important;padding:16px 19px!important;
 }
}
@media(max-width:680px){
 html body > header{
  position:sticky!important;top:10px!important;
  width:calc(100% - 20px)!important;margin:10px auto 0!important;
  height:73px!important;min-height:73px!important;border-radius:22px!important;
 }
 html body > header > .brand-row{height:71px!important;min-height:71px!important;width:calc(100% - 22px)!important;margin:0 11px!important;}
 html body > main{margin-top:-83px!important;}
 html body > main > section.hero{
  width:100%!important;min-height:0!important;height:auto!important;
  border:0!important;border-radius:0!important;overflow:hidden!important;
 }
 html body > main > section.hero > div.wrap.hero-grid{
  display:flex!important;flex-direction:column!important;
  min-height:0!important;height:auto!important;overflow:hidden!important;
  padding:1px 0 34px!important;
 }
 html body > main > section.hero .hero-content{
  width:calc(100% - 38px)!important;max-width:none!important;
  margin:145px 19px 0!important;padding:0!important;
 }
 html body > main > section.hero .hero-content .eyebrow{
  font-size:10px!important;line-height:1.5!important;letter-spacing:.075em!important;
  margin:0 0 16px!important;
 }
 html body > main > section.hero .hero-content h1{
  font-size:clamp(34px,8.5vw,57px)!important;
  line-height:1.04!important;letter-spacing:-.05em!important;
  margin:0 0 17px!important;
 }
 html body > main > section.hero .hero-content h1 .v84-title-line{white-space:normal!important;}
 html body > main > section.hero .hero-content p{
  font-size:15px!important;line-height:1.62!important;
  width:100%!important;max-width:100%!important;
 }
 html body > main > section.hero .v5-feature-card{
  position:relative!important;order:2!important;
  left:auto!important;right:auto!important;top:auto!important;
  width:min(79%,315px)!important;min-width:0!important;max-width:315px!important;
  height:330px!important;min-height:0!important;max-height:none!important;
  margin:28px 18px 0 auto!important;transform:none!important;border-radius:22px!important;
 }
 html body > main > section.hero .v82-hero-actions{
  order:3!important;position:relative!important;
  top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  transform:none!important;
  width:calc(100% - 40px)!important;max-width:none!important;
  margin:30px auto 0!important;gap:12px!important;flex-wrap:wrap!important;
 }
 html body > main > section.hero .v82-hero-actions a.button{
  flex:1 1 155px!important;min-width:146px!important;
  width:auto!important;height:53px!important;min-height:53px!important;
  font-size:13px!important;padding:15px 18px!important;
 }
 html body > .prototype{font-size:8px!important;right:6px!important;bottom:5px!important;max-width:calc(100vw - 12px)!important;}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 html body > main > section.hero .hero-content{background:rgba(5,32,57,.78)!important;border-radius:15px!important;padding:16px!important;}
 html body > header{background:#174e76!important;backdrop-filter:none!important;}
}
@media(prefers-reduced-motion:reduce){html body > main > section.hero .v82-hero-actions a.button{transition:none!important;}}

/* Fine-match the reference navigation rather than treating it as a decorative
   small floating toolbar. The mockup logo is 76px, brand 20px and nav 16px. */
@media(min-width:1451px){
 html body > header{
  width:90.43vw!important;max-width:none!important;
  margin-left:4.07vw!important;margin-right:0!important;
 }
 html body > header .site-brand{
  display:flex!important;align-items:center!important;gap:22px!important;
  flex-shrink:0!important;
 }
 html body > header .site-brand .symbol{
  display:grid!important;place-items:center!important;
  width:76px!important;height:78px!important;
  min-width:76px!important;min-height:78px!important;
  flex:0 0 76px!important;border-radius:50%!important;
  border:1px solid rgba(240,251,255,.85)!important;
  box-shadow:none!important;
 }
 html body > header .site-brand .symbol span{
  font-family:var(--v84-font)!important;font-size:16px!important;
  letter-spacing:.07em!important;font-weight:770!important;
 }
 html body > header .site-brand .brand-text{
  display:flex!important;flex-direction:column!important;gap:7px!important;
 }
 html body > header .site-brand .brand-text strong{
  font-family:var(--v84-font)!important;font-size:20px!important;
  line-height:1.06!important;letter-spacing:-.035em!important;
  font-weight:780!important;
 }
 html body > header .site-brand .brand-text small{
  font-family:var(--v84-font)!important;
  font-size:11px!important;letter-spacing:.13em!important;
  line-height:1.15!important;
 }
 html body > header .desktop-nav{gap:clamp(18px,1.9vw,33px)!important;}
 html body > header .desktop-nav > a,
 html body > header .desktop-nav .cskt-v15-resource-control > a{
  font-size:16px!important;font-weight:660!important;
 }
}