/* ---------- TOKENS ---------- */
:root{
  --blue:#b2c7e4;
  --brown:#845951;
  --cream:#e0ccb9;

  --brown-90: rgba(132, 89, 81, 0.90);
  --brown-85: rgba(132, 89, 81, 0.85);
  --brown-80: rgba(132, 89, 81, 0.80);
  --brown-75: rgba(132, 89, 81, 0.75);
  --brown-70: rgba(132, 89, 81, 0.70);
  --brown-60: rgba(132, 89, 81, 0.60);
  --brown-55: rgba(132, 89, 81, 0.55);
  --brown-25: rgba(132, 89, 81, 0.25);
  --brown-22: rgba(132, 89, 81, 0.22);
  --brown-16: rgba(132, 89, 81, 0.16);
  --brown-14: rgba(132, 89, 81, 0.14);

  --blue-55: rgba(178, 199, 228, 0.55);
  --blue-35: rgba(178, 199, 228, 0.35);
  --blue-25: rgba(178, 199, 228, 0.25);
  --blue-22: rgba(178, 199, 228, 0.22);

  --cream-92: rgba(224, 204, 185, 0.92);
  --cream-90: rgba(224, 204, 185, 0.90);
  --cream-85: rgba(224, 204, 185, 0.85);
  --cream-75: rgba(224, 204, 185, 0.75);
  --cream-70: rgba(224, 204, 185, 0.70);
  --cream-55: rgba(224, 204, 185, 0.55);

  --shadow-soft: 0 12px 28px rgba(132, 89, 81, 0.18);
  --shadow-hover: 0 18px 40px rgba(132, 89, 81, 0.22);
  --shadow: 0 12px 28px rgba(132, 89, 81, 0.20);
}

/* ---------- RESET ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:#a4bddf;
  line-height:1.5;
}

a{ text-decoration:none; }

p {font-size: 1rem;}

/* ---------- HEADER TOP STRIP ---------- */
.header-topper{
  background-color: var(--brown);
  color: var(--cream);
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  padding:1px 1rem;
  font-size:1.2rem;
  letter-spacing:0.04em;
  font-weight:500;
}

@media screen and (max-width: 900px){
    .header-topper{ flex-direction: column; text-align: center;}
  }

/* ---------- SHARED HEADER BACKGROUND ---------- */
.site-header{
  width:100%;
  background-image:url("./images/sean-stratton-rvVOTp6nyaM-unsplash.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative; /* needed for overlay */
}

/* optional overlay (fixed broken rgba). set alpha to 0 if you want none */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(224, 204, 185, 0); /* was invalid: rgba(255,255,255,0.) */
}

.site-header > *{
  position:relative;
  z-index:1;
}

/* ---------- LOGO + NAV BAR ---------- */
.header-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.5rem;
  background:transparent;
}

.header-logo{
  height:70px;
  width:auto;
}

/* ---------- HERO ---------- */
.hero{
  padding:4rem 1.5rem;
  background:transparent;
}

/* NAVIGATION */
nav ul{
  list-style:none;
  display:flex;
  gap:1.3rem;
}

nav a{
  color: var(--brown);
  font-weight:600;
  font-size:1.25rem;
  transition: opacity 0.2s ease, border 0.2s ease;
  padding:10px;
  border-radius:5%;
}

nav a:hover{
  border:2px solid var(--brown);
}

/* ---------- HERO SECTION ---------- */
.header-hero{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  margin-top:14rem;
  padding:2rem;
}

.hero-text{
  background-color: rgba(132, 89, 81, 0.7);
  padding:2rem;
  border-radius:16px;
}

.header-hero h1{
  font-size:2.4rem;
  font-weight:700;
  font-family:"WideLatin", serif;
  color: var(--cream);
  padding: 20px 0;
}

.cta-button{
  margin-top:2rem;
  font-size:1.25rem;
  font-weight:600;
  color: var(--brown);
  background-color: var(--cream);
  border-radius:8px;
  padding:10px;
  text-align:center;
}

.cta-button:hover{
  border:2px solid var(--brown);
}

.hero-image img{
  width:100%;
  margin:0;
  overflow:hidden;
}

/* ---------- BUTTONS (shared) ---------- */
.btn{
  display:inline-block;
  font-weight:650;
  letter-spacing:0.02em;
  border-radius:14px;
  padding:0.95rem 1.15rem;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  white-space:nowrap;
}

.btn:hover{
  transform: translateY(-2px);
  opacity:0.95;
}

.btn-primary{
  background: var(--brown);
  color: var(--cream);
  border:1px solid var(--brown-25);
}

.btn-ghost{
  background: var(--cream-55);
  color: var(--brown);
  border:1px solid var(--brown-22);
}

/* ---------- SERVICES SECTION ---------- */
.services{
  padding:5.25rem 1.5rem;
  background: var(--blue);
}

.services-inner{
  max-width:1100px;
  margin:0 auto;
}

.services-header h2{
  margin:0 0 0.75rem 0;
  color: var(--brown);
  font-size:2.35rem;
  letter-spacing:-0.02em;
}

.services-intro{
  margin:0 0 1.25rem 0;
  max-width:760px;
  color: var(--brown-75);
  line-height:1.7;
  font-size:1.05rem;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-bottom:2.5rem;
}

.trust-pill{
  background: var(--brown);
  color: var(--cream);
  border:1px solid var(--brown-25);
  padding:0.55rem 0.9rem;
  border-radius:8px;
  font-size:0.9rem;
  letter-spacing:0.02em;
}

.trust-pill--urgent{
  background: var(--cream-75);
  border-color: var(--brown-25);
  color: var(--brown);
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:1.25rem;
}

.service-card{
  background: var(--brown);
  border:1px solid var(--brown-16);
  border-radius:18px;
  padding:2rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  color: var(--cream);
}

.service-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  background: var(--brown);
}

.service-card h3{
  margin:0 0 0.65rem 0;
  color: var(--cream);
  font-size:1.2rem;
  letter-spacing:-0.01em;
}

.service-card p{
  margin:0;
  color: var(--cream);
  line-height:1.6;
}

.service-card--urgent{
  background: var(--brown);
  border-color: var(--brown-16);
}

.service-card--urgent:hover{
  background: var(--brown);
}

.services-cta{
  margin-top:2.75rem;
  padding:1.6rem 1.7rem;
  border-radius:18px;
  background: var(--cream);
  border:1px solid var(--brown-16);
  box-shadow: 0 10px 24px rgba(132, 89, 81, 0.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}

.services-cta h4{
  margin:0 0 0.35rem 0;
  color: var(--brown);
  font-size:1.15rem;
}

.services-cta p{
  margin:0;
  color: var(--brown-75);
  line-height:1.5;
}

@media (max-width: 760px){
  .services-grid{ grid-template-columns:1fr; }
  .services-cta{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; text-align:center; }
}

/* ---------- ONE SCREEN PREVIEW (GALLERY) ---------- */
.work-preview{
  background: var(--cream);
  padding:4rem 1.5rem;
}

.work-preview__inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap:2.5rem;
  align-items:center;
}

.work-preview__title{
  margin:0 0 0.9rem 0;
  color: var(--brown);
  font-size:2rem;
  line-height:1.15;
  letter-spacing:-0.01em;
  max-width:520px;
}

.work-preview__sub{
  margin:0;
  color: var(--brown-80);
  line-height:1.6;
  max-width:520px;
}

.work-preview__media{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:1rem;
  justify-items:end;
}

.work-preview__img{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow: var(--shadow);
  border:1px solid var(--brown-14);
  width:100%;
  max-width:260px;
}

.work-preview__img img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
  display:block;
  transition: transform 0.3s ease;
}

.work-preview__img:first-child img{ object-position: 50% 30%; }

.work-preview__img:hover{
  box-shadow: var(--shadow-hover);
  border-color: var(--brown-22);
}

.work-preview__img:hover img{ transform: scale(1.03); }

.badge{
  position:absolute;
  bottom:0.75rem;
  left:0.75rem;
  background: rgba(132, 89, 81, 0.9);
  color: var(--cream);
  padding:0.35rem 0.65rem;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:6px;
}

@media (max-width: 900px){
  .work-preview__inner{ grid-template-columns:1fr; gap:1.75rem; }
  .work-preview__title, .work-preview__sub{ max-width:none; text-align:center; }
  .work-preview__media{ grid-template-columns:1fr 1fr; justify-items:center; }
  .work-preview__img{ max-width:240px; }
  .work-preview__img:first-child img{ object-position:center; }
}

@media (max-width: 520px){
  .work-preview__media{ grid-template-columns:1fr; }
  .work-preview__img{ max-width:320px; }
}

/* ---------- ABOUT ---------- */
.about{
  background: var(--blue-25);
  padding:5rem 1.5rem;
}

.about__inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:2.5rem;
  align-items:start;
}

.about__title{
  margin:0 0 0.9rem 0;
  color: var(--brown);
  font-size:2.1rem;
  line-height:1.1;
  letter-spacing:-0.01em;
}

.about__lead{
  margin:0 0 1rem 0;
  color: var(--brown-80);
  font-size:1.1rem;
  line-height:1.6;
  max-width:560px;
}

.about__text{
  margin:0 0 1.75rem 0;
  color: var(--brown-80);
  line-height:1.7;
  max-width:600px;
}

.about__actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.85rem;
}

.about__highlights{
  display:grid;
  gap:1rem;
}

.about__card{
  background: var(--cream-92);
  border:1px solid var(--brown-14);
  border-radius:18px;
  padding:1.6rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.about__card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  background: var(--cream-70);
}

.about__card h3{
  margin:0 0 0.6rem 0;
  color: var(--brown);
  font-size:1.15rem;
}

.about__card p{
  margin:0;
  color: var(--brown-80);
  line-height:1.55;
}

@media (max-width: 900px){
  .about__inner{ grid-template-columns:1fr; }
  .about__title, .about__lead, .about__text{ text-align:center; max-width:none; }
  .about__actions{ justify-content:center; }
}

/* ---------- WHO WE SERVE ---------- */
.who-we-serve{
  background:#a4bddf;
  padding:5rem 1.5rem;
}

.who-we-serve__inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2.5rem;
  align-items:center;
}

.who-we-serve__title{
  margin:0 0 0.85rem 0;
  color: var(--brown);
  font-size:2.1rem;
  letter-spacing:-0.01em;
}

.who-we-serve__lead{
  margin:0 0 0.9rem 0;
  color: var(--brown);
  font-size:1.1rem;
  line-height:1.6;
}

.who-we-serve__text{
  margin:0;
  color: var(--brown);
  line-height:1.7;
  max-width:520px;
}

.who-we-serve__areas{
  background: var(--brown);
  border:1px solid var(--brown-14);
  border-radius:18px;
  padding:2rem;
}

.area-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:0.75rem 1.25rem;
}

.area-list li{
  color: var(--brown);
  font-size:1rem;
  padding:0.4rem 0.6rem;
  border-radius:6px;
  background: rgba(224, 204, 185, 0.80);
}

.area-list .area-muted{
  color: var(--brown);
  background: transparent;
  grid-column: span 2;
  padding-left:0;
}

@media (max-width: 900px){
  .who-we-serve__inner{ grid-template-columns:1fr; }
  .who-we-serve__title, .who-we-serve__lead, .who-we-serve__text{ text-align:center; max-width:none; }
  .area-list{ grid-template-columns:1fr 1fr; }
}

/* ---------- CONTACT ---------- */
.contact-quick{
  background: var(--cream);
  padding:4.75rem 1.5rem;
}

.contact-quick__inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2.5rem;
  align-items:center;
}

.contact-quick__title{
  margin:0 0 0.8rem 0;
  color: var(--brown);
  font-size:2.1rem;
}

.contact-quick__text{
  margin:0 0 1.5rem 0;
  color: var(--brown-80);
  line-height:1.6;
  max-width:560px;
}

.contact-quick__details{
  display:grid;
  gap:0.9rem;
  padding:1.25rem;
  border-radius:16px;
  background:#a4bddf;
  border:1px solid var(--brown-14);
}

.contact-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}

.contact-label{
  color: var(--brown-60);
  font-size:0.95rem;
}

.contact-value{
  color: var(--brown);
  font-weight:650;
  letter-spacing:0.01em;
}

.contact-value:hover{
  text-decoration: underline;
  text-decoration-color: rgba(132, 89, 81, 0.35);
}

.contact-quick__actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--brown);
  color: var(--cream);
  padding:1rem;
  border-radius:14px;
  border:1px solid var(--brown-22);
  font-weight:700;
  letter-spacing:0.02em;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.contact-btn:hover{
  transform: translateY(-2px);
  opacity:0.95;
}

@media (max-width: 900px){
  .contact-quick__inner{ grid-template-columns:1fr; text-align:center; }
  .contact-line{ justify-content:center; flex-wrap:wrap; }
  .contact-quick__actions{ grid-template-columns:1fr; }
}

/* ---------- FAMILY ---------- */
.family{
  background: var(--cream);
  padding:5rem 1.5rem;
}

.family__inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:2.75rem;
  align-items:center;
}

.family__photo{
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(132, 89, 81, 0.22);
  height:500px;
}

.family__photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover; /* fixed: was height:auto inside fixed-height container */
}

.family__title{
  margin:0 0 0.85rem 0;
  color: var(--brown);
  font-size:2.1rem;
  letter-spacing:-0.01em;
}

.family__lead{
  margin:0 0 1rem 0;
  color: var(--brown-80);
  font-size:1.1rem;
  line-height:1.6;
}

.family__text{
  margin:0 0 1rem 0;
  color: var(--brown-60);
  line-height:1.7;
  max-width:520px;
}

@media (max-width: 900px){
  .family__inner{ grid-template-columns:1fr; }
  .family__title, .family__lead, .family__text{ text-align:center; max-width:none; }
}

/* ---------- FOOTER ---------- */
.site-footer{
  background: var(--blue-22);
  padding:4rem 1.5rem 1.75rem;
}

.site-footer__inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap:2rem;
  align-items:start;
}

.footer-title{
  margin:0 0 0.75rem 0;
  color: var(--brown);
  font-size:1.25rem;
  letter-spacing:-0.01em;
}

.footer-heading{
  margin:0 0 0.75rem 0;
  color: var(--brown);
  font-size:1.05rem;
}

.footer-text{
  margin:0;
  color: var(--brown-85);
  line-height:1.65;
}

.footer-mini{
  margin:0.9rem 0 0 0;
  color: var(--brown-70);
  line-height:1.5;
  font-size:0.95rem;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:0.55rem;
}

.footer-link{
  color: var(--brown-85);
  display:inline-block;
  padding:0.2rem 0;
  border-radius:6px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-link:hover{
  background: var(--cream-55);
  transform: translateX(2px);
}

.footer-bottom{
  max-width:1100px;
  margin:2.5rem auto 0;
  padding-top:1.25rem;
  border-top:1px solid var(--brown-14);
}

.footer-small{
  margin:0;
  color: var(--brown-70);
  font-size:0.95rem;
}

@media (max-width: 980px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 620px){
  .site-footer__inner{ grid-template-columns:1fr; }
  .site-footer{ padding-top:3.25rem; }
}

/* ---------- RESPONSIVE HEADER ---------- */
@media (max-width: 768px){
  .header-main{ flex-direction:column; gap:0.8rem; }
  nav ul{ gap:1rem; }
  .header-logo{ height:55px; }
  .header-hero{ padding:3rem 1rem 4rem; }
  .header-hero h1{ font-size:2rem; }
}

@media (max-width: 480px){
  .header-hero h1{ font-size:1.8rem; }
  nav ul{ flex-direction:row; gap:0.8rem; font-size:0.9rem; }
}


.header-topper-link {
  color: var(--cream);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}