*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:
Inter,
Segoe UI,
Arial,
sans-serif;
color:var(--text);
background:#fff;
line-height:1.6;
}

a{
color:var(--primary);
}

button,
a{
font:inherit;
}

button:focus-visible,
a:focus-visible{
outline:3px solid var(--accent);
outline-offset:3px;
}

.wrap{
width:min(1100px,calc(100% - 40px));
margin-inline:auto;
}

.skip-link{
position:absolute;
left:-9999px;
top:0;
background:#fff;
color:#000;
padding:1rem;
z-index:9999;
}

.skip-link:focus{
left:1rem;
top:1rem;
}

.accessibility-bar{
background:#f7f8f9;
border-bottom:1px solid #d7dce0;
}

.access-inner{
min-height:46px;
display:flex;
align-items:center;
gap:.45rem;
flex-wrap:wrap;
}

.access-inner button{
border:1px solid #bcc7ce;
background:#fff;
border-radius:6px;
padding:.38rem .7rem;
cursor:pointer;
}

.announcement-bar{
background:var(--accent);
color:#101010;
font-weight:800;
text-align:center;
padding:.65rem;
}

.site-header{
background:var(--primary);
color:#fff;
}

.header-inner{
min-height:86px;
display:flex;
align-items:center;
gap:2rem;
}

.brand{
display:flex;
align-items:center;
gap:.75rem;
margin-right:auto;
color:#fff;
text-decoration:none;
}

.brand-logo{
width:50px;
height:50px;
border-radius:13px;
display:grid;
place-items:center;
font-weight:900;
font-size:1rem;
background:var(--accent);
color:#101010;
}

.brand-logo img{
width:100%;
height:100%;
object-fit:contain;
border-radius:13px;
}

.brand-copy{
display:flex;
flex-direction:column;
}

.brand-copy strong{
font-size:1rem;
}

.brand-copy small{
opacity:.78;
}

.primary-nav{
display:flex;
gap:1rem;
align-items:center;
flex-wrap:wrap;
}

.primary-nav a{
color:#fff;
font-weight:750;
text-decoration:none;
}

.hero{
padding:5rem 0;
background:
linear-gradient(
135deg,
var(--primary),
color-mix(in srgb,var(--primary) 75%,#000)
);
color:#fff;
}

.hero-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:3rem;
align-items:center;
}

.eyebrow{
font-size:.74rem;
font-weight:900;
letter-spacing:.15em;
color:var(--accent);
}

h1{
font-size:clamp(2.5rem,6vw,5.4rem);
line-height:.98;
max-width:850px;
margin:.6rem 0 1.2rem;
}

h2{
font-size:clamp(1.7rem,3vw,2.6rem);
line-height:1.15;
}

h3{
line-height:1.25;
}

.lead{
font-size:1.08rem;
max-width:720px;
}

.actions{
display:flex;
gap:.75rem;
flex-wrap:wrap;
margin-top:1.5rem;
}

.btn{
display:inline-block;
background:var(--accent);
color:#111;
padding:.8rem 1rem;
border-radius:9px;
font-weight:850;
text-decoration:none;
border:1px solid var(--accent);
}

.btn.secondary{
background:transparent;
color:inherit;
border-color:currentColor;
}

.hero-visual{
min-height:340px;
}

.image-slot{
height:100%;
min-height:340px;
border:1px solid rgba(255,255,255,.35);
border-radius:24px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:2rem;
background:rgba(255,255,255,.07);
}

.visual-mark{
font-size:3.2rem;
font-weight:900;
color:var(--accent);
}

.section{
padding:4.3rem 0;
}

.section.alt{
background:var(--surface);
}

.feature-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1rem;
margin-top:1.8rem;
}

.feature-card{
border:1px solid
color-mix(in srgb,var(--primary) 30%,#ddd);
border-radius:18px;
padding:1.3rem;
background:#fff;
}

.card-line{
display:block;
width:38px;
height:3px;
background:var(--accent);
margin-bottom:1rem;
}

.two-column{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:3rem;
}

.text-link{
font-weight:850;
}

.visual-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1rem;
}

.project-image-slot{
min-height:240px;
display:grid;
place-items:center;
text-align:center;
border-radius:18px;
background:
linear-gradient(
135deg,
var(--surface),
#fff
);
border:1px dashed
color-mix(in srgb,var(--primary) 50%,#bbb);
font-weight:750;
color:#59636b;
padding:1rem;
}

.final-cta{
background:var(--primary);
color:#fff;
}

.final-cta-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:2rem;
}

.page-hero{
padding:4rem 0;
background:var(--surface);
}

.content-panel{
max-width:850px;
}

.page-actions{
display:flex;
gap:.75rem;
flex-wrap:wrap;
margin-top:1.5rem;
}

.page-actions .secondary{
color:var(--primary);
}

.site-footer{
background:#10141A;
color:#fff;
padding:3.4rem 0 1.8rem;
}

.site-footer a{
color:#fff;
}

.footer-grid{
display:grid;
grid-template-columns:1.35fr .75fr .75fr 1fr;
gap:2rem;
}

.footer-grid h2{
font-size:1rem;
color:var(--accent);
}

.footer-links{
display:flex;
flex-direction:column;
gap:.45rem;
align-items:flex-start;
}

.settings-trigger{
background:transparent;
color:#fff;
border:1px solid #fff;
border-radius:999px;
padding:.65rem 1rem;
cursor:pointer;
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,.18);
margin-top:2rem;
padding-top:1rem;
font-size:.86rem;
}

.settings-panel{
position:fixed;
right:1rem;
bottom:1rem;
z-index:2000;
width:min(360px,calc(100% - 2rem));
background:#fff;
color:#171717;
padding:1.3rem;
border-radius:16px;
box-shadow:0 12px 45px rgba(0,0,0,.3);
display:none;
}

.settings-panel.open{
display:block;
}

.settings-panel button{
margin:.25rem;
}

body.large-text{
font-size:120%;
}

body.high-contrast{
background:#000 !important;
color:#fff !important;
}

body.high-contrast
.section,
body.high-contrast
.feature-card,
body.high-contrast
.page-hero{
background:#000 !important;
color:#fff !important;
}

body.high-contrast a{
color:#fff !important;
text-decoration:underline;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
animation-duration:.001ms !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}

@media(max-width:950px){

.header-inner{
flex-direction:column;
align-items:flex-start;
padding-top:1rem;
padding-bottom:1rem;
}

.hero-grid,
.two-column{
grid-template-columns:1fr;
}

.feature-grid,
.visual-grid,
.footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

}

@media(max-width:650px){

.wrap{
width:min(100% - 28px,1100px);
}

feature-grid,
.feature-grid,
.visual-grid,
.footer-grid{
grid-template-columns:1fr;
}

.final-cta-inner{
align-items:flex-start;
flex-direction:column;
}

h1{
font-size:2.65rem;
}

}