@import url("https://fonts.googleapis.com/css2?family=Belleza&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
@import url("https://unpkg.com/open-props@1.7.23/open-props.min.css");

/* Reset */
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Tokens (Naturally Simple design system, on top of Open Props) */

:root {
  --forest: #26391d;
  --forest-deep: #2f4424;
  --forest-hover: #3c4c31;
  --bone: #e1d7c6;
  --khaki: #c9b79e;
  --taupe: #8a7b6a;
  --taupe-light: #a3957f;
  --chocolate: #9b4e26;
  --chocolate-dark: var(--choco-9);
  --chocolate-dark-hover: #793e15;
  --ink: var(--gray-10);
  --ink-soft: var(--sand-9);

  --font-display: "Belleza", "Josefin Sans", "Century Gothic", sans-serif;
  --font-body: "Raleway", "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --ns-fs-display: clamp(40px, 5.6vw, 64px);
  --ns-fs-h1: clamp(34px, 4.4vw, 50px);
  --ns-fs-h2: clamp(28px, 3.4vw, 40px);

  /* Warm, faint Open Props shadows. */
  --shadow-color: 28 30% 14%;
  --shadow-strength: 3%;

  --ease-ns: cubic-bezier(.2, .8, .2, 1);
  --arch: var(--radius-round) var(--radius-round) var(--radius-2) var(--radius-2);
  --band: var(--size-8);

  /* Breakpoints: phone up to 640px, tablet 641–1024px, desktop 1025–1280px, wide above 1280px.
     Wide changes nothing but the side margins, which .ns-container grows on its own. */
  --ns-page: 76rem;      /* 1216px, max width of the content column */
  --ns-measure: 40rem;   /* 640px, max width of running text */
  --ns-gutter: clamp(1rem, 7.8vw, 7rem); /* minimum side margin */
}

/* Global styles */

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
}

a {
  color: var(--chocolate-dark);
  text-underline-offset: 4px;
}

a:hover {
  color: var(--chocolate-dark-hover);
}

:focus-visible {
  outline: 2px solid var(--chocolate-dark);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--forest);
}

h2 {
  font-size: var(--ns-fs-h2);
  line-height: 1.15;
}

h3 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.02em;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Layout */

/* Content column: the element (and its background) stays full width, its content stops at --ns-page. */
.ns-container {
  box-sizing: border-box;
  width: 100%;
  padding-inline: max(var(--ns-gutter), calc((100% - var(--ns-page)) / 2));
}

.ns-measure { max-width: var(--ns-measure); }
.ns-measure--center { max-width: var(--ns-measure); margin-inline: auto; }

/* Objects */

.o-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-6);
  letter-spacing: 0.02em;
  color: var(--chocolate-dark);
}

.o-lead {
  font-size: 18px;
  line-height: 28px;
}

.o-small {
  font-size: 15px;
  line-height: 24px;
}

.o-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-2);
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms var(--ease-ns), box-shadow 180ms var(--ease-ns), background-color 180ms ease;
}

.o-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px -8px hsl(28 30% 14% / 45%);
}

.o-btn:active {
  transform: none;
  box-shadow: none;
  transition-duration: 60ms;
}

.o-btn--small {
  min-height: 44px;
  padding: 0 var(--size-5);
}

.o-btn--forest { background: var(--forest); color: var(--bone); }
.o-btn--forest:hover { background: var(--forest-hover); color: var(--bone); }
.o-btn--chocolate { background: var(--chocolate-dark); color: var(--bone); }
.o-btn--chocolate:hover { background: var(--chocolate-dark-hover); color: var(--bone); }
.o-btn--bone { background: var(--bone); color: var(--forest); }
.o-btn--bone:hover { background: var(--khaki); color: var(--forest); }
.o-btn--line-dark { border-color: var(--forest); color: var(--forest); background: transparent; }
.o-btn--line-dark:hover { background: rgb(38 57 29 / 8%); color: var(--forest); }
.o-btn--line-light { border-color: var(--bone); color: var(--bone); background: transparent; }
.o-btn--line-light:hover { background: rgb(225 215 198 / 14%); color: var(--bone); }

.o-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.o-pill {
  padding: 6px 14px;
  border-radius: var(--radius-round);
  border: 1px solid var(--taupe);
  font-size: 14px;
  line-height: 20px;
  color: var(--forest);
}

.o-tag {
  padding: var(--size-1) 12px;
  border-radius: var(--radius-round);
  background: var(--bone);
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--font-weight-6);
  color: var(--forest);
}

/* Marks a frame still waiting for its photo. */
.o-placeholder {
  position: absolute;
  bottom: 14px;
  padding: var(--size-1) 12px;
  border-radius: var(--radius-round);
  background: rgb(225 215 198 / 90%);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink);
}

.o-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-3);
  background: var(--khaki);
}

.o-art {
  opacity: .5;
}

/* Horizontal swipe row on phones (bleeding through the container's gutter), a grid from tablet. */
.o-swipe {
  display: flex;
  gap: var(--size-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ns-gutter);
  margin-inline: calc(-1 * var(--ns-gutter));
  padding: var(--size-2) var(--ns-gutter);
  scrollbar-width: none;
}

.o-swipe > * {
  flex: 0 0 min(290px, 80%);
  scroll-snap-align: start;
}

@media (min-width: 641px) {
  .o-swipe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 16rem), 1fr));
    gap: var(--size-7);
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
}

/* Wavy section edges: an SVG pinned to the top or bottom of a section. */
.c-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wave-h, 70px);
  pointer-events: none;
}

.c-wave--bottom { bottom: -1px; }
.c-wave--top { top: 0; }
.c-wave--bone { color: var(--bone); }
.c-wave--khaki { color: var(--khaki); }
.c-wave--forest { color: var(--forest); }
.c-wave--forest-deep { color: var(--forest-deep); }

/* Sections next to an image strip leave a see-through band for the strip to show beneath the wave. */
.c-banded-bottom {
  position: relative;
  z-index: 1;
  background: linear-gradient(var(--bone), var(--bone)) top / 100% calc(100% - var(--band)) no-repeat;
}

.c-banded-top {
  position: relative;
  z-index: 1;
  background: linear-gradient(var(--bg, var(--bone)), var(--bg, var(--bone))) bottom / 100% calc(100% - var(--band)) no-repeat;
}

/* 1. Marquee */

.c-marquee {
  height: 44px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--forest);
}

.c-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--size-7);
  padding-left: var(--size-7);
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--font-weight-6);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  animation: ns-marquee 45s linear infinite;
}

.c-marquee__track img {
  height: 22px;
  width: auto;
  opacity: .8;
}

@keyframes ns-marquee {
  to { transform: translateX(-50%); }
}

/* 2. Header */

.c-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding-inline: var(--size-5) var(--size-3);
  border-bottom: 1px solid rgb(138 123 106 / 35%);
  background: var(--bone);
}

.c-header__logo img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.c-header__actions {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

.c-menu-button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--forest);
  cursor: pointer;
}

.c-menu-button svg { width: 24px; height: 24px; }
.c-menu-button .c-menu-button__close { display: none; }
.c-header:has(.c-nav:popover-open) .c-menu-button__open { display: none; }
.c-header:has(.c-nav:popover-open) .c-menu-button__close { display: block; }

/* Absolute in the top layer means "from the top of the page": right under the marquee and header. */
.c-nav {
  position: absolute;
  inset: calc(44px + 72px) 0 auto;
  width: 100%;
  margin: 0;
  padding: var(--size-2) var(--size-5) var(--size-5);
  border: 0;
  border-bottom: 1px solid rgb(138 123 106 / 35%);
  background: var(--bone);
  box-shadow: var(--shadow-2);
}

.c-nav__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid rgb(138 123 106 / 35%);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.c-nav__link:last-child { border-bottom: 0; }
.c-nav__link:hover { color: var(--chocolate-dark); }

/* The header runs a little wider than the content column. */
@media (min-width: 641px) {
  .c-header { padding-inline: max(64px, calc((100% - 1312px) / 2)); }
}

/* The menu button stays up to tablet, so its popover still opens right under the 72px header. */
@media (min-width: 1025px) {
  .c-header { height: 96px; }

  .c-header__logo img {
    width: 76px;
    height: 76px;
  }

  .c-header__actions { gap: 40px; }

  .c-menu-button { display: none; }

  /* On wide screens the popover menu is an ordinary row of links. */
  .c-nav[popover] {
    position: static;
    display: flex;
    gap: 40px;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .c-nav__link {
    min-height: auto;
    border: 0;
    font-size: 13px;
  }
}

/* 3. Hero */

.c-hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  --wave-h: 76px;
}

.c-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--forest);
}

.c-hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.c-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(38 57 29 / 90%) 0%, rgb(38 57 29 / 84%) 55%, rgb(38 57 29 / 60%) 100%);
}

/* Above the wave, so the arch hangs over it. */
.c-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--size-7);
  padding-top: 40px;
}

.c-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
  color: var(--bone);
}

.c-hero__text .o-label { color: var(--bone); }

.c-hero__text h1 {
  font-size: var(--ns-fs-display);
  line-height: 1.06;
  color: var(--bone);
}

.c-hero__text .o-lead {
  max-width: 540px;
  font-size: 17px;
  line-height: 26px;
}

.c-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--size-2);
}

.c-hero__arch {
  position: relative;
  align-self: center;
  width: min(260px, 70%);
  aspect-ratio: 260 / 346;
  margin-bottom: -36px;
  animation: ns-rise-far 1000ms var(--ease-ns) 150ms both;
}

.c-hero__ring {
  position: absolute;
  inset: -9px;
  border: 1px solid var(--khaki);
  border-radius: var(--radius-round) var(--radius-round) 13px 13px;
  animation: ns-ring 800ms var(--ease-ns) 950ms both;
}

.c-hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--arch);
  background: var(--khaki);
  box-shadow: var(--shadow-2);
}

.c-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(38 57 29 / 60%);
  border-radius: var(--arch);
}

.c-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  animation: ns-settle 1800ms var(--ease-ns) 150ms both;
}

.c-hero .c-wave { bottom: -6px; }

.c-rise { animation: ns-rise 700ms var(--ease-ns) both; }
.c-rise:nth-child(1) { animation-delay: 100ms; }
.c-rise:nth-child(2) { animation-delay: 220ms; }
.c-rise:nth-child(3) { animation-delay: 380ms; }
.c-rise:nth-child(4) { animation-delay: 540ms; }

@keyframes ns-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes ns-rise-far { from { opacity: 0; transform: translateY(48px); } }
@keyframes ns-settle { from { transform: scale(1.08); } }
@keyframes ns-ring { from { opacity: 0; transform: scale(.97); } }

@media (min-width: 1025px) {
  .c-hero { --wave-h: 118px; }

  .c-hero__backdrop::after {
    background: linear-gradient(to right, rgb(38 57 29 / 90%) 0%, rgb(38 57 29 / 82%) 45%, rgb(38 57 29 / 55%) 100%);
  }

  .c-hero__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--size-10);
    padding-top: 136px;
  }

  .c-hero__text {
    max-width: var(--ns-measure);
    gap: var(--size-5);
  }

  .c-hero__text .o-lead {
    font-size: 18px;
    line-height: 28px;
  }

  .c-hero__actions {
    flex-direction: row;
    gap: var(--size-3);
    margin-top: var(--size-3);
  }

  .c-hero__arch {
    flex-shrink: 0;
    align-self: auto;
    width: clamp(280px, 29vw, 420px);
    aspect-ratio: 420 / 580;
    margin: 44px 0 -40px;
  }

  .c-hero__ring { inset: -11px; border-radius: var(--radius-round) var(--radius-round) 15px 15px; }
}

/* 4. Our gardens */

.c-gardens {
  position: relative;
  padding-bottom: var(--size-10);
  background: var(--forest);
  --wave-h: 80px;
}

.c-gardens__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: var(--size-9) var(--size-7);
  background: var(--bone);
}

/* The arches straddle the change from bone to forest. */
.c-gardens__cards {
  padding-top: var(--size-7);
  background: linear-gradient(var(--bone) 0 calc(var(--size-7) + 3.5rem), transparent 0);
}

.c-gardens__cards .o-swipe { --min: 14rem; }

.c-garden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--bone);
}

.c-garden h3 {
  margin-top: 12px;
  color: var(--bone);
}

.c-garden__tagline {
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--khaki);
}

.c-garden .o-small { flex-grow: 1; }

.c-garden__arch {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--arch);
  background: var(--khaki);
  box-shadow: var(--shadow-2);
  transition: transform 320ms var(--ease-ns), box-shadow 320ms var(--ease-ns);
}

.c-garden__arch img {
  max-height: 150px;
  max-width: 190px;
  opacity: .55;
  transition: scale 600ms var(--ease-ns), rotate 600ms var(--ease-ns);
}

.c-garden:hover .c-garden__arch,
.c-garden:focus-within .c-garden__arch {
  transform: translateY(-8px);
  box-shadow: 0 -1px 3px 0 hsl(28 30% 14% / 5%), 0 4px 12px -5px hsl(28 30% 14% / 20%), 0 18px 24px -8px hsl(0 0% 0% / 30%);
}

.c-garden:hover .c-garden__arch img,
.c-garden:focus-within .c-garden__arch img {
  scale: 1.06;
  rotate: -3deg;
}

.c-workshops {
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
  margin-top: var(--size-8);
  padding: 28px var(--size-5);
  border: 1px solid rgb(201 183 158 / 55%);
  border-radius: var(--radius-4);
  background: rgb(225 215 198 / 7%);
  color: var(--bone);
}

.c-workshops > img {
  align-self: flex-start;
  height: 72px;
  width: auto;
  opacity: .9;
}

.c-workshops__text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-workshops .o-label { color: var(--khaki); }

.c-workshops h3 {
  font-size: 26px;
  line-height: 1.2;
  color: var(--bone);
}

@media (min-width: 641px) {
  .c-gardens__intro {
    align-items: center;
    text-align: center;
  }


  .c-gardens__cards .o-swipe { gap: var(--size-8); }

  .c-workshops {
    flex-direction: row;
    align-items: center;
    gap: var(--size-7);
    padding: 28px 40px;
  }
}

/* 5. How we work together */

.c-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-block: 40px var(--size-10);
  background: var(--khaki);
}

.c-steps__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-3);
}

.c-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--size-5) 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-steps__list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px;
  padding-top: var(--size-3);
  border-top: 1px solid var(--taupe);
}

.c-steps__number {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--forest);
}

@media (min-width: 641px) {
  .c-steps__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .c-steps__list li {
    grid-template-columns: 1fr;
    row-gap: var(--size-2);
    padding-top: 20px;
  }

  .c-steps__list h3 { margin-top: var(--size-2); }
}

/* 6. Our work: before and after */

.c-work {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: var(--size-8) calc(var(--band) + var(--size-7));
  --wave-h: 60px;
}

.c-work__head {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.c-work__head > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-work .o-swipe { --min: 18rem; }

.c-compare {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
  --split: 50%;
}

.c-compare__frame {
  position: relative;
  height: 288px;
  overflow: hidden;
  border: 1px solid var(--forest);
  border-radius: var(--radius-3);
  background: var(--khaki);
}

.c-compare__after,
.c-compare__before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-compare__before {
  background: var(--taupe-light);
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.c-compare__after img { width: 200px; opacity: .45; }
.c-compare__before img { height: 110px; opacity: .3; }

.c-compare__tag {
  position: absolute;
  top: var(--size-3);
  pointer-events: none;
}

.c-compare__tag--before { left: var(--size-3); }
.c-compare__tag--after { right: var(--size-3); background: var(--forest); color: var(--bone); }

.c-compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: var(--bone);
  pointer-events: none;
}

.c-compare__handle {
  position: absolute;
  top: 50%;
  left: var(--split);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--bone);
  box-shadow: var(--shadow-2);
  color: var(--forest);
  pointer-events: none;
}

/* The range input covers the photo, invisible: dragging anywhere moves the split. */
.c-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.c-compare__frame:has(.c-compare__range:focus-visible) {
  outline: 2px solid var(--chocolate-dark);
  outline-offset: 3px;
}

.c-compare figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-2);
}

.c-compare figcaption .o-tag { background: var(--khaki); }

@media (min-width: 641px) {
  .c-work__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--size-9);
  }

  .c-work__head p { max-width: 420px; }
}

/* Image strips, tucked beneath the waves of the sections either side. */

.c-strip {
  position: relative;
  height: 280px;
  margin-block: -60px;
  overflow: hidden;
  background: var(--taupe);
}

.c-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 7. About us */

.c-about {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  padding-block: calc(var(--band) + var(--size-7)) 120px;
  --bg: var(--khaki);
  --wave-h: 60px;
}

.c-about .c-wave--bottom { --wave-h: 80px; }

.c-stack {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 520 / 540;
  align-self: center;
}

.c-stack__main,
.c-stack__accent {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: translate 450ms var(--ease-ns), rotate 450ms var(--ease-ns);
}

.c-stack__main {
  left: 0;
  top: 0;
  width: 69%;
  height: 89%;
  border-radius: var(--arch);
  background: var(--taupe);
}

.c-stack__main img { width: 55%; opacity: .6; }

.c-stack__accent {
  right: 0;
  bottom: 0;
  width: 44%;
  height: 52%;
  border: 6px solid var(--khaki);
  border-radius: var(--radius-3);
  background: var(--bone);
  box-shadow: var(--shadow-2);
}

.c-stack__accent img { height: 54%; opacity: .5; }
.c-stack__accent .o-placeholder { background: rgb(201 183 158 / 90%); }

.c-stack:hover .c-stack__main { translate: -6px -6px; }
.c-stack:hover .c-stack__accent { translate: 10px 8px; rotate: 2deg; }

.c-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.c-about__text .o-label { color: var(--forest); }

.c-about__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  margin-top: var(--size-1);
}

.c-about__sign-off {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-5);
  margin-top: var(--size-3);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--forest);
}

@media (min-width: 1025px) {
  .c-about {
    flex-direction: row;
    align-items: center;
    gap: clamp(var(--size-8), 6.7vw, 96px);
  }

  .c-stack {
    flex-shrink: 0;
    width: clamp(300px, 36vw, 520px);
  }
}

/* 8. Call to action */

.c-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-3);
  padding-block: var(--size-10) 120px;
  overflow: hidden;
  background: var(--forest);
  color: var(--bone);
  text-align: center;
}

.c-cta > img {
  position: absolute;
  left: 50%;
  top: 36px;
  width: 260px;
  margin-left: -130px;
  opacity: .35;
  transform: rotate(180deg);
}

.c-cta h2 {
  position: relative;
  color: var(--bone);
}

.c-cta p {
  position: relative;
  max-width: 560px;
}

.c-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-3);
  margin-top: var(--size-2);
}

/* 9. Blog */

.c-blog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: var(--size-9) 120px;
  overflow: hidden;
}

.c-blog__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-3);
}

.c-blog__head > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-blog .o-swipe { --min: 18rem; }

.c-post {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-post .o-frame { height: 240px; }

.c-post .o-tag {
  position: absolute;
  left: var(--size-3);
  top: var(--size-3);
}

.c-post__meta {
  margin-top: var(--size-1);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

.c-post a {
  font-size: 14px;
  font-weight: var(--font-weight-6);
}

/* Botanical scatter behind a section. */
.c-scatter {
  position: absolute;
  opacity: .3;
  pointer-events: none;
}

@media (min-width: 641px) {
  .c-blog__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* 10. FAQ */

.c-faq {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 112px 120px;
  overflow: hidden;
  background: var(--forest-deep);
}

.c-faq > img {
  position: absolute;
  width: 520px;
  opacity: .2;
}

.c-faq__arch {
  position: relative;
  width: min(100%, 600px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-5);
  padding: 96px var(--size-5) var(--size-8);
  border-radius: var(--arch);
  background: var(--bone);
  box-shadow: var(--shadow-3);
}

.c-faq__badge {
  position: absolute;
  top: -48px;
  left: 50%;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--chocolate);
  box-shadow: var(--shadow-2);
}

.c-faq__badge img { width: 58px; }

.c-faq h2 {
  margin-top: var(--size-8);
  text-align: center;
}

.c-faq__list {
  width: 100%;
  border-top: 1px solid var(--taupe);
}

.c-faq details { border-bottom: 1px solid var(--taupe); }

.c-faq summary {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-3);
  padding: var(--size-3) var(--size-1);
  font-weight: var(--font-weight-6);
  cursor: pointer;
  list-style: none;
}

.c-faq summary::-webkit-details-marker { display: none; }

.c-faq summary svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--forest);
}

.c-faq summary svg path:last-child {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 280ms var(--ease-ns);
}

.c-faq details[open] summary svg path:last-child { transform: scaleY(0); }

.c-faq details p { padding: 0 var(--size-1) 20px; }

@media (min-width: 641px) {
  .c-faq { padding-block: 120px; }
  .c-faq__arch { padding-inline: 56px; }
}

/* 11. Contact */

.c-contact {
  display: flex;
  flex-direction: column;
  gap: var(--size-7);
  padding-block: var(--size-7) calc(var(--band) + var(--size-9));
  --wave-h: 60px;
}

.c-contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.c-contact__intro h2 {
  font-size: var(--ns-fs-h1);
  line-height: 1.1;
}

.c-contact__chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--size-3);
  padding: var(--size-5);
  border-radius: var(--radius-3);
  background: var(--khaki);
}

.c-contact__chat .o-label { color: var(--forest); }

.c-contact__area {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  color: var(--ink-soft);
}

.c-contact__area svg { color: var(--forest); }

.c-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--size-5);
  border-radius: var(--radius-4);
  background: var(--khaki);
  box-shadow: var(--shadow-2);
}

.c-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--size-3);
}

.c-form label,
.c-form legend {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  font-size: 14px;
  font-weight: var(--font-weight-6);
  color: var(--forest);
}

.c-form input[type="text"],
.c-form textarea,
.c-newsletter input {
  min-height: 48px;
  padding: 0 var(--size-3);
  border: 1px solid var(--taupe);
  border-radius: var(--radius-2);
  background: var(--bone);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
}

.c-form textarea {
  padding-block: 12px;
  line-height: 26px;
  resize: vertical;
}

.c-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.c-form legend {
  margin-bottom: 10px;
  padding: 0;
}

.c-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
}

.c-form .c-form__choice {
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--size-3);
  border: 1px solid var(--taupe);
  border-radius: var(--radius-round);
  background: var(--bone);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.c-form__choice input {
  margin: 0;
  accent-color: var(--forest);
}

.c-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-3);
  font-size: 13px;
  line-height: 20px;
}

@media (min-width: 1025px) {
  .c-contact {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--size-10);
    padding-top: var(--size-10);
  }

  .c-contact__intro {
    flex: 0 0 clamp(300px, 30vw, 440px);
  }

  .c-form {
    flex-grow: 1;
    padding: 40px;
  }
}

/* 12. Social */

.c-social {
  display: flex;
  flex-direction: column;
  gap: var(--size-7);
  padding-block: calc(var(--band) + var(--size-5)) var(--size-9);
  --wave-h: 60px;
}

.c-social__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-3);
}

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

.c-social__grid .o-frame { aspect-ratio: 1; }
.c-social__grid .o-frame img { max-height: 45%; opacity: .45; }
.c-social__grid .o-frame:nth-child(2) { background: var(--taupe-light); }
.c-social__grid .o-frame:nth-child(2) img { opacity: .6; }

.c-social__statement {
  padding: var(--size-5);
  background: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.2;
  color: var(--bone);
  text-align: center;
}

@media (min-width: 641px) {
  .c-social__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .c-social__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--size-5);
  }
}

/* 13. Newsletter */

.c-newsletter {
  position: relative;
  padding-bottom: 100px;
  --wave-h: 80px;
}

.c-newsletter__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
  padding: var(--size-8) var(--size-5);
  overflow: hidden;
  border-radius: var(--radius-4);
  background: var(--khaki);
}

.c-newsletter__panel > div,
.c-newsletter form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-newsletter h2 { font-size: clamp(28px, 2.4vw, 34px); }

.c-newsletter__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
}

.c-newsletter input {
  flex: 1 1 14rem;
  padding: 0 20px;
  border-radius: var(--radius-round);
}

.c-newsletter__note {
  font-size: 13px;
  line-height: 20px;
}

@media (min-width: 1025px) {
  .c-newsletter__panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-8);
    min-height: 240px;
    padding: var(--size-7) var(--size-9);
  }

  .c-newsletter__panel > div { max-width: 480px; }
  .c-newsletter form { width: min(460px, 50%); }
  .c-newsletter__note { padding-left: 20px; }
}

/* 14. Footer */

.c-footer {
  display: flex;
  flex-direction: column;
  gap: var(--size-7);
  padding-block: var(--size-5) 28px;
  background: var(--forest);
  color: var(--bone);
}

.c-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--size-7);
}

.c-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-3);
}

.c-footer__brand img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.c-footer__brand p {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
}

.c-footer nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--size-7) var(--size-3);
}

.c-footer nav > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 24px;
}

.c-footer__heading {
  font-size: 13px;
  font-weight: var(--font-weight-6);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--khaki);
}

.c-footer a {
  color: var(--bone);
  text-decoration: none;
}

.c-footer a:hover { color: var(--khaki); }

.c-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--size-2) var(--size-5);
  padding-top: 20px;
  border-top: 1px solid rgb(201 183 158 / 35%);
  font-size: 13px;
  color: var(--khaki);
}

@media (min-width: 1025px) {
  .c-footer {
    min-height: 440px;
    justify-content: space-between;
    padding-block: 40px var(--size-7);
  }

  .c-footer__top {
    flex-direction: row;
    gap: var(--size-10);
  }

  .c-footer__brand { width: 360px; }

  .c-footer__brand img {
    width: 128px;
    height: 128px;
  }

  .c-footer nav {
    flex-grow: 1;
    padding-top: var(--size-3);
    gap: var(--size-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}