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

/*
  Brand colours:
  - Cream for backgrounds
  - Sage green for accents (buttons, hovers)
  - Charcoal for text - never pure black
*/
:root {
  --color-text: #36454f;
  --color-background: #faf7f2;
  --color-sage: #6b7f62;
  --color-sage-dark: #56684e;
  --header-height: 4.5rem;
  --font-heading: "Lora", Georgia, serif;
  --font-body: "Nunito Sans", Helvetica, Arial, sans-serif;
  --font-logo: "Ephesis", cursive;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
}

h1,
h2 {
  font-family: var(--font-heading);
}

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

/* Header - minimal over the hero, solid bar once scrolled past it */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--header-height);
  background-color: transparent;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.site-header.is-scrolled {
  background-color: rgba(250, 247, 242, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.nav__links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav__links a {
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.5s ease, opacity 0.2s ease;
}

.nav__links a:hover {
  opacity: 0.75;
}

.is-scrolled .nav__links a {
  color: var(--color-text);
}

.is-scrolled .nav__links a:hover {
  color: var(--color-sage);
  opacity: 1;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background-color: transparent;
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.is-scrolled .button,
.menu-open .button {
  border-color: var(--color-sage);
  background-color: var(--color-sage);
}

.is-scrolled .button:hover,
.menu-open .button:hover {
  border-color: var(--color-sage-dark);
  background-color: var(--color-sage-dark);
}

.nav__toggle {
  display: none;
}

.button--solid {
  border-color: var(--color-sage);
  background-color: var(--color-sage);
}

.button--solid:hover {
  border-color: var(--color-sage-dark);
  background-color: var(--color-sage-dark);
}

/* Large button for the main call to action */
.button--large {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 2.75rem;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgba(86, 104, 78, 0.3);
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.button--large:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(86, 104, 78, 0.38);
}

.button--large svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero - full screen background photo */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--header-height) 1rem 9rem;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("../media/temp/temp-background.webp") center / cover no-repeat;
}

.hero__title {
  font-size: clamp(1.6rem, 6vw, 4rem);
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.hero__signoff {
  margin-top: 0.5rem;
  font-family: var(--font-logo);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Sits roughly two thirds of the way down the hero */
.hero__location {
  margin-top: clamp(2rem, 12vh, 7rem);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Scroll arrows - bouncing link to the next section */

.scroll-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(var(--arrow-x, -50%));
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
  animation: bounce 2s infinite;
}

.scroll-arrow svg {
  width: 4.5rem;
  height: 4.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* White version for use over photos */
.scroll-arrow--light {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@keyframes bounce {
  0%, 100% {
    transform: translate(var(--arrow-x, -50%), 0);
  }
  50% {
    transform: translate(var(--arrow-x, -50%), 0.5rem);
  }
}

/* About - 1/3 photo, 2/3 text */

.about {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "photo content";
  align-content: start;
  gap: 1.5rem 3rem;
  max-width: 1200px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--header-height) + 3rem) 1rem 10rem;
}

.about__photo {
  grid-area: photo;
  justify-self: center;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

/* Zoom in towards Poppy's face - adjust when the real photo goes in */
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);
  transform-origin: 78% 22%;
}

.about__content {
  grid-area: content;
}

.about__content p + p {
  margin-top: 1.25rem;
}

.about__greeting {
  margin-bottom: 1.25rem;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: normal;
}

/* Services - two cards side by side */

.services {
  position: relative;
  max-width: 1100px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--header-height) + 1.5rem) 1rem 8rem;
}

.services__intro {
  margin-bottom: 1.5rem;
  text-align: center;
}

.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  color: var(--color-sage);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.card {
  aspect-ratio: 1;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(107, 127, 98, 0.2);
  border-radius: 24px;
  background-color: #fffdf9;
  box-shadow: 0 12px 40px rgba(54, 69, 79, 0.06);
}

.card h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: normal;
  letter-spacing: 0.04em;
}

.card__divider {
  width: 48px;
  height: 1px;
  margin: 1.5rem 0;
  border: 0;
  background-color: var(--color-sage);
}

.card__intro {
  margin-bottom: 0.75rem;
}

.card ul {
  list-style: none;
}

.card li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.75rem;
  border-bottom: 1px solid rgba(54, 69, 79, 0.08);
}

.card li:last-child {
  border-bottom: 0;
}

.card li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.75rem;
  height: 1px;
  background-color: var(--color-sage);
}

/* Testimonials - full screen, rotating through quotes */

.testimonials {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-height) + 2rem) 1rem 14rem;
  background-color: rgba(107, 127, 98, 0.1);
  text-align: center;
}

.testimonials .eyebrow {
  margin-bottom: 0;
}

/* Slides share one grid cell so they can fade over each other */
/* Call to action pinned to the bottom of the testimonials */
.testimonials__cta {
  position: absolute;
  bottom: 3.5rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem;
}

.testimonials__slides {
  display: grid;
  max-width: 820px;
}

.testimonial {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.testimonial.is-active {
  opacity: 1;
  visibility: visible;
}

.testimonial blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-style: italic;
  line-height: 1.6;
}

.testimonial figcaption {
  margin-top: 0.75rem;
  color: var(--color-sage);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Dots - shared by testimonials and the mobile services cards */

.dots {
  display: flex;
  justify-content: center;
}

.dots button {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dots button::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--color-sage);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dots button.is-active::before {
  background-color: var(--color-sage);
}

.services__dots {
  display: none;
}

/* Chat with Poppy - book a call, or send a message */

.chat {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--header-height) + 1.5rem) 1rem 3rem;
}

.chat__title {
  margin-bottom: 1.25rem;
  text-align: center;
}

.chat__book {
  text-align: center;
}

.chat__book .button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}

.chat__book svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "or send me a message" with a fine line either side */
.chat__or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
  color: var(--color-sage);
  font-family: var(--font-heading);
  font-style: italic;
}

.chat__or::before,
.chat__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(107, 127, 98, 0.3);
}

.chat__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid rgba(107, 127, 98, 0.2);
  border-radius: 24px;
  background-color: #fffdf9;
  box-shadow: 0 12px 40px rgba(54, 69, 79, 0.06);
}

.chat__form {
  gap: 1rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form__field label {
  font-size: 0.85rem;
  font-weight: 600;
}

.form__field input,
.form__field textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(54, 69, 79, 0.2);
  border-radius: 10px;
  background-color: var(--color-background);
  color: var(--color-text);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form__field textarea {
  resize: vertical;
}

.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(107, 127, 98, 0.15);
}

.chat__form .button {
  align-self: flex-start;
  padding: 0.75rem 2rem;
  font: inherit;
  cursor: pointer;
}

/* Footer */

.site-footer {
  padding: 3rem 1rem 2rem;
  background-color: var(--color-sage-dark);
  color: var(--color-background);
  text-align: center;
}

.site-footer__logo {
  font-family: var(--font-logo);
  font-size: 2.5rem;
  line-height: 1.2;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin: 1.5rem 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--color-background);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.site-footer__links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__copyright {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 242, 0.25);
  font-size: 0.8rem;
  opacity: 0.85;
}

.site-footer__top {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.35rem 0;
  color: var(--color-background);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  opacity: 0.85;
}

.site-footer__top:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Small screens */

@media (max-width: 768px) {
  :root {
    --header-height: 4rem;
  }

  /* Menu - links drop down from a toggle button */

  /* Frosted blur on a fixed bar makes scrolling choppy on phones - use solid cream instead */
  .site-header.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--color-background);
  }

  .site-header.menu-open {
    background-color: var(--color-background);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  }

  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.65rem;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: color 0.5s ease;
  }

  .is-scrolled .nav__toggle,
  .menu-open .nav__toggle {
    color: var(--color-text);
  }

  .nav__toggle span {
    display: block;
    height: 1.5px;
    background-color: currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Turn the three lines into a cross while open */
  .menu-open .nav__toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .menu-open .nav__toggle span:nth-child(2) {
    opacity: 0;
  }

  .menu-open .nav__toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .nav__links {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.5rem 1.5rem;
    background-color: var(--color-background);
    box-shadow: 0 8px 16px rgba(54, 69, 79, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  }

  .menu-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__links a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(54, 69, 79, 0.08);
    color: var(--color-text);
    font-size: 1.1rem;
  }

  .nav__links li:last-child a {
    border-bottom: 0;
  }

  .button {
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
  }

  /*
    Pages - every section fills exactly one screen. Sizes below use svh
    (percent of the visible screen height) so content shrinks on shorter
    phones and the "next" arrow always sits at the bottom of the screen.
  */

  .about,
  .services,
  .testimonials,
  .chat {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding: calc(var(--header-height) + 2svh) 1rem 2svh;
  }

  /* Arrows */

  .scroll-arrow {
    bottom: 2svh;
    font-size: clamp(0.9rem, 2.4svh, 1.05rem);
  }

  .scroll-arrow svg {
    width: clamp(2.5rem, 7svh, 3.25rem);
    height: clamp(2.5rem, 7svh, 3.25rem);
  }

  /* In-page arrows sit in the flow, pushed to the bottom of their section */
  .about .scroll-arrow,
  .services .scroll-arrow {
    --arrow-x: 0;
    position: static;
    align-self: center;
    margin-top: auto;
    padding-top: 1svh;
  }

  /* Hero */

  .hero {
    padding-bottom: 7rem;
  }

  /* About - photo and text centred in the space above the arrow */

  .about {
    gap: 2svh;
  }

  .about__photo {
    flex-shrink: 0;
    align-self: center;
    width: clamp(80px, 12svh, 120px);
    margin-top: auto;
  }

  .about__content {
    font-size: clamp(0.78rem, 2svh, 1rem);
    line-height: 1.5;
  }

  .about__content p + p {
    margin-top: 1.4svh;
  }

  .about__greeting {
    margin-bottom: 1.4svh;
    font-size: clamp(1.1rem, 2.8svh, 1.4rem);
    text-align: center;
  }

  /* Services - cards become a swipeable row, with the next card peeking in */

  .services__intro {
    margin-top: auto;
    margin-bottom: 1svh;
  }

  .services__grid {
    display: flex;
    gap: 1rem;
    margin: 0 -1rem;
    padding: 1svh 1rem 1.5svh;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1rem;
    scrollbar-width: none;
  }

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

  .card {
    flex: 0 0 90%;
    aspect-ratio: auto;
    padding: 2svh 1.25rem;
    font-size: clamp(0.78rem, 2svh, 0.95rem);
    scroll-snap-align: start;
  }

  .card h3 {
    font-size: clamp(1.2rem, 3svh, 1.5rem);
  }

  .card__divider {
    margin: 1svh 0;
  }

  .card__intro {
    margin-bottom: 0.5svh;
  }

  .card li {
    padding: 0.5svh 0 0.5svh 1.5rem;
  }

  .services__dots {
    display: flex;
  }

  /* Testimonials - quote centred, call to action at the bottom */

  .testimonials {
    justify-content: flex-start;
    gap: 2svh;
  }

  .testimonials .eyebrow {
    margin-top: auto;
  }

  .testimonial blockquote {
    font-size: clamp(1.1rem, 3svh, 1.5rem);
  }

  .testimonials__cta {
    position: static;
    margin-top: auto;
    padding: 0;
  }

  /* Keep the call to action big - the menu button rule above would shrink it */
  .button--large {
    padding: 1rem 2.25rem;
    font-size: 1.1rem;
  }

  /* Chat - content centred on the last page */

  .chat__title {
    margin-top: auto;
    margin-bottom: 1.5svh;
  }

  .chat__or {
    margin: 2svh 0 1.5svh;
  }

  .chat__panel {
    margin-bottom: auto;
    padding: 2svh 1.25rem;
  }

  .chat__form {
    gap: 1.8svh;
  }

  .form__row {
    grid-template-columns: 1fr;
    gap: 1.8svh;
  }

  /* Inputs keep 16px text so iPhones don't zoom in when tapped */
  .form__field input,
  .form__field textarea {
    padding: 1.1svh 0.9rem;
  }

  .chat__form .button {
    align-self: stretch;
  }
}

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

  .scroll-arrow {
    animation: none;
  }

  .testimonial {
    transition: none;
  }

  .button--large:hover {
    transform: none;
  }
}