:root {
     --ink: #24211f;
     --gold: #d5a12a;
     --gold-dark: #a97713;
     --cream: #fbf7ef;
     --muted: #746e68;
     --line: #e9e1d5;
     --white: #fff;
     --serif: 'Playfair Display', serif;
     --sans: 'DM Sans', sans-serif;
     --script: 'Great Vibes', cursive
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     color: var(--ink);
     font-family: var(--sans);
     line-height: 1.7;
     background: #fff
 }

 img {
     max-width: 100%;
     display: block
 }

 a {
     color: inherit;
     text-decoration: none
 }

 .container {
     width: min(1160px, calc(100% - 40px));
     margin-inline: auto
 }

 .topbar {
     background: #1f1d1b;
     color: #f7f2e8;
     font-size: 13px
 }

 .topbar-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 39px
 }

 .topbar a {
     transition: color .2s
 }

 .topbar a:hover {
     color: var(--gold)
 }

 .topbar .fa-phone {
     color: var(--gold);
     margin-right: 8px
 }

 .socials {
     display: flex;
     gap: 17px;
     align-items: center
 }

 .socials a {
     display: inline-flex;
     align-items: center;
     justify-content: center
 }

 .site-header {
     background: #fff;
     position: sticky;
     top: 0;
     z-index: 20;
     box-shadow: 0 5px 25px #241d120b
 }

 .nav-wrap {
     min-height: 88px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 25px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 11px;
     min-width: max-content
 }

 .brand-mark {
     width: 47px;
     height: 47px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: var(--gold);
     font-size: 22px
 }

 .brand-copy {
     display: flex;
     flex-direction: column;
     line-height: 1.12
 }

 .brand-copy strong {
     font: 600 25px var(--serif);
     letter-spacing: -.7px
 }

 .brand-copy strong em {
     font-style: italic;
     color: var(--gold-dark)
 }

 .brand-copy small {
     font-size: 9px;
     letter-spacing: 2.2px;
     margin-top: 6px;
     color: #827a70
 }

 .main-nav {
     display: flex;
     align-items: center;
     gap: 27px
 }

 .main-nav a {
     font-size: 13px;
     font-weight: 700;
     position: relative;
     padding: 8px 0
 }

 .main-nav a:after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--gold);
     transition: width .25s
 }

 .main-nav a:hover:after,
 .main-nav a.active:after {
     width: 100%
 }

 .main-nav a.active {
     color: var(--gold-dark)
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     border: 0;
     padding: 14px 22px;
     font: 700 12px var(--sans);
     letter-spacing: .2px;
     cursor: pointer;
     transition: transform .2s, background .2s;
     min-height: 48px
 }

 .btn:hover {
     transform: translateY(-2px)
 }

 .btn-gold {
     background: var(--gold);
     color: #211c13
 }

 .btn-gold:hover {
     background: #e6b642
 }

 .btn-dark {
     background: var(--ink);
     color: #fff
 }

 .btn-dark:hover {
     background: var(--gold-dark)
 }

 .btn-outline {
     border: 1px solid #ffffff9c;
     color: #fff;
     background: transparent
 }

 .nav-cta {
     padding: 12px 15px;
     white-space: nowrap
 }

 .nav-toggle {
     display: none;
     background: none;
     border: 0;
     font-size: 23px;
     color: var(--ink)
 }

 .hero-slider {
     height: min(690px, 76vw);
     min-height: 550px;
     position: relative;
     background: #282320;
     overflow: hidden;
     color: #fff
 }

 .hero-slide {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transform: scale(1.04);
     transition: opacity 1s, transform 6s
 }

 .hero-slide.active {
     opacity: 1;
     transform: scale(1)
 }

 .hero-shade {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(22, 19, 17, .84) 0%, rgba(22, 19, 17, .62) 44%, rgba(22, 19, 17, .12) 100%)
 }

 .hero-content {
     position: relative;
     z-index: 2;
     padding-top: 130px
 }

 .eyebrow {
     display: inline-block;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 2.6px;
     color: var(--gold-dark);
     margin-bottom: 14px
 }

 .eyebrow.light {
     color: #f3c85d
 }

 .hero-content h1,
 .page-hero h1 {
     font: 600 clamp(42px, 5.3vw, 72px)/1.12 var(--serif);
     letter-spacing: -1.8px;
     margin: 0 0 20px
 }

 .hero-content h1 em,
 .page-hero h1 em,
 .section-heading h2 em,
 .section-copy h2 em,
 .cta-inner h2 em,
 .contact-info h2 em,
 .form-heading h2 em {
     font-weight: 500;
     color: var(--gold);
     font-style: italic
 }

 .hero-content p {
     max-width: 490px;
     color: #f1eae3;
     font-size: 15px;
     margin: 0 0 28px
 }

 .hero-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap
 }

 .slider-controls {
     position: absolute;
     z-index: 3;
     left: max(20px, calc((100% - 1160px)/2));
     bottom: 35px;
     display: flex;
     align-items: center;
     gap: 13px
 }

 .slider-controls button {
     background: transparent;
     color: white;
     border: 1px solid #ffffff6b;
     width: 36px;
     height: 36px;
     cursor: pointer
 }

 .slider-controls button:hover {
     background: var(--gold);
     color: var(--ink)
 }

 .slider-dots {
     display: flex;
     gap: 7px
 }

 .slider-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     padding: 0;
     border: 0;
     background: #ffffff8c;
     cursor: pointer
 }

 .slider-dot.active {
     background: var(--gold);
     width: 23px;
     border-radius: 10px
 }

 .hero-tag {
     position: absolute;
     z-index: 2;
     right: 0;
     bottom: 75px;
     background: var(--gold);
     color: #211c13;
     padding: 19px 30px;
     display: flex;
     gap: 15px;
     align-items: center
 }

 .hero-tag>i {
     font-size: 24px
 }

 .hero-tag span {
     font-size: 12px;
     line-height: 1.5
 }

 .hero-tag b {
     font-size: 10px;
     letter-spacing: 1.2px;
     text-transform: uppercase
 }

 .section {
     padding: 95px 0
 }

 .soft-section {
     background: var(--cream)
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 85px;
     align-items: center
 }

 .image-stack {
     position: relative;
     padding: 0 34px 35px 0
 }

 .main-image {
     height: 470px;
     width: 100%;
     object-fit: cover;
     position: relative;
     z-index: 1
 }

 .image-note {
     position: absolute;
     z-index: 2;
     bottom: 0;
     right: 0;
     background: var(--ink);
     color: #fff;
     padding: 17px 25px;
     min-width: 245px;
     text-align: center
 }

 .script {
     font: 32px var(--script);
     color: var(--gold);
     line-height: 1.1;
     display: block
 }

 .image-note small {
     font-size: 9px;
     letter-spacing: 1.7px;
     text-transform: uppercase;
     color: #e6ded1
 }

 .image-ring {
     position: absolute;
     top: -20px;
     left: -20px;
     width: 125px;
     height: 125px;
     border: 1px solid var(--gold);
     z-index: 0
 }

 .section-copy h2,
 .section-heading h2,
 .contact-info h2 {
     font: 600 clamp(31px, 3.3vw, 45px)/1.22 var(--serif);
     letter-spacing: -.7px;
     margin: 0 0 20px
 }

 .section-copy p,
 .section-heading p,
 .contact-info>p {
     color: var(--muted);
     font-size: 14px;
     margin: 0 0 16px
 }

 .text-link {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     font-size: 12px;
     font-weight: 700;
     color: var(--gold-dark);
     margin-top: 10px
 }

 .text-link i {
     transition: transform .2s
 }

 .text-link:hover i {
     transform: translateX(4px)
 }

 .section-heading {
     text-align: center;
     max-width: 650px;
     margin: 0 auto 43px
 }

 .section-heading h2 {
     margin-bottom: 12px
 }

 .section-heading p {
     margin: 0
 }

 .service-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 22px
 }

 .service-card {
     display: block;
     background: #fff;
     box-shadow: 0 8px 28px #3024160a;
     transition: transform .25s, box-shadow .25s;
     min-width: 0
 }

 .service-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 35px #30241615
 }

 .service-photo {
     height: 230px;
     position: relative;
     overflow: hidden
 }

 .service-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s
 }

 .service-card:hover .service-photo img {
     transform: scale(1.06)
 }

 .service-icon {
     position: absolute;
     bottom: -1px;
     right: 17px;
     background: var(--gold);
     width: 43px;
     height: 43px;
     display: grid;
     place-items: center;
     font-size: 17px;
     color: #241d11
 }

 .service-body {
     padding: 21px 20px 23px
 }

 .service-body h3 {
     font: 600 19px var(--serif);
     margin: 0 0 9px
 }

 .service-body p {
     font-size: 12px;
     color: var(--muted);
     margin: 0 0 12px
 }

 .service-detail-card .service-body {
     padding: 22px
 }

 .service-detail-card .text-link {
     margin-top: 5px
 }

 .center-action {
     text-align: center;
     margin-top: 35px
 }

 .why-section {
     background: #211f1d;
     color: #fff
 }

 .why-section .section-heading p {
     color: #c5bdb4
 }

 .why-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px
 }

 .why-card {
     border: 1px solid #ffffff20;
     padding: 29px 22px 27px;
     transition: border-color .2s, background .2s
 }

 .why-card:hover {
     border-color: var(--gold);
     background: #ffffff06
 }

 .why-card>span {
     width: 47px;
     height: 47px;
     border: 1px solid #d5a12a77;
     color: var(--gold);
     display: grid;
     place-items: center;
     font-size: 20px;
     margin-bottom: 22px
 }

 .why-card h3 {
     font: 600 19px var(--serif);
     margin: 0 0 10px
 }

 .why-card p {
     font-size: 12px;
     color: #c5bdb4;
     margin: 0
 }

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px
 }

 .gallery-item {
     height: 260px;
     position: relative;
     overflow: hidden;
     background: #eee;
     display: block
 }

 .gallery-item img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     transition: transform .45s
 }

 .gallery-item:hover img {
     transform: scale(1.07)
 }

 .gallery-item>span:not(.gallery-caption) {
     position: absolute;
     inset: 0;
     background: #211c1c80;
     color: white;
     display: grid;
     place-items: center;
     opacity: 0;
     transition: opacity .3s
 }

 .gallery-item:hover>span:not(.gallery-caption) {
     opacity: 1
 }

 .gallery-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, #161310d9);
     color: white;
     padding: 36px 14px 13px;
     font-size: 12px;
     font-weight: 700;
     display: flex;
     justify-content: space-between;
     align-items: end
 }

 .cta-section {
     background: #292522;
     color: #fff;
     padding: 60px 0
 }

 .cta-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px
 }

 .cta-inner h2 {
     font: 600 clamp(28px, 3vw, 40px)/1.2 var(--serif);
     margin: 0 0 8px
 }

 .cta-inner p {
     color: #cfc5ba;
     font-size: 13px;
     margin: 0
 }

 .cta-inner .eyebrow {
     margin-bottom: 9px
 }

 .page-hero {
     height: 340px;
     display: flex;
     align-items: center;
     position: relative;
     color: #fff;
     background-image: linear-gradient(90deg, rgba(28, 23, 20, .84), rgba(28, 23, 20, .34)), var(--hero-image);
     background-size: cover;
     background-position: center
 }

 .page-hero-content {
     position: relative;
     z-index: 1
 }

 .page-hero h1 {
     font-size: clamp(39px, 4.8vw, 58px);
     margin-bottom: 12px
 }

 .page-hero p {
     margin: 0;
     color: #eee4da;
     font-size: 14px
 }

 .about-page-grid {
     grid-template-columns: 1.05fr .95fr
 }

 .about-page-image {
     position: relative
 }

 .about-page-image>img {
     width: 100%;
     height: 510px;
     object-fit: cover
 }

 .floating-caption {
     position: absolute;
     bottom: 24px;
     left: -25px;
     background: #25211e;
     color: #fff;
     padding: 18px 28px;
     min-width: 235px
 }

 .floating-caption small {
     font-size: 10px;
     letter-spacing: 1.4px;
     text-transform: uppercase
 }

 .vision-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
     max-width: 900px;
     margin: auto
 }

 .vision-card {
     background: #fff;
     padding: 36px;
     border: 1px solid var(--line);
     text-align: center
 }

 .vision-icon {
     display: grid;
     place-items: center;
     width: 54px;
     height: 54px;
     border-radius: 50%;
     background: #f7edda;
     color: var(--gold-dark);
     font-size: 22px;
     margin: 0 auto 18px
 }

 .vision-card h3 {
     font: 600 25px var(--serif);
     margin: 0 0 12px
 }

 .vision-card p {
     font-size: 13px;
     color: var(--muted);
     margin: 0
 }

 .services-page-grid {
     row-gap: 28px
 }

 .services-page-grid .service-photo {
     height: 220px
 }

 .gallery-page-grid .gallery-item {
     height: 300px
 }

 .contact-layout {
     display: grid;
     grid-template-columns: .8fr 1.2fr;
     gap: 75px;
     align-items: start
 }

 .contact-info h2 {
     margin-bottom: 16px
 }

 .contact-detail {
     display: flex;
     gap: 16px;
     margin-top: 27px;
     align-items: flex-start
 }

 .contact-detail>span {
     width: 43px;
     height: 43px;
     flex: 0 0 43px;
     background: #f7edda;
     color: var(--gold-dark);
     display: grid;
     place-items: center
 }

 .contact-detail b {
     display: block;
     font: 600 16px var(--serif);
     margin: 0 0 4px
 }

 .contact-detail a,
 .contact-detail p {
     display: block;
     font-size: 12px;
     color: var(--muted);
     margin: 0
 }

 .contact-form-wrap {
     background: var(--cream);
     padding: 35px 38px
 }

 .form-heading {
     margin-bottom: 22px
 }

 .form-heading .script {
     font-size: 30px
 }

 .form-heading h2 {
     font: 600 30px var(--serif);
     margin: 5px 0 8px
 }

 .form-heading p {
     font-size: 12px;
     color: var(--muted);
     margin: 0
 }

 .contact-form label {
     display: block;
     font-size: 11px;
     font-weight: 700;
     margin-bottom: 15px
 }

 .contact-form input,
 .contact-form select,
 .contact-form textarea {
     display: block;
     width: 100%;
     margin-top: 7px;
     padding: 13px 14px;
     border: 1px solid #e5ddd0;
     background: #fff;
     font: 400 12px var(--sans);
     outline: none;
     border-radius: 0
 }

 .contact-form input:focus,
 .contact-form select:focus,
 .contact-form textarea:focus {
     border-color: var(--gold)
 }

 .contact-form textarea {
     resize: vertical
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px
 }

 .optional {
     font-weight: 400;
     color: var(--muted)
 }

 .form-notice {
     background: #eaf5e9;
     border: 1px solid #c4e2c2;
     color: #285c2b;
     padding: 13px;
     margin-bottom: 18px;
     font-size: 12px
 }

 .map-section {
     padding: 0 0 85px
 }

 .map-frame {
     height: 360px;
     border: 8px solid var(--cream)
 }

 .map-frame iframe {
     width: 100%;
     height: 100%;
     border: 0
 }

 .map-note {
     text-align: center;
     font-size: 11px;
     color: var(--muted);
     margin-top: 10px
 }

 .site-footer {
     background: #1f1d1b;
     color: #f4eee6;
     padding-top: 65px
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1.35fr .75fr .9fr 1.2fr;
     gap: 45px;
     padding-bottom: 48px
 }

 .footer-brand .brand-copy strong {
     color: #fff
 }

 .footer-brand .brand-copy small {
     color: #bcb2a6
 }

 .footer-about>p {
     font-size: 12px;
     color: #bdb4aa;
     max-width: 300px;
     margin: 22px 0
 }

 .footer-socials {
     justify-content: flex-start
 }

 .footer-socials a {
     width: 33px;
     height: 33px;
     border: 1px solid #ffffff30;
     color: var(--gold)
 }

 .footer-grid h3 {
     font: 600 19px var(--serif);
     margin: 6px 0 21px;
     color: #fff
 }

 .footer-links {
     padding: 0;
     margin: 0;
     list-style: none
 }

 .footer-links li {
     margin: 9px 0
 }

 .footer-links a,
 .footer-contact p {
     font-size: 12px;
     color: #c5bdb4
 }

 .footer-links a:hover {
     color: var(--gold)
 }

 .footer-contact p {
     display: flex;
     gap: 11px;
     align-items: flex-start;
     margin: 0 0 14px
 }

 .footer-contact p i {
     color: var(--gold);
     margin-top: 5px
 }

 .footer-bottom {
     border-top: 1px solid #ffffff18;
     padding: 16px 0;
     color: #a9a097;
     font-size: 10px
 }

 .footer-bottom .container {
     display: flex;
     justify-content: space-between;
     gap: 15px
 }

 .footer-bottom .fa-heart {
     color: var(--gold)
 }

 @media(max-width:1050px) {
     .main-nav {
         gap: 16px
     }

     .nav-wrap {
         gap: 16px
     }

     .nav-cta {
         font-size: 10px;
         padding: 11px
     }

     .about-grid {
         gap: 45px
     }

     .footer-grid {
         gap: 25px
     }

     .service-photo {
         height: 200px
     }

     .service-body h3 {
         font-size: 17px
     }
 }

 @media(max-width:850px) {
     .nav-wrap {
         min-height: 76px;
         flex-wrap: wrap
     }

     .nav-toggle {
         display: block;
         margin-left: auto
     }

     .nav-cta {
         display: none
     }

     .main-nav {
         display: none;
         order: 5;
         width: 100%;
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         padding: 0 0 15px
     }

     .main-nav.is-open {
         display: flex
     }

     .main-nav a {
         padding: 12px 4px;
         border-top: 1px solid var(--line)
     }

     .main-nav a:after {
         display: none
     }

     .hero-slider {
         min-height: 540px;
         height: 70vh
     }

     .hero-content {
         padding-top: 110px
     }

     .hero-tag {
         bottom: 70px;
         padding: 14px 18px
     }

     .about-grid,
     .about-page-grid {
         grid-template-columns: 1fr;
         gap: 45px
     }

     .image-stack {
         max-width: 570px
     }

     .about-page-image {
         max-width: 600px
     }

     .service-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }

     .why-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .gallery-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .contact-layout {
         grid-template-columns: 1fr;
         gap: 45px
     }

     .contact-info {
         max-width: 600px
     }

     .footer-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .section {
         padding: 75px 0
     }
 }

 @media(max-width:560px) {
     .container {
         width: min(100% - 30px, 1160px)
     }

     .topbar-inner {
         min-height: 36px;
         font-size: 10px
     }

     .topbar .socials {
         gap: 11px
     }

     .brand-copy strong {
         font-size: 22px
     }

     .brand-mark {
         width: 40px;
         height: 40px;
         font-size: 18px
     }

     .hero-slider {
         height: 640px;
         min-height: 0
     }

     .hero-content {
         padding-top: 95px
     }

     .hero-content h1 {
         font-size: 43px
     }

     .hero-content p {
         font-size: 13px;
         max-width: 330px
     }

     .hero-shade {
         background: linear-gradient(90deg, rgba(22, 19, 17, .85), rgba(22, 19, 17, .4))
     }

     .hero-tag {
         right: 0;
         bottom: 75px;
         padding: 12px 15px
     }

     .hero-tag span {
         font-size: 10px
     }

     .slider-controls {
         bottom: 20px
     }

     .section {
         padding: 62px 0
     }

     .image-stack {
         padding: 0 20px 25px 0
     }

     .main-image {
         height: 370px
     }

     .image-note {
         padding: 13px 15px;
         min-width: 210px
     }

     .section-heading {
         margin-bottom: 30px
     }

     .section-heading h2,
     .section-copy h2,
     .contact-info h2 {
         font-size: 34px
     }

     .service-grid {
         gap: 13px
     }

     .service-photo {
         height: 165px
     }

     .service-body {
         padding: 16px 13px
     }

     .service-body h3 {
         font-size: 16px
     }

     .service-body p {
         font-size: 11px
     }

     .service-icon {
         width: 35px;
         height: 35px;
         right: 10px;
         font-size: 14px
     }

     .why-grid {
         gap: 12px
     }

     .why-card {
         padding: 21px 15px
     }

     .why-card h3 {
         font-size: 17px
     }

     .why-card p {
         font-size: 11px
     }

     .gallery-grid {
         gap: 9px
     }

     .gallery-item {
         height: 190px
     }

     .cta-inner {
         align-items: flex-start;
         flex-direction: column
     }

     .cta-inner h2 {
         font-size: 31px
     }

     .page-hero {
         height: 285px
     }

     .page-hero h1 {
         font-size: 40px
     }

     .vision-grid {
         grid-template-columns: 1fr
     }

     .vision-card {
         padding: 28px 22px
     }

     .about-page-image>img {
         height: 390px
     }

     .floating-caption {
         left: -5px;
         bottom: 15px
     }

     .contact-form-wrap {
         padding: 25px 18px
     }

     .form-row {
         grid-template-columns: 1fr;
         gap: 0
     }

     .map-frame {
         height: 280px;
         border-width: 4px
     }

     .footer-grid {
         grid-template-columns: 1fr;
         gap: 30px
     }

     .footer-grid h3 {
         margin-bottom: 12px
     }

     .footer-bottom .container {
         flex-direction: column;
         gap: 5px
     }

     .gallery-page-grid .gallery-item {
         height: 220px
     }
 }



.gallery-video {
    position: relative;
    overflow: hidden;
    background: #211f1d;
}

.gallery-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-video .gallery-caption {
    pointer-events: none;
}