:root {
   --light-blue: #cbd9e7;
   --teal: #2d7177;
   --accent: #ed6c63;
   --text-dark: #17383c;
   --text-light: #ffffff;
   --title-on-teal: #ea988e;
   --navigation-height: 76px;
   --transition-duration: 800ms;
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   overflow: hidden;
   color: var(--text-dark);
   font-family: Arial, Helvetica, sans-serif;
   background: var(--light-blue);
 }

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

 button,
 a {
   font: inherit;
 }

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

 .site-navigation {
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   display: flex;
   width: 100%;
   height: var(--navigation-height);
   padding: 0 4vw;
   align-items: center;
   justify-content: flex-end;
   background: rgba(203, 217, 231, 0.92);
   backdrop-filter: blur(10px);
 }

 .site-navigation__menu {
   display: flex;
   align-items: center;
   gap: 2rem;
   list-style: none;
 }

 .site-navigation__link {
   position: relative;
   padding: 0.5rem 0;
   font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

 .site-navigation__link::after {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 2px;
   content: "";
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 200ms ease;
 }

 .site-navigation__link:hover::after,
 .site-navigation__link.is-active::after {
   transform: scaleX(1);
 }

 .site-navigation__link.is-unavailable {
   opacity: 0.45;
   cursor: default;
 }

 .site-navigation__link.is-unavailable::after {
   display: none;
 }

 .page {
   height: 100dvh;
   overflow-y: auto;
   overflow-x: hidden;
   scroll-snap-type: y mandatory;
   scrollbar-width: none;
 }

 .page::-webkit-scrollbar {
   display: none;
 }

 .page-section {
   width: 100%;
   min-height: 100dvh;
   scroll-snap-align: start;
   scroll-snap-stop: always;
 }

 .section-title {
   margin-bottom: 2rem;
   font-family: "Oswald", sans-serif;
   font-size: clamp(2.3rem, 3.4vw, 4rem);
   font-weight: 400;
   line-height: 1.05;
   text-transform: uppercase;
   letter-spacing: 0.02em;
 }

 .hero {
   display: grid;
   height: 100dvh;
   padding: calc(var(--navigation-height) + 2rem) 5vw 2rem;
   grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr);
   gap: clamp(3rem, 8vw, 9rem);
   align-items: center;
   background: var(--light-blue);
 }

 .hero__logo-container {
   display: flex;
   height: calc(100dvh - var(--navigation-height) - 4rem);
   align-items: center;
   justify-content: center;
 }

 .hero__logo {
   width: min(100%, calc(100dvh - var(--navigation-height) - 4rem));
   max-height: 100%;
   aspect-ratio: 1;
   object-fit: contain;
   border-radius: 2.5rem;
 }

 .hero__content {
   max-width: 700px;
 }

 .hero__title {
   margin-bottom: 1.5rem;
   max-width: 10ch;
   color: #0d0e39;
   font-family: "Montserrat", sans-serif;
   font-size: clamp(2rem, 3.4vw, 3.5rem);
   font-weight: 300;
   line-height: 1.15;
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }

 .hero__description {
   max-width: 600px;
   font-size: clamp(1rem, 1.5vw, 1.25rem);
   line-height: 1.8;
 }

 .page-section {
   opacity: 1;
   transform: translateY(0);
   transition:
     opacity var(--transition-duration) ease,
     transform var(--transition-duration) ease;
 }

 .about {
   display: grid;
   height: 100dvh;
   padding: calc(var(--navigation-height) + 2rem) 5vw 2rem;
   grid-template-columns: minmax(320px, 1fr) minmax(260px, 1fr);
   gap: clamp(3rem, 8vw, 9rem);
   align-items: center;
   background: var(--light-blue);
 }

 .about__content {
   max-width: 700px;
 }

 .about__title {
   color: var(--accent);
 }

 .about__description {
   max-width: 650px;
   color: var(--teal);
   font-size: clamp(1rem, 1.25vw, 1.15rem);
   line-height: 1.8;
 }

 .about__image-container {
   display: flex;
   height: calc(100dvh - var(--navigation-height) - 4rem);
   align-items: center;
   justify-content: center;
 }

 .about__image {
   width: min(100%, calc(100dvh - var(--navigation-height) - 4rem));
   max-height: 100%;
   aspect-ratio: 1;
   border-radius: 2.5rem;
   object-fit: cover;
 }

 .products {
   display: grid;
   height: 100dvh;
   padding: calc(var(--navigation-height) + 2rem) 5vw 2rem;
   grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr);
   gap: clamp(3rem, 8vw, 9rem);
   align-items: center;
   background: var(--teal);
 }

 .products__image-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: calc(100dvh - var(--navigation-height) - 4rem);
 }

 .products__image {
   width: auto;
   max-width: 100%;
   height: 100%;
   max-height: 100%;
   object-fit: cover;
   border-radius: 2.5rem;
   box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
 }

 .products__content {
   max-width: 700px;
 }

 .products__title {
   color: var(--title-on-teal);
 }

 .products__list {
   padding-left: 1.5rem;
   color: white;
   font-size: clamp(1.15rem, 1.2vw, 1.25rem);
   line-height: 1.5;
 }

 .products__list li + li {
   margin-top: .25rem;
 }

 .package__content {
   width: min(1200px, 90%);
   min-height: 100vh;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   align-items: center;
   gap: 5rem;
 }

 .package__title {
   color: var(--accent);
 }

 .package__description {
   color: var(--teal);
   font-size: 1.15rem;
   line-height: 1.8;
   max-width: 58ch;
 }

 .package__image-wrapper {
   display: flex;
   justify-content: center;
 }

 .package__image {
   width: min(100%, 500px);
   aspect-ratio: 1;
   object-fit: cover;
   border-radius: 2.5rem;
   box-shadow: 0 30px 60px rgba(0, 0, 0, .15);
 }

 .photobox {
   display: grid;
   height: 100dvh;
   padding: calc(var(--navigation-height) + 2rem) 5vw 2rem;
   grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.15fr);
   gap: clamp(3rem, 7vw, 8rem);
   align-items: center;
   overflow: hidden;
   background: var(--teal);
 }

 .photobox__image-container {
   position: relative;
   display: flex;
   height: calc(100dvh - var(--navigation-height) - 4rem);
   align-items: center;
   justify-content: center;
 }

 .photobox__image {
   width: min(100%, 500px);
   aspect-ratio: 1;
   object-fit: cover;
   border-radius: 2.5rem;
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
 }

 .photobox__image-secondary {
   position: absolute;
   z-index: 2;
   left: 0;
   bottom: -5rem;
   width: min(52%, 250px);
   aspect-ratio: 1;
   object-fit: cover;
   border: 0.45rem solid var(--teal);
   border-radius: 1.5rem;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }

 .photobox__content {
   max-width: 720px;
 }

 .photobox__title {
   margin-bottom: 1.25rem;
   color: var(--title-on-teal);
 }

 .photobox__description {
   max-width: 62ch;
   color: var(--text-light);
   font-size: clamp(0.95rem, 1.05vw, 1.1rem);
   line-height: 1.55;
 }

 .photobox__description + .photobox__description {
   margin-top: 0.75rem;
 }

 .photobox__price {
   margin-top: 1rem;
   color: var(--text-light);
   font-size: clamp(1.05rem, 1.2vw, 1.2rem);
   font-weight: 700;
   line-height: 1.4;
 }

 .photobox__price span {
   font-size: 0.95rem;
   font-weight: 400;
 }

 .photobox__reviews {
   display: grid;
   margin-top: 1.25rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.9rem;
 }

 .photobox__review {
   padding: 0.9rem 1rem;
   color: var(--teal);
   background: rgba(255, 255, 255, 0.94);
   border-radius: 1.25rem;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
 }

 .photobox__review p {
   font-size: 0.85rem;
   line-height: 1.4;
 }

 .photobox__review-author {
   display: block;
   margin-top: 0.45rem;

   font-size: 0.75rem;
   font-weight: 700;
 }

 .contact {
   display: flex;
   height: 100dvh;
   padding: calc(var(--navigation-height) + 3rem) 6vw 2rem;
   flex-direction: column;
   justify-content: space-between;
   color: var(--text-light);
   background: var(--teal);
   text-transform: uppercase;
 }

 .contact__wrapper {
   display: grid;
   width: min(1280px, 100%);
   margin: auto;
   grid-template-columns: minmax(280px, 0.75fr) minmax(620px, 1.45fr);
   gap: clamp(4rem, 8vw, 8rem);
   align-items: center;
 }

 .contact__heading {
   max-width: 430px;
 }

 .contact__title {
   margin-bottom: 2rem;
   color: var(--title-on-teal);
 }

 .contact__intro {
   max-width: 40ch;
   font-size: 0.9rem;
   line-height: 2;
   letter-spacing: 0.035em;
 }

 .contact__panel {
   display: grid;
   padding: clamp(2rem, 3vw, 3.25rem);
   grid-template-columns: minmax(220px, 0.8fr) 1px minmax(330px, 1.2fr);
   gap: clamp(2rem, 4vw, 4rem);
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 2rem;
   backdrop-filter: blur(8px);
 }

 .contact__divider {
   width: 1px;
   height: 100%;
   background: rgba(255, 255, 255, 0.2);
 }

 .contact__subtitle {
   margin-bottom: 1.75rem;
   font-family: "Oswald", sans-serif;
   font-size: 1.35rem;
   font-weight: 400;
   letter-spacing: 0.05em;
 }

 .contact__details {
   display: grid;
   gap: 1.6rem;
 }

 .contact__detail {
   display: grid;
   gap: 0.45rem;
 }

 .contact__label {
   color: var(--title-on-teal);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.08em;
 }

 .contact__detail p,
 .contact__detail a {
   font-size: 0.88rem;
   line-height: 1.8;
   letter-spacing: 0.02em;
 }

 .contact__detail a {
   width: fit-content;
 }

 .contact__schedule {
   border-top: 1px solid rgba(255, 255, 255, 0.22);
 }

 .contact__schedule-row {
   display: grid;
   padding: 0.95rem 0;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 2rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.22);
   font-size: 0.84rem;
   line-height: 1.7;
   letter-spacing: 0.025em;
 }

 .contact__schedule-row strong {
   white-space: nowrap;
   text-align: right;
 }

 .contact__note {
   margin-top: 1.5rem;
   padding: 1rem 1.1rem;
   color: var(--text-light);
   background: rgba(255, 255, 255, 0.08);
   border-left: 3px solid var(--title-on-teal);
   border-radius: 0 0.8rem 0.8rem 0;
   font-size: 0.72rem;
   line-height: 1.9;
   letter-spacing: 0.035em;
   opacity: 0.9;
 }

 .contact__footer {
   width: min(1280px, 100%);
   margin: 0 auto;
   padding-top: 1.25rem;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   font-size: 0.68rem;
   letter-spacing: 0.05em;
   text-align: center;
   opacity: 0.65;
 }

 .contact__detail a {
   position: relative;
   display: inline-block;
   width: fit-content;
   transition: color .25s ease;
 }

 .contact__detail a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -0.15rem;
   width: 100%;
   height: 2px;
   background: var(--title-on-teal);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s ease;
 }

 .contact__detail a:hover::after {
   transform: scaleX(1);
 }

 .site-navigation__toggle {
   display: none;
   width: 44px;
   height: 44px;
   padding: 10px;
   border: 0;
   background: transparent;
   cursor: pointer;
 }

 .site-navigation__toggle span {
   display: block;
   width: 100%;
   height: 2px;
   margin: 5px 0;
   background: var(--text-dark);
   transition:
   transform 200ms ease,
   opacity 200ms ease;
 }

 @media (max-width: 900px) {
   :root {
     --navigation-height: 68px;
   }

   html {
     scroll-padding-top: var(--navigation-height);
   }

   body {
     overflow: auto;
   }

   .site-navigation {
     height: var(--navigation-height);
     padding: 0 1rem;
     justify-content: flex-end;
     overflow: visible;
   }

   .site-navigation__toggle {
     position: relative;
     z-index: 12;
     display: block;
   }

   .site-navigation__menu {
     position: fixed;
     z-index: 11;
     top: var(--navigation-height);
     right: 0;
     left: 0;

     display: flex;
     width: 100%;
     max-height: calc(100dvh - var(--navigation-height));
     padding: 1rem 1.25rem 1.5rem;

     flex-direction: column;
     align-items: stretch;
     gap: 0;

     overflow-y: auto;

     background: rgba(203, 217, 231, 0.98);
     border-top: 1px solid rgba(23, 56, 60, 0.12);
     box-shadow: 0 16px 30px rgba(23, 56, 60, 0.15);

     opacity: 0;
     visibility: hidden;
     transform: translateY(-1rem);

     transition:
       opacity 200ms ease,
       visibility 200ms ease,
       transform 200ms ease;
   }

   .site-navigation.is-open .site-navigation__menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }

   .site-navigation__menu li {
     width: 100%;
   }

   .site-navigation__link {
     display: block;
     width: 100%;
     padding: 0.9rem 0.5rem;
     font-size: 0.82rem;
     text-align: center;
   }

   .site-navigation__link::after {
     right: 25%;
     left: 25%;
   }

   .site-navigation.is-open .site-navigation__toggle span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
   }

   .site-navigation.is-open .site-navigation__toggle span:nth-child(2) {
     opacity: 0;
   }

   .site-navigation.is-open .site-navigation__toggle span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
   }

   .page {
     height: auto;
     min-height: 100dvh;
     overflow: visible;
     scroll-snap-type: none;
   }

   .page-section {
     width: 100%;
     min-height: 100dvh;
     height: auto;
     scroll-snap-align: none;
     scroll-snap-stop: normal;
     overflow: hidden;
   }

   .hero,
   .about,
   .products,
   .photobox {
     min-height: 100dvh;
     height: auto;
     padding:
       calc(var(--navigation-height) + 2rem)
       clamp(1.25rem, 5vw, 2.5rem)
       3rem;

     grid-template-columns: minmax(0, 1fr);
     gap: 2rem;
     align-content: center;
   }

   .hero,
   .about {
     text-align: center;
   }

   .hero__content,
   .about__content,
   .products__content,
   .photobox__content {
     width: 100%;
     max-width: 700px;
     margin: 0 auto;
     min-width: 0;
   }

   .hero__logo-container,
   .about__image-container,
   .products__image-container,
   .photobox__image-container {
     width: 100%;
     height: auto;
     min-height: 0;
   }

   .hero__logo,
   .about__image,
   .products__image,
   .photobox__image {
     width: min(100%, 420px);
     height: auto;
     max-height: min(45dvh, 420px);
     margin: 0 auto;
     object-fit: cover;
   }

   .hero__logo {
     object-fit: contain;
   }

   .hero__title {
     max-width: none;
     font-size: clamp(1.85rem, 8vw, 3rem);
   }

   .section-title {
     margin-bottom: 1.25rem;
     font-size: clamp(2rem, 9vw, 3rem);
     overflow-wrap: anywhere;
   }

   .hero__description,
   .about__description,
   .package__description,
   .photobox__description {
     max-width: 100%;
     font-size: 1rem;
     line-height: 1.65;
     overflow-wrap: anywhere;
   }

   .about__image-container {
     grid-row: auto;
   }

   .products__content {
     order: 1;
   }

   .products__image-container {
     order: 2;
   }

   .products__list {
     display: block;
     width: 100%;
     padding-left: 1.25rem;
     font-size: 1rem;
     text-align: left;
   }

   .package {
     min-height: 100dvh;
     height: auto;
     padding:
       calc(var(--navigation-height) + 2rem)
       clamp(1.25rem, 5vw, 2.5rem)
       3rem;
   }

   .package__content {
     width: 100%;
     min-height: 0;
     grid-template-columns: minmax(0, 1fr);
     gap: 2rem;
     text-align: center;
   }

   .package__image {
     width: min(100%, 420px);
     height: auto;
   }

   .photobox {
     overflow: hidden;
   }

   .photobox__image-container {
     padding-bottom: 2rem;
   }

   .photobox__image-secondary {
     left: clamp(0rem, 3vw, 1rem);
     bottom: 0;
     width: min(42%, 170px);
     border-width: 0.3rem;
   }

   .photobox__reviews {
     grid-template-columns: minmax(0, 1fr);
   }

   .contact {
     min-height: 100dvh;
     height: auto;
     padding:
       calc(var(--navigation-height) + 2rem)
       clamp(1.25rem, 5vw, 2.5rem)
       2rem;
   }

   .contact__wrapper {
     width: 100%;
     grid-template-columns: minmax(0, 1fr);
     gap: 2rem;
   }

   .contact__heading {
     max-width: 100%;
   }

   .contact__panel {
     width: 100%;
     padding: 1.5rem;
     grid-template-columns: minmax(0, 1fr);
     gap: 1.5rem;
     border-radius: 1.25rem;
   }

   .contact__divider {
     width: 100%;
     height: 1px;
   }

   .contact__schedule-row {
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 0.75rem;
   }

   .contact__detail,
   .contact__detail p,
   .contact__detail a,
   .contact__schedule-row span {
     min-width: 0;
     overflow-wrap: anywhere;
   }
 }

 @media (max-width: 480px) {
   .hero,
   .about,
   .products,
   .package,
   .photobox,
   .contact {
     padding-right: 1rem;
     padding-left: 1rem;
   }

   .hero__logo,
   .about__image,
   .products__image,
   .package__image,
   .photobox__image {
     border-radius: 1.5rem;
   }

   .contact__panel {
     padding: 1.25rem 1rem;
   }

   .contact__schedule-row {
     grid-template-columns: 1fr;
     gap: 0.15rem;
   }

   .contact__schedule-row strong {
     white-space: normal;
     text-align: left;
   }
 }