@font-face{font-family:Manrope;src:url('fonts/manrope-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--slate:#d6dfe4;--navy:#1a2a38;--rust:#c24730;--surface:#e3eaee;--muted:#536470;--line:#1a2a3829}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--slate);color:var(--navy);font-family:Manrope,Arial,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;touch-action:manipulation}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--rust);outline-offset:5px}
::selection{background:var(--rust);color:#fff}
.wrap{width:min(1320px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:fixed;z-index:5;left:15px;top:-70px;padding:12px 18px;background:var(--navy);color:#fff}
.skip-link:focus{top:15px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:36px;height:36px}
.brand>span{font-weight:800;font-size:26px;letter-spacing:-1.4px;line-height:1.1}
.brand small{display:block;font-size:7px;letter-spacing:1.55px;font-weight:600;margin-top:6px}
.site-header nav{display:flex;gap:29px;align-items:center;font-size:11px;font-weight:600}
.site-header nav a{padding-block:12px}
.site-header nav a:hover,.site-footer a:hover{color:var(--rust)}
.site-header nav a>span{margin-left:6px}
.header-label{font-size:8px;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:70px;align-items:center;padding-block:65px 68px}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.15em;display:block;line-height:1.5;color:var(--muted)}
.hero .eyebrow{display:flex;align-items:center;gap:10px;color:var(--rust);font-size:9px}
.eyebrow-line{width:28px;height:1px;background:var(--rust);display:inline-block}
.hero h1{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-size:clamp(56px,5.75vw,84px);font-weight:700;letter-spacing:-.025em;line-height:1.02;margin-top:19px}
.hero h1>span{color:var(--rust)}
.hero-copy>p{max-width:560px;font-size:13px;line-height:1.9;color:var(--muted);margin-top:22px}
.hero-link{display:inline-flex;align-items:center;gap:26px;margin-top:25px;font-size:11px;font-weight:800;min-height:44px}
.circle-arrow{height:35px;width:35px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:16px;transition:background .2s,color .2s}
.hero-link:hover .circle-arrow{background:var(--navy);color:var(--slate)}
.hero-aside{align-self:stretch;border-left:1px solid var(--line);padding:6px 0 4px 34px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;margin-top:4px}
.project-index{font-size:8px;letter-spacing:.13em;font-weight:600;color:var(--muted)}
.aside-copy{font-size:26px;font-weight:600;letter-spacing:-.055em;line-height:1.25}
.aside-copy>span{color:var(--muted)}
.aside-foot{font-size:7px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.concepts{padding-bottom:68px}
.section-head{border-top:1px solid var(--line);padding-top:27px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:27px}
.section-head h2{font-size:29px;font-weight:800;letter-spacing:-.055em;line-height:1.25;margin-top:9px}
.section-head>p{font-size:11px;line-height:1.8;color:var(--muted);max-width:360px;padding-bottom:2px}
.concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.concept-card{min-width:0;overflow:hidden;background:var(--surface);border:1px solid #1a2a381a;border-radius:7px;transition:border-color .25s,box-shadow .25s}
.concept-card:hover{border-color:#1a2a3847;box-shadow:0 12px 28px #1a2a380a}
.preview-link{display:block;position:relative;padding:14px 14px 0;overflow:hidden;background:#c4d0d8}
.concept-card-modern .preview-link{background:#bacbd3}
.browser-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#e8eef1;border:1px solid #1a2a3814;border-bottom:0;border-radius:5px 5px 0 0;height:28px;padding:0 11px;font-size:6px;letter-spacing:.13em;font-weight:600;color:#647581}
.browser-dots{display:flex;gap:4px}
.browser-dots i{display:block;width:4px;height:4px;background:#96a7b2;border-radius:50%}
.browser-bar>span:last-child{font-size:11px;color:var(--navy)}
.preview-image{aspect-ratio:1.73;overflow:hidden;border:1px solid #1a2a3814;border-top:0;background:var(--slate)}
.preview-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .65s ease}
.preview-link:hover .preview-image img{transform:scale(1.025)}
.preview-overlay{position:absolute;bottom:12px;right:25px;display:flex;gap:20px;align-items:center;font-size:9px;background:var(--navy);color:#f3f6f7;padding:9px 13px;border-radius:3px;opacity:0;transition:opacity .2s}
.preview-link:hover .preview-overlay,.preview-link:focus-visible .preview-overlay{opacity:1}
.preview-overlay>span{font-size:14px}
.concept-copy{padding:25px 26px 23px}
.concept-title{display:flex;justify-content:space-between;align-items:center;gap:16px}
.version-label{display:block;font-size:8px;font-weight:800;letter-spacing:.14em;color:var(--rust);margin-bottom:6px}
.concept-title h3{font-size:25px;font-weight:800;letter-spacing:-.05em;line-height:1.25}
.version-number{font-family:'Barlow Condensed',Arial,sans-serif;font-size:47px;line-height:1;color:#1a2a3826;letter-spacing:-.03em}
.concept-copy>p{font-size:11px;color:var(--muted);line-height:1.85;max-width:440px;margin:15px 0 21px;min-height:41px}
.concept-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.concept-detail{font-size:6.5px;font-weight:600;letter-spacing:.06em;max-width:140px;line-height:1.8;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:23px;font-size:10px;font-weight:800;border-radius:3px;padding:12px 16px;min-height:43px;white-space:nowrap;transition:background .2s}
.button>span[aria-hidden]{font-size:15px}
.button-navy{background:var(--navy);color:#f0f4f6}
.button-navy:hover{background:#2e4659}
.button-rust{background:var(--rust);color:#fff}
.button-rust:hover{background:#a83b29}
.preview-note{display:flex;align-items:baseline;gap:8px;font-size:9px;line-height:1.7;color:var(--muted);margin-top:17px}
.note-dot{flex-shrink:0;width:4px;height:4px;background:var(--rust);border-radius:50%;transform:translateY(-1px)}
.direction{padding-bottom:45px}
.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-bottom:40px}
.focus-item{min-width:0}
.focus-index{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:19px;font-size:9px;font-weight:600;color:var(--muted)}
.focus-index>span{font-size:17px;color:var(--rust)}
.focus-item h3{font-size:18px;letter-spacing:-.04em;line-height:1.4;max-width:250px;font-weight:800}
.focus-item p{font-size:11px;line-height:1.85;color:var(--muted);margin-top:10px;max-width:320px}
.next-step{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;padding:33px 36px;background:var(--navy);color:var(--surface);border-radius:5px;position:relative;overflow:hidden}
.next-step::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--rust)}
.next-step .eyebrow{font-size:8px;color:#b5c6d1}
.next-step h3{font-size:23px;font-weight:600;letter-spacing:-.04em;line-height:1.4;margin-top:12px}
.next-copy p{font-size:11px;line-height:1.85;color:#c0ced7}
.next-copy p+p{margin-top:11px;color:#9fb2bf;font-size:10px}
.site-footer{border-top:1px solid var(--line);min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:7px;letter-spacing:.065em;color:var(--muted)}
.site-footer strong{color:var(--navy);font-size:10px;font-weight:800;letter-spacing:-.02em}
.footer-divider{margin:0 10px;color:#8e9ea8}
.site-footer a{display:flex;align-items:center;gap:16px;font-size:9px;letter-spacing:0;font-weight:600;min-height:44px}
.site-footer a>span{font-size:14px}
@media(max-width:1100px){
 .wrap{width:calc(100% - 64px)}
 .hero{grid-template-columns:minmax(0,1fr) 240px;gap:35px;padding-block:50px 55px}
 .hero h1{font-size:65px}
 .hero-aside{padding-left:25px}.aside-copy{font-size:24px}
 .header-label{display:none}
 .concept-copy{padding-inline:22px}.concept-title h3{font-size:23px}.concept-detail{max-width:112px;font-size:6px}
 .button{gap:14px;padding-inline:13px;font-size:9px}
 .section-head h2{font-size:27px}
 .section-head>p{font-size:10px}.focus-grid{gap:26px}
}
@media(max-width:767px){
 html{scroll-padding-top:20px}
 .wrap{width:calc(100% - 36px)}
 .site-header{min-height:82px;gap:12px}
 .brand img{width:31px;height:31px}.brand{gap:8px}.brand>span{font-size:23px}.brand small{font-size:6px;letter-spacing:1.1px;margin-top:5px}
 .site-header nav{font-size:9px;gap:0}.site-header nav a:last-child{display:none}.site-header nav a{padding-block:16px}.site-header nav a>span{margin-left:3px}
 .hero{display:block;padding-block:38px 39px}
 .hero .eyebrow{font-size:7px;letter-spacing:.1em;gap:8px}.eyebrow-line{width:20px}
 .hero h1{font-size:clamp(44px,10.9vw,68px);line-height:1.03;margin-top:17px;letter-spacing:-.025em}
 .hero-copy>p{font-size:11px;line-height:1.85;max-width:430px;margin-top:19px}
 .hero-link{font-size:10px;margin-top:18px;gap:22px}.circle-arrow{width:32px;height:32px;font-size:15px}
 .hero-aside{display:none}
 .concepts{padding-bottom:40px}.section-head{display:block;padding-top:23px;margin-bottom:21px}
 .eyebrow{font-size:7px;letter-spacing:.12em}.section-head h2{font-size:25px;margin-top:8px;letter-spacing:-.05em}
 .section-head>p{font-size:10px;margin-top:11px;line-height:1.8;max-width:340px}.section-head>p br{display:none}
 .concept-grid{grid-template-columns:1fr;gap:20px}
 .preview-link{padding:11px 11px 0}.browser-bar{height:25px;font-size:5.5px;padding-inline:9px}.browser-dots{gap:3px}.browser-dots i{width:3px;height:3px}
 .concept-copy{padding:21px 20px 20px}.concept-title h3{font-size:24px}.version-label{font-size:7px}.version-number{font-size:43px}
 .concept-copy>p{font-size:10px;margin:13px 0 18px;min-height:0;line-height:1.9}
 .concept-bottom{padding-top:16px;gap:12px}.concept-detail{font-size:5.8px;max-width:120px;letter-spacing:.04em}
 .button{font-size:9px;gap:13px;padding:12px 13px;min-height:44px}.button>span[aria-hidden]{font-size:14px}
 .preview-note{font-size:8px;margin-top:16px;align-items:flex-start;gap:7px}.note-dot{margin-top:6px;transform:none}
 .direction{padding-bottom:28px}.focus-grid{grid-template-columns:1fr;gap:25px;margin-bottom:30px}
 .focus-index{padding-bottom:10px;margin-bottom:13px;font-size:8px}.focus-index>span{font-size:15px}
 .focus-item h3{font-size:18px;max-width:none}.focus-item p{font-size:10px;margin-top:8px;max-width:420px;line-height:1.85}
 .next-step{grid-template-columns:1fr;gap:21px;padding:25px 23px;border-radius:4px}.next-step .eyebrow{font-size:7px}.next-step h3{font-size:22px;margin-top:11px;line-height:1.35}.next-copy p{font-size:10px;line-height:1.85}.next-copy p+p{font-size:9px;margin-top:12px}
 .site-footer{min-height:85px;font-size:6px;letter-spacing:.03em;gap:13px;align-items:center}.site-footer>span{max-width:225px;line-height:2}.site-footer strong{font-size:9px}.footer-divider{margin-inline:5px}.site-footer a{font-size:8px;gap:10px;white-space:nowrap}.site-footer a>span{font-size:12px}
}
@media(max-width:359px){
 .wrap{width:calc(100% - 30px)}.brand>span{font-size:21px}.brand img{width:29px;height:29px}.site-header nav{font-size:8px}
 .hero .eyebrow{font-size:6px}.hero h1{font-size:43px}.hero-copy>p{font-size:10px}
 .concept-copy{padding-inline:17px}.concept-title h3{font-size:21px}.concept-detail{max-width:95px;font-size:5.3px}.button{gap:9px;font-size:8px;padding-inline:11px}.section-head h2{font-size:23px}
 .site-footer{flex-wrap:wrap;justify-content:space-between;padding-block:15px;gap:3px}.site-footer>span{max-width:185px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}