@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
   --cream: #f8f4ec;
   --cream-deep: #efe4d2;
   --white: #fffdf8;
   --ink: #1c1814;
   --muted: #5e5750;
   --caramel: #b87439;
   --caramel-deep: #9b5e2b;
   --line: rgba(25, 20, 15, 0.08);
   --shadow: 0 20px 45px rgba(25, 20, 15, 0.12);
   --radius-xl: 42px;
   --radius-lg: 28px;
   --radius-md: 22px;
   --radius-sm: 16px;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   font-family: 'Manrope', sans-serif;
   color: var(--ink);
   background:
      linear-gradient(180deg, rgba(248, 244, 236, 0) 0%, rgba(248, 244, 236, 1) 36%),
      var(--cream);
}

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

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

button,
input,
textarea {
   font: inherit;
}

.hero-shell {
   padding: 18px 0 56px;
   background:
      linear-gradient(rgba(24, 17, 12, 0.48), rgba(24, 17, 12, 0.52)),
      radial-gradient(circle at top center, rgba(255, 255, 255, 0.08), transparent 30%),
      linear-gradient(135deg, #4f3622, #27180f 58%, #6b4a31);
}

.site-nav,
.section {
   max-width: 1220px;
   margin: 0 auto;
}

.site-nav {
   position: sticky;
   top: 16px;
   z-index: 20;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 16px;
   min-height: 92px;
   width: calc(100vw - 64px);
   max-width: none;
   padding: 0 36px;
   border-radius: 999px;
   background: var(--caramel);
   box-shadow: 0 18px 36px rgba(20, 15, 11, 0.28);
}

.mobile-nav-trigger,
.mobile-nav-action,
.mobile-menu-panel {
   display: none;
}

.nav-group {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   min-width: 0;
   width: 100%;
}

.nav-group-right {
   justify-content: center;
}

.nav-group a {
   color: #fff7ef;
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.15rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.mobile-nav-trigger {
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 247, 239, 0.14);
   cursor: pointer;
}

.mobile-nav-trigger span {
   display: block;
   width: 20px;
   height: 2px;
   border-radius: 999px;
   background: #fff7ef;
   transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-nav-trigger span + span {
   margin-top: 4px;
}

.mobile-nav-action {
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   padding: 0;
   border-radius: 999px;
   background: rgba(255, 247, 239, 0.14);
   color: #fff7ef;
   font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.mobile-menu-panel {
   grid-column: 1 / -1;
   padding-top: 10px;
}

.mobile-menu-panel a {
   color: #fff7ef;
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.brand {
   position: relative;
   left: 50%;
   transform: translate(-50%, 4px);
   justify-self: start;
}

.brand img {
   width: 118px;
   height: 118px;
   border-radius: 50%;
   background: #f4dfbb;
   border: 8px solid rgba(248, 235, 206, 0.8);
   box-shadow: 0 16px 24px rgba(41, 24, 12, 0.22);
}

.hero {
   position: relative;
   display: grid;
   place-items: center;
   width: 100%;
   max-width: none;
   min-height: 760px;
   margin-top: -46px;
   padding: 180px 24px 120px;
   border-radius: 0 0 var(--radius-xl) var(--radius-xl);
   overflow: hidden;
   background:
      linear-gradient(rgba(20, 13, 8, 0.5), rgba(20, 13, 8, 0.54)),
      linear-gradient(rgba(20, 13, 8, 0.32), rgba(20, 13, 8, 0.42)),
      url("../assets/indoor.png"),
      radial-gradient(circle at 30% 20%, rgba(255, 214, 160, 0.12), transparent 20%),
      radial-gradient(circle at 70% 65%, rgba(255, 214, 160, 0.08), transparent 24%),
      linear-gradient(135deg, #4b301f, #2a1d15 45%, #6a452b 100%);
   background-size: cover;
   background-position: center;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 120px 120px;
   opacity: 0.35;
}

.hero-content {
   position: relative;
   z-index: 1;
   max-width: 900px;
   text-align: center;
   color: #fff7ef;
}

.hero-kicker,
.section-tag,
.card-label {
   font-family: 'Barlow Condensed', sans-serif;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.hero-kicker {
   margin: 0 0 18px;
   font-size: 1.6rem;
   color: rgba(255, 245, 232, 0.92);
}

.hero h1,
.section-heading h2,
.story-copy h2,
.info-card h3,
.location-card h3,
.contact-card h3 {
   margin: 0;
   font-family: 'Barlow Condensed', sans-serif;
   font-weight: 700;
   letter-spacing: 0.01em;
   text-transform: uppercase;
}

.hero h1 {
   font-size: clamp(3.7rem, 9vw, 6.4rem);
   line-height: 0.95;
}

.hero-text {
   max-width: 760px;
   margin: 26px auto 0;
   color: rgba(255, 245, 232, 0.86);
   font-size: 1.15rem;
   line-height: 1.9;
}

.hero-actions {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 34px;
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 54px;
   padding: 0 24px;
   border: 1px solid transparent;
   border-radius: 14px;
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.18rem;
   font-weight: 600;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.button:hover,
.button:focus-visible {
   transform: translateY(-2px);
}

.button-primary,
.button-accent {
   background: var(--caramel);
   color: #fff6eb;
   box-shadow: 0 10px 24px rgba(184, 116, 57, 0.24);
}

.button-secondary {
   background: rgba(255, 248, 240, 0.1);
   border-color: rgba(255, 245, 232, 0.28);
   color: #fff7ef;
}

.button-secondary-dark {
   background: rgba(28, 24, 20, 0.06);
   border-color: rgba(28, 24, 20, 0.12);
   color: var(--ink);
}

.service-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 10px 12px;
   margin-top: 22px;
   color: rgba(255, 245, 232, 0.88);
}

.service-links span {
   display: inline-flex;
   align-items: center;
   font-weight: 600;
   line-height: 1;
}

.service-links a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 38px;
   padding: 0 14px;
   border-radius: 999px;
   background: rgba(255, 248, 240, 0.12);
   border: 1px solid rgba(255, 245, 232, 0.18);
   color: #fff7ef;
   font-family: 'Barlow Condensed', sans-serif;
   letter-spacing: 0.05em;
   text-transform: uppercase;
}

.section {
   padding: 64px 24px;
}

.story-section {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
   gap: 46px;
   align-items: center;
   background: var(--white);
   border-radius: var(--radius-xl);
   margin-top: -28px;
   box-shadow: var(--shadow);
}

.story-media {
   min-height: 520px;
}

.story-photo {
   position: relative;
   height: 100%;
   min-height: 520px;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: var(--shadow);
   background:
      linear-gradient(rgba(38, 24, 14, 0.18), rgba(38, 24, 14, 0.32)),
      url("../assets/storyimg.png");
   background-size: cover;
   background-position: center;
}

.story-photo::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      linear-gradient(180deg, rgba(255, 244, 226, 0.08), rgba(32, 20, 11, 0.24));
   opacity: 1;
}

.story-photo::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 28%;
   background:
      linear-gradient(0deg, rgba(93, 57, 31, 0.48), transparent),
      linear-gradient(180deg, transparent 0 75%, rgba(38, 27, 19, 0.24) 75% 100%);
}

.photo-badge {
   position: absolute;
   left: 24px;
   bottom: 24px;
   z-index: 1;
   padding: 10px 14px;
   border-radius: 999px;
   background: rgba(255, 247, 236, 0.88);
   color: var(--ink);
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.story-copy {
   padding: 28px 4px 28px 0;
}

.section-tag {
   margin: 0 0 14px;
   color: var(--caramel-deep);
   font-size: 1.05rem;
   font-weight: 600;
}

.story-copy h2,
.section-heading h2 {
   font-size: clamp(2.9rem, 5vw, 4.8rem);
   line-height: 0.95;
}

.story-copy p,
.info-card p,
.review-card p,
.location-card p,
.contact-card p {
   color: var(--muted);
   line-height: 1.9;
   font-size: 1.03rem;
}

.section-heading {
   max-width: 760px;
   margin-bottom: 28px;
}

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

.card-grid-three {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.menu-image-card {
   position: relative;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow);
   overflow: hidden;
}

.menu-image-card img {
   display: block;
   width: 100%;
   aspect-ratio: 0.72 / 1;
   object-fit: cover;
}

.menu-zoom-button {
   position: absolute;
   top: 14px;
   right: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 10px;
   background: rgba(255, 253, 248, 0.88);
   backdrop-filter: blur(10px);
   box-shadow: 0 10px 24px rgba(25, 20, 15, 0.14);
   cursor: pointer;
}

.menu-zoom-button span {
   position: relative;
   display: block;
   width: 14px;
   height: 14px;
}

.menu-zoom-button::before {
   content: "";
   position: absolute;
   width: 14px;
   height: 1.8px;
   background: #181410;
   border-radius: 999px;
   transform: rotate(-45deg);
}

.menu-zoom-button span::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 7px;
   height: 7px;
   border-top: 1.8px solid #181410;
   border-right: 1.8px solid #181410;
}

.menu-zoom-button span::after {
   content: "";
   position: absolute;
   bottom: 1px;
   left: 1px;
   width: 7px;
   height: 7px;
   border-bottom: 1.8px solid #181410;
   border-left: 1.8px solid #181410;
}

.info-card,
.review-card,
.location-card,
.contact-card,
.contact-form {
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow);
}

.info-card,
.review-card,
.location-card,
.contact-card {
   padding: 28px;
}

.card-label {
   display: inline-block;
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(184, 116, 57, 0.1);
   color: var(--caramel-deep);
   font-size: 0.96rem;
   font-weight: 600;
}

.info-card h3,
.location-card h3,
.contact-card h3 {
   margin-top: 18px;
   font-size: 2.15rem;
   line-height: 0.98;
}

.info-card strong {
   display: inline-block;
   margin-top: 18px;
   color: var(--caramel-deep);
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.6rem;
}

.review-card {
   position: relative;
   padding-top: 44px;
}

.review-card::before {
   content: "“";
   position: absolute;
   top: 10px;
   left: 24px;
   color: rgba(184, 116, 57, 0.22);
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 4rem;
   line-height: 1;
}

.review-card strong {
   display: block;
   margin-top: 14px;
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.35rem;
   text-transform: uppercase;
}

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

.gallery-card {
   position: relative;
   min-height: 240px;
    border-radius: var(--radius-md);
   box-shadow: var(--shadow);
   overflow: hidden;
   aspect-ratio: 0.78 / 1;
}

.gallery-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.gallery-card:hover img {
   transform: scale(1.03);
}

.gallery-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(22, 15, 10, 0.08) 0%, rgba(22, 15, 10, 0.54) 100%);
}

.gallery-overlay {
   position: absolute;
   left: 18px;
   right: 18px;
   bottom: 16px;
   z-index: 1;
   display: grid;
   justify-items: center;
   gap: 0;
   text-align: center;
   color: #fff7ef;
}

.gallery-overlay strong {
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.65rem;
   font-weight: 700;
   letter-spacing: 0.03em;
   text-transform: uppercase;
}

.location-layout,
.contact-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
   gap: 22px;
}

.map-frame {
   min-height: 420px;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow);
   border: 1px solid var(--line);
}

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

.contact-form {
   display: grid;
   gap: 16px;
   padding: 28px;
}

.contact-services {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 20px;
}

.contact-services .button {
   width: auto;
}

.contact-form label {
   display: grid;
   gap: 8px;
   color: var(--muted);
   font-weight: 600;
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   border: 1px solid rgba(28, 24, 20, 0.1);
   border-radius: 14px;
   background: #fffaf3;
   color: var(--ink);
   padding: 14px 16px;
   outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
   color: #8b837b;
}

.contact-form input:focus,
.contact-form textarea:focus {
   border-color: rgba(184, 116, 57, 0.52);
   box-shadow: 0 0 0 3px rgba(184, 116, 57, 0.12);
}

.site-footer {
   margin-top: 40px;
   padding: 36px 24px 24px;
   background:
      linear-gradient(180deg, #312015 0%, #24170f 100%);
   color: #f7efe3;
}

.footer-inner,
.footer-bottom {
   max-width: 1220px;
   margin: 0 auto;
}

.footer-inner {
   display: grid;
   grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
   gap: 28px;
   padding: 28px 0 24px;
}

.footer-brand,
.footer-column {
   display: grid;
   align-content: start;
   gap: 12px;
}

.footer-logo {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   width: fit-content;
}

.footer-logo img {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   border: 4px solid rgba(248, 235, 206, 0.8);
   background: #f4dfbb;
}

.footer-logo span,
.footer-column h3 {
   font-family: 'Barlow Condensed', sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.footer-logo span {
   font-size: 1.8rem;
   font-weight: 600;
}

.footer-brand p,
.footer-column p,
.footer-column a,
.footer-bottom p,
.footer-bottom a {
   margin: 0;
   color: rgba(247, 239, 227, 0.82);
   line-height: 1.8;
}

.footer-column h3 {
   margin: 0 0 2px;
   color: #fff7ef;
   font-size: 1.35rem;
}

.footer-column a,
.footer-bottom a {
   width: fit-content;
}

.footer-book-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;
   padding: 0 18px;
   border-radius: 999px;
   background: var(--caramel);
   color: #fff7ef;
   font-family: 'Barlow Condensed', sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding-top: 18px;
   border-top: 1px solid rgba(255, 247, 239, 0.12);
}

.footer-bottom-links {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.menu-lightbox {
   position: fixed;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 24px;
   background: rgba(15, 11, 8, 0.82);
   z-index: 50;
}

.menu-lightbox.is-open {
   display: flex;
}

.menu-lightbox-image {
   max-width: min(92vw, 980px);
   max-height: 84vh;
   border-radius: 18px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
}

.menu-lightbox-close {
   position: absolute;
   top: 22px;
   right: 22px;
   width: 48px;
   height: 48px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 247, 239, 0.14);
   color: #fff7ef;
   font-size: 2rem;
   line-height: 1;
   cursor: pointer;
}

@media (max-width: 1040px) {
   .hero-shell {
      padding-bottom: 42px;
   }

   .site-nav {
      width: min(1100px, calc(100% - 28px));
      padding: 0 24px;
   }

   .nav-group {
      gap: 10px;
   }

   .nav-group a {
      font-size: 1.03rem;
   }

   .brand img {
      width: 106px;
      height: 106px;
   }

   .hero {
      min-height: 680px;
      padding: 164px 28px 96px;
   }

   .hero-content {
      max-width: 760px;
   }

   .section {
      padding: 56px 22px;
   }

   .story-section,
   .location-layout,
   .contact-layout,
   .footer-inner,
   .card-grid,
   .card-grid-three,
   .menu-image-grid,
   .gallery-strip {
      grid-template-columns: 1fr;
   }

   .story-copy {
      padding-right: 0;
   }
}

@media (max-width: 700px) {
   .site-nav {
      grid-template-columns: 1fr;
      gap: 12px;
      width: min(760px, calc(100% - 24px));
      padding: 16px 18px 22px;
      border-radius: 34px;
   }

   .brand {
      order: -1;
      justify-self: center;
      left: auto;
      transform: translateY(6px);
   }

   .nav-group,
   .nav-group-right {
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 16px;
   }

   .nav-group a {
      font-size: 0.98rem;
      line-height: 1;
   }

   .hero {
      min-height: 680px;
      padding-top: 146px;
      margin-top: -26px;
   }

   .hero h1 {
      font-size: clamp(3.1rem, 11vw, 5rem);
   }

   .story-section {
      gap: 28px;
      padding-top: 26px;
   }

   .story-copy {
      padding: 0 0 8px;
   }

   .section-heading h2,
   .story-copy h2 {
      font-size: clamp(2.4rem, 7vw, 3.8rem);
   }

   .site-footer {
      padding-left: 20px;
      padding-right: 20px;
   }
}

@media (max-width: 640px) {
   .hero-shell,
   .section {
      padding-left: 16px;
      padding-right: 16px;
   }

   .site-nav {
      grid-template-columns: 46px 1fr 46px;
      width: 100%;
      min-height: auto;
      padding: 12px 12px 12px;
      gap: 8px;
      border-radius: 26px;
   }

   .brand {
      order: 0;
      left: auto;
      transform: translateY(0);
      justify-self: center;
      grid-column: 2;
    }

   .brand img {
      width: 72px;
      height: 72px;
      border-width: 5px;
   }

   .nav-group,
   .nav-group-right {
      display: none;
   }

   .mobile-nav-trigger,
   .mobile-nav-action {
      display: inline-flex;
   }

   .mobile-nav-trigger {
      flex-direction: column;
   }

   .mobile-menu-panel {
      display: none;
      grid-template-columns: 1fr;
      gap: 10px;
      padding-top: 12px;
   }

   .site-nav.menu-open .mobile-menu-panel {
      display: grid;
   }

   .site-nav.menu-open .mobile-nav-trigger span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
   }

   .site-nav.menu-open .mobile-nav-trigger span:nth-child(2) {
      opacity: 0;
   }

   .site-nav.menu-open .mobile-nav-trigger span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
   }

   .mobile-menu-panel a {
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(255, 247, 239, 0.12);
      text-align: center;
   }

   .hero {
      min-height: 600px;
      padding: 126px 18px 82px;
      margin-top: -18px;
      border-radius: 0 0 28px 28px;
      background-position: center center;
   }

   .hero h1 {
      font-size: clamp(2.5rem, 14vw, 3.7rem);
   }

   .hero-kicker {
      font-size: 1.08rem;
   }

   .hero-text {
      margin-top: 18px;
      font-size: 0.98rem;
      line-height: 1.7;
   }

   .hero-actions {
      gap: 12px;
      margin-top: 24px;
   }

   .button {
      width: 100%;
      min-height: 50px;
      padding: 0 18px;
      font-size: 1.04rem;
   }

   .service-links {
      justify-content: center;
      gap: 12px 10px;
      text-align: center;
   }

   .service-links span {
      width: 100%;
      justify-content: center;
   }

   .service-links a {
      min-width: 104px;
      justify-content: center;
   }

   .section {
      padding-top: 44px;
      padding-bottom: 44px;
   }

   .section-heading {
      margin-bottom: 20px;
   }

   .section-heading h2,
   .story-copy h2 {
      font-size: clamp(2rem, 11vw, 2.9rem);
   }

   .story-section {
      border-radius: 28px;
      margin-top: -18px;
      padding-top: 20px;
   }

   .story-photo,
   .story-media {
      min-height: 300px;
   }

   .photo-badge {
      left: 16px;
      bottom: 16px;
      font-size: 0.88rem;
      padding: 8px 12px;
   }

   .menu-zoom-button {
      top: 10px;
      right: 10px;
      width: 38px;
      height: 38px;
   }

   .info-card h3,
   .location-card h3,
   .contact-card h3 {
      font-size: 1.85rem;
   }

    .menu-image-card,
    .review-card,
    .location-card,
    .contact-card,
    .contact-form {
      border-radius: 18px;
   }

   .map-frame,
   .map-frame iframe {
      min-height: 300px;
   }

   .gallery-card {
      min-height: 180px;
   }

   .gallery-overlay strong {
      font-size: 1.35rem;
   }

   .site-footer {
      margin-top: 24px;
      padding: 28px 16px 18px;
   }

   .footer-inner {
      gap: 22px;
      padding-top: 12px;
   }

   .footer-logo img {
      width: 56px;
      height: 56px;
   }

   .footer-logo span {
      font-size: 1.5rem;
   }

   .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
   }

   .menu-lightbox {
      padding: 18px;
   }

   .menu-lightbox-close {
      top: 16px;
      right: 16px;
      width: 42px;
      height: 42px;
   }

   .contact-services {
      flex-direction: column;
   }

   .contact-services .button {
      width: 100%;
   }

}

@media (max-width: 420px) {
   .site-nav {
      width: 100%;
      padding: 10px;
   }

   .brand img {
      width: 64px;
      height: 64px;
   }

   .mobile-nav-trigger,
   .mobile-nav-action {
      width: 42px;
      height: 42px;
      min-width: 42px;
      padding: 0 10px;
   }

   .site-nav {
      grid-template-columns: 42px 1fr 42px;
   }

   .mobile-nav-action {
      font-size: 0.88rem;
   }

   .hero {
      padding-top: 118px;
   }

   .hero h1 {
      font-size: clamp(2.2rem, 13vw, 3.1rem);
   }

   .hero-text {
      font-size: 0.93rem;
   }

   .story-photo,
   .story-media {
      min-height: 250px;
   }
}