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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: -0.01em;
}

.grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero collage. The height is driven by the viewport instead of the images so
   the hero — CTA buttons included — always lands inside the first screen. The
   right column is offset with a transform so the stagger stays purely visual
   and never adds to the layout height. */
.hero-grid {
  height: 24rem;
}

@media (min-width: 640px) {
  .hero-grid {
    height: 30rem;
  }
}

@media (min-width: 1024px) {
  .hero-grid {
    height: clamp(19rem, calc(100vh - 16rem), 28rem);
  }

  .hero-grid > div:nth-child(2),
  .hero-grid > div:nth-child(4) {
    transform: translateY(1.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hamburger-bar,
  #mobile-menu,
  #mobile-menu a {
    transition: none;
  }
}

.process-tab.active {
  background: #b85c3e;
  color: #f4ebdd;
}

/* Desktop: the panel keeps a fixed height so the card never jumps between tabs.
   The image absorbs whatever the caption does not use, and the tab column is
   spread over the same height so both columns start and end on the same line. */
@media (min-width: 1024px) {
  #process-tabs {
    justify-content: space-between;
  }

  .process-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
    height: 30rem;
  }

  .process-panel > img {
    flex: 1 1 0;
    min-height: 0;
  }
}

/* Hamburger: three bars that morph into a cross when the menu opens. */
.hamburger-box {
  position: relative;
  display: block;
  width: 24px;
  height: 16px;
}

.hamburger-bar {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: currentColor;
  transition: top 0.25s ease 0.2s, bottom 0.25s ease 0.2s,
    transform 0.25s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.25s ease 0.2s, opacity 0.15s ease 0.1s;
}

.hamburger-bar:nth-child(1) {
  top: 0;
}

.hamburger-bar:nth-child(2) {
  top: 7px;
  width: 65%;
}

.hamburger-bar:nth-child(3) {
  bottom: 0;
}

.hamburger.is-open .hamburger-bar {
  transition: top 0.25s ease, bottom 0.25s ease,
    transform 0.25s cubic-bezier(0.65, 0, 0.35, 1) 0.2s,
    width 0.25s ease, opacity 0.15s ease 0.1s;
}

.hamburger.is-open .hamburger-bar:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.hamburger.is-open .hamburger-bar:nth-child(2) {
  width: 100%;
  opacity: 0;
}

.hamburger.is-open .hamburger-bar:nth-child(3) {
  bottom: 7px;
  transform: rotate(-45deg);
}

/* Mobile menu: slides open and staggers its links in. */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  border-top: 1px solid transparent;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
}

#mobile-menu.is-open {
  max-height: 28rem;
  border-top-color: rgba(216, 195, 165, 0.5);
}

#mobile-menu a {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-menu.is-open a {
  opacity: 1;
  transform: none;
}

#mobile-menu.is-open a:nth-child(1) { transition-delay: 0.08s; }
#mobile-menu.is-open a:nth-child(2) { transition-delay: 0.13s; }
#mobile-menu.is-open a:nth-child(3) { transition-delay: 0.18s; }
#mobile-menu.is-open a:nth-child(4) { transition-delay: 0.23s; }
#mobile-menu.is-open a:nth-child(5) { transition-delay: 0.28s; }
#mobile-menu.is-open a:nth-child(6) { transition-delay: 0.33s; }
#mobile-menu.is-open a:nth-child(7) { transition-delay: 0.38s; }

/* Lightbox2: pin the dialog to the full viewport and centre its contents.
   Flex does not create a containing block for position:fixed, so the close
   button stays in the screen corner. top !important beats Lightbox2's inline
   top: positionFromTop so the box cannot drift to the bottom edge. */
.lightbox {
  top: 0 !important;
  bottom: 0;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0;
  box-sizing: border-box;
}

/* Lightbox2 theming to match the site palette. */
.lb-outerContainer,
.lb-dataContainer {
  background: #f4ebdd;
}

.lb-outerContainer {
  border-radius: 12px 12px 0 0;
}

/* Lightbox2 sets this element's width with jQuery .width(), which adds any
   horizontal padding on top of the image width under box-sizing: border-box.
   Keep it padding-free and inset the content with .lb-data instead. */
.lb-dataContainer {
  /* border-radius: 0 0 12px 12px; */
  padding: 0;
}

.lb-data {
  padding: 14px 18px 16px;
}

.lb-data .lb-details {
  width: 100%;
  line-height: 1.4;
}

.lb-data .lb-caption {
  display: block;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.lb-title {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #151714;
}

.lb-desc {
  display: block;
  margin-top: 4px;
  padding-bottom: 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(21, 23, 20, 0.65);
}

.lb-data .lb-number {
  padding: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 23, 20, 0.45);
}

/* Pull the close button out of the caption bar and pin it to the screen corner. */
.lb-data .lb-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  z-index: 10001;
  opacity: 1;
  background-image: none;
  background-color: rgba(244, 235, 221, 0.12);
  border: 1px solid rgba(244, 235, 221, 0.3);
  border-radius: 999px;
  transition: background-color 0.2s ease, transform 0.3s ease;
}

.lb-data .lb-close:hover {
  background-color: rgba(244, 235, 221, 0.25);
  transform: rotate(90deg);
}

.lb-data .lb-close::before,
.lb-data .lb-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #f4ebdd;
}

.lb-data .lb-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lb-data .lb-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}