:root { --blue: #007aff; --pale-blue: #c4dfff; --ink: #262626; --section-width: 1060px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 111px; }
body { margin: 0; color: var(--ink); font-family: Jost, sans-serif; font-size: 17px; line-height: 28px; }
img { display: block; max-width: 100%; }
.site-header { height: 111px; background: #fff; border-bottom: 1px solid #f2f2f2; position: sticky; top: 0; z-index: 10; }
.header-inner { height: 100%; max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo { width: 60px; height: 60px; display: block; }
.logo img { width: 60px; height: 60px; object-fit: contain; }
.site-nav { display: flex; align-self: stretch; align-items: center; }
.site-nav a { display: block; color: #000; font-size: 14px; font-weight: 600; line-height: 50px; margin-left: 2px; padding: 0 14px; text-decoration: none; }
.site-nav a.is-active, .site-nav a:hover, .site-nav a:focus-visible { background: #f2f2f2; color: var(--blue); outline: none; }
.menu-button { display: none; background: transparent; border: 0; padding: 12px 0 12px 12px; }
.menu-button span { background: #000; display: block; height: 1px; margin: 5px 0; width: 24px; }
.hero { height: 800px; background: var(--pale-blue); overflow: hidden; }
.hero-inner { height: 100%; max-width: 1240px; margin: 0 auto; position: relative; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: #000; font-family: Rubik, sans-serif; font-weight: 400; }
h1 { font-size: 70px; letter-spacing: -1px; line-height: 70px; margin: 0; padding: 244px 0 0 74px; position: relative; z-index: 1; }
.hero-portrait { bottom: 0; height: 800px; max-width: none; position: absolute; right: 0; width: 800px; }
.section { padding: 80px 0; }
.content { margin: 0 auto; max-width: var(--section-width); }
h2 { font-size: 36px; line-height: 46px; margin-bottom: 40px; }
p { font-family: Rubik, sans-serif; font-size: 18px; line-height: 29px; margin-bottom: 20px; }
.about-grid { align-items: center; display: grid; grid-template-columns: 3fr 2fr; }
.about-copy { padding-right: 5%; }
.about-copy p { color: #333; }
.about-image { width: 100%; }
.experience { background: #ebeff5; }
.experience h2 { margin: 0 auto 40px; max-width: 850px; text-align: center; }
.experience-grid { align-items: center; display: grid; grid-template-columns: 2fr 3fr; }
.experience-image { border-radius: 24px; width: 100%; }
.experience-copy { padding: 40px 0 0 10%; }
.experience-copy p { color: #333; }
.expertise { background: #f3f3f3; }
.expertise-intro { display: grid; grid-template-columns: 3fr 2fr; margin-bottom: 40px; }
.expertise-intro p { border-radius: 5px; margin: 0; padding: 30px; }
.expertise-intro .intro-primary { background: var(--blue); color: #f7f7ef; }
.expertise-intro > :not(.intro-primary) { color: #333; }
.expertise-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.expertise-grid li { background: #fff; border-radius: 5px; min-height: 194px; padding: 30px; transition: background-color .4s ease-in-out; }
.expertise-grid li:hover { background: var(--pale-blue); }
.expertise-grid span { display: block; font-family: Rubik, sans-serif; font-size: 14px; font-weight: 300; line-height: 25px; margin-bottom: 0; opacity: .25; }
.expertise-grid h3 { font-size: 18px; line-height: 29px; margin: 0; }
footer { background: #000; color: #4d4d4d; padding: 20px 0; }
footer .content { font-size: 17px; }
@media (max-width: 1279px) { .header-inner { padding: 0 25px; } .hero-inner { max-width: 1024px; } h1 { font-size: 63px; line-height: 63px; padding-left: 25px; padding-top: 218px; } .hero-portrait { height: 812px; right: -104px; width: 812px; } .content { margin-left: 5%; margin-right: 5%; } }
@media (max-width: 959px) { .hero { height: 960px; } .hero-inner { max-width: 778px; } h1 { font-size: 82px; line-height: 82px; padding: 57px 0 0; text-align: center; } .hero-portrait { bottom: 0; height: min(100vw, 779px); right: 50%; transform: translateX(50%); width: min(100vw, 779px); } .about-grid, .experience-grid, .expertise-intro { grid-template-columns: 1fr; } .about-copy { padding: 0; } .about-image { margin: 20px auto 0; max-width: 400px; } .experience-copy { padding: 40px 0 0; } .expertise-intro { gap: 20px; } .expertise-intro p { padding: 30px; } .expertise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .site-header { height: 70px; } html { scroll-padding-top: 70px; } .header-inner { padding: 0 20px; } .logo, .logo img { height: 50px; width: 50px; } .menu-button { display: block; } .site-nav { background: #fff; border-bottom: 1px solid #f2f2f2; display: none; left: 0; padding: 10px 20px 20px; position: absolute; right: 0; top: 69px; } .site-nav.is-open { display: block; } .site-nav a { line-height: 40px; margin: 0; padding: 0 12px; } .hero { height: 720px; } h1 { font-size: 49px; line-height: 49px; padding-top: 75px; } .hero-portrait { height: 580px; width: 580px; } .section { padding: 60px 0; } h2 { font-size: 27px; line-height: 27px; margin-bottom: 30px; } .about h2 br { display: none; } p, .expertise-grid h3 { font-size: 18px; line-height: 29px; } .expertise-grid { gap: 12px; } .expertise-grid li { min-height: 170px; padding: 24px; } footer { padding: 20px 0; } }
@media (max-width: 479px) { .content { margin-left: 20px; margin-right: 20px; } .hero { height: 720px; } h1 { font-size: 49px; line-height: 49px; padding-top: 75px; } .hero-portrait { height: 580px; width: 580px; } h2 { font-size: 24px; line-height: 24px; } .expertise-grid { grid-template-columns: 1fr; } .expertise-grid li { min-height: 0; } }