:root{--ink:#16212e;--muted:#5b6b7d;--dark:#0e2238;--mid:#2b5d92;--accent:#4a90d9;--soft:#e8ecf1;--line:#d5dce4;
--head:'Oswald','Arial Narrow',sans-serif;--body:'Source Sans 3',system-ui,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink);background:#fff}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--head);line-height:1.05;text-transform:uppercase;letter-spacing:.015em}
h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:14px}
h3{font-size:1.5rem;margin-bottom:6px}
section{padding:80px 0}
.lead{max-width:620px;color:var(--muted);margin-bottom:34px}
.note{margin-top:14px;font-size:.92rem;color:var(--muted)}
.btn{display:inline-block;font:600 1.05rem var(--body);padding:14px 28px;background:var(--accent);color:#fff;text-decoration:none;border:2px solid var(--accent);cursor:pointer;transition:background .15s}
.btn:hover{background:var(--mid);border-color:var(--mid)}
.btn.ghost{background:transparent;border-color:currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn+.btn{margin-left:10px}

/* header */
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:70px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{font:700 1.7rem var(--head);text-decoration:none;color:var(--dark);text-transform:uppercase;letter-spacing:.02em}
.logo small{display:block;font:600 .68rem var(--body);color:var(--muted);letter-spacing:.08em}
nav{display:flex;gap:6px 22px;align-items:center;font-weight:600;font-size:.98rem;flex-wrap:wrap}
nav a{text-decoration:none;padding:4px 0}
nav a:hover{color:var(--mid)}
nav .cur{color:var(--mid);border-bottom:3px solid var(--accent)}
nav .grp{font:600 .72rem var(--body);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-left:2px solid var(--line);padding-left:18px}
nav .tel{background:var(--dark);color:#fff;padding:8px 16px}

/* hero (shared). Texture differs by section, colours stay the same */
.hero{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.045) 46px 92px)}
.hero.hi::before{background:repeating-linear-gradient(90deg,transparent 0 94px,rgba(255,255,255,.07) 94px 98px),repeating-linear-gradient(0deg,transparent 0 94px,rgba(255,255,255,.07) 94px 98px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:88px;padding-bottom:96px}
.hero .wrap.one{grid-template-columns:1fr}
.eyebrow{font:600 .9rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.hero h1{font-size:clamp(2.8rem,7.5vw,5.6rem);font-weight:700}
.hero p{font-size:1.25rem;max-width:560px;margin:22px 0 30px;color:#cfdbe8}
.hero .art{width:100%;max-width:380px;justify-self:center}

/* blocks */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border-left:8px solid var(--accent);background:var(--soft);padding:26px 26px 22px}
.card p{color:var(--muted)}
.tick{list-style:none}
.tick li{padding:5px 0 5px 28px;position:relative}
.tick li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:12px;background:var(--accent)}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:600px}
th,td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line)}
th{font-family:var(--head);background:var(--dark);color:#fff;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
td:first-child{font-weight:700;color:var(--dark)}
.alt{background:var(--soft)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding-top:16px;border-top:5px solid var(--accent)}
.steps li::before{content:counter(s);font:700 2.6rem/1 var(--head);color:var(--mid);display:block}
.steps b{display:block;font:500 1.3rem var(--head);text-transform:uppercase;margin:4px 0}

/* home: two big sections */
.sections{display:grid;grid-template-columns:1fr 1fr}
.sec{padding:64px clamp(24px,5vw,72px);display:flex;flex-direction:column;align-items:flex-start}
.sec h2{font-size:clamp(2.2rem,4.5vw,3.2rem)}
.sec p{max-width:440px;margin-bottom:18px}
.sec .tick{margin-bottom:26px;font-weight:600}
.sec.a{background:var(--soft)}
.sec.b{background:var(--mid);color:#fff}
.sec.b .tick li::before{background:#fff}
.sec.b .btn{background:#fff;color:var(--dark);border-color:#fff}
.sec.b .btn:hover{background:var(--soft)}
.sec.b .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.sec.b .btn.ghost:hover{background:rgba(255,255,255,.16)}
.sec .btns{display:flex;gap:10px;flex-wrap:wrap}
.sec .btns .btn+.btn{margin-left:0}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.why b{display:block;font:500 1.35rem var(--head);text-transform:uppercase;color:var(--dark);margin-bottom:4px}
.why p{color:var(--muted)}

/* quote */
.quote{background:var(--soft)}
.quote .cols{display:grid;grid-template-columns:1fr 1.2fr;gap:52px;align-items:start}
.quote .big{font:700 2.4rem var(--head);text-decoration:none;display:block;margin:14px 0;color:var(--dark)}
form{background:#fff;padding:28px;display:grid;gap:16px;box-shadow:0 2px 0 var(--line)}
label{display:grid;gap:6px;font-weight:600;font-size:.98rem}
input,select,textarea{font:inherit;padding:12px;border:2px solid var(--line);width:100%;border-radius:0;background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cross{background:var(--dark);color:#fff;padding:44px 0}
.cross .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cross h3{font-size:1.8rem;margin:0}
footer{background:#0a1522;color:#9fb0c3;padding:30px 0;font-size:.93rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media (max-width:860px){
  nav .grp{display:none}
  .hero .wrap{grid-template-columns:1fr;padding-top:64px;padding-bottom:70px}
  .hero .art{max-width:280px;justify-self:start}
  .sections,.why{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .quote .cols{grid-template-columns:1fr;gap:30px}
  .two{grid-template-columns:1fr}
  section{padding:58px 0}
}
@media (max-width:480px){.steps{grid-template-columns:1fr}.btn+.btn{margin:10px 0 0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}