:root {

  --bg: #eef1f4;

  --ink: #121417;

  --muted: #5c6570;

  --line: rgba(18, 20, 23, 0.12);

  --emerald: #0f8f6a;

  --emerald-2: #14b884;

  --panel: #ffffff;

  --dark: #121417;

  --font-display: "Big Shoulders Display", Impact, sans-serif;

  --font-body: "Source Sans 3", system-ui, sans-serif;

  --pad: clamp(1.1rem, 4vw, 3.25rem);

  --max: 1100px;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: var(--font-body);

  color: var(--ink);

  background:

    radial-gradient(800px 400px at 100% 0%, rgba(15, 143, 106, 0.1), transparent 50%),

    var(--bg);

  line-height: 1.5;

}



img {

  display: block;

  max-width: 100%;

  height: auto;

}



a {

  color: inherit;

}



button,

input,

select {

  font: inherit;

}



.back-to-portfolio {

  position: fixed;

  top: 0.75rem;

  left: 0.75rem;

  z-index: 60;

  font-size: 0.75rem;

  text-decoration: none;

  padding: 0.35rem 0.65rem;

  background: rgba(238, 241, 244, 0.92);

  border: 1px solid var(--line);

  opacity: 0.75;

}



.back-to-portfolio:hover {

  opacity: 1;

}



.topbar {

  position: sticky;

  top: 0;

  z-index: 40;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 0.85rem var(--pad);

  background: rgba(238, 241, 244, 0.9);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--line);

}



.logo {

  font-family: var(--font-display);

  font-size: 1.85rem;

  font-weight: 800;

  letter-spacing: 0.04em;

  text-decoration: none;

  line-height: 1;

}



.topbar__nav {

  display: none;

  gap: 1.35rem;

}



.topbar__nav a {

  text-decoration: none;

  font-weight: 600;

  color: var(--muted);

}



.topbar__nav a:hover {

  color: var(--ink);

}



.btn-sm {

  text-decoration: none;

  font-weight: 700;

  font-size: 0.85rem;

  padding: 0.55rem 0.85rem;

  background: var(--ink);

  color: #fff;

}



.btn-sm:hover {

  background: var(--emerald);

}



.hero {

  position: relative;

  min-height: min(90svh, 820px);

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  color: #fff;

}



.hero__shot {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(0.25) contrast(1.05);

  animation: zoom 1s ease both;

}



.hero__veil {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(18, 20, 23, 0.88) 0%, rgba(18, 20, 23, 0.45) 55%, rgba(18, 20, 23, 0.15) 100%),

    linear-gradient(0deg, rgba(18, 20, 23, 0.7), transparent 45%);

}



.hero__copy {

  position: relative;

  z-index: 1;

  width: min(100%, 620px);

  padding: 3rem var(--pad) 3.4rem;

  animation: rise 0.7s ease both;

}



.hero__brand {

  margin: 0 0 0.6rem;

  font-family: var(--font-display);

  font-size: clamp(1.6rem, 4vw, 2.4rem);

  letter-spacing: 0.06em;

  color: var(--emerald-2);

}



.hero h1 {

  margin: 0 0 0.9rem;

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(2.4rem, 7vw, 4.4rem);

  line-height: 0.95;

  letter-spacing: 0.01em;

  text-transform: uppercase;

}



.hero__lead {

  margin: 0 0 1.5rem;

  max-width: 34ch;

  color: rgba(255, 255, 255, 0.78);

  font-size: 1.05rem;

}



.btn-primary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  border: 0;

  background: var(--emerald);

  color: #fff;

  font-weight: 700;

  padding: 0.95rem 1.25rem;

  cursor: pointer;

  transition: transform 0.15s ease, background 0.15s ease;

}



.btn-primary:hover {

  background: var(--emerald-2);

  color: var(--ink);

  transform: translateY(-2px);

}



.btn-primary--wide {

  width: 100%;

}



.section-head {

  max-width: var(--max);

  margin: 0 auto 1.75rem;

}



.eyebrow {

  margin: 0 0 0.4rem;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--emerald);

}



.section-head h2 {

  margin: 0 0 0.45rem;

  font-family: var(--font-display);

  font-size: clamp(2.2rem, 5vw, 3.4rem);

  text-transform: uppercase;

  letter-spacing: 0.02em;

  line-height: 1;

}



.section-head p {

  margin: 0;

  color: var(--muted);

  max-width: 40ch;

}



.services {

  padding: 3.75rem var(--pad) 2rem;

}



.price-grid {

  max-width: var(--max);

  margin: 0 auto;

  display: grid;

  gap: 0.85rem;

  grid-template-columns: 1fr;

}



.price-card {

  background: var(--panel);

  border: 1px solid var(--line);

  padding: 1.2rem 1.15rem;

  transition: border-color 0.2s ease, transform 0.2s ease;

}



.price-card:hover {

  border-color: var(--emerald);

  transform: translateY(-3px);

}



.price-card--feat {

  background: var(--dark);

  color: #fff;

  border-color: var(--dark);

}



.price-card--feat .price-card__sum {

  color: var(--emerald-2);

}



.price-card--feat p:last-child {

  color: rgba(255, 255, 255, 0.7);

}



.price-card__tag {

  margin: 0 0 0.35rem;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--emerald-2);

}



.price-card h3 {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1.7rem;

  text-transform: uppercase;

  letter-spacing: 0.02em;

}



.price-card__sum {

  margin: 0.35rem 0 0.45rem;

  font-size: 1.45rem;

  font-weight: 800;

}



.price-card p:last-child {

  margin: 0;

  color: var(--muted);

  font-size: 0.95rem;

}



.gallery {

  padding: 3rem var(--pad) 2rem;

}



.ba-list {

  max-width: var(--max);

  margin: 0 auto;

  display: grid;

  gap: 1.25rem;

}



.ba {

  margin: 0;

}



.ba__viewport {

  position: relative;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #cfd5db;

  user-select: none;

  touch-action: none;

}



.ba__after,

.ba__before {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.ba__before-wrap {

  position: absolute;

  inset: 0;

  width: 50%;

  overflow: hidden;

  border-right: 2px solid #fff;

}



.ba__handle {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 2px;

  background: #fff;

  transform: translateX(-50%);

  pointer-events: none;

}



.ba__handle::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 2.2rem;

  height: 2.2rem;

  border: 2px solid #fff;

  border-radius: 50%;

  background: var(--emerald);

  transform: translate(-50%, -50%);

}



.ba__range {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  margin: 0;

  opacity: 0;

  cursor: ew-resize;

  z-index: 2;

}



.ba__label {

  position: absolute;

  top: 0.85rem;

  z-index: 1;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  background: rgba(18, 20, 23, 0.7);

  color: #fff;

  padding: 0.3rem 0.5rem;

}



.ba__label--before { left: 0.85rem; }

.ba__label--after { right: 0.85rem; }



.ba figcaption {

  margin-top: 0.65rem;

  font-weight: 700;

  font-family: var(--font-display);

  font-size: 1.25rem;

  text-transform: uppercase;

  letter-spacing: 0.03em;

}



.book {

  padding: 3.5rem var(--pad) 4.5rem;

}



.book__layout {

  max-width: var(--max);

  margin: 0 auto;

  display: grid;

  gap: 1.5rem;

}



.book__intro p {

  margin: 0;

  color: var(--muted);

  max-width: 40ch;

}



.book__intro h2 {

  margin: 0 0 0.5rem;

  font-family: var(--font-display);

  font-size: clamp(2rem, 4.5vw, 3rem);

  text-transform: uppercase;

  line-height: 1;

}



.book__panel {

  background: var(--panel);

  border: 1px solid var(--line);

  padding: 1.15rem;

  display: grid;

  gap: 1.25rem;

}



.calendar__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



.calendar__head h3 {

  margin: 0;

  font-family: var(--font-display);

  font-size: 1.55rem;

  text-transform: uppercase;

}



.calendar__head button {

  width: 2.4rem;

  height: 2.4rem;

  border: 1px solid var(--line);

  background: var(--bg);

  cursor: pointer;

  font-size: 1.3rem;

  line-height: 1;

}



.calendar__head button:hover {

  border-color: var(--emerald);

  color: var(--emerald);

}



.calendar__dow {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 0.25rem;

  margin: 0.85rem 0 0.35rem;

  text-align: center;

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.calendar__grid {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 0.3rem;

}



.cal-day {

  aspect-ratio: 1;

  border: 1px solid transparent;

  background: transparent;

  cursor: pointer;

  font-weight: 700;

  color: var(--ink);

}



.cal-day:disabled {

  color: #b0b6bd;

  cursor: default;

}



.cal-day.is-muted {

  visibility: hidden;

}



.cal-day:not(:disabled):hover {

  border-color: var(--emerald);

}



.cal-day.is-selected {

  background: var(--emerald);

  color: #fff;

}



.slots__label {

  margin: 0 0 0.65rem;

  font-weight: 600;

}



.slots__grid {

  display: flex;

  flex-wrap: wrap;

  gap: 0.45rem;

}



.slot {

  border: 1px solid var(--line);

  background: var(--bg);

  padding: 0.55rem 0.75rem;

  font-weight: 700;

  cursor: pointer;

}



.slot:hover,

.slot.is-selected {

  border-color: var(--emerald);

  background: var(--emerald);

  color: #fff;

}



.slot:disabled {

  opacity: 0.4;

  cursor: not-allowed;

}



.form {

  display: grid;

  gap: 0.75rem;

  border-top: 1px solid var(--line);

  padding-top: 1rem;

}



.form label {

  display: grid;

  gap: 0.3rem;

  font-weight: 700;

  font-size: 0.9rem;

}



.form input,

.form select {

  border: 1px solid var(--line);

  padding: 0.75rem 0.85rem;

  background: #fff;

}



.form input:focus,

.form select:focus {

  outline: 2px solid var(--emerald);

  outline-offset: 1px;

}



.form__summary {

  margin: 0;

  font-weight: 600;

  color: var(--muted);

  font-size: 0.95rem;

}



.form__error {

  margin: 0;

  color: #c62828;

  font-weight: 700;

  font-size: 0.9rem;

}



.form__success {

  margin: 0;

  color: var(--emerald);

  font-weight: 700;

}



.footer {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 0.75rem 1.5rem;

  padding: 1.25rem var(--pad);

  background: var(--dark);

  color: rgba(255, 255, 255, 0.7);

  font-weight: 600;

}



.footer a {

  text-decoration: none;

  color: var(--emerald-2);

}



@keyframes rise {

  from { opacity: 0; transform: translateY(14px); }

  to { opacity: 1; transform: translateY(0); }

}



@keyframes zoom {

  from { opacity: 0; transform: scale(1.05); }

  to { opacity: 1; transform: scale(1); }

}



@media (min-width: 720px) {

  .topbar__nav {

    display: flex;

  }



  .hero {

    align-items: center;

  }



  .hero__copy {

    padding: 4.5rem var(--pad);

  }



  .price-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .ba-list {

    grid-template-columns: 1fr 1fr;

  }



  .book__layout {

    grid-template-columns: 0.85fr 1.15fr;

    align-items: start;

    gap: 2rem;

  }



  .book__panel {

    padding: 1.4rem;

  }

}



@media (min-width: 1024px) {

  .price-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation: none !important;

    transition: none !important;

  }

}