:root { --ink:#0b1f3a; --pine:#103b68; --cream:#f7f9fc; --sand:#e4edf7; --coral:#2d6faa; --muted:#506273; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans", Arial, sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.mobile-menu { display:none; }
.site-header { max-width:1200px; margin:auto; padding:26px 36px; display:flex; justify-content:space-between; align-items:center; }
.brand { font:700 25px "Playfair Display", serif; letter-spacing:-1px; }.brand span { color:var(--coral); }
nav { display:flex; align-items:center; gap:29px; font-size:14px; font-weight:600; } nav a:not(.nav-button) { color:#41504d; }.nav-button { padding:10px 17px; border:1px solid var(--pine); border-radius:3px; color:var(--pine); }
.hero { max-width:1200px; margin:20px auto 0; padding:65px 36px 80px; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }
.eyebrow { margin:0 0 18px; color:var(--coral); font-size:11px; font-weight:700; letter-spacing:1.8px; }
h1,h2,h3 { font-family:"Playfair Display", Georgia, serif; margin:0; letter-spacing:-1.5px; } h1 { max-width:650px; font-size:clamp(48px,6.5vw,78px); line-height:.99; } h1 em { color:var(--pine); font-weight:600; }.intro { max-width:520px; margin:28px 0; color:var(--muted); font-size:18px; }
.hero-actions { display:flex; gap:25px; align-items:center; }.button { display:inline-flex; gap:18px; align-items:center; padding:15px 20px; background:var(--coral); color:white; font-size:14px; font-weight:700; border-radius:3px; }.button span,.service-grid a span,.text-link span { font-size:19px; line-height:0; }.text-link { color:var(--pine); font-weight:700; font-size:14px; border-bottom:1px solid #9aa9a4; padding-bottom:3px; }
.hero-art { position:relative; height:390px; background:var(--sand); overflow:hidden; }.sun { position:absolute; width:180px; height:180px; border-radius:50%; background:#70a8d8; top:60px; right:59px; }.arch { position:absolute; border:30px solid var(--pine); border-bottom:0; border-radius:170px 170px 0 0; bottom:0; }.arch-one { width:230px; height:285px; left:38px; }.arch-two { width:150px; height:190px; left:78px; border-color:white; }.hero-art p { position:absolute; right:28px; bottom:25px; font-size:11px; letter-spacing:1.5px; font-weight:700; color:var(--pine); }
.section { max-width:1200px; margin:auto; padding:90px 36px; }.services { border-top:1px solid #dad5ca; }.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:45px; }.section-heading h2 { font-size:37px; max-width:550px; line-height:1.1; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #bfc5ba; }.service-grid article { padding:26px 32px 30px 0; margin-right:28px; border-right:1px solid #bfc5ba; }.service-grid article:last-child { border:0; margin:0; }.number { color:var(--coral); font-size:13px; font-weight:700; }.service-grid h3 { font-size:27px; margin:31px 0 12px; }.service-grid article > p:not(.number) { color:var(--muted); min-height:74px; }.service-grid a { color:var(--pine); font-size:13px; font-weight:700; }
.about { background:var(--ink); color:white; display:grid; grid-template-columns:1.1fr .9fr; }.about-card { padding:85px max(36px, calc((100vw - 1200px)/2 + 36px)); padding-right:80px; }.about h2 { font-size:43px; line-height:1.08; }.about-card > p:not(.eyebrow) { color:#d2e0ee; margin:25px 0; max-width:490px; }.about .text-link { color:white; border-color:#8eafca; }.quote { background:#dbe9f5; color:var(--ink); padding:75px 70px; display:flex; flex-direction:column; justify-content:center; }.quote span { font:80px/0 "Playfair Display"; color:var(--coral); }.quote p { font:600 28px/1.25 "Playfair Display"; max-width:330px; }
.products { padding-bottom:85px; }.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.product-grid article { background:#fff; padding:30px; border:1px solid #d6e0ea; }.product-icon { display:grid; place-items:center; height:36px; width:36px; border-radius:50%; background:#e4edf7; color:var(--pine); font-size:19px; font-weight:700; }.product-grid h3 { margin:26px 0 10px; font-size:25px; }.product-grid p { color:var(--muted); margin:0; }
.pillars { background:var(--ink); color:#fff; padding:88px max(36px, calc((100vw - 1200px)/2 + 36px)); display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }.pillars h2 { font-size:42px; line-height:1.1; }.pillar-intro > p:last-child { color:#cbdbe9; max-width:360px; }.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.pillar-grid span { color:#91c7ed; font-size:12px; font-weight:700; }.pillar-grid h3 { font-size:27px; margin:22px 0 10px; }.pillar-grid p { color:#d3e1ed; font-size:14px; }.home-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }.home-faq .section-heading { display:block; }.faq-list { border-top:1px solid #cbd7e2; }.faq-list details { border-bottom:1px solid #cbd7e2; padding:19px 0; }.faq-list summary { cursor:pointer; color:var(--ink); font-weight:700; list-style:none; }.faq-list summary::after { content:'+'; float:right; color:var(--coral); font-size:20px; }.faq-list details[open] summary::after { content:'−'; }.faq-list p { color:var(--muted); margin:14px 25px 2px 0; }.insights { background:#e8f0f7; padding:85px max(36px, calc((100vw - 1200px)/2 + 36px)); display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; }.insights h2 { font-size:42px; line-height:1.1; }.insights > div > p:last-child { color:var(--muted); }.insight-list { border-top:1px solid #b9cad9; }.insight-list article { padding:23px 0; border-bottom:1px solid #b9cad9; }.insight-list article > p { color:var(--coral); font-size:11px; font-weight:700; letter-spacing:1.2px; }.insight-list h3 { font-size:25px; margin:6px 0 15px; }.insight-list a { font-size:13px; color:var(--pine); font-weight:700; }
.contact { text-align:center; padding:100px 36px; }.contact h2 { font-size:50px; }.contact > p:not(.eyebrow) { color:var(--muted); margin:16px auto 27px; }.light { background:var(--pine); }
footer { max-width:1200px; border-top:1px solid #dad5ca; margin:auto; padding:27px 36px 36px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; } footer .brand { color:var(--ink); }
.page-hero { max-width:1000px; margin:0 auto; padding:95px 36px 90px; text-align:center; }.page-hero h1 { margin:auto; max-width:850px; }.page-hero > p:last-child { max-width:660px; margin:25px auto 0; color:var(--muted); font-size:18px; }.content-section { max-width:1200px; margin:0 auto; padding:85px 36px; display:grid; grid-template-columns:1fr 1fr; gap:100px; border-top:1px solid #d7e0e8; }.content-section h2,.callout h2 { font-size:41px; line-height:1.08; }.content-section > div:last-child { color:var(--muted); font-size:17px; }.values { background:var(--ink); color:#fff; padding:80px max(36px, calc((100vw - 1200px)/2 + 36px)); display:grid; grid-template-columns:repeat(3,1fr); gap:50px; }.values b { color:#8fc4ed; font-size:14px; }.values h3 { margin:24px 0 10px; font-size:27px; }.values p { color:#cfdeeb; }.team-section { max-width:1200px; margin:auto; padding:90px 36px; }.team-note { max-width:650px; color:var(--muted); margin:-25px 0 35px; }.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.portrait { height:290px; display:grid; place-items:center; background:#dce8f3; color:var(--pine); font:600 56px "Playfair Display"; }.team-card h3 { margin:17px 0 1px; font-size:23px; }.team-card p { margin:0; color:var(--muted); font-size:14px; }.callout { margin:0; padding:85px 30px; background:var(--sand); text-align:center; }.callout h2 { margin:0 auto 25px; max-width:640px; }.detailed-services { max-width:1200px; margin:auto; padding:0 36px 90px; }.detailed-services article { padding:55px 0; display:grid; grid-template-columns:120px 1fr 1fr; gap:45px; border-top:1px solid #cbd7e2; }.detailed-services h2 { font-size:37px; }.detailed-services p:not(.number) { color:var(--muted); grid-column:2; margin:0; }.detailed-services ul { color:var(--muted); grid-column:3; grid-row:2 / span 2; margin:0; padding-left:18px; }.detailed-services a { grid-column:2; width:max-content; }.product-list { max-width:1200px; margin:auto; padding:0 36px 90px; }.product-list article { display:grid; grid-template-columns:70px 1fr auto; gap:25px; align-items:center; padding:40px 0; border-top:1px solid #cbd7e2; }.product-list article > span { color:var(--coral); font-weight:700; }.product-list h2 { font-size:31px; }.product-list p { color:var(--muted); max-width:650px; }.soft { background:#edf3f8; border:0; max-width:none; padding-left:max(36px, calc((100vw - 1200px)/2 + 36px)); padding-right:max(36px, calc((100vw - 1200px)/2 + 36px)); }.contact-layout { max-width:1000px; margin:auto; padding:20px 36px 100px; display:grid; grid-template-columns:1.2fr .8fr; gap:70px; }.contact-layout h2 { font-size:40px; }.contact-layout > div > p:not(.eyebrow) { color:var(--muted); font-size:17px; max-width:500px; margin:20px 0 30px; }.contact-layout aside { background:var(--ink); color:#fff; padding:38px; }.contact-layout aside h3 { font-size:26px; }.contact-layout aside p { color:#d0dfeb; }.contact-layout aside a { color:#fff; }.contact-layout hr { border:0; border-top:1px solid #55718d; margin:25px 0; }.small { font-size:14px; }
@media (max-width:720px) { .site-header { padding:20px; } nav a:not(.nav-button) { display:none; }.hero { padding:45px 20px 55px; grid-template-columns:1fr; }.hero-art { height:300px; }.section { padding:65px 20px; }.section-heading { display:block; }.section-heading h2 { font-size:33px; }.service-grid,.about,.product-grid,.values,.team-grid,.content-section,.contact-layout,.pillars,.home-faq,.insights { grid-template-columns:1fr; }.service-grid article { border-right:0; border-bottom:1px solid #bfc5ba; margin:0; padding:25px 0; }.service-grid article > p:not(.number) { min-height:0; }.about-card,.quote { padding:60px 25px; }.about h2 { font-size:37px; }.contact h2 { font-size:40px; } footer { margin:0 20px; padding:25px 0; display:block; } footer p:last-child { display:none; }.page-hero { padding:60px 20px; text-align:left; }.page-hero h1 { font-size:48px; }.content-section,.team-section,.detailed-services,.product-list,.contact-layout { padding-left:20px; padding-right:20px; }.content-section { gap:25px; padding-top:60px; padding-bottom:60px; }.values,.pillars,.insights { padding:55px 25px; gap:20px; }.pillar-grid { grid-template-columns:1fr; }.detailed-services article { display:block; padding:38px 0; }.detailed-services article > * { margin-bottom:20px !important; }.detailed-services ul { padding-left:20px; }.product-list article { grid-template-columns:1fr; padding:35px 0; }.product-list .button { width:max-content; }.contact-layout { gap:30px; }.portrait { height:240px; } }
@media (max-width:720px) { .site-header { position:relative; } .site-header > nav { display:none; } .mobile-menu { display:block; position:relative; }.mobile-menu summary { list-style:none; cursor:pointer; background:var(--ink); color:#fff; padding:10px 14px; border-radius:3px; font-size:13px; font-weight:700; }.mobile-menu summary::-webkit-details-marker { display:none; }.mobile-menu summary::after { content:'+'; margin-left:8px; }.mobile-menu[open] summary::after { content:'−'; }.mobile-menu > div { position:absolute; right:0; top:46px; z-index:10; min-width:185px; background:#fff; box-shadow:0 12px 26px rgba(11,31,58,.18); border:1px solid #d5e0e9; }.mobile-menu a { display:block; padding:14px 18px; color:var(--ink); font-size:14px; font-weight:700; border-bottom:1px solid #e4ebf0; }.mobile-menu a:last-child { border:0; }.button { min-height:48px; justify-content:center; }.hero-actions { flex-wrap:wrap; }.hero-art { order:-1; } h1 { font-size:48px; }.intro { font-size:16px; }.service-grid h3 { margin-top:18px; }.quote p { font-size:25px; } }
.map-section { max-width:1200px; margin:0 auto 90px; padding:0 36px; }.map-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:28px; }.map-heading h2 { font-size:38px; line-height:1.1; margin:0; }.map-section iframe { width:100%; height:500px; border:0; filter:saturate(.78) contrast(.95); box-shadow:0 18px 35px rgba(11,31,58,.14); } @media (max-width:720px) { .map-section { display:block; padding:0 20px; margin-bottom:60px; }.map-heading { display:block; margin-bottom:25px; }.map-heading .button { margin-top:18px; }.map-section iframe { height:330px; } }
.about-team-photo { width:100%; height:390px; display:block; object-fit:cover; margin:0 0 45px; } @media (max-width:720px) { .about-team-photo { height:240px; margin-bottom:30px; } }
.contact-page { max-width:1100px; margin:0 auto; padding:80px 36px 100px; }.contact-page-heading h1 { color:#548ec4; font-size:62px; line-height:1; }.contact-page-heading > p:last-child { color:var(--muted); font-size:17px; max-width:600px; margin:20px 0 0; }.contact-rule { height:3px; background:#70a8d8; margin:55px 0 45px; }.office-details { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:stretch; }.office-copy h2 { color:#548ec4; font-size:36px; margin-bottom:35px; }.office-copy p { display:flex; align-items:flex-start; gap:18px; color:#687789; font-size:18px; line-height:1.65; }.office-copy a:not(.button) { color:#548ec4; }.contact-icon { color:var(--ink); font-size:22px; line-height:1.45; width:25px; text-align:center; }.office-phone,.office-email { margin-top:24px; }.office-copy .button { margin-top:28px; }.office-details iframe { width:100%; min-height:510px; border:0; box-shadow:0 15px 35px rgba(11,31,58,.13); filter:saturate(.78) contrast(.95); } @media (max-width:720px) { .contact-page { padding:55px 20px 65px; }.contact-page-heading h1 { font-size:48px; }.contact-rule { margin:38px 0 32px; }.office-details { grid-template-columns:1fr; gap:35px; }.office-copy h2 { font-size:32px; margin-bottom:25px; }.office-copy p { font-size:17px; }.office-details iframe { min-height:340px; } }
:root { --ink:#071f3d; --pine:#0a3562; --cream:#f7faff; --sand:#e4eff9; --coral:#3a7fbd; --muted:#52677c; }.site-header { max-width:none; margin:0; padding-left:max(36px, calc((100vw - 1200px)/2 + 36px)); padding-right:max(36px, calc((100vw - 1200px)/2 + 36px)); background:var(--ink); color:#fff; }.site-header nav a:not(.nav-button) { color:#e8f2fb; }.site-header .brand { color:#fff; }.site-header .brand span { color:#83b7e2; }.nav-button { border-color:#83b7e2; color:#fff; }.nav-button:hover { background:#fff; color:var(--ink); }.button { background:var(--pine); }.button:hover { background:#071f3d; }.hero { background:linear-gradient(135deg,#f7faff 0%,#e7f0f8 100%); }.hero-art { box-shadow:0 20px 40px rgba(7,31,61,.18); }.services { border-color:#c4d5e5; }.about { background:#071f3d; }.contact { background:#e8f1f8; max-width:none; }.contact > * { max-width:1200px; margin-left:auto; margin-right:auto; }.contact .button { background:#071f3d; }.contact .button:hover { background:#0a3562; } footer { max-width:none; margin:0; padding-left:max(36px, calc((100vw - 1200px)/2 + 36px)); padding-right:max(36px, calc((100vw - 1200px)/2 + 36px)); background:#071f3d; color:#cfe0f0; border:0; } footer .brand { color:#fff; }.page-hero { background:linear-gradient(135deg,#f7faff 0%,#e7f0f8 100%); max-width:none; }.page-hero > * { max-width:850px; margin-left:auto; margin-right:auto; }.page-hero .eyebrow { max-width:850px; }.page-hero h1 { color:#071f3d; }.callout { background:#071f3d; color:#fff; }.callout .eyebrow { color:#83b7e2; }.callout .button { background:#fff; color:#071f3d; }.soft { background:#e6f0f9; } @media (max-width:720px) { .site-header { padding-left:20px; padding-right:20px; } footer { padding-left:20px; padding-right:20px; } }
.director-profile { max-width:1200px; margin:0 auto; padding:95px 36px; display:grid; grid-template-columns:.68fr 1.32fr; gap:70px; align-items:start; }.director-photo-placeholder { min-height:440px; background:linear-gradient(145deg,#0a3562,#071f3d); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font:600 42px/1.1 "Playfair Display"; }.director-photo-placeholder small { font:600 12px "DM Sans"; color:#b8d4eb; letter-spacing:1px; margin-top:16px; text-transform:uppercase; }.director-copy h2 { font-size:42px; line-height:1.08; }.director-title { color:#3a7fbd; font-weight:700; margin-top:8px; }.director-copy > p:not(.eyebrow):not(.director-title) { color:var(--muted); font-size:16px; } @media (max-width:720px) { .director-profile { grid-template-columns:1fr; padding:65px 20px; gap:35px; }.director-photo-placeholder { min-height:300px; }.director-copy h2 { font-size:35px; } }
.service-grid article { margin:0; padding:26px 28px 30px 0; }.service-grid article:not(:nth-child(3n)) { border-right:1px solid #bfc5ba; }.service-grid article:nth-child(3n) { border-right:0; }.service-grid article:nth-child(n+4) { border-top:1px solid #bfc5ba; padding-top:32px; }.service-grid article:nth-child(4),.service-grid article:nth-child(5) { padding-right:28px; }
.service-grid article { padding:26px 28px 30px; }.service-grid article:nth-child(n+4) { padding-top:32px; } @media (max-width:720px) { .service-grid article { padding:25px 0; } }
.director-photo-placeholder { background:linear-gradient(rgba(7,31,61,.05),rgba(7,31,61,.05)),url("/static/images/david-chimonera.4010ae0ae597.jpg") center top / cover no-repeat; }.director-photo-placeholder span,.director-photo-placeholder small { display:none; }
.whatsapp-widget{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:1000;font-family:Arial,sans-serif}.whatsapp-widget summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;background:#075e54;color:white;padding:13px 18px;border-radius:30px;box-shadow:0 4px 18px #0003;font-weight:700}.whatsapp-widget summary::-webkit-details-marker{display:none}.whatsapp-options{position:absolute;bottom:70px;right:0;width:min(290px,calc(100vw - 40px));box-sizing:border-box;background:white;color:#0b1f3a;padding:20px;border:1px solid #ddd;border-radius:14px;box-shadow:0 6px 24px #0003}.whatsapp-options p{font-size:14px;margin:10px 0}.whatsapp-options a{display:block;padding:12px 0;color:#075e54;text-decoration:underline}.whatsapp-widget summary:focus-visible,.whatsapp-options a:focus-visible{outline:3px solid #598dd0;outline-offset:4px}body{padding-bottom:85px}