:root{
  --navy:#0b2741;
  --cream:#f5f0e7;
  --powder:#c9def0;
  --yellow:#dfff00;
  --ink:#0b2741;
  --white:#f8f5ef;
  --sans:"DM Sans",Arial,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.header{height:70px;padding:0 6.5vw;background:var(--cream);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}
.logo{font-family:var(--serif);font-size:20px}
.header nav{display:flex;gap:30px;font-size:12px}
.header nav a:hover{opacity:.55}
.menu{display:none;border:0;background:none;color:var(--ink);font:500 12px var(--sans)}
.navy{background:var(--navy);color:var(--white)}
.cream{background:var(--cream);color:var(--ink)}
.powder{background:var(--powder);color:var(--ink)}
.hero{min-height:500px;padding:60px 10vw 48px;display:grid;grid-template-columns:1.05fr .8fr;gap:10vw;align-items:center;position:relative;overflow:hidden}
.hero-title,.hero-copy{position:relative;z-index:2}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.035em}
.hero h1{font-size:clamp(64px,7vw,102px);line-height:.84}
.hero h1 em,.services h2 em{font-weight:500}
.highlight{display:block;height:10px;background:var(--yellow);border-radius:50%;transform:rotate(-1deg)}
.hero-highlight{width:75%;max-width:390px;margin:10px 0 30px 32px}
.kicker,.label{font-size:10px;letter-spacing:.18em;line-height:1.5;font-weight:600}
.hero .kicker{color:#e6e9ec;margin:0 0 24px}
.hero-copy{border-left:1px solid rgba(255,255,255,.45);padding-left:45px;max-width:360px}
.hero-copy p{font-size:19px;line-height:1.55;margin:0}
.cta{display:inline-block;font-size:10px;letter-spacing:.16em;font-weight:600;padding-bottom:5px;border-bottom:1px solid currentColor}
.arc{position:absolute;border:1px solid rgba(255,255,255,.4);border-radius:50%;pointer-events:none}
.arc-top{width:470px;height:470px;right:-270px;top:40px}
.about{padding:70px 10vw 55px;display:grid;grid-template-columns:1fr .72fr;gap:11vw;align-items:center}
.about-copy{max-width:590px}
.about h2{font-size:clamp(48px,5vw,70px);margin:20px 0 30px}
.about p{font-size:15px;line-height:1.65;margin:0 0 18px}
.portrait{margin:0;justify-self:end;width:min(100%,430px);height:500px;overflow:hidden;background:#ddd}
.portrait img{width:100%;height:100%;object-fit:contain;object-position:center;background:#d8d8d6;display:block}
.brands{padding:25px 4.5vw;display:grid;grid-template-columns:150px 1fr;align-items:center;border-top:1px solid rgba(11,39,65,.12);border-bottom:1px solid rgba(11,39,65,.12)}
.brands-label{font-size:9px;letter-spacing:.16em;line-height:1.35}
.brands-list{display:grid;grid-template-columns:repeat(6,1fr);align-items:center}
.brands-list span{min-height:52px;display:flex;align-items:center;justify-content:center;padding:0 16px;border-left:1px solid rgba(11,39,65,.2);font-family:var(--serif);font-size:18px;white-space:nowrap}
.brands-list span:nth-child(2),.brands-list span:nth-child(4),.brands-list span:nth-child(5),.brands-list span:nth-child(6){font-family:var(--sans);font-size:14px;letter-spacing:.12em}
.services{padding:55px 10vw 65px}
.services-head{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center}
.services h2{font-size:clamp(48px,5vw,68px);line-height:.98;margin-top:20px}
.services-highlight{width:210px;margin:3px 0 0 80px}
.help-card{background:#efff75;padding:28px 34px;font-size:16px;line-height:1.55;max-width:550px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:55px}
.service-grid article{padding:0 38px}
.service-grid article:first-child{padding-left:0}
.service-grid article+article{border-left:1px solid rgba(11,39,65,.25)}
.service-grid h3{font-size:21px;margin-bottom:16px}
.service-grid p{font-size:14px;line-height:1.55;margin:0;max-width:310px}
.onpoint{padding:58px 10vw 68px;display:grid;grid-template-columns:1.05fr .9fr;gap:8vw;align-items:center;position:relative;overflow:hidden}
.onpoint-name,.onpoint-copy{position:relative;z-index:2}
.light-label{color:#f3f4f4}
.onpoint-name h2{font-size:clamp(84px,10vw,150px);line-height:.9;margin-top:15px}
.dot{color:var(--yellow)}
.onpoint-copy{border-left:1px solid rgba(255,255,255,.45);padding-left:50px}
.onpoint-copy h3{font-size:28px;line-height:1.12;margin-bottom:20px;max-width:500px}
.onpoint-copy p{font-size:15px;line-height:1.6;max-width:520px;margin:0 0 28px;color:#e2e6e9}
.muted-link{color:#fff}
.arc-bottom{width:390px;height:390px;left:-250px;bottom:-250px}
.contact{padding:70px 10vw;display:grid;grid-template-columns:.35fr 1fr;gap:8vw;align-items:start}
.contact h2{font-size:55px;margin-bottom:15px}
.contact p{font-size:15px;line-height:1.6;margin:0 0 24px}
.dark{color:var(--ink)}
.footer{padding:28px 6.5vw;display:flex;justify-content:space-between;border-top:1px solid rgba(11,39,65,.15);font-size:9px;letter-spacing:.15em}

@media(max-width:850px){
  .header{height:62px;padding:0 22px}
  .header nav{display:none;position:absolute;left:0;right:0;top:62px;background:var(--cream);padding:20px 22px 26px;flex-direction:column;gap:18px;border-top:1px solid rgba(11,39,65,.12)}
  .header nav.open{display:flex}
  .menu{display:block}
  .hero{padding:55px 24px;grid-template-columns:1fr;gap:45px;min-height:auto}
  .hero h1{font-size:58px}
  .hero-copy{margin-left:22%;padding-left:24px}
  .arc-top{right:-370px}
  .about{padding:60px 24px;grid-template-columns:1fr;gap:40px}
  .portrait{justify-self:stretch;width:100%;height:auto;aspect-ratio:3/4}
  .brands{padding:22px 24px;grid-template-columns:1fr;gap:18px;overflow:hidden}
  .brands-list{display:flex;overflow-x:auto;padding-bottom:5px}
  .brands-list span{min-width:145px;border-left:1px solid rgba(11,39,65,.2)}
  .services{padding:60px 24px}
  .services-head{grid-template-columns:1fr;gap:35px}
  .service-grid{grid-template-columns:1fr;margin-top:40px}
  .service-grid article{padding:24px 0}
  .service-grid article+article{border-left:0;border-top:1px solid rgba(11,39,65,.22)}
  .onpoint{padding:60px 24px;grid-template-columns:1fr;gap:38px}
  .onpoint-name h2{font-size:82px}
  .onpoint-copy{padding-left:24px;margin-left:10%;max-width:620px}
  .contact{padding:60px 24px;grid-template-columns:1fr;gap:25px}
}
@media(max-width:480px){
  .logo{font-size:18px}
  .hero h1{font-size:49px}
  .hero-highlight{height:7px;width:80%;margin-left:12px}
  .hero-copy{margin-left:12%;max-width:290px}
  .hero-copy p{font-size:17px}
  .about h2,.services h2{font-size:43px}
  .about p{font-size:14px}
  .portrait{aspect-ratio:3/4}
  .services-highlight{height:7px;width:155px;margin-left:55px}
  .help-card{padding:22px;font-size:14px}
  .onpoint-name h2{font-size:70px}
  .onpoint-copy{margin-left:0}
  .onpoint-copy h3{font-size:24px}
}