/* =========================================================
   GARRETT ASSOCIATES
   Main Stylesheet
   ========================================================= */

/* ---------- Site Variables / Base Styles ---------- */
:root {
  --burgundy:#6b0f14;
  --ink:#222;
  --muted:#777;
  --paper:#fff;
  --soft:#f5f4f2;
  --line:#dedbd6}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

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

a {
  color:inherit}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line)}

.header-inner {
  max-width:1180px;
  margin:auto;
  padding:22px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px}

.brand {
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:13px}

/* Keep the uploaded logo inside the header instead of letting its
   intrinsic image dimensions expand the entire page. */
.brand {
  flex: 0 1 auto;
  min-width: 0;
}

.brand img {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  object-position: left center;
}

.header-inner nav {
  flex: 0 0 auto;
  align-items: center;
}

.brand-mark {
  width:46px;
  height:46px;
  border:2px solid var(--burgundy);
  display:grid;
  place-items:center;
  color:var(--burgundy);
  font-family:Georgia,serif;
  font-size:29px;
  font-weight:700}

.brand-name {
  font-family:Georgia,serif;
  font-size:22px;
  letter-spacing:.03em}

nav {
  display:flex;
  gap:26px;
  flex-wrap:wrap}

nav a {
  text-decoration:none;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.13em}

nav a:hover {
  color:var(--burgundy)}

.hero {
    min-height: 58vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 90px 6vw;

    background-image:
        linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)),
        url("../images/top_fold.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    color: #fff;
}

.hero .eyebrow,.eyebrow {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  color:var(--burgundy);
  font-weight:700}

.hero h1 {
  font:500 clamp(42px,7vw,86px)/1.03 Georgia,serif;
  margin:14px auto 22px;
  max-width:950px}

.hero p {
  max-width:760px;
  margin:auto;
  font-size:20px;
  color:#555}

.section {
  padding:90px 6vw}

.inner {
  max-width:1050px;
  margin:auto}

.narrow {
  max-width:800px}

.section h1,.section h2 {
  font:500 clamp(34px,4vw,54px)/1.1 Georgia,serif;
  margin:0 0 30px}

.section h3 {
  font:500 25px/1.25 Georgia,serif}

.lead {
  font-size:21px}

.soft {
  background:var(--soft)}

.grid-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:start}

.grid-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px}

.service-card {
  border-top:3px solid var(--burgundy);
  padding-top:20px}

.service-card ul {
  padding-left:20px}

.service-card li {
  margin:8px 0}

.map {
  width:100%;
  display:block}

.cta {
  background:var(--burgundy);
  color:white;
  text-align:center}

.cta a.button,.button {
  display:inline-block;
  padding:13px 23px;
  border:1px solid currentColor;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  margin-top:16px}

.team-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px}

.person img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:#eee}

.person h3 {
  margin:12px 0 0}

.person p {
  margin:2px 0;
  color:var(--muted)}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px}

.contact-item {
  margin:25px 0}

.label {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  color:var(--muted);
  font-weight:bold}

.news-item {
  padding:38px 0;
  border-top:1px solid var(--line)}

.news-item:first-child {
  border-top:0}

.news-item time {
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em}

footer {
  background:#1f1f1f;
  color:#eee;
  padding:55px 6vw}

.footer-inner {
  max-width:1050px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px}

.newsletter-form {
  display:flex;
  gap:10px;
  flex-wrap:wrap}

.newsletter-form input {
  flex:1;
  min-width:220px;
  padding:13px;
  border:0}

.newsletter-form button {
  padding:13px 18px;
  border:1px solid white;
  background:transparent;
  color:white;
  cursor:pointer}

.fine {
  max-width:1050px;
  margin:35px auto 0;
  color:#aaa;
  font-size:12px}

@media(max-width:760px) {
  .header-inner {
  align-items:flex-start;
  flex-direction:column}

.grid-2,.grid-3,.team-grid,.contact-grid,.footer-inner {
  grid-template-columns:1fr}

.section {
  padding:65px 7vw}

.hero {
  min-height:48vh}

.brand-name {
  font-size:19px}

nav {
  gap:15px}
}

/* Logo and navigation on narrow screens */
@media (max-width: 760px) {
  .brand img {
    width: 210px;
    max-height: 65px;
  }

  .header-inner nav {
    flex: 0 1 auto;
  }
}

.newsletter-message {
    display: none;
    margin-top: 20px;
    font-size: 24px;
    color: #fff;
}

.fine {
    text-align: center;
}

.footer-inner {
    align-items: start;
}

.footer-inner > div {
    align-self: start;
}

.footer-inner > div > :first-child {
    margin-top: 0;
}

.footer-inner h3 {
    margin-top: 0;
}