:root{
  --ink:#102536;
  --paper:#f5f3ed;
  --blue:#6f94aa;
  --blue-dark:#274d64;
  --line:#cbd4d9;
  --white:#ffffff;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial,Helvetica,sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}


/* NAVIGATION */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:82px;
  padding:14px 5vw;
  background:rgba(245,243,237,.97);
  border-bottom:1px solid var(--line);
}

.brand{
  font-family:Georgia,serif;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:.08em;
  white-space:nowrap;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.main-nav a{
  padding:11px 14px;
  border-radius:3px;
  font-size:.92rem;
  font-weight:600;
}

.main-nav a:hover,
.main-nav a.active{
  background:var(--blue-dark);
  color:white;
}

.home-link{
  border:1px solid var(--line);
}


/* HERO */

.hero{
  position:relative;
  min-height:76vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(8,25,37,.84),
      rgba(8,25,37,.08) 67%
    );
}

.hero-copy{
  position:relative;
  z-index:2;
  color:white;
  width:min(900px,90vw);
  padding:0 0 8vh 6vw;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:700;
}

h1,
h2,
h3{
  font-family:Georgia,serif;
}

h1{
  font-size:clamp(3rem,6vw,6.5rem);
  line-height:.95;
  margin:.18em 0;
}

.hero p{
  max-width:780px;
  font-size:clamp(1.05rem,1.7vw,1.42rem);
  line-height:1.5;
}

.page-hero{
  min-height:64vh;
}


/* BODY */

.intro,
.content{
  padding:76px 6vw;
}

.intro{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:6vw;
  border-bottom:1px solid var(--line);
}

.section-title,
.intro h2{
  font-size:clamp(2.3rem,4vw,4.5rem);
  line-height:1.04;
  margin:0;
}

.intro p,
.split p{
  font-size:1.12rem;
  line-height:1.75;
  margin-top:0;
}


/* PILLARS */

.pillars{
  padding:74px 6vw 95px;
}

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
}

.card{
  background:white;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}

.card img{
  width:100%;
  height:300px;
  object-fit:cover;
}

.card-body{
  padding:26px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.card h3{
  font-size:1.8rem;
  margin:0 0 12px;
}

.card p{
  line-height:1.65;
}

.card .link{
  margin-top:auto;
  padding-top:16px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  font-size:.8rem;
  color:var(--blue-dark);
}


/* FEATURE SECTION */

.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:600px;
}

.feature img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.feature-copy{
  background:var(--blue-dark);
  color:white;
  padding:65px 7vw;
  display:flex;
  align-items:center;
}


/* SPLIT LAYOUT */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw;
}


/* GALLERIES */

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:40px;
}

.gallery img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}


/* KNOWLEDGE CARDS */

.list-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:40px;
}

.info{
  background:white;
  border:1px solid var(--line);
  padding:28px;
}

.info h3{
  font-size:1.5rem;
  margin-top:0;
}


/* KNOWLEDGE PAGE IMAGE */

.knowledge-image{
  width:100%;
  padding:0 6vw 76px;
}

.knowledge-image img{
  width:100%;
  max-height:760px;
  object-fit:cover;
  object-position:center;
  border:1px solid var(--line);
}


/* BOTTOM NAVIGATION */

.page-nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  background:white;
}

.page-nav a{
  padding:24px 20px;
  text-align:center;
  font-weight:700;
  border-right:1px solid var(--line);
}

.page-nav a:last-child{
  border-right:0;
}

.page-nav a:hover{
  background:var(--blue-dark);
  color:white;
}


/* FOOTER */

footer{
  padding:42px 6vw;
  background:#0f2330;
  color:#dce5ea;
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
}

footer a{
  text-decoration:underline;
}

.small{
  font-size:.84rem;
  opacity:.85;
}


/* TABLET */

@media(max-width:900px){

  .site-header{
    align-items:center;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px 18px;
    min-height:auto;
    padding:14px 5vw;
  }

  .brand{
    width:100%;
    font-size:1.35rem;
  }

  .main-nav{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .main-nav a{
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px 11px;
    font-size:.82rem;
  }

  .hero{
    min-height:0;
    height:68svh;
    max-height:720px;
    background-position:center center;
  }

  .page-hero{
    height:58svh;
    min-height:0;
  }

  .hero-copy{
    width:100%;
    padding:0 6vw 7vw;
  }

  h1{
    font-size:clamp(3rem,12vw,4.5rem);
    line-height:.95;
  }

  .hero p{
    font-size:1.08rem;
    line-height:1.5;
    max-width:34rem;
  }

  .eyebrow{
    font-size:.7rem;
    letter-spacing:.16em;
  }

  .intro,
  .split,
  .feature{
    grid-template-columns:1fr;
  }

  .pillar-grid,
  .gallery,
  .list-grid{
    grid-template-columns:1fr;
  }

  .page-nav{
    grid-template-columns:1fr 1fr;
  }

  .feature img{
    min-height:400px;
  }
}


/* PHONE */

@media(max-width:600px){

  .hero{
    height:auto;
    min-height:700px;

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center top;
    background-color:var(--paper);
  }

  .page-hero{
    height:auto;
    min-height:650px;

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center top;
  }

  .hero-copy{
    width:100%;
    padding:0 6vw 6vw;
  }

}

  h1{
    font-size:clamp(2.8rem,13vw,4rem);
    margin:.14em 0 .3em;
  }

  .hero p{
    font-size:1rem;
    line-height:1.48;
    margin-bottom:0;
  }

  .eyebrow{
    font-size:.68rem;
    letter-spacing:.15em;
  }

  .intro,
  .content{
    padding:54px 6vw;
  }

  .pillars{
    padding:54px 6vw 70px;
  }

  .section-title,
  .intro h2{
    font-size:clamp(2.1rem,10vw,3.2rem);
  }

  .intro p,
  .split p{
    font-size:1rem;
    line-height:1.65;
  }

  .pillar-grid{
    gap:18px;
    margin-top:30px;
  }

  .card img{
    height:250px;
  }

  .card-body{
    padding:22px;
  }

  .card h3{
    font-size:1.6rem;
  }

  .gallery{
    gap:14px;
    margin-top:30px;
  }

  .list-grid{
    gap:14px;
    margin-top:30px;
  }

  .info{
    padding:22px;
  }

  .knowledge-image{
    padding:0 6vw 54px;
  }

  .feature{
    min-height:0;
  }

  .feature img{
    min-height:320px;
  }

  .feature-copy{
    padding:48px 6vw;
  }

  .page-nav a{
    padding:18px 10px;
    font-size:.85rem;
  }

  footer{
    padding:34px 6vw;
  }
}