@font-face{font-family:"Source Sans";src:url("fonts/SourceSansPro-Regular-webfont.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans";src:url("fonts/SourceSansPro-Light-webfont.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Function Pro";src:url("fonts/FunctionPro-Condensed-webfont.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Function Pro";src:url("fonts/FunctionPro-Medium-webfont.woff") format("woff");font-weight:500;font-display:swap}

:root{
  --maroon:#781e29;
  --maroon-dark:#561520;
  --ink:#1f2328;
  --text:#34383d;
  --steel:#eef0f2;
  --steel-line:#d3d6da;
  --paper:#fff;
  --body:"Source Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --head:"Function Pro","Arial Narrow",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.125rem/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:var(--maroon)}
a:hover{color:var(--maroon-dark)}
:focus-visible{outline:3px solid var(--maroon);outline-offset:2px}
.wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:.5rem 1rem;z-index:10}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--head);font-weight:500;color:var(--ink);line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,6vw,3.4rem)}
h2{font-size:clamp(1.5rem,4vw,2rem)}
h3{font-size:1.25rem;color:var(--maroon)}
p{margin:0 0 1em}

.site-header{border-bottom:4px solid var(--maroon);background:var(--paper)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding:.75rem 0}
.logo img{height:56px;width:auto}
.site-header ul{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.site-header nav a{display:block;padding:.65rem .9rem;font:500 1.15rem var(--head);color:var(--ink);text-decoration:none;border-bottom:3px solid transparent}
.site-header nav a:hover{border-bottom-color:var(--steel-line)}
.site-header nav a[aria-current="page"]{border-bottom-color:var(--maroon);color:var(--maroon)}
.site-header nav a.nav-call{background:var(--maroon);color:#fff;border-radius:4px;border-bottom-color:transparent}
.site-header nav a.nav-call:hover{background:var(--maroon-dark);color:#fff}

.btn{display:inline-block;white-space:nowrap;padding:.8rem 1.3rem;border-radius:4px;font:500 1.2rem var(--head);text-decoration:none;border:2px solid var(--maroon)}
.btn-primary{background:var(--maroon);color:#fff}
.btn-primary:hover{background:var(--maroon-dark);border-color:var(--maroon-dark);color:#fff}
.btn-ghost{color:var(--maroon);background:transparent}
.btn-ghost:hover{background:var(--maroon);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}

.hero{background:var(--steel);border-bottom:1px solid var(--steel-line);padding:2.5rem 0}
.hero-grid{display:grid;gap:2rem;align-items:center}
.lede{font-size:1.25rem;max-width:34rem}
.hero-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.hero-photos img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:4px;background:var(--steel-line)}

.services,.why{padding:2.5rem 0}
.service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem 2rem;margin-top:1.5rem}
.service-list h3{margin-bottom:.25em}
.service-list p{margin:0}
.why{border-top:1px solid var(--steel-line)}
.why .wrap{max-width:46rem;margin-left:max(1.25rem,calc((100% - 68rem)/2))}

.page{padding:2.5rem 0 3rem}
.page > :not(.gallery){max-width:46rem}
.page h2{margin-top:2rem}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.6rem;list-style:none;margin:0 0 1.5rem;padding:0}
.gallery li{margin:0;padding:0}
.gallery a{display:block;border-radius:4px;overflow:hidden;background:var(--steel-line)}
.gallery img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:opacity .15s}
.gallery a:hover img{opacity:.85}

.site-footer{background:var(--maroon);color:#f5eaec;padding:2rem 0 1.25rem}
.site-footer h2{color:#fff;font-size:1.5rem}
.site-footer a{color:#fff}
.foot-grid{display:grid;gap:1rem 3rem}
.site-footer p{margin:0 0 .35em}
.copy{margin-top:1rem;font-size:.9rem;opacity:1;color:#e6cfd3;grid-column:1/-1}

.lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;color:#fff;overflow:visible}
.lightbox:focus{outline:none}
.lightbox::backdrop{background:rgba(15,16,18,.88)}
.lightbox figure{margin:0}
.lightbox img{max-height:76vh;max-width:96vw;width:auto;margin-inline:auto;border-radius:4px}
.lightbox figcaption{padding:.6rem 0;text-align:center;font-size:1rem;min-height:2.6rem}
.lb-controls{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap}
.lb-controls button{font:500 1.05rem var(--head);padding:.6rem 1.1rem;min-height:44px;background:#fff;color:var(--ink);border:0;border-radius:4px;cursor:pointer}
.lb-controls button:hover{background:var(--steel)}
.lb-count{min-width:4.5rem;text-align:center;font-size:.95rem}

@media (min-width:52rem){
  .hero{padding:3.5rem 0}
  .hero-grid{grid-template-columns:1fr 1fr;gap:3rem}
  .logo img{height:68px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:34rem){
  .bar{justify-content:center}
  .site-header nav{width:100%}
  .site-header ul{justify-content:center}
  .actions{flex-direction:column}
  .btn{text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}