:root { --navy:#142c3e; --blue:#237b8b; --mist:#eef5f3; --gold:#d69d5a; --ink:#183041; --muted:#5f727b; --white:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fbfcfb; font-family:"DM Sans",sans-serif; line-height:1.6; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Playfair Display",serif; line-height:1.1; }
.site-header { align-items:center; background:rgba(251,252,251,.96); display:flex; justify-content:space-between; padding:20px max(5vw,32px); position:sticky; top:0; z-index:5; } .brand { align-items:center; color:var(--navy); display:inline-flex; font-size:1.08rem; font-weight:500; gap:9px; text-decoration:none; } .brand strong { font-weight:700; } .brand-mark { align-items:center; background:var(--navy); border-radius:50%; color:#fff; display:inline-flex; font-family:"Playfair Display",serif; font-weight:700; height:31px; justify-content:center; width:31px; }
.main-nav { align-items:center; display:flex; gap:27px; } .main-nav a { color:var(--ink); font-size:.93rem; font-weight:500; text-decoration:none; } .main-nav a:not(.button):hover,.text-link:hover { color:var(--blue); }.menu-button { display:none; }
.button { background:var(--blue); border:1px solid var(--blue); border-radius:3px; color:#fff; cursor:pointer; display:inline-block; font:600 .93rem "DM Sans",sans-serif; padding:13px 21px; text-decoration:none; transition:.2s ease; }.button:hover { background:#196572; border-color:#196572; transform:translateY(-1px); }.button-small { padding:10px 15px; }.text-link { color:var(--navy); font-size:.94rem; font-weight:700; text-decoration:none; }.text-link span,.service-card a span { margin-left:6px; }
.hero { background:var(--mist); display:grid; gap:7vw; grid-template-columns:1.25fr .75fr; min-height:570px; overflow:hidden; padding:100px max(8vw,32px); position:relative; }.hero:after { background:var(--gold); border-radius:50%; bottom:-190px; content:""; height:370px; opacity:.15; position:absolute; right:-100px; width:370px; }.hero-content { max-width:680px; position:relative; z-index:1; }.eyebrow { color:var(--blue); font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.hero h1 { color:var(--navy); font-size:clamp(3rem,5.7vw,5.5rem); letter-spacing:-.045em; margin-bottom:24px; }.hero-copy { color:var(--muted); font-size:1.12rem; max-width:570px; }.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:25px; margin-top:34px; }.trust-row { color:var(--muted); display:flex; flex-wrap:wrap; font-size:.8rem; gap:0; margin-top:70px; }.trust-row span { border-right:1px solid #bed0cc; padding:0 18px; }.trust-row span:first-child { padding-left:0; }.trust-row span:last-child { border:0; }
.hero-card { align-self:center; background:var(--navy); box-shadow:18px 22px 0 rgba(214,157,90,.35); color:#fff; min-width:280px; padding:32px; position:relative; z-index:1; }.card-label { color:#a6cacb; font-size:.66rem; font-weight:700; letter-spacing:.12em; }.balance-row { border-bottom:1px solid rgba(255,255,255,.15); display:flex; font-size:.88rem; justify-content:space-between; padding-bottom:16px; }.balance-row strong { font-size:1.3rem; }.chart { align-items:end; display:flex; gap:9px; height:104px; padding:20px 0; }.chart i { background:#81babb; display:block; flex:1; }.chart i:nth-child(1){height:34%}.chart i:nth-child(2){height:53%}.chart i:nth-child(3){height:45%}.chart i:nth-child(4){height:75%}.chart i:nth-child(5){height:60%}.chart i:nth-child(6){height:92%;background:var(--gold)}.chart i:nth-child(7){height:81%}.card-footer { color:#c5d6d7; display:flex; font-size:.76rem; justify-content:space-between; }.card-footer strong { color:#a9d4bd; }
.section { padding:100px max(8vw,32px); }.section-heading { margin-bottom:45px; max-width:650px; }.section h2,.contact-section h2 { color:var(--navy); font-size:clamp(2.2rem,3.8vw,3.7rem); letter-spacing:-.035em; margin-bottom:17px; }.section-heading > p:last-child,.about-content > p { color:var(--muted); }.service-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }.service-card { background:#fff; border:1px solid #dfe9e6; min-height:280px; padding:30px; transition:.2s; }.service-card:hover { box-shadow:0 15px 30px rgba(20,44,62,.08); transform:translateY(-4px); }.service-number { color:var(--gold); font-size:.78rem; font-weight:700; }.service-card h3 { color:var(--navy); font-family:"Playfair Display",serif; font-size:1.42rem; margin:35px 0 10px; }.service-card p { color:var(--muted); font-size:.91rem; }.service-card a { color:var(--blue); font-size:.87rem; font-weight:700; text-decoration:none; }
.about { align-items:center; background:var(--navy); color:#d8e4e5; display:grid; gap:10vw; grid-template-columns:.8fr 1.2fr; }.about-visual { align-items:center; background:var(--blue); display:flex; height:330px; justify-content:center; overflow:hidden; position:relative; }.about-visual:before,.circle-detail { border:1px solid rgba(255,255,255,.3); border-radius:50%; content:""; height:360px; position:absolute; width:360px; }.circle-detail { height:250px; width:250px; }.about-visual p { color:#d9eeee; font-size:.85rem; line-height:1.15; position:relative; text-align:center; z-index:1; }.about-visual strong { color:#fff; font-family:"Playfair Display",serif; font-size:4rem; }.about .eyebrow { color:#8fc3c3; }.about h2 { color:#fff; }.about-content > p { color:#c1d1d3; }.about .text-link { color:#fff; }
.contact-section { background:#e2eeea; display:grid; gap:70px; grid-template-columns:1fr 1fr; padding:90px max(8vw,32px); }.contact-section > div > p:last-child { color:var(--muted); }.contact-form { display:grid; gap:14px; }.contact-form label { color:var(--navy); font-size:.8rem; font-weight:700; }.contact-form input,.contact-form textarea { background:#fff; border:1px solid #cadbd7; border-radius:2px; display:block; font:400 .93rem "DM Sans",sans-serif; margin-top:5px; padding:11px; resize:vertical; width:100%; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--blue); outline:2px solid rgba(35,123,139,.15); }.contact-form .button { justify-self:start; margin-top:6px; }.form-message { color:var(--blue); font-size:.85rem; margin:0; }
footer { align-items:center; background:#102432; color:#b9c9ca; display:flex; flex-wrap:wrap; font-size:.75rem; gap:20px 35px; justify-content:space-between; padding:27px max(8vw,32px); } footer .brand { color:#fff; } footer .brand-mark { background:var(--blue); }
@media (max-width:760px) { .site-header { padding:16px 24px; }.menu-button { background:transparent; border:1px solid #b7c9c5; border-radius:3px; color:var(--navy); cursor:pointer; display:block; font:600 .82rem "DM Sans",sans-serif; padding:7px 10px; }.main-nav { background:#fbfcfb; box-shadow:0 15px 20px rgba(20,44,62,.1); display:none; flex-direction:column; left:0; padding:20px 24px 25px; position:absolute; top:67px; width:100%; }.main-nav.open { display:flex; }.hero { grid-template-columns:1fr; padding:70px 24px; }.hero-card { justify-self:start; margin-top:12px; width:min(100%,360px); }.trust-row { margin-top:45px; }.section,.contact-section { padding:70px 24px; }.service-grid,.about,.contact-section { grid-template-columns:1fr; }.about { gap:45px; }.about-visual { height:260px; }.contact-section { gap:32px; } footer { padding:25px 24px; } }
@media (max-width:420px) { .hero h1 { font-size:2.8rem; }.trust-row span { border:0; padding:2px 12px 2px 0; }.hero-card { padding:25px; } }