:root { --navy:#102141; --blue:#1d3968; --gold:#d9b562; --sky:#f2f6fb; --white:#fff; --line:#dce4ee; --copy:#445064; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--navy); background:var(--white); font:15px/1.75 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } a { color:inherit; text-decoration:none; } .shell { width:min(1140px,calc(100% - 48px)); margin:auto; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif; letter-spacing:0; } h1 { max-width:830px; font-size:clamp(1.9rem,3.8vw,3.2rem); font-weight:700; line-height:1.15; } h2 { font-size:clamp(2rem,3.5vw,3.25rem); font-weight:700; line-height:1.2; } h3 { font-size:1.15rem; font-weight:600; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); } .header-inner { display:flex; min-height:82px; align-items:center; gap:30px; } .brand { display:flex; align-items:center; gap:10px; min-width:max-content; color:var(--navy); font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif; font-size:1.08rem; font-weight:700; } .brand small { display:block; color:var(--copy); font:500 .55rem/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; } .brand-mark { display:grid; width:33px; height:33px; place-items:center; border-radius:50%; background:var(--navy); color:var(--gold); font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif; font-size:1.05rem; } .desktop-nav { display:flex; flex:1; justify-content:center; gap:32px; } .desktop-nav a { position:relative; padding:6px 1px; color:var(--copy); font-size:.92rem; font-weight:500; letter-spacing:.01em; transition:color .18s; } .desktop-nav a:hover { color:var(--navy); } .desktop-nav a.active { color:var(--navy); font-weight:600; } .desktop-nav a.active::after { content:''; position:absolute; left:1px; right:1px; bottom:-4px; height:2px; border-radius:2px; background:var(--gold); } .header-actions { display:flex; align-items:center; gap:17px; } .button { display:inline-flex; align-items:center; gap:14px; padding:12px 22px; border:1px solid var(--navy); border-radius:12px; background:var(--navy); color:var(--white); font-size:.78rem; font-weight:600; transition:background .2s,border-color .2s,transform .2s; } .button:hover { border-color:var(--blue); background:var(--blue); color:var(--white); transform:translateY(-1px); } .button-small { padding:9px 14px; font-size:.7rem; } .language { display:inline-flex; align-items:center; } .flag { display:block; width:auto; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(16,33,65,.12); transition:transform .2s; } .language:hover .flag { transform:scale(1.08); } .menu-toggle,.mobile-nav { display:none; }
.hero { background:var(--white); padding:84px 0 0; } .hero-grid { display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:72px; min-height:495px; } .hero-copy { max-width:590px; margin:24px 0 31px; color:var(--copy); font-size:1rem; } .hero-art { position:relative; aspect-ratio:1880/1253; overflow:hidden; border-radius:clamp(60px,14vw,165px); background:url('assets/hero.jpeg') center/cover; } .hero-art p { position:absolute; right:24px; bottom:18px; margin:0; color:var(--white); font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif; font-size:1.2rem; font-weight:600; line-height:1.1; text-align:right; text-shadow:0 1px 12px rgba(0,0,0,.45); } .sun,.path { display:none; } .proof { display:grid; grid-template-columns:repeat(4,1fr); margin-top:4px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .proof span { padding:0 26px; color:var(--navy); font-size:.92rem; font-weight:600; line-height:1.45; } .proof span:first-child { padding-left:0; } .proof span:last-child { padding-right:0; } .proof span:not(:first-child) { border-left:1px solid var(--line); } .proof span::before { content:''; display:block; width:22px; height:2px; margin-bottom:13px; background:var(--gold); }
.section { padding:100px 0; } .tint,.partners { background:var(--sky); } .principles-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:47px; } .principle { padding:25px 0 0; border-top:2px solid var(--gold); } .principle span,.work-item>span,.service-card>span,.article>span { color:var(--gold); font-size:.73rem; font-weight:600; } .principle h3 { margin:22px 0 9px; } .principle p,.work-item p,.partner-grid p { color:var(--copy); font-size:.88rem; } .section-intro { display:flex; align-items:end; justify-content:space-between; } .work-list { margin-top:30px; border-top:1px solid var(--line); } .work-item { display:grid; grid-template-columns:100px 1fr; gap:22px; padding:27px 0; border-bottom:1px solid var(--line); } .work-item h3 { margin-bottom:4px; } .work-item p { margin:0; }
.testimonials { padding:104px 0; background:var(--white); text-align:center; } .testimonial-heading { margin-bottom:40px; } .testimonial-slider { min-height:300px; max-width:820px; margin:auto; display:grid; place-items:center; } .testimonial blockquote { margin:0; color:var(--navy); font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif; font-size:clamp(1rem,1.5vw,1.3rem); font-weight:500; line-height:1.6; } .testimonial p { margin:24px 0 0; color:var(--copy); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .testimonial-controls { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:24px; } .testimonial-controls p { margin:0; color:var(--copy); font-size:.75rem; } .slider-button { display:grid; width:40px; height:40px; place-items:center; padding:0; border:1px solid var(--navy); border-radius:50%; background:var(--white); color:var(--navy); cursor:pointer; font-size:1rem; transition:background .2s,color .2s; } .slider-button:hover { background:var(--navy); color:var(--white); }
.partner-list { display:grid; max-width:820px; } .partner-block { padding:40px 0; border-top:1px solid var(--line); } .partner-block:last-child { border-bottom:1px solid var(--line); } .partner-block h2 { margin-bottom:16px; font-size:1.85rem; } .partner-block h2 a { color:inherit; transition:color .2s; } .partner-block h2 a:hover { color:var(--gold); } .partner-block h2 a span { color:var(--gold); font-size:1.15rem; } .partner-block p { max-width:760px; margin:0 0 14px; color:var(--copy); } .partner-block .text-link { display:inline-block; margin-top:8px; } .page-hero { padding:114px 0 85px; background:var(--sky); text-align:center; } .narrow { max-width:820px; margin:auto; } .lead { max-width:720px; margin:22px auto 0; color:var(--copy); font-size:1.05rem; } .two-column { display:grid; grid-template-columns:350px 1fr; gap:90px; align-items:start; } .portrait-block { width:100%; aspect-ratio:4/5; border-radius:3px; overflow:hidden; background:var(--sky); } .portrait-block img { display:block; width:100%; height:100%; object-fit:cover; } .prose { max-width:630px; color:var(--copy); font-size:1rem; } .prose h2 { margin:47px 0 22px; color:var(--navy); font-size:2.4rem; } .prose ul { margin:0 0 32px; padding:0; list-style:none; } .prose li { padding:13px 0; border-top:1px solid var(--line); } .prose li::before { margin-right:13px; color:var(--gold); content:'•'; } .prose .button { color:var(--white); }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .service-card { min-height:315px; padding:35px; border:1px solid var(--line); border-radius:3px; background:var(--white); } .service-card h2 { margin:25px 0 13px; font-size:2rem; } .service-card p { color:var(--copy); } .service-card .outcome { margin-top:20px; } .service-card a,.text-link { color:var(--blue); font-size:.84rem; font-weight:600; } .service-card a:hover,.text-link:hover { color:var(--gold); } .insights-layout { display:grid; grid-template-columns:1fr 240px; gap:80px; } .article { display:grid; grid-template-columns:130px 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--line); } .article>span { padding-top:2px; white-space:nowrap; } .article h2 { margin-bottom:5px; font-size:2rem; } .article h2 a { color:inherit; transition:color .2s; } .article h2 a:hover { color:var(--gold); } .article h2 a span { font-size:1.2rem; color:var(--gold); } .article p { color:var(--copy); } .insights-layout aside { align-self:start; padding-top:14px; border-top:2px solid var(--gold); } .insights-layout aside .text-link { display:block; padding:11px 0; border-bottom:1px solid var(--line); }
.contact-layout { display:grid; grid-template-columns:minmax(0,650px) 1fr; gap:90px; } .contact-form { display:grid; gap:22px; } .contact-form label { color:var(--navy); font-size:.74rem; font-weight:600; } .contact-form input,.contact-form textarea { display:block; width:100%; margin-top:7px; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; outline:0; color:var(--navy); background:transparent; font:1rem system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .contact-form input:focus,.contact-form textarea:focus { border-color:var(--navy); } .contact-form .button { justify-self:start; cursor:pointer; margin-top:8px; } .form-status { margin:0; color:var(--blue); } .form-status.is-error { color:#b23b3b; } .hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .contact-aside { padding:24px; border-left:2px solid var(--gold); color:var(--copy); } footer { padding:48px 0; background:var(--navy); color:var(--white); } .footer-inner { display:grid; grid-template-columns:1fr auto; gap:20px; } .footer-brand { color:var(--white); } .footer-brand .brand-mark { background:var(--gold); color:var(--navy); } .footer-brand small,.footer-inner p { color:#c4d0e2; } .footer-inner p { margin:10px 0 0; font-size:.78rem; } .footer-links { display:flex; gap:22px; align-items:center; font-size:.74rem; font-weight:500; } .footer-links a { display:inline-flex; align-items:center; gap:7px; transition:color .2s; } .footer-links a:hover { color:var(--gold); } .social-icon { width:16px; height:16px; flex:0 0 16px; fill:currentColor; } .copyright { grid-column:1/-1; padding-top:22px; border-top:1px solid rgba(255,255,255,.25); }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; } .reveal.is-visible { opacity:1; transform:none; } .delay-1 { transition-delay:.5s; } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } } @media (max-width:760px) { .shell { width:min(100% - 36px,1140px); } .header-inner { min-height:70px; justify-content:space-between; } .desktop-nav,.header-actions .button { display:none; } .header-actions { margin-left:auto; } .menu-toggle { display:grid; width:32px; gap:5px; padding:8px 0; border:0; background:transparent; } .menu-toggle span { height:1px; background:var(--navy); } .mobile-nav { display:none; width:min(100% - 36px,1140px); margin:auto; padding:0 0 16px; } .menu-open .mobile-nav { display:grid; gap:2px; } .mobile-nav a { padding:11px 2px; color:var(--navy); font-size:1.05rem; font-weight:500; border-bottom:1px solid var(--line); } .mobile-nav a.active { color:var(--navy); font-weight:600; box-shadow:inset 3px 0 0 var(--gold); padding-left:12px; } .hero { padding-top:54px; } .hero-grid { grid-template-columns:1fr; gap:36px; min-height:0; } .hero-art { width:min(320px,100%); justify-self:center; } .proof { grid-template-columns:1fr; padding:18px 0; } .proof span { padding:15px 0; } .proof span:not(:first-child) { border-left:0; border-top:1px solid var(--line); } .proof span::before { margin-bottom:9px; } .section,.testimonials { padding:72px 0; } .principles-grid,.partner-grid,.service-grid { grid-template-columns:1fr; } .principles-grid { margin-top:35px; } .section-intro { display:block; } .work-item { grid-template-columns:52px 1fr; } .testimonial-slider { min-height:420px; } .two-column,.insights-layout,.contact-layout { grid-template-columns:1fr; gap:40px; } .page-hero { padding:75px 0 59px; } .service-card { min-height:auto; padding:28px; } .article { grid-template-columns:1fr; gap:6px; } .article h2 { font-size:1.7rem; } .footer-inner { grid-template-columns:1fr; } .footer-links { flex-wrap:wrap; } .copyright { grid-column:auto; } .hero-copy,.lead { font-size:.98rem; } }