:root {
  --dark: #1d1d1d;
  --black: #111;
  --text: #30343b;
  --muted: #6b7280;
  --gold: #d8ab62;
  --gold2: #c39149;
  --line: #ededed;
  --paper: #fff;
  --soft: #f8f5ef;
  --container: 1180px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.7;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}
.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 24px 0;
  color: #fff;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.2px;
}
.brand img {
  height: 44px;
  width: 44px;
  border-radius: 12px;
  object-fit: cover;
}
.brand span {
  display: none;
}
.nav {
  display: flex;
  gap: 38px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}
.nav a {
  position: relative;
  opacity: 0.94;
}
.nav a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: 0.25s;
}
.nav a:hover:after {
  width: 100%;
}
.menu-toggle {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 2px;
}
.hero {
  position: relative;
  min-height: 760px;
  display: grid;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/images/logo20.jpg") center/cover no-repeat;
  transform: scale(1.02);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.72),
    rgba(0, 0, 0, 0.46) 44%,
    rgba(0, 0, 0, 0.12)
  );
}
.hero-content {
  position: relative;
  padding-top: 72px;
  max-width: var(--container);
}
.eyebrow,
.kicker {
  text-transform: none;
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
}
.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  line-height: 1.06;
  margin: 0 0 24px;
  max-width: 760px;
  font-weight: 700;
}
.lead {
  font-size: 20px;
  max-width: 650px;
  margin: 0 0 36px;
  color: rgba(255, 255, 255, 0.88);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  font-weight: 700;
  border-radius: 0;
  transition: 0.25s;
}
.btn-primary {
  background: var(--gold);
  color: #fff;
}
.btn-primary:hover {
  background: var(--gold2);
  transform: translateY(-2px);
}
.btn-dark {
  background: #1b1b1b;
  color: #fff;
}
.btn-dark:hover {
  background: var(--gold);
}
.section {
  padding: 96px 0;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.copy-card .kicker,
.section-head .kicker,
.contact .kicker {
  font-size: 16px;
}
.copy-card h2,
.section-head h2,
.contact h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1.18;
  margin: 0 0 18px;
  color: #202020;
}
.copy-card p,
.section-head p,
.contact-intro {
  color: #666;
  margin: 0 0 22px;
}
.link-more {
  font-weight: 800;
  color: #222;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 5px;
}
.welcome-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.photo {
  height: 330px;
  width: 100%;
  object-fit: cover;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.13);
}
.photo.tall {
  height: 440px;
  margin-top: 44px;
}
.services {
  background: var(--soft);
}
.section-head {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 54px;
}
.section-head.compact {
  margin-bottom: 36px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.service-card {
  background: #fff;
  padding: 38px 28px;
  min-height: 310px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 16px 34px rgba(32, 32, 32, 0.06);
  transition: 0.25s;
  text-align: center;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 46px rgba(32, 32, 32, 0.12);
}
.service-card .icon {
  height: 122px;
  width: 122px;
  border: 0;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-weight: 800;
  margin: 0 auto 24px;
}
.service-card .icon img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  display: block;
}
.service-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: #202020;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 14px;
}
.service-card p {
  margin: 0;
  color: #6c6c6c;
  font-size: 15px;
}
.center {
  text-align: center;
  margin-top: 42px;
}
.quote-band {
  background: #1c1c1c;
  color: #fff;
  padding: 78px 0;
  position: relative;
  overflow: hidden;
}
.quote-band:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://syspainting.com/wp-content/uploads/sites/2/2021/11/francesca-tosolini-XcVm8mn7NUM-unsplash-scaled.jpg")
    center/cover no-repeat;
  opacity: 0.16;
}
.quotation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.quotation h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  margin: 0;
}
.quote-actions {
  display: grid;
  grid-template-columns: repeat(3, 160px);
  gap: 18px;
}
.quote-actions a {
  background: #fff;
  color: #1b1b1b;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.quote-actions span {
  font-size: 26px;
  color: var(--gold);
}
.gallery {
  padding-top: 100px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 16px;
}
.g {
  overflow: hidden;
  background: #ddd;
  display: block;
}
.g.large {
  grid-column: span 2;
  grid-row: span 2;
}
.g.wide {
  grid-column: span 2;
}
.g img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.g:hover img {
  transform: scale(1.06);
}
.contact {
  background: #fafafa;
  border-top: 1px solid var(--line);
}
.contact-wrap {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
}
.contact-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.contact-list div {
  background: #fff;
  padding: 28px 30px;
  border-left: 4px solid var(--gold);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.05);
}
.contact-list h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #222;
}
.contact-list p {
  margin: 0;
  color: #666;
}
.footer {
  background: #161616;
  color: #b7b7b7;
  padding: 28px 0;
  font-size: 14px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.footer p {
  margin: 0;
}
@media (max-width: 980px) {
  .hero h1 {
    font-size: 48px;
  }
  .split,
  .contact-wrap {
    grid-template-columns: 1fr;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quotation {
    display: block;
    text-align: center;
  }
  .quote-actions {
    margin-top: 28px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .nav {
    gap: 22px;
  }
}
@media (max-width: 720px) {
  .container {
    width: min(100% - 32px, var(--container));
  }
  .site-header {
    position: fixed;
    background: rgba(20, 20, 20, 0.88);
    backdrop-filter: blur(10px);
    padding: 14px 0;
  }
  .brand img {
    height: 36px;
    width: 36px;
    border-radius: 10px;
    object-fit: cover;
  }
  .brand span {
    display: block;
    color: #fff;
    font-size: 18px;
  }
  .menu-toggle {
    display: block;
  }
  .nav {
    display: none;
    position: absolute;
    top: 66px;
    left: 16px;
    right: 16px;
    background: #111;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    align-items: flex-start;
  }
  .nav.open {
    display: flex;
  }
  .hero {
    min-height: 680px;
  }
  .hero h1 {
    font-size: 42px;
  }
  .lead {
    font-size: 17px;
  }
  .section {
    padding: 70px 0;
  }
  .copy-card h2,
  .section-head h2,
  .contact h2 {
    font-size: 34px;
  }
  .welcome-photos {
    grid-template-columns: 1fr;
  }
  .photo,
  .photo.tall {
    height: 300px;
    margin: 0;
  }
  .service-grid,
  .contact-list {
    grid-template-columns: 1fr;
  }
  .quote-actions {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }
  .g.large,
  .g.wide {
    grid-column: auto;
    grid-row: auto;
  }
  .footer-inner {
    display: block;
    text-align: center;
  }
  .footer-inner p + p {
    margin-top: 8px;
  }
}

/* Wave welcome section added from reference */
.welcome-wave {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 170px 0 130px;
  background: #fff;
  margin-top: -1px;
}
.welcome-wave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 160' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%23d8d8d8' fill-opacity='.72' d='M0 44C97 7 178-14 250 22c87 44 111 96 211 62 93-32 113-87 213-43 122 53 165 98 302 43 132-53 172-98 280-48 90 42 95 76 155 50 76-33 113-79 201-66 67 10 121 49 198 15 79-35 150-35 230 4v121H0Z'/%3E%3Cpath fill='%23f3f4f5' fill-opacity='.92' d='M0 89C121 58 210 66 305 69c135 5 167 44 302 52 160 10 218-44 363-61 143-17 199 28 314 58 101 26 161-10 257-48 125-49 184-18 259 57v33H0Z'/%3E%3Cpath fill='%23ffffff' d='M0 116C111 72 236 70 356 88c125 19 188 53 337 33 135-18 196-63 335-62 141 1 200 67 352 59 116-7 151-57 247-51 98 6 150 43 213 93H0Z'/%3E%3C/svg%3E")
    center top/100% 150px no-repeat;
  pointer-events: none;
  z-index: 1;
}
.welcome-wave::after {
  content: "";
  position: absolute;
  right: -70px;
  top: 205px;
  width: 560px;
  height: 520px;
  background: #eef7fa;
  opacity: 0.82;
  clip-path: path(
    "M285 23C360 20 389 99 461 110C543 122 580 156 559 232C542 295 483 300 493 363C504 435 450 486 379 472C318 460 288 400 232 399C165 398 107 446 61 405C12 362 72 295 88 243C105 185 43 135 82 84C123 30 205 26 285 23Z"
  );
  transform: rotate(8deg);
  pointer-events: none;
}
.welcome-center {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.welcome-center .copy-card {
  max-width: 900px;
  text-align: center;
}
.welcome-center .copy-card h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  color: #56666d;
  margin-bottom: 24px;
  font-weight: 800;
}
.welcome-center .copy-card p {
  color: #697b83;
  font-size: 21px;
  line-height: 1.72;
  margin: 0 auto 72px;
  max-width: 980px;
}
.btn.rounded {
  border-radius: 28px;
  min-width: 150px;
  background: #202020;
  box-shadow: 0 2px 0 #1388cf;
  font-weight: 500;
}
.btn.rounded:hover {
  background: #d8ab62;
  box-shadow: 0 2px 0 #c39149;
}
@media (max-width: 720px) {
  .welcome-wave {
    min-height: 560px;
    padding: 130px 0 90px;
  }
  .welcome-wave::before {
    height: 100px;
    background-size: 100% 100px;
  }
  .welcome-wave::after {
    right: -220px;
    top: 220px;
    transform: scale(0.72) rotate(8deg);
  }
  .welcome-center .copy-card h2 {
    font-size: 24px;
  }
  .welcome-center .copy-card p {
    font-size: 16px;
    margin-bottom: 42px;
  }
}

/* Ladder hero + contact form update */
.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.45) 48%,
    rgba(0, 0, 0, 0.12)
  );
}
.contact-form-section {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%);
}
.contact-form-wrap {
  grid-template-columns: 0.88fr 1.12fr;
  align-items: start;
}
.contact-copy {
  position: sticky;
  top: 90px;
}
.contact-list-stacked {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}
.contact-list-stacked div {
  border-left: 4px solid var(--gold);
}
.contact-form {
  background: #fff;
  border: 1px solid rgba(216, 171, 98, 0.25);
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.1);
  padding: 42px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form label {
  display: block;
  margin: 0 0 18px;
  color: #222;
  font-weight: 700;
  font-size: 15px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #e6e1d8;
  background: #fbfaf8;
  min-height: 54px;
  padding: 13px 15px;
  font: inherit;
  color: #333;
  outline: none;
  transition: 0.2s;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 171, 98, 0.16);
  background: #fff;
}
.form-submit {
  border: 0;
  width: 100%;
  cursor: pointer;
  margin-top: 6px;
  font-size: 16px;
}
@media (max-width: 980px) {
  .contact-copy {
    position: static;
  }
  .contact-form-wrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-form {
    padding: 26px 20px;
  }
}

/* Final polish: remove the small wave SVG, keep the soft blue organic shape, and add consistent rounded corners */
.welcome-wave {
  padding: 110px 0 120px;
  min-height: 560px;
  border-radius: 0 0 48px 48px;
}
.welcome-wave::before {
  display: none !important;
}

.btn,
.menu-toggle {
  border-radius: 999px;
}

.service-card,
.contact-list div,
.contact-form,
.quote-actions a {
  border-radius: 22px;
}

.photo,
.g,
.g img {
  border-radius: 20px;
}

.g {
  box-shadow: 0 14px 34px rgba(30, 30, 30, 0.1);
}

.gallery-grid {
  grid-auto-rows: 220px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: 14px;
}

.hero .btn,
.form-submit {
  border-radius: 999px;
}

@media (max-width: 720px) {
  .welcome-wave {
    padding: 86px 0 90px;
    min-height: 500px;
    border-radius: 0 0 28px 28px;
  }
  .gallery-grid {
    grid-auto-rows: 250px;
  }
}

/* Animation update */
html {
  scroll-behavior: smooth;
}
.site-header {
  transition:
    background 0.28s ease,
    box-shadow 0.28s ease,
    padding 0.28s ease;
}
.site-header.is-scrolled {
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
  padding: 14px 0;
}
.hero-bg {
  animation: heroZoom 16s ease-out both;
  transform-origin: center right;
}
.hero-content .eyebrow,
.hero-content h1,
.hero-content .lead,
.hero-content .btn {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-content .eyebrow {
  animation-delay: 0.18s;
}
.hero-content h1 {
  animation-delay: 0.36s;
}
.hero-content .lead {
  animation-delay: 0.54s;
}
.hero-content .btn {
  animation-delay: 0.72s;
}
.welcome-wave::after {
  animation: softFloat 9s ease-in-out infinite alternate;
}
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.service-card,
.g,
.contact-list div,
.contact-form,
.quote-actions a {
  will-change: transform, opacity;
}
.btn {
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}
.btn:hover {
  transform: translateY(-3px);
}
.service-card:hover {
  transform: translateY(-10px);
}
.g:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(30, 30, 30, 0.16);
}
.g {
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}
.nav a {
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  transform: translateY(-1px);
}
@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroZoom {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}
@keyframes softFloat {
  0% {
    transform: translate3d(0, 0, 0) rotate(8deg);
  }
  100% {
    transform: translate3d(-24px, 18px, 0) rotate(12deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Mobile logo: show brush icon only */
@media (max-width: 720px) {
  .brand {
    width: 44px;
    min-width: 44px;
    height: 44px;
    overflow: hidden;
    gap: 0;
  }

  .brand img {
    height: 44px;
    width: 44px;
    border-radius: 12px;
    object-fit: cover;
  }

  .brand span {
    display: none !important;
  }
}

/* Final fix: desktop logo text + fixed navigation */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}
.brand span {
  display: inline-block !important;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .brand span {
    display: none !important;
  }
}

/* Transparent gallery image popup */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.image-lightbox img {
  max-width: min(1120px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
  transform: scale(0.96);
  transition: transform 0.25s ease;
  background: #fff;
}
.image-lightbox.is-open img {
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 26px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.lightbox-close:hover {
  transform: scale(1.06);
  background: #fff;
}
body.lightbox-open {
  overflow: hidden;
}
@media (max-width: 720px) {
  .image-lightbox {
    padding: 18px;
  }
  .image-lightbox img {
    max-width: 94vw;
    max-height: 78vh;
    border-radius: 18px;
  }
  .lightbox-close {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    font-size: 28px;
  }
}