/* ==========================================================================
   Strategic Bloom styles
   Mobile first: base styles are for phones, media queries add wider layouts.
   ========================================================================== */

/* Brand colors and fonts. Change a value here and it updates everywhere. */
:root {
  --forest: #152C1A;
  --night-forest: #0F2013;
  --forest-2: #1D3A23;
  --forest-3: #2B4C31;
  --gold: #C87C2C;
  --gold-soft: #E0A55E;
  --cream: #F0E4C6;
  --paper: #F8F2E3;
  --moss-gray: #4A5B4C;
  --sand: #C7BEA5;

  --font-headline: "Bricolage Grotesque", system-ui, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
}

/* Make width and padding add up the way you expect. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Base text */
/* The hero's gold glow lives on the page background, behind both the
   header and the hero, so there's no seam where they meet. A fixed size
   (42rem) and position (11rem down) keep it in the same spot as before. */
body {
  margin: 0;
  background-color: var(--night-forest);
  background-image: radial-gradient(
    circle 42rem at 85% 11rem,
    color-mix(in srgb, var(--gold) 28%, transparent),
    transparent
  );
  background-repeat: no-repeat;
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Headlines */
h1,
h2,
h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

/* Big, heavy, condensed hero headline.
   clamp(smallest, preferred, largest): grows with the screen width.
   Letter spacing stays slightly positive on purpose: tighter values made
   some letters' edges land almost on top of each other (like t and h),
   which Chrome draws as a thin dark line between them. */
h1 {
  font-size: clamp(4rem, 13vw, 10rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.92;
  letter-spacing: 0.005em;
}

/* Soft serif italic accent on "by design." */
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

h2 {
  font-size: 2.5rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.375rem;
}

p {
  margin: 0 0 1em;
}

/* Small all-caps label above a section heading. Sand reads on every
   dark section (6.7:1 on Forest 2, 9.2:1 on Night Forest). */
.eyebrow {
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.75em;
}

/* Large 01, 02, 03 at the top of each service petal. */
.service-number {
  display: block;
  font-family: var(--font-headline);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.25em;
}

/* Links */
a {
  color: var(--cream);
  text-underline-offset: 0.2em;
}

/* Visible focus ring for keyboard users. Gold Soft shows on every
   dark section (5.8:1 on Forest 2, 7.9:1 on Night Forest). */
:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

/* Phones: logo on the first row, links on the row below. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem;
  color: var(--cream);
}

/* Horizontal logo: 44px bloom nudged 1px down to sit on the letters'
   visual middle, tight gap, name in condensed Bricolage like the headlines. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--cream);
  text-decoration: none;
}

.logo-mark {
  width: 2.75rem;
  height: 2.75rem;
  transform: translateY(1px);
}

.logo-text {
  font-family: var(--font-headline);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.site-header ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A little vertical padding makes each link at least 24px tall to tap. */
.site-header nav a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--cream);
  text-decoration: none;
}

.site-header nav a:hover {
  color: var(--gold-soft);
  text-decoration: underline;
}

/* ---------- Buttons ---------- */

/* Shared pill shape for links and buttons that look like buttons. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

/* Gold fill with Night Forest text (5.2:1). */
.button-primary {
  background-color: var(--gold);
  color: var(--night-forest);
}

.button-primary:hover {
  background-color: var(--gold-soft);
}

/* Thin Cream outline, for dark backgrounds. */
.button-secondary {
  background-color: transparent;
  border-color: var(--cream);
  color: var(--cream);
}

.button-secondary:hover {
  background-color: var(--cream);
  color: var(--forest);
}

/* ---------- Hero ---------- */

/* See-through, like the header, so the page's gold glow (on body)
   shows behind both with no seam between them. */
.hero {
  position: relative;
  padding: 3.5rem 1rem 7rem;
  color: var(--cream);
}

.hero h1 {
  margin-bottom: 0.4em;
}

.hero .accent {
  color: var(--gold-soft);
}

.hero p {
  max-width: 34rem;
  margin-bottom: 2rem;
  font-size: 1.25rem;
  color: var(--sand);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

/* Hero entrance on page load: "Growth," rises in, then "by design.",
   then the pitch and buttons. Pure CSS, so it needs no JavaScript and
   can't flash. Skipped entirely when the visitor prefers less motion.
   inline-block lets the two headline words move on their own.
   "backwards" holds the hidden start during each delay, then lets go
   completely once the animation ends, so nothing lingers afterwards. */
.hero-word,
.hero h1 .accent {
  display: inline-block;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.35em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-word,
  .hero h1 .accent,
  .hero p,
  .hero-buttons {
    animation: rise-in 450ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }

  .hero h1 .accent { animation-delay: 150ms; }
  .hero p { animation-delay: 300ms; }
  .hero-buttons { animation-delay: 420ms; }
}

/* Soft curved edge where the hero meets the light Services section.
   It's a Paper-colored wave sitting on the bottom of the hero. */
.hero-edge {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3rem;
  fill: var(--forest-2);
}

/* ---------- Services ---------- */

/* Each service is a petal of the bloom: a leaf shape in one of the
   logo's three petal colors. Phones: petals stacked in one column. */
.services {
  padding: 3rem 1rem 4rem;
  /* Forest 2, one step lighter than the hero, with two soft gold glows
     kept low so the top still meets the hero's wave without a seam. */
  background-color: var(--forest-2);
  background-image:
    radial-gradient(
      circle at 8% 45%,
      color-mix(in srgb, var(--gold) 18%, transparent),
      transparent 40%
    ),
    radial-gradient(
      circle at 95% 80%,
      color-mix(in srgb, var(--gold) 14%, transparent),
      transparent 40%
    );
  color: var(--cream);
}

.services-intro {
  margin-bottom: 2.5rem;
}

.services-intro > p {
  max-width: 34rem;
  margin: 0;
  font-size: 1.25rem;
  color: var(--sand);
}

/* Leaf shape: two opposite corners fully rounded, the other two tight.
   border-radius order is top-left, top-right, bottom-right, bottom-left. */
.service {
  padding: 2.25rem 2rem 2.5rem;
  border-radius: 5rem 0.75rem 5rem 0.75rem;
  margin-bottom: 1.25rem;
}

/* Every other petal turns the other way. */
.service:nth-of-type(even) {
  border-radius: 0.75rem 5rem 0.75rem 5rem;
}

/* Petal colors, matching the logo. Night Forest on Gold is 5.2:1;
   Forest on Gold Soft is 6.9:1 and on Cream 11.8:1. */
.service:nth-of-type(1) {
  background-color: var(--gold);
  color: var(--night-forest);
}

.service:nth-of-type(2) {
  background-color: var(--gold-soft);
  color: var(--forest);
}

.service:nth-of-type(3) {
  background-color: var(--cream);
  color: var(--forest);
}

/* Petal unfurl: each petal starts slightly turned, smaller, and lower,
   then swings into place from its own corner as it scrolls into view.
   Only applies when script.js has added "motion-ok" to the page. */
.service {
  --turn: -6deg;
  --pivot: left bottom;
}

.service:nth-of-type(even) {
  --turn: 6deg;
  --pivot: right bottom;
}

.motion-ok .service {
  opacity: 0;
  transform: translateY(24px) rotate(var(--turn)) scale(0.92);
  transform-origin: var(--pivot);
  transition:
    opacity 400ms ease-out,
    transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ok .service.is-visible {
  opacity: 1;
  transform: none;
}

/* Stem: only on wider screens, where the petals leave open space beside
   them. On phones the petals fill the width, so the stem is hidden. */
.stem {
  display: none;
}

/* Reveals the stem from the top down by shrinking a clip from the bottom. */
@keyframes grow-stem {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* A turned petal pokes past the screen edge for a moment.
   clip hides that, so the page never scrolls sideways mid-animation. */
.services {
  overflow-x: clip;
}

.service h3 {
  margin-bottom: 0.25em;
}

.service p {
  font-size: 1.25rem;
}

.service ul {
  margin: 0;
  padding-left: 1.2em;
}

.service li + li {
  margin-top: 0.35em;
}

/* ---------- Proof ---------- */

/* The one bold color break mid-page: a full-width Gold Soft band.
   Forest on Gold Soft is 6.9:1, comfortably readable. */
.proof {
  padding: 3.5rem 1rem;
  background-color: var(--gold-soft);
  color: var(--forest);
}

.proof p {
  max-width: 50rem;
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Cairn: a stack of stones, darkest and best fit on top.
   Phones: below the text. Wider screens: beside it. */
.cairn {
  display: block;
  width: 100%;
  max-width: 18rem;
  margin: 2.5rem auto 0;
}

.cairn text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--cream);
}

.stone-4 rect { fill: var(--forest-3); }
.stone-3 rect { fill: var(--forest-2); }
.stone-2 rect { fill: var(--forest); }
.stone-1 rect { fill: var(--night-forest); }

.stone-1 text {
  fill: var(--gold-soft);
}

/* The bloom on top: the best fit "blooms". Cream and Gold read on Gold Soft. */
.cairn-bloom .petal-a { fill: var(--cream); }
.cairn-bloom .petal-b { fill: var(--gold); }
.cairn-bloom .petal-c { fill: var(--paper); }
.cairn-bloom circle { fill: var(--forest); }

/* Cairn motion: when the stack scrolls into view, stones drop in one at a
   time from the bottom, then the bloom opens. Only applies when script.js
   has added "motion-ok" to the page. */
.motion-ok .cairn .stone {
  opacity: 0;
  transform: translateY(-48px);
  transition:
    opacity 400ms ease-out,
    transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ok .cairn .cairn-bloom {
  opacity: 0;
  transform: scale(0.3) rotate(-40deg);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 300ms ease-out,
    transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ok .cairn.is-visible .stone,
.motion-ok .cairn.is-visible .cairn-bloom {
  opacity: 1;
  transform: none;
}

/* Bottom stone first, bloom last. These need ".motion-ok" too, or the
   "transition" lines above (which reset the delay to 0) would win. */
.motion-ok .cairn .stone-3 { transition-delay: 120ms; }
.motion-ok .cairn .stone-2 { transition-delay: 240ms; }
.motion-ok .cairn .stone-1 { transition-delay: 360ms; }
.motion-ok .cairn .cairn-bloom { transition-delay: 560ms; }

/* ---------- About ---------- */

/* Phones: heading, then the big statement, then the bio and pills.
   Forest 2, like Services, with Cream headings and Sand body text. */
.about {
  padding: 4rem 1rem 4.5rem;
  background-color: var(--forest-2);
  color: var(--cream);
}

/* Gold Soft accent, matching "by design." in the hero (5.8:1). */
.about .accent {
  color: var(--gold-soft);
}

.about-intro h2 {
  margin-bottom: 1rem;
}

/* How we work, set large like a headline, ending in the Fraunces accent. */
.about-statement {
  max-width: 44rem;
  margin-bottom: 2.5rem;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.about-bio p {
  max-width: 28rem;
  margin-bottom: 1rem;
  color: var(--sand);
}

/* Background as soft tags. Filled, not outlined, so they don't look
   like buttons. Cream on Forest 3 is 7.6:1. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pills li {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background-color: var(--forest-3);
  color: var(--cream);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Pill pop-in: when the list scrolls into view, the pills pop up one
   after another. Only applies when script.js has added "motion-ok". */
.motion-ok .pills li {
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  transition:
    opacity 300ms ease-out,
    transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ok .pills.is-visible li {
  opacity: 1;
  transform: none;
}

.motion-ok .pills li:nth-child(2) { transition-delay: 90ms; }
.motion-ok .pills li:nth-child(3) { transition-delay: 180ms; }
.motion-ok .pills li:nth-child(4) { transition-delay: 270ms; }

/* ---------- Contact ---------- */

/* Dark forest again, mirroring the hero: the page ends where it began.
   The gold glow sits bottom left this time, opposite the hero's. */
.contact {
  position: relative;
  padding: 6rem 1rem 4.5rem;
  background-color: var(--night-forest);
  background-image: radial-gradient(
    circle at 10% 90%,
    color-mix(in srgb, var(--gold) 24%, transparent),
    transparent 55%
  );
  color: var(--cream);
}

/* Forest 2 wave at the top, flowing down from About. */
.contact-edge {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 3rem;
  fill: var(--forest-2);
}

.contact p {
  max-width: 34rem;
  color: var(--sand);
}

/* The email address, set large like a headline. */
.contact .contact-email {
  max-width: none;
  margin: 1.5rem 0 1.75rem;
  font-family: var(--font-headline);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(2.25rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-soft);
  overflow-wrap: anywhere;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

/* The full bloom, in the logo's colors. Only on wide screens, where it
   fills the space beside the text. On narrower screens it would sit right
   above the footer's stacked logo, showing the bloom twice in a row. */
.contact-bloom {
  display: none;
  height: auto;
  overflow: visible;
}

.bloom-petal-1 path { fill: var(--gold); }
.bloom-petal-2 path { fill: var(--gold-soft); }
.bloom-petal-3 path { fill: var(--cream); }
.bloom-center { fill: var(--forest); }

/* Bloom opening: when Contact scrolls into view, each petal swings out
   from the center, one after another. view-box + 50% 50% puts the pivot
   at the center dot. Only applies when script.js has added "motion-ok". */
.motion-ok .contact-bloom .bloom-petal,
.motion-ok .contact-bloom .bloom-center {
  opacity: 0;
  transform: scale(0.2) rotate(-60deg);
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition:
    opacity 300ms ease-out,
    transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ok .contact-bloom.is-visible .bloom-petal,
.motion-ok .contact-bloom.is-visible .bloom-center {
  opacity: 1;
  transform: none;
}

.motion-ok .contact-bloom .bloom-petal-2 { transition-delay: 120ms; }
.motion-ok .contact-bloom .bloom-petal-3 { transition-delay: 240ms; }
.motion-ok .contact-bloom .bloom-center { transition-delay: 360ms; }

/* ---------- Footer ---------- */

/* Same dark green as Contact, so they read as one closing block.
   Phones: logo, then links, then the small print, stacked. */
.site-footer {
  padding: 2.5rem 1rem 2rem;
  background-color: var(--night-forest);
  color: var(--sand);
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-bottom: 2rem;
}

/* Stacked logo in the footer: a bigger bloom above the name. */
.site-footer .logo {
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer .logo-mark {
  width: 4rem;
  height: 4rem;
  transform: none;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer nav a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--cream);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--gold-soft);
  text-decoration: underline;
}

/* Copyright, place, and tagline in small print under a thin line. */
.footer-legal {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  font-size: 0.875rem;
}

/* Hidden on screen but still read aloud by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden off screen until a keyboard user tabs to it.
   Styled like the gold button so it stands out on the dark header. */
.skip-link {
  position: absolute;
  z-index: 10;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background-color: var(--gold);
  color: var(--night-forest);
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* Respect people who ask their device for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Larger screens: more room around the header, bigger headlines. */
@media (min-width: 64em) {
  .site-header {
    padding: 1.25rem 2.5rem;
  }

  .hero {
    padding: 7rem 2.5rem 11rem;
  }

  .hero-edge {
    height: 6rem;
  }

  /* Keep content from stretching too wide on big screens:
     at least 2.5rem of side space, more once the screen passes 72rem. */
  .services {
    padding: 5rem max(2.5rem, calc((100% - 72rem) / 2)) 6rem;
  }

  /* Heading row: big "What we do" on the left, the intro on the right,
     lined up along their bottom edges. */
  .services-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    column-gap: 4rem;
    margin-bottom: 4.5rem;
  }

  .services-intro h2 {
    margin: 0;
    font-size: clamp(4rem, 7vw, 6.5rem);
    line-height: 0.95;
  }

  .services-intro > p {
    font-size: 1.375rem;
  }

  /* Zig-zag petals: each about 60% wide, stepping left, right, left
     down the page like petals on a stem. */
  .service {
    width: 62%;
    padding: 3.5rem 4rem 4rem;
    border-radius: 10rem 1.25rem 10rem 1.25rem;
    margin-bottom: 2rem;
  }

  .service:nth-of-type(even) {
    margin-left: auto;
    border-radius: 1.25rem 10rem 1.25rem 10rem;
  }

  /* The stem fills the petals area and sits behind the petals.
     non-scaling-stroke keeps the line 3px even though the SVG stretches. */
  .petals {
    position: relative;
  }

  .stem {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .stem path {
    fill: none;
    stroke: color-mix(in srgb, var(--gold-soft) 55%, transparent);
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .service {
    position: relative;
    z-index: 1;
  }

  /* Stem growth, tied to scrolling: the stem is revealed from the top
     down, keeping its tip near the middle of the screen as you scroll.
     Scroll back up and it shrinks. Only in browsers that support
     scroll-driven animations, and only when motion is allowed.
     Everywhere else the stem simply shows fully drawn. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .stem {
        animation: grow-stem linear both;
        animation-timeline: view();
        animation-range: cover 20% cover 80%;
      }
    }
  }

  .service-number {
    font-size: 6rem;
    line-height: 0.9;
  }

  .service h3 {
    font-size: 1.75rem;
  }

  .proof {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 4rem;
    padding: 6rem max(2.5rem, calc((100% - 72rem) / 2));
  }

  .cairn {
    width: 20rem;
    max-width: none;
    margin: 0;
  }

  /* Heading across the top; the statement on the left, bio and pills
     on the right, lined up along their bottom edges. */
  .about {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
    column-gap: 5rem;
    padding: 7rem max(2.5rem, calc((100% - 72rem) / 2));
  }

  .about-intro {
    grid-column: 1 / -1;
    margin-bottom: 2.5rem;
  }

  .about-statement {
    margin-bottom: 0;
  }

  /* Two columns: the text on the left, the bloom filling the right. */
  .contact {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 4rem;
    padding: 10rem max(2.5rem, calc((100% - 72rem) / 2)) 7rem;
  }

  .contact > * {
    grid-column: 1;
  }

  /* Slightly smaller email here so it shares the row with the bloom. */
  .contact .contact-email {
    font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  }

  .contact .contact-bloom {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 5;
    width: clamp(12rem, 22vw, 20rem);
    margin: 0;
  }

  .contact-edge {
    height: 6rem;
  }

  .site-footer {
    padding: 3rem max(2.5rem, calc((100% - 72rem) / 2)) 2.5rem;
  }

  .hero p {
    font-size: 1.375rem;
  }

  h2 {
    font-size: 3.5rem;
  }
}