:root{
  --ecc-blue:#2b5797;
  --ink:#2e2e2e;
  --max:980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#fff;
  color:var(--ink);
  font-family:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.site-header{
  height:86px;
  background:#fff;
  position:relative;
  z-index:50;
}
.header-inner{
  width:min(var(--max),calc(100% - 48px));
  height:100%;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{display:block;text-decoration:none;color:#333b54;line-height:1}
.brand-main{display:block;font-size:20px;font-weight:400;letter-spacing:.035em}
.brand-sub{display:block;margin-top:7px;font-size:9.5px;font-weight:300;letter-spacing:.18em;color:#555b69}
.nav{display:flex;gap:31px;align-items:center}
.nav a{text-decoration:none;font-size:13px;font-weight:300;color:#444;transition:opacity .15s}
.nav a:hover,.nav a.current{opacity:.62}

/* HOME: upper parallax stage. Coast is its own background layer. */
.home-stage{position:relative;isolation:isolate;background:#fff}
.coast-window{
  height:565px;
  position:relative;
  overflow:hidden;
  background:#111;
}
.coast-layer{
  position:absolute;
  left:0;
  top:-120px;
  width:100%;
  height:auto;
  min-height:0;
  z-index:0;
  will-change:transform;
  pointer-events:none;
}
.coast-shade{position:absolute;inset:0;background:rgba(0,0,0,.10);z-index:1;pointer-events:none}
.welcome{
  position:absolute;
  z-index:2;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:0 24px;
  text-shadow:0 1px 3px rgba(0,0,0,.28);
}
.welcome h1{
  margin:0 0 17px;
  font-size:31px;
  line-height:1.25;
  font-weight:300;
  letter-spacing:.07em;
}
.welcome p{
  margin:0;
  font-size:12px;
  line-height:1.5;
  font-weight:300;
  letter-spacing:.105em;
}
.about{
  position:relative;
  z-index:5;
  background:var(--ecc-blue);
  color:#fff;
  padding:76px 24px 80px;
  text-align:center;
}
.about-inner{max-width:835px;margin:auto}
.about h2{
  margin:0 0 34px;
  font-size:26px;
  line-height:1.2;
  font-weight:300;
  letter-spacing:.055em;
  color:#fff;
}
.about p{max-width:810px;margin:0 auto 18px;font-size:14.5px;line-height:1.7;font-weight:300;color:#fff}
.about .btn{
  display:inline-block;
  margin-top:20px;
  padding:10px 31px 9px;
  border:1px solid #fff;
  background:#fff;
  color:#252525;
  text-decoration:none;
  font-size:12.5px;
  line-height:1.4;
  font-weight:400;
}
.hills-wrap{background:#fff;line-height:0;width:100%;overflow:hidden}
.hills-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}
.site-footer{
  background:#fff;
  text-align:center;
  padding:51px 20px 55px;
  color:#3e3e3e;
  font-size:12px;
  line-height:1.55;
  font-weight:300;
}
.site-footer .footer-name{font-size:14px;letter-spacing:.095em;font-weight:300;margin-bottom:16px}
.site-footer p{margin:2px 0}
.site-footer a{color:#3e3e3e;text-decoration:underline;text-underline-offset:2px}
.site-footer .copyright{margin-top:17px;color:#666;font-size:11px}

/* Interior pages: restrained Wix-like presentation. */
.page-hero{padding:78px 24px 46px;text-align:center;background:#fff}
.page-hero .eyebrow{font-size:25px;letter-spacing:.06em;font-weight:300;color:#333;margin:0 0 10px}
.page-hero .subhead{font-size:15px;font-weight:300;color:#555;margin:0}
.page-main{max-width:960px;margin:0 auto;padding:28px 28px 72px}
.person{display:grid;grid-template-columns:330px 1fr;gap:54px;align-items:start;margin:0 0 70px}
.person:nth-child(even){grid-template-columns:1fr 330px}
.person:nth-child(even) .person-photo{order:2}
.person-photo img{display:block;width:100%;height:auto}
.person h2,.service-section h2{font-weight:300;letter-spacing:.04em;font-size:23px;margin:4px 0 5px;color:#303030}
.role{margin:0 0 22px;font-size:13px;color:#555}
.person p,.service-section p{font-size:14px;line-height:1.7;margin:0 0 16px}
.contact-strip{padding:65px 24px;background:var(--ecc-blue);color:#fff;text-align:center}
.contact-strip h2{font-size:24px;font-weight:300;letter-spacing:.05em;margin:0 0 14px}
.contact-strip a{color:#fff}
.service-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-bottom:80px;text-align:center}
.service-overview h2{font-size:18px;font-weight:300;letter-spacing:.04em;margin:0 0 17px}
.service-overview p{font-size:13px;line-height:1.8;margin:0}
.service-section{margin:0 0 78px}
.service-section>h2{text-align:center;font-size:25px;margin-bottom:40px}
.service-row{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin:0 0 60px}
.service-row.reverse{grid-template-columns:.95fr 1.05fr}
.service-row.reverse .service-image{order:2}
.service-row h3{font-size:18px;font-weight:300;letter-spacing:.035em;margin:0 0 16px}
.service-image img{display:block;max-width:100%;width:auto;height:auto;margin:auto}

@media(max-width:800px){
  .site-header{height:auto;padding:20px 0}
  .header-inner{display:block;text-align:center}
  .nav{justify-content:center;margin-top:18px;gap:22px}
  .coast-window{height:460px}
  .coast-layer{width:auto;height:100%;left:50%;transform:translateX(-50%);top:0}
  .welcome h1{font-size:24px}
  .welcome p{font-size:10.5px;line-height:1.8}
  .about{padding:58px 24px 62px}
  .about h2{font-size:23px}
  .about p{font-size:14px}
  .person,.person:nth-child(even){display:block}
  .person:nth-child(even) .person-photo{order:initial}
  .person-photo{max-width:390px;margin:0 auto 28px}
  .service-overview{grid-template-columns:1fr;gap:38px}
  .service-row,.service-row.reverse{display:block}
  .service-row.reverse .service-image{order:initial}
  .service-image{margin:24px 0}
}