* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#f5f3ef;
  color:#171717;
  font-family:Arial,Helvetica,sans-serif
}

header {
  height:88px;
  padding:10px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand img {
  width:150px;
  height:66px;
  object-fit:contain
}

nav {
  display:flex;
  gap:34px
}

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

.contact {
  border-bottom:1px solid;
  padding-bottom:5px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
  font-weight:bold
}

.hero {
  min-height:calc(100vh - 88px);
  display:grid;
  grid-template-columns:46% 54%;
  background:#111;
  color:#fff
}

.hero-copy {
  padding:8vh 6vw 7vh 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.hero h1 {
  font:400 clamp(54px,6vw,96px)/.91 Georgia,serif;
  margin:25px 0
}

.hero-copy>p:not(.eyebrow) {
  line-height:1.7;
  color:#d1d1d1;
  max-width:440px
}

.hero-image {
  overflow:hidden
}

.hero-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 36%
}

.button {
  display:inline-block;
  align-self:flex-start;
  margin-top:22px;
  background:#fff;
  color:#111;
  text-decoration:none;
  padding:15px 20px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10px
}

.intro {
  padding:105px 8vw 65px;
  max-width:980px
}

.intro h2,.about h2,.cta h2 {
  font:400 clamp(40px,5vw,72px)/1.03 Georgia,serif;
  margin:18px 0
}

.intro>p:last-child {
  max-width:650px;
  line-height:1.7;
  color:#555
}

/* Five-category navigation: no forced image crop */
.category-grid {
  padding:0 6vw 9vw;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(22px,2.5vw,42px);
  align-items:start
}

.category-card {
  display:block;
  color:#171717;
  text-decoration:none
}

.category-card img {
  display:block;
  width:100%;
  height:auto;
  background:#e5e1da;
  transition:transform .3s
}

.category-card:hover img {
  transform:translateY(-4px)
}

.category-card span {
  display:block;
  padding-top:12px;
  font:400 clamp(22px,2.1vw,34px)/1.1 Georgia,serif
}

.c1 {
  grid-column:1/span 5
}

.c2 {
  grid-column:7/span 6;
  margin-top:9vw
}

.c3 {
  grid-column:2/span 6;
  margin-top:2vw
}

.c4 {
  grid-column:7/span 6;
  margin-top:8vw
}

.c5 {
  grid-column:4/span 7;
  margin-top:2vw
}

.services {
  padding:95px 8vw;
  background:#111;
  color:#fff
}

.service-list {
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:13px
}

.service-list span {
  border:1px solid #555;
  padding:14px 18px;
  font:19px Georgia,serif
}

.about {
  padding:115px 8vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw
}

.about p {
  font-size:17px;
  line-height:1.75;
  color:#4b4b4b
}

.cta {
  padding:115px 8vw;
  background:#9f1d20;
  color:#fff
}

footer {
  padding:46px 5vw;
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px
}

footer img {
  width:120px
}

footer p:last-child {
  margin-left:auto;
  color:#777
}

/* After Dark: preserve original compositions */
.private-page {
  background:#0c0c0c;
  color:#eee
}

.private-intro {
  padding:85px 7vw 55px;
  max-width:900px
}

.private-intro h1 {
  font:400 clamp(58px,8vw,110px)/.95 Georgia,serif;
  margin:18px 0
}

.private-intro p:last-child {
  color:#aaa;
  line-height:1.7
}

.private-gallery {
  padding:0 5vw 8vw;
  columns:2;
  column-gap:clamp(20px,2.5vw,42px)
}

.private-gallery figure {
  break-inside:avoid;
  margin:0 0 clamp(20px,2.5vw,42px)
}

.private-gallery img {
  display:block;
  width:100%;
  height:auto
}

.private-gallery .lead {
  column-span:all;
  margin-bottom:clamp(28px,4vw,60px)
}

@media(max-width:1000px) {
  .category-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .category-card,.c1,.c2,.c3,.c4,.c5 {
    grid-column:auto;
    margin-top:0
  }

  .c5 {
    grid-column:1/-1;
    width:72%;
    justify-self:center
  }

}

@media(max-width:650px) {
  header {
    height:74px
  }

  .brand img {
    width:118px
  }

  nav a:not(.contact) {
    display:none
  }

  .hero {
    display:flex;
    flex-direction:column-reverse
  }

  .hero-image img {
    height:auto;
    object-fit:contain
  }

  .hero-copy {
    padding:50px 7vw 65px
  }

  .hero h1 {
    font-size:54px
  }

  .category-grid {
    grid-template-columns:1fr;
    padding:0 6vw 12vw;
    gap:38px
  }

  .c5 {
    grid-column:auto;
    width:100%
  }

  .category-card span {
    font-size:27px
  }

  .about {
    grid-template-columns:1fr;
    gap:18px
  }

  .private-gallery {
    columns:1;
    padding:0 6vw 10vw
  }

  footer {
    flex-wrap:wrap
  }

  footer p:last-child {
    margin-left:0;
    width:100%
  }

}

/* Interior portfolio pages */
.gallery-intro {
  padding:100px 8vw 65px;
  max-width:1000px
}

.gallery-intro h1 {
  font:400 clamp(52px,7vw,96px)/.96 Georgia,serif;
  margin:18px 0 24px
}

.gallery-intro>p:last-child {
  max-width:650px;
  line-height:1.7;
  color:#555;
  font-size:17px
}

.work-gallery {
  padding:0 6vw 10vw;
  columns:2;
  column-gap:clamp(22px,3vw,48px)
}

.gallery-item {
  break-inside:avoid;
  margin:0 0 clamp(22px,3vw,48px)
}

.gallery-item img {
  display:block;
  width:100%;
  height:auto
}

.gallery-footer-cta {
  margin:0 6vw 7vw;
  padding:75px 6vw;
  background:#e7e2da
}

.gallery-footer-cta h2 {
  font:400 clamp(36px,4.5vw,62px)/1.04 Georgia,serif;
  max-width:800px;
  margin:16px 0
}

.button.dark {
  background:#111;
  color:#fff
}

@media(min-width:1200px) {
  .work-gallery {
    columns:3
  }

  .gallery-item:nth-child(5n+1) {
    margin-bottom:5vw
  }

}

@media(max-width:650px) {
  .gallery-intro {
    padding:70px 7vw 45px
  }

  .work-gallery {
    columns:1;
    padding:0 6vw 12vw
  }

  .gallery-footer-cta {
    margin:0 6vw 10vw;
    padding:55px 7vw
  }

}

/* Compact five-across category navigation override */
.category-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.4vw,24px);
  padding:0 4vw 8vw;
  align-items:start
}

.category-card {
  display:block;
  text-decoration:none;
  color:inherit;
  margin:0;
  width:100%
}

.category-card img {
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  background:#e5e1da;
  transition:transform .3s
}

.category-card span {
  display:block;
  margin-top:12px;
  padding-top:0;
  font:400 clamp(14px,1.05vw,18px)/1.25 Georgia,serif
}

.c1,.c2,.c3,.c4,.c5 {
  grid-column:auto;
  margin-top:0;
  width:100%
}

@media(max-width:1100px) {
  .category-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding-left:6vw;
    padding-right:6vw
  }

  .c5 {
    grid-column:auto;
    width:100%;
    justify-self:auto
  }

}

@media(max-width:650px) {
  .category-grid {
    grid-template-columns:1fr;
    padding:0 6vw 12vw;
    gap:32px
  }

  .category-card img {
    aspect-ratio:auto;
    height:auto
  }

  .category-card span {
    font-size:27px
  }

}

/* Final homepage navigation + branding fixes */
.home-page header {
  height:108px;
  padding-top:8px;
  padding-bottom:8px
}

.home-page .brand img {
  width:225px;
  height:88px;
  object-fit:contain
}

.home-page .category-card img {
  aspect-ratio:1 / 1;
  object-fit:cover
}

@media(max-width:650px) {
  .home-page header {
    height:90px
  }

  .home-page .brand img {
    width:180px;
    height:72px
  }

}

/* Final content additions — placeholders, video work, and contact fallback */
.gallery-placeholder,.private-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e3dfd7;
  color:#777;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  min-height:180px
}

.square-placeholder {
  aspect-ratio:1 / 1
}

.private-placeholder {
  break-inside:avoid;
  margin:0 0 clamp(20px,2.5vw,42px);
  background:#1b1b1b;
  color:#777
}

.video-section {
  padding:10px 6vw 9vw
}

.video-section h2 {
  font:400 clamp(36px,4.5vw,62px)/1.04 Georgia,serif;
  margin:16px 0 42px;
  max-width:800px
}

.video-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,48px)
}

.video-frame {
  position:relative;
  aspect-ratio:16 / 9;
  background:#111;
  overflow:hidden
}

.video-frame iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

.video-card p {
  margin:12px 0 0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#555
}

.email-fallback {
  margin:16px 0 0;
  font-size:12px;
  color:#f2dede
}

.email-fallback a {
  color:inherit
}

.dark-email {
  color:#555
}

@media(max-width:650px) {
  .video-grid {
    grid-template-columns:1fr
  }

  .video-section {
    padding:0 6vw 12vw
  }

}

/* Contact form */
.contact-page {
  padding:95px 8vw 115px;
  max-width:1050px;
  margin:0 auto
}

.contact-heading {
  max-width:760px;
  margin-bottom:48px
}

.contact-heading h1,.thanks-page h1 {
  font:400 clamp(48px,6vw,84px)/1 Georgia,serif;
  margin:18px 0 22px
}

.contact-heading>p:last-child,.thanks-page>p {
  font-size:17px;
  line-height:1.7;
  color:#555;
  max-width:620px
}

.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 30px;
  max-width:850px
}

.contact-form label {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:10px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.14em
}

.contact-form label:nth-of-type(4) {
  grid-column:1/-1
}

.contact-form input,.contact-form select,.contact-form textarea {
  width:100%;
  border:1px solid #bbb;
  background:#fff;
  color:#171717;
  padding:14px 15px;
  font:16px Arial,Helvetica,sans-serif;
  border-radius:0
}

.contact-form textarea {
  resize:vertical;
  min-height:170px
}

.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus {
  outline:2px solid #171717;
  outline-offset:2px
}

.form-submit {
  border:0;
  cursor:pointer;
  margin-top:0;
  justify-self:start
}

.form-hidden {
  position:absolute!important;
  left:-9999px!important;
  width:1px;
  height:1px;
  overflow:hidden
}

.contact-direct {
  margin-top:28px;
  color:#555;
  font-size:13px
}

.contact-direct a {
  color:#171717
}

.thanks-page {
  min-height:60vh
}

.thanks-page .button {
  margin-top:24px
}

@media(max-width:650px) {
  .contact-page {
    padding:65px 7vw 90px
  }

  .contact-form {
    grid-template-columns:1fr
  }

  .contact-form label:nth-of-type(4) {
    grid-column:auto
  }

}

/* After Dark lead image: keep the opening portrait within the desktop viewport */
@media (min-width: 651px) {
  .private-gallery .lead {
    text-align: center;
  }

  .private-gallery .lead img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 48px);
    margin: 0 auto;
  }
}