:root {
  --ink: #101617;
  --green: #243938;
  --green-light: #47605a;
  --rose: #d69791;
  --mauve: #805566;
  --plum: #56313f;
  --ivory: #f1ede8;
  --cream: #f8f5f0;
  --line: #d9d1ca;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font:
    16px/1.6 "DM Sans",
    Arial,
    sans-serif;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  line-height: 1.04;
}
h1 {
  font-size: clamp(3.3rem, 6.3vw, 6.6rem);
  letter-spacing: -0.05em;
}
h2 {
  font-size: clamp(2.5rem, 4.4vw, 4.7rem);
  letter-spacing: -0.04em;
}
h3 {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}
.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 25px 5vw;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.logo {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-decoration: none;
}
.logo span {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.36em;
  margin-top: -3px;
}
.nav {
  align-items: center;
  display: flex;
  gap: 27px;
}
.nav a {
  color: var(--ink);
  font-size: 0.88rem;
  text-decoration: none;
}
.nav-cta {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.menu-button {
  display: none;
}
.hero {
  background: var(--ivory);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 720px;
  padding: 132px 5vw 55px;
  position: relative;
}
.hero-copy {
  align-self: center;
  max-width: 680px;
  padding: 50px 5vw 40px 0;
}
.eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.intro {
  font-size: 1.12rem;
  max-width: 530px;
}
.button-row {
  align-items: center;
  display: flex;
  gap: 25px;
  margin-top: 30px;
}
.button {
  display: inline-block;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 15px 22px;
  text-decoration: none;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
.button-solid {
  background: var(--plum);
  color: white;
}
.button-outline {
  border: 1px solid var(--green);
  color: var(--green);
}
.text-link {
  color: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}
.text-link span {
  font-size: 1.3rem;
  margin-left: 4px;
}
.image-placeholder,
.card-image {
  background-position: center;
  background-size: cover;
}
.hero-image {
  background-image:
    linear-gradient(90deg, rgba(36, 57, 56, 0.04), rgba(36, 57, 56, 0.2)),
    url("https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=1200&q=85");
  min-height: 530px;
}
.photo-note {
  bottom: 20px;
  color: #555;
  font-size: 0.7rem;
  margin: 0;
  position: absolute;
  right: 5vw;
}
.section {
  padding: 115px 8vw;
}
.welcome {
  padding-bottom: 80px;
}
.split-heading {
  display: grid;
  gap: 11vw;
  grid-template-columns: 1fr 1fr;
}
.split-heading p {
  font-size: 1.15rem;
  max-width: 470px;
}
.section-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 45px;
}
.section-heading h2 {
  max-width: 700px;
}
.card-grid {
  display: grid;
  gap: 32px;
}
.two-up {
  grid-template-columns: repeat(2, 1fr);
}
.service-card .card-image {
  height: 380px;
  margin-bottom: 25px;
}
.service-card p,
.experience-grid p {
  max-width: 410px;
}
.service-card a,
.experience-grid a {
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.blush-image {
  background-image: url("https://images.unsplash.com/photo-1531058020387-3be344556be6?auto=format&fit=crop&w=1000&q=85");
}
.plum-image {
  background-image:
    linear-gradient(rgba(86, 49, 63, 0.1), rgba(86, 49, 63, 0.1)),
    url("https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=1000&q=85");
}
.section-green {
  background: var(--green);
  color: #f8f4ee;
}
.light {
  color: #ead6d0;
}
.light-heading {
  align-items: end;
}
.light-heading p {
  max-width: 360px;
}
.experience-grid .card-image {
  height: 330px;
  margin-bottom: 24px;
}
.experience-grid a {
  color: #f0d9d3;
}
.workshop-image {
  background-image: url("assets/workshops/floral-workshop-header.jpeg");
}
.garden-image {
  background-image: url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?auto=format&fit=crop&w=1000&q=85");
}
.experience-note {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.84rem;
  margin: 65px 0 0;
  padding-top: 18px;
}
.events {
  align-items: center;
  display: grid;
  gap: 9vw;
  grid-template-columns: 1fr 1fr;
}
.event-image {
  background-image: url("https://images.unsplash.com/photo-1494336934272-f4742d2d0f7c?auto=format&fit=crop&w=1200&q=85");
  height: 620px;
}
.event-copy p {
  font-size: 1.1rem;
}
.event-copy ul {
  list-style: "✦  ";
  margin: 28px 0 36px;
  padding-left: 20px;
}
.event-copy li {
  margin: 7px 0;
}
.about {
  background: #e1d5d1;
  display: grid;
  gap: 10vw;
  grid-template-columns: 1fr 0.8fr;
}
.about-copy {
  align-self: center;
}
.warm-image {
  background-image: url("https://images.unsplash.com/photo-1487070183336-b863922373d4?auto=format&fit=crop&w=1000&q=85");
  min-height: 510px;
}
.inquire {
  background: var(--ivory);
  display: grid;
  gap: 8vw;
  grid-template-columns: 0.8fr 1.2fr;
}
.inquire > div {
  max-width: 420px;
}
.inquiry-form label {
  display: block;
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 17px;
}
input,
select,
textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #928c86;
  border-radius: 0;
  color: var(--ink);
  display: block;
  font:
    16px "DM Sans",
    Arial,
    sans-serif;
  margin-top: 6px;
  padding: 11px 0;
  width: 100%;
}
select {
  appearance: auto;
}
.form-row {
  display: grid;
  gap: 25px;
  grid-template-columns: 1fr 1fr;
}
.form-message {
  font-size: 0.9rem;
  margin-top: 12px;
}
footer {
  background: var(--plum);
  color: #f7f0eb;
  padding: 48px 8vw;
}
footer .logo {
  color: #f7f0eb;
}
.footer-small {
  font-size: 0.75rem;
  margin: 35px 0 0;
}
@media (max-width: 760px) {
  .site-header {
    padding: 20px 6vw;
  }
  .menu-button {
    background: none;
    border: 0;
    color: var(--ink);
    display: block;
    font: 600 0.78rem "DM Sans";
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .nav {
    background: var(--ivory);
    display: none;
    left: 0;
    padding: 25px 6vw;
    position: absolute;
    top: 70px;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .nav.open {
    display: flex;
  }
  .hero {
    display: block;
    min-height: 0;
    padding: 110px 6vw 45px;
  }
  .hero-copy {
    padding: 25px 0;
  }
  .hero-image {
    min-height: 410px;
  }
  .photo-note {
    display: none;
  }
  .section {
    padding: 78px 6vw;
  }
  .split-heading,
  .two-up,
  .events,
  .about,
  .inquire {
    grid-template-columns: 1fr;
  }
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .events {
    gap: 45px;
  }
  .event-image {
    height: 430px;
  }
  .about {
    gap: 45px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .nav-cta {
    margin-top: 5px;
  }
  .button-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
}
/* Services hover menu and shared gallery grids. */
.nav-dropdown {
  position: relative;
}
.dropdown-menu {
  background: var(--cream);
  box-shadow: 0 12px 30px rgba(38, 54, 52, 0.14);
  display: none;
  min-width: 205px;
  padding: 12px;
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 10;
}
.dropdown-menu a {
  display: block !important;
  padding: 8px 10px;
  white-space: nowrap;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
}
.flower-grid figure {
  margin: 0;
}
.flower-grid figure img {
  display: block;
  height: 220px;
  object-fit: cover;
  width: 100%;
}
.flower-grid figcaption {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  margin-top: 9px;
  text-transform: uppercase;
}
.farewell-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) {
  .nav-dropdown {
    width: 100%;
  }
  .dropdown-menu {
    box-shadow: none;
    position: static;
    padding: 8px 0;
  }
  .dropdown-menu a {
    padding-left: 18px;
  }
  .farewell-grid {
    grid-template-columns: 1fr;
  }
  .flower-grid figure img {
    height: 320px;
  }
}
.logo-image {
  display: flex;
  align-items: center;
}
.logo-image img {
  display: block;
  height: 78px;
  width: 78px;
  object-fit: contain;
}
.inquiry-logo {
  display: block;
  height: 150px;
  margin: 0 0 22px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  width: 150px;
}
@media (max-width: 760px) {
  .logo-image img {
    height: 62px;
    width: 62px;
  }
  .inquiry-logo {
    height: 125px;
    width: 125px;
  }
}
/* About Sonia story photos — reused from the main gallery. */
body:has(.about-hero) .gallery {
  grid-template-columns: 1fr 1fr !important;
}
body:has(.about-hero) .gallery div:nth-child(1) {
  background-image: url("assets/garden/sonia-in-garden.jpeg") !important;
  background-position: center 24% !important;
  min-height: 470px !important;
}
body:has(.about-hero) .gallery div:nth-child(2) {
  background-image: url("assets/garden/summer-blooms.jpg") !important;
  background-position: center !important;
  min-height: 470px !important;
}
body:has(.about-hero) .gallery div:nth-child(3) {
  display: none;
}
@media (max-width: 760px) {
  body:has(.about-hero) .gallery {
    grid-template-columns: 1fr !important;
  }
  body:has(.about-hero) .gallery div:nth-child(1),
  body:has(.about-hero) .gallery div:nth-child(2) {
    min-height: 360px !important;
  }
}
/* Publishing-ready About Sonia story copy. */
body:has(.about-hero) .story-copy p {
  font-size: 0;
}
body:has(.about-hero) .story-copy p::after {
  font-size: 1.05rem;
}
body:has(.about-hero) .story-copy p:nth-child(1)::after {
  content: "Sonia’s love of flowers is rooted in the simple joy of watching a garden grow. What began as a personal passion has blossomed into Sonia B Flowers—a welcoming place where seasonal beauty, creativity, and community come together.";
}
body:has(.about-hero) .story-copy p:nth-child(2)::after {
  content: "From freshly gathered bouquets and thoughtful farewell flowers to celebrations filled with color, Sonia approaches every arrangement with care. Her designs are guided by what is blooming, the feeling behind each occasion, and the belief that flowers can make everyday moments feel meaningful.";
}
body:has(.about-hero) .story-copy p:nth-child(3)::after {
  content: "More than anything, Sonia loves sharing the garden with others. Through flower picking, bouquet bars, workshops, and garden visits, she invites people to slow down, create something beautiful, and enjoy the season together.";
}