/* Romo Group LLC — static site styles
   Brand: #4D5858 (slate), #d7A461 (gold), #303640 (ink)
   Fonts: Lato (body), PT Serif (headings) */
:root{
  --slate:#4D5858;
  --gold:#d7A461;
  --ink:#303640;
  --light:#f5f3ef;
  --white:#ffffff;
  --muted:#6b7373;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  line-height:1.65;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'PT Serif',Georgia,'Times New Roman',serif;
  color:var(--ink);
  line-height:1.2;
  font-weight:700;
}
a{color:var(--slate);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold)}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.site-header{
  background:var(--white);
  border-bottom:1px solid #e7e3dc;
  position:sticky;top:0;z-index:100;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:48px;width:auto}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{
  font-weight:700;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);padding:6px 0;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);
  transition:width .25s;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--gold)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,rgba(48,54,64,.70),rgba(77,88,88,.62)),
             url('../img/atlanta-skyline.jpg') center/cover no-repeat;
  color:var(--white);padding:120px 0 110px;text-align:center;
}
.hero h1{color:var(--white);font-size:3rem;letter-spacing:.01em;text-shadow:0 2px 14px rgba(20,24,30,.55)}
.hero .lead{
  font-family:'PT Serif',serif;font-size:1.25rem;max-width:820px;margin:22px auto 0;
  color:#f0ede7;line-height:1.7;
}
.hero .eyebrow{display:inline-block;color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;font-weight:700;font-family:'Lato',sans-serif;margin-bottom:16px;background:rgba(30,34,40,.92);padding:.5em 1.1em;border-radius:999px;border:1px solid rgba(215,164,97,.35)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:var(--gold);color:var(--ink);font-weight:700;
  padding:13px 30px;border-radius:3px;letter-spacing:.03em;text-transform:uppercase;
  font-size:.85rem;margin-top:30px;transition:background .2s,transform .2s;
}
.btn:hover{background:#c79450;color:var(--ink);transform:translateY(-2px)}

/* ---------- Sections ---------- */
.section{padding:84px 0}
.section.alt{background:var(--light)}
.section-head{text-align:center;max-width:760px;margin:0 auto 50px}
.section-head .eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;font-weight:700;font-family:'Lato',sans-serif}
.section-head h2{font-size:2.1rem;margin:10px 0 12px;color:var(--slate)}
.section-head p{color:var(--muted);font-size:1.05rem}

/* ---------- Page header banner (interior pages) ---------- */
.page-header{
  position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:96px 0 84px;text-align:center;color:var(--white);
}
.page-header::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(48,54,64,.70),rgba(77,88,88,.62))}
.page-header .container{position:relative}
.page-header .eyebrow{display:inline-block;color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;font-weight:700;font-family:'Lato',sans-serif;margin-bottom:16px;background:rgba(30,34,40,.92);padding:.5em 1.1em;border-radius:999px;border:1px solid rgba(215,164,97,.35)}
.page-header h1{color:var(--white);font-size:2.7rem;text-shadow:0 2px 14px rgba(20,24,30,.55)}

/* Services (editorial, non-template look) */
.services-lead{max-width:780px;margin:0 auto 44px;text-align:center}
.services-lead .lede{color:var(--muted);font-size:1.18rem;margin-top:14px;line-height:1.7}
.services-list{list-style:none;max-width:840px;margin:0 auto;border-top:1px solid #e7e3dc}
.services-list li{display:flex;gap:26px;padding:30px 0;border-bottom:1px solid #e7e3dc}
.services-list .num{font-family:'PT Serif',serif;font-size:1.5rem;color:var(--gold);font-weight:700;min-width:44px;line-height:1.3}
.services-list h3{color:var(--slate);font-size:1.45rem;margin-bottom:8px}
.services-list p{color:var(--muted)}
.services-support{max-width:840px;margin:42px auto 0;columns:2;column-gap:44px;color:var(--muted)}
.services-support p{margin-bottom:16px}

/* PDF link */
.pdf-link{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.pdf-link svg{width:17px;height:17px;flex:none;fill:var(--gold)}
.pdf-link .pdf-tag{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--slate);background:#efe9df;padding:2px 7px;border-radius:3px;text-transform:uppercase}
.pdf-link:hover svg{fill:#c79450}

/* Projects */
.project{display:grid;grid-template-columns:1fr 1.3fr;gap:0;border:1px solid #e7e3dc;margin-bottom:28px;background:var(--white);border-radius:4px;overflow:hidden}
.project img{width:100%;height:100%;object-fit:cover;min-height:240px}
.project-body{padding:30px 34px}
.project-body .meta{color:var(--gold);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.project-body h3{color:var(--slate);font-size:1.5rem;margin:8px 0 12px}
.project-body p{color:var(--muted)}
.project-body .more{display:inline-block;margin-top:14px;color:var(--gold);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.additional-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.additional-grid .card{border:1px solid #e7e3dc;padding:22px;border-radius:4px;background:var(--white)}
.additional-grid .card .meta{color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.additional-grid .card h4{font-size:1.1rem;color:var(--slate);margin-top:6px}
.additional-grid .card a{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-top:10px;display:inline-block}

/* Clients */
.client-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;align-items:center}
.client-grid .logo{
  background:var(--white);border:1px solid #e7e3dc;border-radius:4px;padding:22px;
  display:flex;align-items:center;justify-content:center;min-height:120px;
  width:calc(20% - 15px);
}
.client-grid .logo img{max-height:64px;width:auto;filter:grayscale(100%);opacity:.78;transition:filter .25s,opacity .25s}
.client-grid .logo:hover img{filter:grayscale(0);opacity:1}
/* center any trailing (orphan) logos so the bottom row sits centered */
.client-grid .logo.orphan{grid-column:3 / span 1}

/* About */
.about-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center}
.about-hero img{border-radius:4px;box-shadow:0 14px 40px rgba(48,54,64,.18)}
.about-hero h1{font-size:2.4rem;color:var(--slate);margin-bottom:18px}
.about-hero .lead{color:var(--muted);font-size:1.1rem}
.bio p{color:var(--muted);margin-bottom:16px}
.bio .person{display:flex;align-items:center;gap:18px;margin:30px 0}
.bio .person img{width:90px;height:90px;border-radius:50%;object-fit:cover}
.bio .person h3{color:var(--slate);font-size:1.3rem}
.bio .person .role{color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}
.bio .person a{color:var(--slate);font-size:.85rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.contact-info img{width:100%;border-radius:4px;margin-bottom:24px}
.contact-info .vcard{background:var(--light);border-left:4px solid var(--gold);padding:26px 30px;border-radius:0 4px 4px 0}
.contact-info .vcard strong{display:block;color:var(--slate);font-size:1.1rem;margin-bottom:6px}
.contact-info .vcard p{color:var(--ink);line-height:1.9}
.contact-info .vcard a{color:var(--slate);font-weight:700}
form .field{margin-bottom:18px}
form label{display:block;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:7px}
form input,form textarea{
  width:100%;padding:12px 14px;border:1px solid #d9d4cc;border-radius:3px;font-family:'Lato',sans-serif;font-size:1rem;color:var(--ink);
}
form input:focus,form textarea:focus{outline:none;border-color:var(--gold)}
form textarea{min-height:140px;resize:vertical}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:6px}
.form-status{margin-top:16px;padding:12px 16px;border-radius:3px;font-weight:700;display:none}
.form-status.ok{display:block;background:#e7f3ea;color:#2c6b43}
.form-status.err{display:block;background:#fbeaea;color:#a23b3b}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#cdd2d2;padding:48px 0 30px}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;border-bottom:1px solid #444c4c;padding-bottom:26px}
.footer-top img{height:42px}
.footer-links{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.footer-links a{color:#cdd2d2;font-size:.9rem}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{text-align:center;padding-top:22px;font-size:.85rem;color:#9aa1a1}

/* Contact form button — same styling as hero buttons */
form .btn{border:none;cursor:pointer;font-family:'Lato',sans-serif}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .nav-links{display:none}
  .hero h1{font-size:2.1rem}
  .page-header h1{font-size:2rem}
  .services-support{columns:1}
  .project,.about-hero,.contact-grid{grid-template-columns:1fr}
  .additional-grid{grid-template-columns:repeat(2,1fr)}
  .client-grid .logo{width:calc(33.333% - 13px)}
  .client-grid{grid-template-columns:repeat(3,1fr)}
  form .row{grid-template-columns:1fr}
}
@media(max-width:520px){
  .client-grid .logo{width:calc(50% - 9px)}
  .additional-grid{grid-template-columns:1fr}
  .hero{padding:90px 0 80px}
}

/* --- inner page header photos (paths are relative to this stylesheet,
       so they resolve from every page depth) --- */
.page-header--projects{background-image:url('../img/projects-romo-group.jpg');background-position:center 38%}
.page-header--about{background-image:url('../img/projects-romo-group.jpg');background-position:center 82%}
.page-header--clients{background-image:url('../img/atlanta-skyline.jpg');background-position:center 8%}
.page-header--contact{background-image:url('../img/romo-group-contact-information.jpg');background-position:center 45%}
.page-header{background-position:center 42%;}
@media(max-width:700px){.page-header{padding:66px 0 58px}}