/* ==================================================================
   Acorn Building, LLC - Birmingham, AL
   Elegant green + cream editorial design
   ================================================================== */

:root {
  --green: #415a38;        /* intro band, menu panel */
  --green-2: #316142;      /* footer address, buttons, accents */
  --green-dk: #2c4227;     /* dark fallback */
  --mauve: #633761;        /* footer contact links */
  --cream: #f1ede3;
  --cream-2: #e9e4d6;
  --ink: #26301d;
  --white: #ffffff;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.65; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* ---- Logo ---- */
.logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; }
.logo__mark { width: 54px; height: 50px; }
.logo__word { font-family: var(--display); font-weight: 500; font-size: 2rem; letter-spacing: .18em; text-transform: lowercase; margin-top: 6px; }
.logo__sub { font-family: var(--display); font-weight: 500; font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; margin-top: 3px; }
.logo--hero { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 6; color: var(--white); }
.logo--foot { color: var(--green); }
.logo__img { display: block; height: auto; width: 150px; }
.logo--hero .logo__img { width: 155px; }
.pheader .logo__img, .logo--foot .logo__img { width: 118px;
  /* tint the white logo to dark green on light backgrounds */
  filter: brightness(0) saturate(100%) invert(27%) sepia(22%) saturate(680%) hue-rotate(55deg) brightness(94%) contrast(92%); }

/* ---- Hamburger (fixed) ---- */
.hb { position: fixed; top: 34px; right: 34px; z-index: 130; width: 44px; height: 34px; padding: 6px; background: none; border: 0; cursor: pointer; }
.hb span { display: block; height: 2px; width: 100%; background: var(--white); margin: 6px 0; transition: transform .3s ease, opacity .3s ease, background .3s ease; }
body:not(.home) .hb span { background: var(--green); }
.hb[aria-expanded="true"] span { background: var(--white); }
.hb[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Overlay menu ---- */
.overlay { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.overlay.open { visibility: visible; }
.overlay__backdrop { position: absolute; inset: 0; background: rgba(20,28,16,.28); opacity: 0; transition: opacity .4s ease; }
.overlay.open .overlay__backdrop { opacity: 1; }
.overlay__panel { position: absolute; top: 0; right: 0; height: 100%; width: 50vw; max-width: 640px; background: var(--green);
  transform: translateX(100%); transition: transform .5s cubic-bezier(.22,1,.36,1); display: flex; align-items: center; padding: 0 min(9vw, 90px); }
.overlay.open .overlay__panel { transform: translateX(0); }
.overlay__menu { list-style: none; margin: 0; padding: 0; }
.overlay__menu li { margin: .35em 0; opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.overlay.open .overlay__menu li { opacity: 1; transform: none; }
.overlay.open .overlay__menu li:nth-child(1){transition-delay:.14s}
.overlay.open .overlay__menu li:nth-child(2){transition-delay:.20s}
.overlay.open .overlay__menu li:nth-child(3){transition-delay:.26s}
.overlay.open .overlay__menu li:nth-child(4){transition-delay:.32s}
.overlay.open .overlay__menu li:nth-child(5){transition-delay:.38s}
.overlay.open .overlay__menu li:nth-child(6){transition-delay:.44s}
.overlay__menu a { font-family: "Corben", var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: #000; text-decoration: none; letter-spacing: 0; transition: color .2s ease; }
.overlay__menu a:hover, .overlay__menu a.is-active { color: #fff; }

/* ---- Hero ---- */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: var(--green-dk); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,16,.28), rgba(20,28,16,.14) 40%, rgba(20,28,16,.34)); }
.hero__scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 6; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; display: grid; place-items: center; }
.hero__scroll span { width: 11px; height: 11px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-2px) rotate(45deg); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(-3px) rotate(45deg);} 50%{ transform: translateY(2px) rotate(45deg);} }

/* ---- Intro band ---- */
.band { background: var(--green); color: #fff; padding: clamp(3.2rem, 7vw, 6rem) 6vw; text-align: center; }
.band__text { font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.8; max-width: 840px; margin: 0 auto; }

/* ---- Carousel ---- */
.carousel { position: relative; background: #000; overflow: hidden; }
.carousel__track { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.carousel__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
.carousel__slide.is-active { opacity: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; background: rgba(0,0,0,.32); color: #fff; border: 0; width: 52px; height: 68px; font-size: 2rem; cursor: pointer; transition: background .2s ease; }
.carousel__arrow:hover { background: rgba(0,0,0,.6); }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__count { position: absolute; bottom: 16px; right: 20px; z-index: 4; color: #fff; font-family: var(--display); letter-spacing: .1em; font-size: 1.1rem; }

/* ---- Footer ---- */
.foot-bar { height: 26px; background: var(--green); }
.foot { background: var(--cream); padding: clamp(2rem, 4vw, 3.4rem) 6vw 2.4rem; }
.foot__inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
.foot__left { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); }
.foot__addr { font-family: var(--display); font-size: 1.25rem; color: var(--green-2); }
.foot__addr p { margin: 0; }
.foot__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.foot__tel, .foot__mail { text-decoration: underline !important; }
.foot__bbb { margin-top: 10px; line-height: 0; }
.foot__bbb img { width: 200px; height: auto; }
.foot__contact a { color: var(--mauve); text-decoration: none; font-family: var(--sans); font-size: 1.05rem; }
.foot__contact a:hover { text-decoration: underline; }
.foot__ig { color: var(--mauve); margin-bottom: 4px; }
.foot__ig:hover { opacity: .7; }
.btn-login { margin-top: 10px; background: var(--green-2); color: #fff !important; font-family: var(--sans); letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; padding: 12px 26px; text-decoration: none !important; }
.btn-login:hover { background: var(--green); }
.foot__copy { text-align: center; color: #8a8f7f; font-size: .85rem; margin: 2.4rem 0 0; }

/* ---- Interior pages ---- */
.pheader { position: relative; z-index: 5; background: var(--cream); text-align: center; padding: 26px 0 20px; border-bottom: 1px solid var(--cream-2); }
.pheader .logo { color: var(--green); }
.page-hero { background: var(--green); color: var(--cream); text-align: center; padding: clamp(3rem, 7vw, 5.5rem) 6vw; }
.page-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0; letter-spacing: .02em; }
.section { padding: clamp(3rem, 6vw, 5rem) 6vw; max-width: 1140px; margin: 0 auto; }
.section h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--green); margin: 0 0 .6em; }
.prose { max-width: 760px; margin: 0 auto; text-align: center; }
.prose p { font-family: var(--display); font-size: 1.25rem; line-height: 1.6; margin: 0 0 1.1rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card figcaption { font-family: var(--display); font-size: 1.4rem; color: var(--green); text-align: center; margin-top: .5rem; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card p { text-align: center; color: #55604a; margin: .3rem 0 0; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: pointer; transition: opacity .2s ease; }
.pgrid button { padding: 0; border: 0; background: none; display: block; }
.pgrid button:hover img { opacity: .88; }
.info { max-width: 620px; margin: 0 auto; }
.info__row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--cream-2); font-family: var(--display); font-size: 1.2rem; }
.info__row span { color: var(--green); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; padding-top: 5px; }
.info__row a { color: var(--ink); text-decoration: none; }
.info__row a:hover { color: var(--green); }
.map-frame { width: 100%; aspect-ratio: 16/9; border: 0; margin-top: 24px; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,16,.94); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; }
.lb-close { top: 20px; right: 26px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .overlay__panel { width: 100vw; max-width: none; }
  .split { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .foot__inner { flex-direction: column; text-align: center; gap: 22px; }
  .foot__contact { align-items: center; }
}
@media (max-width: 520px) {
  .hb { top: 22px; right: 20px; }
  .logo--hero { top: 26px; }
  .pgrid { grid-template-columns: 1fr; }
  .info__row { grid-template-columns: 1fr; gap: 2px; }
}
/* ============ Subpages (match live UI/UX) ============ */
.pheader--over { position: relative; z-index: 5; background: #ffffff; border: 0; height: 166px; display: flex; align-items: center; padding: 0 clamp(18px,4vw,48px); }
.pheader--over .logo { display: inline-block; }
.pheader--over .logo__img { width: 82px; filter: brightness(0) saturate(100%) invert(27%) sepia(22%) saturate(680%) hue-rotate(55deg) brightness(94%) contrast(92%); }
body.sub .hb { top: 66px; right: clamp(18px,4vw,48px); }
.hb[aria-expanded="true"] span { background: #fff; }

/* who-we-are */
.intro-wrap { max-width: 960px; margin: 0 auto; padding: clamp(2.5rem,6vw,4.5rem) 6vw clamp(2rem,4vw,3rem); text-align: center; }
.intro-wrap p { font-family: var(--display); font-size: clamp(1.15rem,1.7vw,1.4rem); line-height: 1.7; color: var(--green); margin: 0; }
.full-bleed img { width: 100%; height: clamp(320px,56vw,690px); object-fit: cover; display: block; }

/* what-we-do */
.wwd-head { max-width: 940px; margin: 0 auto; padding: clamp(2.5rem,6vw,4rem) 6vw 0; text-align: center; }
.wwd-head h1 { font-family: var(--display); color: var(--green); font-size: clamp(2.2rem,5vw,3.3rem); margin: 0 0 .5rem; }
.wwd-head p { font-family: var(--display); color: var(--green); font-size: 1.15rem; margin: 0; }
.scope-row { max-width: 1080px; margin: clamp(2rem,4vw,3.4rem) auto clamp(3rem,6vw,5rem); padding: 0 6vw; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.scope { text-align: center; }
.scope svg { width: 66px; height: 66px; }
.scope span { display: block; margin-top: 12px; font-family: var(--display); font-size: 1.2rem; color: var(--green); }
.ig-line { text-align: center; font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin: 0 auto clamp(1.3rem,3vw,2rem); padding: 0 6vw; }
.ig-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.ig-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* our-projects (green page) */
body.projects { background: var(--green); }
.proj2 { max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem,6vw,4rem) 6vw clamp(3rem,6vw,5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.proj2 img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* contact */
.contact-hero { position: relative; min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 40px 6vw 90px; }
.contact-hero__bg { position: absolute; inset: 0; }
.contact-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-card { position: relative; z-index: 2; width: min(680px,92vw); background: rgba(241,237,227,.94); border-radius: 10px; padding: clamp(1.6rem,3vw,2.4rem); box-shadow: 0 12px 44px rgba(0,0,0,.28); }
.contact-card h2 { font-family: var(--display); color: var(--green); font-size: clamp(1.8rem,3.5vw,2.4rem); margin: 0 0 1.1rem; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; grid-template-areas: "first last" "email message" "phone message" "submit submit"; }
.f-first{grid-area:first} .f-last{grid-area:last} .f-email{grid-area:email} .f-msg{grid-area:message} .f-phone{grid-area:phone} .f-submit{grid-area:submit}
.contact-form label { display: flex; flex-direction: column; font-family: var(--display); color: var(--green); font-size: .96rem; }
.contact-form input, .contact-form textarea { margin-top: 5px; border: 0; background: #dde2d4; border-radius: 4px; padding: 10px 12px; font-family: var(--body); font-size: 1rem; color: var(--ink); }
.f-msg { display: flex; flex-direction: column; }
.f-msg textarea { flex: 1; min-height: 120px; resize: vertical; }
.f-submit button { width: 100%; background: var(--green); color: #fff; border: 0; padding: 12px; border-radius: 4px; font-family: var(--display); font-size: 1.1rem; letter-spacing: .04em; cursor: pointer; }
.f-submit button:hover { background: var(--green-dk); }
.contact-mail { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin: -32px auto 0; }

/* green footer variant (subpages) */
.foot--green { background: var(--green); }
.foot--green .foot__inner { align-items: center; }
.foot--green .foot__addr { color: var(--cream); }
.foot--green .logo__img { filter: none; }
.foot--green .foot__contact { margin-left: auto; }
.foot--green .foot__contact a { color: var(--cream); font-family: var(--display); text-decoration: underline; font-size: 1.06rem; }
.foot--green .foot__ig { color: var(--cream); margin-left: clamp(20px,4vw,60px); align-self: center; }

@media (max-width: 860px) {
  .scope-row { grid-template-columns: repeat(2,1fr); gap: 30px; }
  .ig-grid { grid-template-columns: repeat(3,1fr); }
  .proj2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ig-grid { grid-template-columns: repeat(2,1fr); }
  .contact-form { grid-template-columns: 1fr; grid-template-areas: "first" "last" "email" "message" "phone" "submit"; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scroll span { animation: none; }
  .carousel__slide, .overlay__panel, .overlay__menu li { transition: none; }
}