body {
    margin: 0;
    background-color: #fff;
  }

  :root{
    --heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --body: "Libre Franklin", system-ui, sans-serif;
  }
  h1{ font-family: var(--heading); font-weight:700; letter-spacing:0.6px; text-transform: none; }
  body{ font-family: var(--body); font-weight:400; }

  header{
    margin:0;
    padding:60px 20px 20px 20px;
    background-color:#1c1c1c;
    position:relative;
    background-image:url('/images/header-pattern.png');
    background-size:auto;
    background-repeat:repeat;
    color:white;
    width:100%;
    box-sizing:border-box;
    transition:all var(--transition-speed) ease;
    z-index:1000;
  }

  .header-logo{
    position:absolute;
    top:10px;
    left:20px;
    max-width:180px;
    width:20%;
    height:auto;
    transform:translateY(0);
    transition:transform var(--transition-speed) ease,opacity var(--transition-speed) ease,visibility var(--transition-speed) ease;
  }

  header h1{
    font-size:36px;
    font-family:"Playfair Display Flex",serif;
    letter-spacing:2px;
    margin:0;
    font-weight:bold;
    text-align:center;
    padding-bottom:67px;
    transition:all var(--transition-speed) ease;
  }

  .desktop-nav{
    margin-top:20px;
    text-align:center;
    transition:all var(--transition-speed) ease;
  }

  .desktop-nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:inline-flex;
    gap:30px;
    align-items:center;
  }

  .desktop-nav ul li{
    font-size:18px;
  }

  .desktop-nav ul li a{
    text-decoration:none;
    color:#ddd;
    transition:color 0.3s ease;
  }

  .desktop-nav ul li a.active{
    color:#ff6600;
  }

  .desktop-nav ul li a:hover{
    color:#fff;
  }

  .nav-toggle{
    background:transparent;
    border:0;
    color:inherit;
    position:absolute;
    right:20px;
    top:18px;
  }

  .nav-toggle__box{display:inline-block}

  .nav-toggle__bar{display:block;width:22px;height:2px;margin:4px 0;background:#ddd}

  @media (max-width:768px){
    .header-logo{max-width:120px;left:10px;top:50%;transform:translateY(-50%)}
    header h1{font-size:28px;padding-bottom:40px}
  }

  @media (max-width:480px){
    .header-logo{max-width:40px;height:auto;position:absolute;top:50%;left:10px;transform:translateY(-50%)}
    .desktop-nav{display:none}
    header{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      padding:10px 20px;
      box-sizing:border-box;
    }
    header h1{font-size:20px;line-height:24px;padding:0;margin:0;text-align:center}
  }

  @media (min-width:769px){
    header.scrolled{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:var(--scrolled-height);
      padding:8px 20px;
      box-shadow:0 4px 12px rgba(0,0,0,0.35);
      transition:all var(--transition-speed) ease;
    }

    header.scrolled .header-logo{
      opacity:0;
      transform:translateY(-20px) scale(.95);
      visibility:hidden;
      pointer-events:none;
    }

    header.scrolled h1{
      opacity:0;
      height:0;
      padding:0;
      margin:0;
      overflow:hidden;
      transform:translateY(-10px);
    }

    header.scrolled .desktop-nav{
      margin-top:0;
      display:flex;
      align-items:center;
      justify-content:center;
      height:100%;
    }

    header.scrolled .nav-toggle{
      display:none;
    }
  }

  @media (max-width:480px){
    header.scrolled .desktop-nav{display:flex !important}
  }

  #header-spacer{
    height:0;
    transition:height var(--transition-speed) ease;
  }

  .hero {
    position: relative;
    min-height: 60vh;
    background-image: url('/images/home-page-header-picture.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
  }

  .hero-content {
    position: relative;
    z-index: 1;
    color: white;
    max-width: 1000px;
    padding: 0 15px;
  }

  .hero-content h2 {
    font-size: clamp(28px, 5vw, 56px); 
    font-weight: 700;
    font-style: normal;
    margin: 0;
    line-height: 1.3;
    word-wrap: break-word;
  }

  .info-section {
    background-color: #f8f4f4;
    padding: 60px 20px;
  }

  .info-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .info-image img {
    width: 100%;
    max-width: 550px;
    border-radius: 12px;
    object-fit: cover;
  }

  .info-text {
    max-width: 600px;
  }

  .info-text h2 {
    font-size: 34px;
    font-weight: 400;        
    color: rgba(47, 62, 73, 0.95); 
    margin: 0;
    line-height: 1.15;
    text-align: left;
    letter-spacing: 0.2px;
  }

  .info-text p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .info-text a {
    color: #ff6600;
    text-decoration: none;
    font-weight: bold;
  }

  .info-text a:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .info-container {
      flex-direction: column;
      text-align: center;
    }

    .info-image img {
      max-width: 100%;
    }
  }

  .services-section {
    background-color: #ffffff;
    padding: 40px 20px 80px;
  }

  .services-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 48px;
    align-items: flex-start; 
    flex-wrap: wrap;
  }

  .services-title {
    flex: 1 1 360px;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start;
  }

  .services-title h2 {
    font-size: 34px;
    font-weight: 400;        
    color: rgba(47, 62, 73, 0.95); 
    margin: 0;
    line-height: 1.15;
    text-align: left;
    letter-spacing: 0.2px;
  }

  .services-content {
    flex: 2 1 560px;
    color: rgba(47, 62, 73, 0.9); 
    font-size: 16px;
    line-height: 1.7;
    margin-top: -6px;
  }

  .services-content p {
    margin: 0 0 18px 0;
    max-width: 700px;
  }

  .services-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
  }

  .services-content li {
    margin: 12px 0;
    font-size: 16px;
    position: relative;
    padding-left: 28px;
  }

  .services-content li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    line-height: 1;
    color: rgba(47, 62, 73, 0.9);
    transform: translateY(1px);
  }

  @media (max-width: 768px) {
    .services-container {
      flex-direction: column;
      text-align: center;
      gap: 22px;
    }

    .services-title,
    .services-content {
      flex: 1 1 100%;
      align-items: center;
    }

    .services-title h2 {
      text-align: center;
      font-size: 28px;
    }

    .services-content {
      margin-top: 0;
      padding: 0 12px;
    }

    .services-content li {
      padding-left: 18px;
    }
  }

  @media (max-width: 480px) {
    .services-title h2 {
      font-size: 22px;
      line-height: 1.15;
    }

    .services-content p,
    .services-content li {
      font-size: 15px;
    }
  }

  .gallery-section {
    background-color: #f87c14;
    color: #fff;
    padding: 64px 20px 100px;
    box-sizing: border-box;
  }

  .gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 48px;
    flex-wrap: wrap;
  }

  .gallery-text {
    flex: 1 1 420px;
    min-width: 280px;
    max-width: 400px;   
    color: #fff;
    padding-right: 12px;
  }

  .gallery-text h2 {
    font-size: 40px;
    line-height: 1.05;
    font-weight: 400;
    margin: 0 0 22px 0;
    color: rgba(255,255,255,0.98);
    letter-spacing: 0.2px;
  }

  .gallery-text p {
    margin: 0 0 28px 0;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,0.95);
  }

  .gallery-text .work-link {
    display: inline-block;
    text-decoration: underline;
    color: rgba(255,255,255,0.98);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.2px;
  }

  .gallery-images {
    flex: 1 1 520px;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }

  .gallery-card {
    width: 420px;      
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .gallery-card img {
    display: block;
    width: 100%;
    height: 400px;        
    object-fit: cover;
  }

  .gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    transition: transform 0.18s ease;
  }

  .gallery-arrow svg {
    width: 46px;
    height: 46px;
    stroke: rgba(47,62,73,0.95);
    stroke-width: 2.5;
    fill: none;
  }

  .contact-cta {
    max-width: 1200px;
    margin: 64px auto 0;
    text-align: center;
    padding: 0 20px;
  }

  .contact-cta h3 {
    font-size: 48px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.05;
  }

  .contact-cta .divider {
    width: 64px;
    height: 4px;
    background: rgba(255,255,255,0.95);
    margin: 18px auto;
    border-radius: 2px;
  }

  .cta-button {
    display: inline-block;
    margin-top: 28px;
    background: #fdeee0;
    color: #1c1c1c;
    text-decoration: none;
    padding: 16px 44px;
    font-size: 18px;
    border-radius: 48px;
    box-shadow: 0 10px 0 rgba(0,0,0,0.08);
    transition: transform .12s ease, box-shadow .12s ease;
  }

  .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 0 rgba(0,0,0,0.09);
  }

  @media (max-width: 1100px) {
    .gallery-inner { gap: 28px; }
    .gallery-card img { height: 440px; }
    .gallery-text h2 { font-size: 36px; }
    .contact-cta h3 { font-size: 42px; }
  }

  @media (max-width: 880px) {
    .gallery-inner {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .gallery-text {
      order: 1;
      padding: 0 10px;
      max-width: 640px;  
    }

    .gallery-images {
      order: 2;
      flex-direction: column;
      gap: 18px;
      margin-top: 8px;
    }

    .gallery-arrow {
      width: auto;
      height: auto;
      padding: 8px 0;
      transform: rotate(90deg); 
    }

    .gallery-card img { height: 380px; }
  }

  @media (max-width: 480px) {
    .gallery-card {
      width: 100%;
      border-radius: 10px;
    }
    .gallery-card img { height: 300px; }
    .gallery-text h2 { font-size: 28px; }
    .gallery-text p { font-size: 16px; line-height: 1.6; }
    .cta-button { padding: 12px 28px; font-size: 15px; }
    .contact-cta h3 { font-size: 28px; }
    .gallery-section { padding: 40px 12px 80px; }
  }

  .animation {
    display: none; 
    justify-content: center; 
    position: relative;
  }

  .animation-text {
    width: 700px;
    height: 502px;
  }

  @media (min-width: 48rem) { 
  .hero {
    display: none; 
  }
  .animation {
    display: flex; 
  }
  }

  @media (max-width: 48rem) {
    .hero {
      padding: clamp(1rem, 4vw, 2.25rem);
      min-height: 55vh;
    }
    .animation-text {
      transform: translateY(0);
      box-shadow: 0 0.5rem 1.5rem rgba(0 0 0 / 6%);
    }
  }

  @media (max-width: 28rem) {
    .animation-text {
      width: 92vw;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .animation-text { transition: none; animation: none !important; transform: none; }
  }