:root { --ink:#102b46; --muted:#5b7184; --pale:#eef8fc; --blue:#d8f1fb; --accent:#1677a7; --line:#c8e1ea; --white:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fafdff; font:500 15px/1.55 Manrope, sans-serif; } .top-line { height:6px; background:linear-gradient(90deg,#8bd9f0,#438cb9 65%,#9bd9cf); }
.site-header { max-width:1320px; height:98px; padding:0 38px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:25px; } .brand { color:var(--ink); font-size:26px; font-weight:800; letter-spacing:-1.5px; text-decoration:none; } .brand-mark { color:var(--accent); } .brand-dot { color:#59b3cf; } nav { display:flex; gap:31px; margin-left:auto; } nav a { color:var(--ink); text-decoration:none; font-size:13px; font-weight:700; } nav a:hover,.text-link:hover { color:var(--accent); } .header-actions { display:flex; align-items:center; gap:23px; } .language-switch { border:0; background:transparent; color:#849ba9; padding:6px 0; font:500 11px/1 DM Mono,monospace; cursor:pointer; } .language-switch .active-lang { color:var(--ink); font-weight:500; } .button { display:inline-flex; gap:26px; align-items:center; padding:16px 21px; color:#fff; background:var(--ink); text-decoration:none; font-size:12px; font-weight:700; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); background:var(--accent); } .button span { font-size:18px; line-height:10px; }.button-small { padding:12px 16px; gap:16px; }
.hero { min-height:620px; max-width:1320px; margin:auto; padding:52px 38px 70px; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }.eyebrow { margin:0 0 23px; display:flex; align-items:center; gap:10px; font:500 10px/1.2 DM Mono,monospace; letter-spacing:.09em; color:#507189; text-transform:uppercase; }.eyebrow>span:first-child { width:22px; height:1px; background:#62b4d3; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; } h1 { max-width:660px; margin-bottom:24px; font-size:clamp(46px,5.05vw,74px); line-height:1.05; font-weight:700; } em { color:var(--accent); font-style:normal; font-weight:500; }.hero-intro { max-width:510px; font-size:17px; line-height:1.7; color:var(--muted); }.hero-buttons { margin-top:35px; display:flex; gap:28px; align-items:center; }.text-link { color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; }.text-link span { padding-left:10px; color:var(--accent); font-size:18px; }.hero-visual { position:relative; height:465px; overflow:hidden; background:linear-gradient(0deg,rgba(11,66,95,.28),rgba(11,66,95,.04)),url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1300&q=85') center/cover; }.visual-card { position:absolute; background:rgba(250,254,255,.91); backdrop-filter:blur(5px); }.card-one { width:106px; height:106px; top:31px; left:31px; padding:14px; display:flex; flex-direction:column; justify-content:space-between; }.mini-label { font:500 9px DM Mono,monospace; color:var(--accent); }.signal { width:28px; height:28px; border:1px solid #8cc6db; border-radius:50%; position:relative; }.signal:after { content:''; position:absolute; inset:8px; border-radius:50%; background:var(--accent); }.card-two { bottom:29px; right:30px; min-width:207px; padding:17px 18px 20px; }.card-two .mono { display:block; color:#6992a7; font:10px DM Mono,monospace; margin-bottom:27px; }.card-two strong { font-size:20px; line-height:1.1; letter-spacing:-.06em; }.hero-caption { position:absolute; bottom:29px; left:30px; color:white; display:flex; gap:9px; align-items:center; font-size:10px; font-weight:700; }.hero-caption span:first-child { font-size:19px; color:#a2e0f0; }
.statement { max-width:1320px; margin:auto; padding:112px 38px 98px; border-top:1px solid var(--line); }.statement h2 { max-width:920px; margin:0; font-size:clamp(33px,4.1vw,58px); line-height:1.12; font-weight:600; }.statement-foot { display:flex; justify-content:space-between; align-items:end; margin-top:56px; }.statement-foot p { width:365px; margin:0; color:var(--muted); }.round-arrow { display:grid; place-items:center; width:59px; height:59px; border:1px solid #a9d5e4; border-radius:50%; color:var(--accent); font-size:23px; }
.services { background:var(--pale); padding:105px max(38px,calc((100vw - 1244px)/2)); }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:45px; }.section-heading h2,.experience h2,.contact h2 { margin:0; font-size:clamp(33px,3.7vw,53px); line-height:1.08; font-weight:600; }.section-heading>p { width:275px; margin:0 0 3px; color:var(--muted); font-size:14px; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); }.service-card { min-height:310px; position:relative; padding:29px 30px; border:1px solid #c5e4ef; border-right:0; background:rgba(255,255,255,.38); }.service-card:last-child { border-right:1px solid #c5e4ef; }.service-card.featured { background:#bce7f6; }.service-number { font:10px DM Mono,monospace; color:#648da3; }.service-icon { margin:32px 0 27px; color:var(--accent); font-size:30px; line-height:1; }.service-card h3 { margin-bottom:9px; font-size:25px; line-height:1.1; }.service-card p { max-width:300px; color:#587186; font-size:13px; line-height:1.65; }.service-card a { position:absolute; bottom:25px; right:28px; color:var(--accent); text-decoration:none; font-size:19px; }
.experience { max-width:1320px; margin:auto; padding:120px 38px; display:grid; grid-template-columns:.88fr 1.12fr; gap:105px; align-items:start; }.experience-image { height:570px; background:linear-gradient(0deg,rgba(7,65,98,.19),rgba(7,65,98,0)),url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1000&q=85') center/cover; }.experience-copy { padding-top:34px; }.experience-copy>p:not(.eyebrow) { max-width:500px; margin:24px 0 36px; color:var(--muted); font-size:15px; line-height:1.75; }.experience ol { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }.experience li { display:grid; grid-template-columns:50px 155px 1fr; gap:5px; padding:17px 0; border-bottom:1px solid var(--line); align-items:baseline; }.experience li>span:first-child { color:#6b94a8; font:10px DM Mono,monospace; }.experience li strong { font-size:15px; }.experience li>span:last-child { color:var(--muted); font-size:12px; }
.numbers { max-width:1320px; margin:auto; padding:100px 38px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:.9fr 1.1fr; gap:105px; }.numbers-intro h2 { max-width:420px; margin:0; font-size:clamp(32px,3.4vw,48px); line-height:1.1; font-weight:600; }.numbers-story { padding:3px 0 0 42px; border-left:1px solid var(--line); }.numbers-story>p { max-width:565px; margin:0; color:var(--muted); font-size:17px; line-height:1.75; }.story-tags { margin-top:32px; display:flex; flex-wrap:wrap; gap:9px; }.story-tags span { padding:8px 11px; color:#3c7694; border:1px solid #b9dce9; background:#f5fbfe; font:500 10px/1 DM Mono,monospace; text-transform:uppercase; }
.contact { margin-top:0; padding:105px max(38px,calc((100vw - 1244px)/2)); display:grid; grid-template-columns:.82fr 1fr; gap:100px; text-align:left; background:#153d5a; color:white; }.contact .eyebrow { color:#b8e6f1; }.contact .eyebrow span:first-child { background:#78d1e8; }.contact h2 { max-width:520px; margin:0; }.contact h2 em { color:#82d8ee; }.contact-copy>p:not(.eyebrow) { max-width:440px; margin:22px 0 30px; color:#c0d6e1; font-size:14px; }.contact-email { color:white; border-bottom:1px solid #78c5de; padding-bottom:7px; text-decoration:none; font-size:18px; font-weight:600; }.contact-email span { margin-left:23px; color:#8bd9ef; }.contact-form { padding:30px; background:rgba(255,255,255,.08); border:1px solid rgba(173,221,237,.24); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:17px; }.contact-form label { display:block; margin-bottom:18px; color:#c9e1eb; font-size:11px; font-weight:700; }.contact-form input,.contact-form textarea { width:100%; margin-top:7px; padding:10px 0; border:0; border-bottom:1px solid rgba(189,225,236,.5); outline:0; color:white; background:transparent; font:500 14px Manrope,sans-serif; resize:vertical; }.contact-form input:focus,.contact-form textarea:focus { border-color:#82d8ee; }.form-submit { width:100%; padding:15px 18px; display:flex; justify-content:space-between; border:0; color:#143c58; background:#9cdeef; cursor:pointer; font:700 12px Manrope,sans-serif; transition:background .2s; }.form-submit:hover { background:#d3f3fa; }.form-submit:disabled { cursor:wait; opacity:.7; }.form-status { min-height:20px; margin:15px 0 0; color:#cae2eb; font-size:12px; }.form-status.success { color:#9ce7cb; }.form-status.error { color:#ffbfbe; }.honeypot { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } footer { max-width:1320px; min-height:104px; padding:0 38px; margin:auto; display:flex; align-items:center; justify-content:space-between; color:#6b8494; font-size:11px; }
@media (max-width:760px) { .site-header { height:76px; padding:0 20px; }.site-header nav,.button-small { display:none; }.header-actions { margin-left:auto; }.hero { grid-template-columns:1fr; gap:35px; min-height:auto; padding:50px 20px 65px; }.hero-visual { height:390px; }.statement,.experience { padding:75px 20px; }.statement-foot { gap:25px; }.statement-foot p { width:auto; }.services,.contact { padding:75px 20px; }.section-heading { display:block; }.section-heading>p { width:auto; margin-top:20px; }.service-grid { grid-template-columns:1fr; }.service-card,.service-card:last-child { min-height:250px; border-right:1px solid #c5e4ef; border-bottom:0; }.service-card:last-child { border-bottom:1px solid #c5e4ef; }.experience { grid-template-columns:1fr; gap:35px; }.experience-image { height:350px; }.experience-copy { padding:0; }.experience li { grid-template-columns:35px 1fr; }.experience li>span:last-child { grid-column:2; }.numbers { padding:75px 20px; grid-template-columns:1fr; gap:33px; }.numbers-story { padding:28px 0 0; border-left:0; border-top:1px solid var(--line); }.numbers-story>p { font-size:16px; }.contact { grid-template-columns:1fr; gap:45px; }.form-row { grid-template-columns:1fr; gap:0; } footer { min-height:120px; padding:25px 20px; flex-wrap:wrap; gap:14px 30px; } }
@media (max-width:390px) { h1 { font-size:43px; }.hero-buttons { align-items:flex-start; flex-direction:column; gap:20px; }.card-two { right:18px; bottom:18px; }.hero-caption { left:18px; bottom:22px; max-width:130px; }.statement-foot .round-arrow { flex:0 0 auto; } }