:root {
  --brick:#b84e32;
  --green:#243d35;
  --limestone:#f4f0e7;
  --stone:#9a9a7b;
  --charcoal:#1f2925;
  --font-display:Cinzel, Georgia, serif;
  --font-body:Montserrat, Arial, sans-serif;
  --size-display:clamp(44px, 5vw, 78px);
  --size-section:clamp(34px, 4vw, 52px);
  --size-card-title:14px;
  --size-nav:15px;
  --size-nav-link:12px;
  --size-support:13px;
  --size-small:12px;
  --size-panel-title:20px;
  --size-panel-label:12px;
  --size-button:12px;
  --button-padding:7px 9px;
  --button-background:var(--green);
  --button-color:#fff;
  --nav-padding:28px 32px;
  --size-logo:20px;
  --size-brand:15px;
  --size-brand-subtitle:10px
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--limestone);
  color:var(--charcoal);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.site-shell {
  max-width:1440px;
  margin:0 auto;
  background:var(--limestone)
}
.sample-site {
  display:grid;
  grid-template-columns:minmax(0, 1.85fr) minmax(340px, 1fr);
  height:760px;
}
.hero {
  position:relative;
  height:100%;
  background-image:linear-gradient(90deg,rgba(8,20,18,.82) 0%,rgba(8,20,18,.28) 62%,rgba(8,20,18,.05) 100%),url('images/bannerfront.jpg');
  background-size:cover;
  background-position:center;
  overflow:hidden;
  color:#fff;
}
.hero nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--nav-padding);
  font-size:var(--size-nav);
  position:relative;
  z-index:1;
}
.hero nav strong {
  display:grid;
  grid-template-columns:32px 1fr;
  grid-template-rows:16px 11px;
  font:var(--size-logo) var(--font-display);
  line-height:1
}
.hero nav strong em,.hero nav strong small {
  grid-column:2;
  font-style:normal;
  font-family:var(--font-body);
  font-size:var(--size-brand);
  letter-spacing:.1em
}
.hero nav strong small {
  font-size:var(--size-brand-subtitle);
  letter-spacing:.17em
}
.hero nav a {
  margin:0 15px;
  color:#fff;
  font-family:var(--font-body);
  font-size:var(--size-nav-link);
  text-decoration:none;
  opacity:.78;
  transition:opacity .2s ease;
}
.hero nav a:hover,.hero nav a:focus-visible { opacity:1; }
.hero nav .active {
  border-bottom:1px solid #fff;
  padding-bottom:9px
}
.hero-copy {
  position:absolute;
  left:7%;
  bottom:14%;
  max-width:720px;
  animation:hero-rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.hero-copy h1 {
  font:500 var(--size-display)/1.08 var(--font-display);
  letter-spacing:-.025em;
  margin:0 0 24px;
  text-wrap:balance;
}
.hero-copy p {
  margin:0;
  color:#e5d8c4;
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
}
.location {
  position:absolute;
  bottom:25px;
  left:25px;
  font-size:10px;
  letter-spacing:.08em;
  color:#e5d8c4;
}
.scroll {
  position:absolute;
  right:23px;
  bottom:23px;
  text-align:center;
  font-size:27px;
  line-height:.8
}
.scroll small {
  font-size:8px;
  line-height:1.4
}
.side-panels {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  background:var(--limestone);
  box-shadow:-18px 0 40px rgba(20,35,29,.12)
}
.mini-panel {
  border:0;
  border-bottom:1px solid #d8d0c4;
  padding:20px;
  overflow:hidden;
  transition:background .25s ease;
}
.mini-panel:hover { background:#ebe4d8; }
.mini-panel>img {
  width:calc(100% + 40px);
  height:150px;
  object-fit:cover;
  margin:-20px -20px 16px;
  filter:saturate(.82) contrast(1.04)
}
.mini-panel h3 {
  font:500 var(--size-panel-title) var(--font-display);
  margin:0 0 7px;
  color:var(--green)
}
.mini-panel small {
  font-family:var(--font-body);
  font-size:var(--size-panel-label);
  letter-spacing:.08em
}
.mini-panel p {
  font-family:var(--font-body);
  font-size:var(--size-panel-label);
  line-height:1.55;
  color:#53605a
}
.mini-panel button {
  border:1px solid var(--green);
  background:var(--button-background);
  color:var(--button-color);
  font-family:var(--font-body);
  font-size:var(--size-button);
  padding:9px 12px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease
}
.mini-panel button:hover,.mini-panel button:focus-visible { background:transparent; color:var(--green); }
.tiny-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  margin:9px 0
}
.tiny-grid img {
  width:100%;
  height:38px;
  object-fit:cover
}
.highlights-section {
  padding:112px 6vw 120px
}
.section-heading {
  text-align:center;
  max-width:620px;
  margin:0 auto 42px
}
.section-heading span {
  text-transform:uppercase;
  color:var(--brick);
  font-size:10px;
  letter-spacing:.18em
}
.section-heading h2 {
  font:600 var(--size-section) var(--font-display);
  margin:14px 0 16px;
  color:var(--green)
}
.section-heading p {
  font-size:13px;
  line-height:1.7;
  color:#59605a
}
.highlights {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px
}
.highlights article {
  background:#f8f5ef;
  border:1px solid #e2dbd0;
  text-align:center;
  min-height:250px;
  transition:transform .25s ease,box-shadow .25s ease
}
.highlights article:hover {
  transform:translateY(-6px);
  box-shadow:0 14px 28px rgba(46,56,46,.12)
}
.highlights img {
  width:100%;
  height:150px;
  object-fit:cover;
  filter:saturate(.82)
}
.highlights h3 {
  font:600 var(--size-card-title) var(--font-display);
  margin:8px 7px 5px
}
.highlights p {
  font-size:var(--size-small);
  line-height:1.35;
  margin:0 9px;
  padding-bottom:16px
}
@keyframes hero-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
button:focus-visible,a:focus-visible { outline:2px solid #d08b55; outline-offset:4px; }
@media(max-width:760px) {
  .sample-site {
  display:block;
  height:auto
}
.hero {
  height:600px
}
.hero nav div {
  display:none
}
.hero-copy {
  left:30px;
  bottom:15%;
  right:24px
}
.hero-copy h1 {
  font-size:34px
}
.side-panels {
  min-height:620px;
  box-shadow:none
}
.highlights-section {
  padding:56px 18px
}
.highlights {
  grid-template-columns:repeat(2,1fr);
  gap:10px
}
@media(max-width:480px) {
  .hero-copy h1 { font-size:40px; }
  .side-panels { grid-template-columns:1fr; }
  .highlights { grid-template-columns:1fr; }
}
.section-heading h2 {
  font-size:32px
}
}