*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    :root{
      --brand:#B6765B;   /* terracotta */
      --carbon:#1E1E1E;  /* tech carbon */
      --bg:#F4F2F0;      /* off‑white background */
      --text:#272727;
      --muted:#9C948F;
    }
    html{overflow-x:hidden;scroll-behavior:smooth;font-size:16px}
    a{color:var(--brand);text-decoration:none;transition:color .2s}
    a:hover{text-decoration:underline;color:#a0634e}
    [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
    [data-reveal].visible{opacity:1;transform:none}
    nav ul{list-style:none;display:flex;gap:1.4rem}
    nav a{color:#fff;font-size:.95rem;position:relative;padding-bottom:3px}
    nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brand);transition:width .3s ease}


    #testimonials{background:#fff;padding:4.5rem 1rem}
    #testimonials h2{text-align:center;color:var(--carbon);margin-bottom:3rem;font-size:1.8rem}
    section[data-reveal]{background:#F4F2F0;}

    @media(max-width:700px){
      .modal-content{width:98vw;padding:.7rem;}
      #modal-img{height:260px;max-height:260px;}
      .modal-close{top:.5rem;right:.5rem;width:1.7rem;height:1.7rem;font-size:1.1rem;}
      .modal-nav{width:1.7rem;height:1.7rem;font-size:1.1rem;left:.5rem;right:.5rem;}
      .modal-prev{left:.5rem;}
      .modal-next{right:.5rem;}
    }
    @media(max-width:620px){nav ul{gap:.9rem}nav a{font-size:.82rem}.project-wrapper{width:84vmin}}
    @media(max-width:900px){
      #benefits{flex-direction:column;gap:1.2rem}
      .benefit{max-width:100%}
      .hero-content{padding:0 .5rem}
    }
    @media(max-width:700px){
      .hero h1{font-size:2rem}
      .hero .tagline{font-size:1rem;}
      .hero p{font-size:1rem}
      .hero{min-height:40vh}
      .project-wrapper{width:98vw;grid-template-columns:1fr}
      
      .project-label{font-size:1rem;padding:.3em 1em}
      .testi-grid{grid-template-columns:1fr}
      #testimonials{padding:2rem .5rem}
      #contact{padding:2rem .5rem}
      footer{padding:.7rem .5rem}
      .btn{padding:.6em 1.2em;font-size:.95rem}
    }
@media(max-width:500px) {
  /* Mobile: hide contact image and center title + form */
  .contact__right {
    display: none;
  }
  .contact__container {
    flex-direction: column;
    align-items: center;
  }
  .contact__left {
    width: 100%;
    padding-left: 0;
    align-items: center;
  }
  .contact__title {
    text-align: center;
  }
  .contact__form-wrapper {
    width: 100%;
    padding: 0 1rem;
  }
  .header {
    position: relative;
  }
  /* wrapper for logo + button to keep them fixed at top */
  .header__top {
    display: flex;
    align-items: center;
    height: 120px;
    padding: 0 1rem;
    position: relative;
  }
  .nav-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
  }
      .header nav {
        display: none;
        width: 100%;
      }
      /* expand header height and show links in a row when open */
      /* when open, allow header to grow and position nav at bottom */
      /* when open: increase header height to make room for nav at bottom */
  .header.nav-open {
    height: calc(120px + 3.5rem);
  }
      .header.nav-open nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 1rem;
        right: 1rem;
      }
      .header.nav-open nav ul {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: 100%;
        justify-content: space-around;
        align-items: center;
      }
      .header.nav-open nav ul li {
        width: auto;
      }
  .header.nav-open nav a {
    display: block;
    padding: 0.5rem 0;
    font-size: 1rem;
  }

  /* Mobile: stack About section; show content below image */
  .about__container {
    flex-direction: column;
  }
  .about__image {
    width: 100%;
    margin-bottom: 1rem;
  }
  .about__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .about__content {
    position: relative;
    background: #fff;
    color: #222;
    padding: 1rem;
  }
}
    .blog-section {
        padding: 4rem 1rem;
        max-width: 900px;
        margin: 0 auto;
    }
    .blog-section h1 {
        text-align: center;
        color: var(--brand);
        margin-bottom: 3rem;
        font-size: 2.5rem;
    }
    .blog-post-summary {
        background: #fff;
        border-radius: 4px;
        margin-bottom: 2rem;
        box-shadow: 0 4px 14px rgba(0,0,0,.06);
        padding: 1.5rem;
        border-left: 4px solid var(--brand);
    }
    .blog-post-summary h2 {
        color: var(--carbon);
        font-size: 1.5rem;
        margin-bottom: .5rem;
    }
    .blog-post-summary p {
        font-size: .95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    .blog-post-summary .read-more {
        display: inline-block;
        color: var(--brand);
        font-weight: 600;
    }
    .faq-section {
        padding: 4rem 1rem;
        max-width: 900px;
        margin: 0 auto;
    }
    .faq-section h1 {
        text-align: center;
        color: var(--brand);
        margin-bottom: 3rem;
        font-size: 2.5rem;
    }
    .faq-item {
        background: #fff;
        border-radius: 4px;
        margin-bottom: 1rem;
        box-shadow: 0 4px 14px rgba(0,0,0,.06);
        border-left: 4px solid var(--brand);
    }
    .faq-question {
        width: 100%;
        background: none;
        border: none;
        text-align: left;
        padding: 1.5rem;
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease-out, padding .3s ease-out;
        padding: 0 1.5rem;
    }
    .faq-answer p {
        font-size: .95rem;
        line-height: 1.6;
        padding-bottom: 1.5rem;
    }
    .faq-item.active .faq-answer {
        max-height: 300px; /* Adjust as needed */
        padding-top: 0;
    }
    html {
      box-sizing: border-box;
      height: 100%;
    }
    body {
      margin: 0;
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-optical-sizing: auto;
      font-style: normal;
      color: #fff;
      background: #fff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      padding-top: 120px;
    }
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #2A2624;
      height: 120px;
      overflow: hidden;
      transition: height 0.3s ease;
  display: block;
  padding: 0;
      z-index: 1000;
    }
    .logo {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 2.1rem;
      font-weight: 500;
      letter-spacing: 0.13em;
      color: #fff;
      display: flex;
      align-items: center;
    }
    .logo span {
      font-weight: 300;
      font-size: 1.1rem;
      margin-left: 0.5rem;
      letter-spacing: 0;
    }
    /* Desktop: align header elements horizontally */
    @media (min-width: 501px) {
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2.5vw;
      }
      .header__top {
        display: flex;
        align-items: center;
      }
      .header nav {
        display: flex;
        align-items: center;
      }
    }
    /* Mobile: hamburger toggle button */
    .nav-toggle {
      display: block;
      background: transparent;
      border: 2px solid var(--brand);
      color: var(--brand);
      font-size: 1.8rem;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    @media (min-width: 501px) {
      .nav-toggle {
        display: none;
      }
    }
    .nav-toggle:hover,
    .nav-toggle[aria-expanded="true"] {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .hero {
      position: relative;
      width: 100vw;
      min-height: 68vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #c7a388;
      overflow: hidden;
    }
    .hero__bg {
      position: absolute;
      top: 0; left: 0;
      width: 100vw; height: 100%;
      object-fit: cover;
      object-position: center 43%; /* shifted up to show lower part */
      z-index: 1;
    }
    .hero__overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100vw; height: 100%;
      background: rgba(42, 38, 36, 0.1); /* lighter */
      z-index: 2;
    }
    .hero__content {
      position: relative;
      z-index: 3;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 5vw;
    }
    .hero__title {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 4.8rem; /* Larger, as in PDF */
      font-weight: 600;
      line-height: 1.07;
      margin-bottom: 0.5rem;
      color: #fff;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.2);
    }
    .hero__subtitle {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.75rem;
      font-weight: 400;
      margin-bottom: 2.2rem;
      color: #fff;
      text-shadow: 0 2px 8px rgba(42,38,36,0.07);
    }
    .hero__cta {
      background: #fff;
      color: #2A2624;
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-weight: 600;
      border: none;
      padding: 0.85rem 2.1rem;
      font-size: 1.1rem;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(42,38,36,0.10);
      transition: background 0.2s, color 0.2s, box-shadow 0.18s;
      letter-spacing: 0.05em;
    }
    .hero__cta:hover {
      background: #e0d4c3;
      color: #2A2624;
      box-shadow: 0 5px 20px rgba(42,38,36,0.16);
    }
    .about {
      width: 100vw;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5vw 0 3vw 0;
      box-sizing: border-box;
    }
    .about__container {
      max-width: 1200px;
      width: 90vw;
      display: flex;
      align-items: stretch;
      gap: 4vw;
      margin: 0 auto;
    }
    .about__image {
      flex: 1.3;
      min-width: 350px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      height: 100%;
    }
    .about__image img {
      max-width: 100%;
      height: 100%;
      border-radius: 0;
      box-shadow: 0 6px 36px rgba(42,38,36,0.09);
      transform: scaleX(-1);
      object-fit: cover;
    }
    .about__content {
      flex: 1.1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 0 0 0 1vw;
    }
    .about__title {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 2.6rem;
      font-weight: 700;
      color: #2A2624;
      margin: 0 0 1.1rem 0;
      line-height: 1.05;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .about__text {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.15rem;
      font-weight: 400;
      color: #222;
      margin: 0 0 1.1em 0;
      line-height: 1.55;
      letter-spacing: 0.005em;
    }
    .portfolio {
      position: relative;
      width: 100vw;
      min-height: 75vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eae7e3;
      overflow: hidden;
      padding: 5vw 0 6vw 0;
      box-sizing: border-box;
    }
    .portfolio__bg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url('dist/img/open-space-render.avif') center/cover no-repeat; /* Set your bg image or remove */
      z-index: 1;
      pointer-events: none;
    }
    .portfolio__bg::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(42,38,36, 0.7);  /* Adjust opacity here */
      z-index: 2;
    }
    .portfolio__content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .portfolio__title {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      color: #fff;
      font-size: 2.7rem;
      font-weight: 600;
      text-align: center;
      margin-top: 0;
      margin-bottom: 5.3rem;
      letter-spacing: 0.02em;
      text-shadow: 0 3px 20px rgba(42,38,36,0.20);
      text-transform: uppercase;
    }
    .portfolio__grid {
      width: 100%;
      display: flex;
      gap: 4vw;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .portfolio__item {
      position: relative;
      flex: 1 1 320px;
      max-width: 370px;
      aspect-ratio: 3/4;
      background: #f3f3ef;
      overflow: hidden;
      box-shadow: 0 4px 30px rgba(42,38,36,0.10);
      margin-bottom: 1vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .portfolio__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    }
    .portfolio__item:hover img {
      transform: scale(1.045);
    }
    .portfolio__btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      padding: 0.8em 2.1em;
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-weight: 500;
      font-size: 1rem;
      color: #fff;
      border: 2px solid #fff;
      background: rgba(42,38,36,0.07);
      text-decoration: none;
      letter-spacing: 0.05em;
      text-align: center;
      cursor: pointer;
      opacity: 0.95;
      transition: background 0.18s, color 0.18s, border 0.18s;
      z-index: 2;
    }
    .portfolio-alt {
      width: 100vw;
      background: #fff;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: stretch;
      box-sizing: border-box;
      border-bottom: none;
    }
    .portfolio-alt__container {
      display: flex;
      width: 100vw;
      max-width: 1600px;
      height: 80vh;
      min-height: 460px;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .portfolio-alt__left, .portfolio-alt__right {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .portfolio-alt__left {
      flex: 1.1;
      align-items: stretch;
      justify-content: stretch;
    }
    .portfolio-alt__right {
      flex: 1;
      justify-content: center;
      align-items: center;
      gap: 2vw;
      padding: 4vw 0;
    }
    .portfolio-alt__item {
      position: relative;
      background: #eae7e3;
      overflow: hidden;
      margin: 0 2vw 0 0;
      box-shadow: 0 4px 24px rgba(42,38,36,0.11);
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(50% - 1vw);
      min-height: 180px;
    }
    .portfolio-alt__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    }
    .portfolio-alt__item:hover img {
      transform: scale(1.035);
    }
    .portfolio-alt__item--large {
      height: 100%;
      min-height: 320px;
    }
    .portfolio-alt__right .portfolio-alt__item {
      width: 36vw;
      height: 36vw;
      max-width: 520px;
      min-width: 280px;
      min-height: 280px;
      margin: 0;
    }
    .portfolio__item:hover .portfolio__btn,
    .portfolio-alt__item:hover .portfolio__btn, 
    .portfolio__btn:focus {
      background: #fff;
      color: #2A2624;
    }
    .panorama__title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 0.8em 2.1em;
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-weight: 500;
      font-size: 1rem;
      color: #fff;
      border: 2px solid #fff;
      background: rgba(42,38,36,0.07);
      text-decoration: none;
      letter-spacing: 0.05em;
      text-align: center;
      text-transform: uppercase;
      opacity: 0.95;
      transition: opacity 0.5s ease-in;
      pointer-events: none;
      z-index: 2;
    }
    .services {
      background: #fff;
      padding: 5vw 0 4vw 0;
      width: 100vw;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .services__title {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      color: #2A2624;
      font-size: 2.7rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      margin-bottom: 3vw;
      text-align: center;
      text-transform: uppercase;
    }
    .services__grid {
      display: flex;
      gap: 2.2vw;
      justify-content: center;
      width: 100%;
      max-width: 1440px;
      padding: 0 3vw;
    }
    .services__card {
      background: #3B3937;
      color: #fff;
      border-radius: 0;
      padding: 2.8rem 2rem 2.1rem 2rem;
      box-sizing: border-box;
      flex: 1 1 0px;
      min-width: 250px;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .services__card-title {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 1.19rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin: 0 0 1.5rem 0;
      color: #fff;
    }
    .services__card-text {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.03rem;
      font-weight: 400;
      margin: 0;
      color: #fff;
      line-height: 1.55;
    }
    .services__card-bold {
      font-family: 'Poppins', Arial, sans-serif;
      font-weight: 700;
      display: block;
      margin-top: 0.6rem;
      color: #fff;
    }
    .testimonials {
      position: relative;
      width: 100vw;
      padding: 5vw 0 5vw 0;
      background: #eae7e3;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .testimonials__bg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url('dist/img/openspace-kitchen-1.avif') center/cover no-repeat;
      z-index: 1;
      opacity: 1;
    }
    .testimonials__bg::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(42,38,36,0.52);
      z-index: 2;
      pointer-events: none;
    }
    .testimonials__content {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 1450px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #testimonials .testimonials__title {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 2.6rem;
      font-weight: 700;
      color: #fff;
      text-align: center;
      margin-bottom: 3vw;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-shadow: 0 4px 18px rgba(42,38,36,0.33);
    }
    .testimonials__grid {
      display: flex;
      gap: 2vw;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      max-width: 1400px;
      flex-wrap: wrap;
    }
    .testimonials__card {
      background: #fff;
      border-radius: 28px;
      box-shadow: 0 8px 32px rgba(42,38,36,0.10);
      padding: 2.3rem 2.1rem 1.6rem 2.1rem;
      max-width: 400px;
      min-width: 270px;
      flex: 1 1 320px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 2vw;
    }
    .testimonials__quote {
      font-size: 6.2rem;
      color: #BC7F62;
      margin-bottom: 1.1rem;
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-weight: 700;
      line-height: 0.7;
    }
    .testimonials__text {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.08rem;
      color: #2A2624;
      text-align: center;
      margin-bottom: 1.5rem;
      line-height: 1.52;
    }
    .testimonials__author {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1rem;
      color: #4E4E4E;
      text-align: center;
      margin-top: auto;
      font-style: italic;
      margin-bottom: 0.2rem;
    }
    .contact {
      background: #fff;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: stretch;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .contact__container {
      display: flex;
      max-width: 1450px;
      width: 95vw;
      min-height: 58vh;
      margin: 0 auto;
      box-sizing: border-box;
      align-items: stretch;
      padding: 5vw 0;
      gap: 4vw;
    }
    .contact__left {
      flex: 1.05;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      padding-left: 2vw;
    }
    .contact__title {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 3.2rem;
      font-weight: 700;
      color: #222;
      letter-spacing: 0.01em;
      line-height: 0.98;
      text-transform: uppercase;
      margin: 0 0 2.7vw 0;
    }
    .contact__icon svg {
      display: inline-block;
      vertical-align: middle;
      stroke: #222;
      fill: none;
      transition: stroke 0.18s, background 0.18s;
      border-radius: 50%;
      padding: 2px;
    }
    .contact__icon:hover svg,
    .contact__icon:focus svg {
      stroke: #BC7F62;
      background: #f2e8e1;
    }
    .contact__right {
      flex: 1.1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 290px;
    }
    .contact__right img {
      width: 100%;
      max-width: 600px;
      height: auto;
      object-fit: cover;
      box-shadow: 0 4px 24px rgba(42,38,36,0.10);
    }
    .site-footer {
      background: #2A2624;
      color: #fff;
      padding: 2.2rem 0 1.3rem 0;
      width: 100vw;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1rem;
      box-sizing: border-box;
    }
    .site-footer__container {
      max-width: 1450px;
      width: 92vw;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2vw;
      flex-wrap: wrap;
    }
    .site-footer__brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.6em;
    }
    .site-footer__logo span {
      font-size: 1.05rem;
      font-weight: 400;
      margin-left: 0.4em;
      letter-spacing: 0.02em;
    }
    .site-footer__copy {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 0.99rem;
      font-weight: 400;
      color: #e1dedb;
      opacity: 0.7;
    }
    .site-footer__right {
      display: flex;
      align-items: center;
      gap: 1.5em;
    }
    .site-footer__social {
      display: flex;
      align-items: center;
      gap: 0.9em;
    }
    .site-footer__icon svg {
      fill: #fff;
      transition: fill 0.17s, background 0.18s;
      border-radius: 50%;
      background: none;
      padding: 2px;
    }
    .site-footer__icon:hover svg,
    .site-footer__icon:focus svg {
      fill: #BC7F62;
      background: #fff3ee;
    }
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .contact-form label {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1rem;
      color: #2A2624;
      font-weight: 600;
    }
.contact-form input,
.contact-form textarea {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1rem;
    padding: 0.75em 1em;
    border-radius: 5px;
    border: 1.5px solid #e0d4c3;
    background: #fafafa;
    color: #222;
    transition: border 0.2s;
      resize: vertical;
    }
    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: #BC7F62;
      background: #fffdfb;
    }
    .contact-form-button {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 1.08rem;
      font-weight: 700;
      padding: 0.85em 0;
      background: #2A2624;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      letter-spacing: 0.07em;
      margin-top: 0.5em;
      transition: background 0.18s;
    }
    .contact-form-button:hover,
    .contact-form-button:focus {
      background: #BC7F62;
      color: #2A2624;
    }
    .form-status {
      margin-top: 1rem;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.02rem;
      color: #2A2624;
      min-height: 1.6em;
      text-align: center;
    }
    .contact__form-wrapper {
      width: 100%;
      max-width: 430px;
      margin: 0;
      padding-top: 0.8rem;
    }

    .contact-form--inline {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .contact-form--inline .form-group label {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.08rem;
      color: #222;
      font-weight: 600;
    }

    .contact-form--inline input,
    .contact-form--inline textarea {
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1rem;
      padding: 0.82em 1em;
      border-radius: 5px;
      border: 1.5px solid #222;
      background: #fff;
      color: #222;
      transition: border 0.18s;
      resize: vertical;
    }

    /* Gallery Modal */
    .gallery-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }


.gallery-modal__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex; /* Use flex to center the image within the content area */
  align-items: center;
  justify-content: center;
}

/* Hide portfolio-alt on mobile devices or when in portrait orientation */
@media only screen and (max-width: 768px), only screen and (orientation: portrait) {
  .portfolio-alt { display: none; }
  /* Contact section: top-align image next to title and let container shrink */
  .contact__container {
    align-items: flex-start;
    min-height: auto;
    height: auto;
  }
  .contact__right {
    align-items: flex-start;
  }
  /* Services section: stack cards vertically on mobile */
  .services__grid {
    flex-direction: column;
  }
  /* Hero subtitle smaller on mobile */
  .hero__subtitle {
    font-size: 1.3rem;
  }
}
    .gallery-modal__image {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: 65vw; /* Adjust as needed */
      height: 80vh; /* Adjust as needed */
      object-fit: cover;
      margin: auto;
      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    }
    .gallery-modal__close,
    .gallery-modal__prev,
    .gallery-modal__next {
      position: absolute;
      background: rgba(42,38,36,0.07);
      border: 2px solid #fff;
      color: #fff;
      padding: 0.5em 0.8em;
      font-size: 1.5rem;
      cursor: pointer;
      transition: background 0.18s, color 0.18s;
    }
    .gallery-modal__close {
  top: 1rem;
  right: 1rem;
}
    .gallery-modal__prev {
      top: 50%;
      left: 1rem;
      transform: translateY(-50%);
    }
    .gallery-modal__next {
      top: 50%;
      right: 1rem;
      transform: translateY(-50%);
    }
    .gallery-modal__close:hover,
    .gallery-modal__prev:hover,
    .gallery-modal__next:hover {
      background: #fff;
      color: #2A2624;
    }

    .contact-form--inline input:focus,
    .contact-form--inline textarea:focus {
      outline: none;
      border-color: #BC7F62;
      background: #fffdfb;
    }

    .contact-form-button--outline {
      font-family: 'Jost', 'Segoe UI', Arial, sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #222;
      background: #fff;
      border: 2.5px solid #222;
      border-radius: 0;
      padding: 0.9em 0;
      margin-top: 1.1rem;
      cursor: pointer;
      text-transform: uppercase;
      width: 100%;
      transition: background 0.18s, color 0.18s, border 0.18s;
    }
    .contact-form-button--outline:hover,
    .contact-form-button--outline:focus {
      background: #2A2624;
      color: #fff;
      border-color: #2A2624;
    }
    .form-status {
      margin-top: 1.2rem;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: 1.06rem;
      color: #2A2624;
      min-height: 1.6em;
      text-align: center;
    }