@charset "utf-8";

/* =============================================================================
   Frolic Farm
   The comp is a single 1920 x 6106 artboard, so the desktop layout is expressed
   in "comp pixels": --px resolves to 1/1920th of the viewport up to 1920px wide,
   which keeps every measurement proportional to the original design. Below the
   --bp-mobile breakpoint the layout re-flows to a single column.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

/* height:auto keeps the width/height attributes as an aspect-ratio hint rather
   than a fixed size, so every image scales instead of stretching. */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input {
  font: inherit;
  color: inherit;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  /* Sampled straight off the comp. */
  --sage: #b6b7a9;
  --sage-soft: #bfc1b3;
  --cream: #efefe5;
  --white: #fff;
  --gold: #b68e56;
  --ink: #23231f;

  --font-display: "Cormorant Garamond", Cormorant, Garamond, "Hoefler Text",
    "Times New Roman", serif;
  --font-caps: "Cormorant SC", "Cormorant Garamond", Cormorant, Garamond,
    "Times New Roman", serif;

  /* 1 comp pixel. Caps at 1px so the design stops growing past 1920px wide. */
  --px: min(0.05208333vw, 1px);

  /* Horizontal insets, as a share of the 1920px artboard. */
  --plate-inset: 1.3542%; /* 26/1920  — cream arch plate      */
  --about-inset: 2.4479%; /* 47/1920  — sage About plinth     */
}

/* --- base ----------------------------------------------------------------- */

body {
  background: var(--cream);
  color: var(--sage);
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.3;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.site {
  max-width: 1920px;
  margin-inline: auto;
  overflow: hidden;
}

/* Reverse of the splash page's fade-out: a full-bleed plate in the same cream,
   opaque on first paint, dissolving away to reveal the page. Driven by a CSS
   animation rather than script so it always clears, and it never takes pointer
   events, so the page is live underneath from the first frame. */
.reveal-veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--cream);
  pointer-events: none;
  /* `both` fill holds it solid through the delay, so the page opens on a beat
     of flat cream before dissolving. No script involved — it cannot get stuck. */
  animation: reveal-veil-out 0.5s ease 0.2s both;
}

@keyframes reveal-veil-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-veil {
    display: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  padding: 0.6em 1.2em;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-caps);
  letter-spacing: 0.08em;
  transform: translate(-50%, -120%);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

:where(a, button, input):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* =============================================================================
   Announcement bar — comp y 0–80
   ========================================================================== */

.announce {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 24);
  height: calc(var(--px) * 80);
  padding-inline: calc(var(--px) * 275) calc(var(--px) * 118);
  background: var(--sage);
}

.announce__social,
.announce__tools {
  display: flex;
  padding: 0;
  list-style: none;
  align-items: center;
  gap: calc(var(--px) * 6);
}

.announce__social img,
.announce__tools img,
.footer-brand__social img {
  width: calc(var(--px) * var(--w));
  height: auto;
}

.announce__tools {
  gap: calc(var(--px) * 18);
}

.announce__msg {
  flex: 1;
  text-align: center;
  color: var(--cream);
  font-size: calc(var(--px) * 32);
  letter-spacing: 0.005em;
}

.announce__msg a {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: from-font;
}

/* =============================================================================
   Primary navigation — comp y 80–213, with the butterfly tab spilling to 292
   ========================================================================== */

.masthead {
  position: relative;
  z-index: 3;
  background: var(--cream);
}

.masthead__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--px) * 133);
  padding-inline: calc(var(--px) * 162) calc(var(--px) * 100);
}

.masthead__link {
  font-size: calc(var(--px) * 84);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.03em;
  transition: opacity 0.25s ease;
}

.masthead__link:hover {
  opacity: 0.62;
}

/* Reserves the width the butterfly tab occupies so the links sit either side. */
.masthead__gap {
  flex: 0 0 calc(var(--px) * 446);
}

.masthead__tab {
  position: absolute;
  top: calc(var(--px) * 133);
  left: 0;
  width: 100%;
  height: calc(var(--px) * 78);
  pointer-events: none;
}

.masthead__mark {
  position: absolute;
  top: calc(var(--px) * 42);
  left: 50%;
  width: calc(var(--px) * 177);
  transform: translateX(-50%);
}

.masthead__mark img {
  width: 100%;
}

.masthead__toggle {
  display: none;
}

/* =============================================================================
   Hero — the wordmark and tagline are part of the photograph in the comp
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--px) * -101); /* slide the photo under the nav bar */
}

.hero__img {
  width: 100%;
}

/* Real, focusable link sitting exactly over the "Shop now" set into the photo. */
.hero__cta {
  position: absolute;
  left: calc(var(--px) * 227);
  top: calc(var(--px) * 923);
  width: calc(var(--px) * 152);
  height: calc(var(--px) * 52);
  text-indent: -200vw;
  overflow: hidden;
}

/* =============================================================================
   Shared plinth panel — a flat plate whose top and bottom edges are the
   traced ogee silhouettes from the comp
   ========================================================================== */

.panel {
  position: relative;
}

.panel__plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.panel__plate img {
  width: 100%;
  height: auto;
  flex: none;
}

.panel__plate-mid {
  flex: 1;
}

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

/* --- arch panel (cream plate on the sage field) --------------------------- */

/* The comp runs a flat 60px sage rail between the hero and the cream plate. */
.panel--arches {
  padding-top: calc(var(--px) * 60);
  background: var(--sage);
}

.panel--arches .panel__plate {
  top: calc(var(--px) * 60);
}

.panel--arches .panel__plate-mid {
  margin-inline: var(--plate-inset);
  background: var(--cream);
}

.panel--arches .panel__content {
  padding: calc(var(--px) * 68) 0 calc(var(--px) * 74);
}

/* The comp sets the arch row 13px right of the artboard centre. */
.arches {
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 88);
  padding-left: calc(var(--px) * 25);
}

.arch {
  display: block;
  width: calc(var(--px) * 426);
  text-align: center;
}

.arch__frame {
  display: block;
  border: calc(var(--px) * 3) solid var(--gold);
  border-radius: calc(var(--px) * 213) calc(var(--px) * 213) 0 0;
  overflow: hidden;
}

.arch__frame img {
  width: 100%;
  aspect-ratio: 420 / 626;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.arch:hover .arch__frame img {
  transform: scale(1.04);
}

.arch__label {
  display: block;
  margin-top: calc(var(--px) * 5);
  font-size: calc(var(--px) * 108);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

/* =============================================================================
   Promises band — comp y 2450–2779
   ========================================================================== */

.promises {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: calc(var(--px) * 55) calc(var(--px) * 205) calc(var(--px) * 89);
  background: var(--sage);
}

.promise {
  text-align: center;
}

.promise img {
  margin-inline: auto;
  width: calc(var(--px) * var(--w));
  height: auto;
}

.promise__label {
  margin-top: calc(var(--px) * 2);
  color: var(--white);
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 26);
  letter-spacing: 0.05em;
}

/* =============================================================================
   Newest collection — sage tab hanging into the cream field
   ========================================================================== */

.collection {
  position: relative;
  background: var(--cream);
  padding-bottom: calc(var(--px) * 172);
}

.collection__tab {
  position: relative;
  width: 100%;
  height: calc(var(--px) * 143);
}

.collection__tab img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.collection__tab h2 {
  position: absolute;
  inset: 0;
  padding-bottom: calc(var(--px) * 74);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 56);
  font-weight: 400;
  letter-spacing: 0.045em;
}

.collection__title {
  margin: 0 0 calc(var(--px) * 35);
  text-align: center;
  font-size: calc(var(--px) * 143);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

/* --- product cards -------------------------------------------------------- */

/* Comp tops: 3248 / 3100 / 3264, measured from the row's own top edge. */
.cards {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--px) * 39);
}

.card--first {
  margin-top: calc(var(--px) * 148);
}

.card--last {
  margin-top: calc(var(--px) * 164);
}

.card {
  display: block;
  background: var(--sage);
  box-shadow: calc(var(--px) * 6) calc(var(--px) * 8) calc(var(--px) * 22)
    rgb(35 35 31 / 0.16);
}

.card img {
  width: 100%;
}

.card__caption {
  text-align: center;
  color: var(--white);
}

.card__name {
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

.card__price {
  font-weight: 300;
}

/* Small outer cards — comp 500 x 667 with a 442 x 547 photo. The caption rides
   up onto the sage plate that notches into the photo's bottom edge. */
.card--sm {
  width: calc(var(--px) * 500);
  padding: calc(var(--px) * 26) calc(var(--px) * 29) 0;
}

.card--sm .card__caption {
  display: block;
  margin-top: calc(var(--px) * -50);
  padding-bottom: calc(var(--px) * 40);
}

.card--sm .card__name {
  display: block;
  font-size: calc(var(--px) * 56);
}

.card--sm .card__price {
  display: block;
  margin-top: calc(var(--px) * 3);
  font-size: calc(var(--px) * 34);
}

/* Hero card — the caption sits on a cartouche laid over the photo. */
.card--lg {
  position: relative;
  width: calc(var(--px) * 758);
  padding: calc(var(--px) * 28) calc(var(--px) * 24) 0;
}

.card--lg .card__caption {
  position: absolute;
  color: var(--cream);
  left: calc(var(--px) * 121);
  top: calc(var(--px) * 846);
  width: calc(var(--px) * 519);
  height: calc(var(--px) * 205);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card--lg .card__name {
  font-size: calc(var(--px) * 92);
}

.card--lg .card__price {
  margin-top: 0;
  font-size: calc(var(--px) * 46);
}

/* =============================================================================
   About — sage plinth on the cream field
   ========================================================================== */

.panel--about {
  background: var(--cream);
}

.panel--about .panel__plate-mid {
  margin-inline: var(--about-inset);
  background: var(--sage);
}

.panel--about .panel__content {
  display: flex;
  align-items: flex-start;
  padding: calc(var(--px) * 134) 0 calc(var(--px) * 146);
}

.about__col {
  position: relative;
  flex: 0 0 calc(var(--px) * 745);
  padding-left: calc(var(--px) * 108);
  color: var(--white);
}

.about__divider {
  width: calc(var(--px) * 549);
  margin-left: calc(var(--px) * -15);
}

.about__title {
  margin-top: calc(var(--px) * -21);
  font-size: calc(var(--px) * 114);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
}

.about__body {
  margin-top: calc(var(--px) * 30);
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 32);
  line-height: 1.375;
  letter-spacing: 0.015em;
}

.about__more {
  display: inline-block;
  margin-top: calc(var(--px) * 18);
  font-size: calc(var(--px) * 46);
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

.about__flourish {
  position: absolute;
  left: calc(var(--px) * 372);
  top: calc(var(--px) * 515);
  width: calc(var(--px) * 372);
  pointer-events: none;
}

.about__figure {
  flex: 1;
  margin-top: calc(var(--px) * 17);
}

.about__figure img {
  width: calc(var(--px) * 1044);
  max-width: 100%;
}

/* =============================================================================
   Footer — comp y 5567–6106
   ========================================================================== */

.site-footer {
  margin-top: calc(var(--px) * 261);
  background: var(--sage-soft);
  color: var(--white);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  /* flex-basis, not min-content, owns the column rhythm */
}

.site-footer__inner > * {
  min-width: 0;
}

.site-footer__inner {
  padding: calc(var(--px) * 67) 0 0 calc(var(--px) * 117);
}

.footer-col {
  flex: 0 0 calc(var(--px) * 311);
}

.footer-col--narrow {
  flex-basis: calc(var(--px) * 168);
}

.footer-col h2 {
  font-size: calc(var(--px) * 70);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--cream);
  opacity: 0.66;
}

.footer-col ul {
  margin-top: 0;
  padding: 0;
  list-style: none;
}

.footer-col li + li {
  margin-top: calc(var(--px) * 9);
}

.footer-col a {
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 35);
  letter-spacing: 0.01em;
  transition: opacity 0.25s ease;
}

.footer-col a:hover {
  opacity: 0.7;
}

.footer-brand {
  flex: 1;
  position: relative;
  margin-top: calc(var(--px) * -52);
}

.footer-brand__mark {
  display: block;
  width: calc(var(--px) * 564);
}

.footer-brand__social {
  position: absolute;
  padding: 0;
  list-style: none;
  left: calc(var(--px) * 213);
  top: calc(var(--px) * 180);
  display: flex;
  gap: calc(var(--px) * 6);
}

.footer-news {
  flex: 0 0 calc(var(--px) * 526);
  margin: calc(var(--px) * 7) calc(var(--px) * 138) 0 0;
}

.footer-news h2 {
  font-size: calc(var(--px) * 64);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--cream);
  opacity: 0.72;
}

.footer-news__form {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 21);
  padding: calc(var(--px) * 14) calc(var(--px) * 22);
  border: calc(var(--px) * 3) solid var(--cream);
}

.footer-news__label {
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 38);
  white-space: nowrap;
}

.footer-news__form input {
  flex: 1;
  min-width: 0;
  padding-bottom: calc(var(--px) * 4);
  background: none;
  border: 0;
  border-bottom: calc(var(--px) * 3) solid var(--cream);
  color: var(--white);
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 32);
}

.footer-news__form input::placeholder {
  color: transparent;
}

/* The comp shows no submit control, so the button only surfaces on focus. */
.footer-news__form button {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  background: none;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
}

.footer-news__form button:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: 0 calc(var(--px) * 6);
  overflow: visible;
  clip-path: none;
  color: var(--white);
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 30);
  letter-spacing: 0.06em;
}

.site-footer__florals {
  width: 100%;
  margin-top: calc(var(--px) * 18);
}

/* =============================================================================
   Interior pages
   ========================================================================== */

/* Top padding clears the butterfly tab that overhangs the masthead. */
.pagehead {
  padding: calc(var(--px) * 175) calc(var(--px) * 138) calc(var(--px) * 130);
  text-align: center;
  background: var(--sage);
  color: var(--white);
}

.pagehead__eyebrow {
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 30);
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.pagehead h1 {
  margin-top: calc(var(--px) * 14);
  font-size: calc(var(--px) * 126);
  font-style: italic;
  font-weight: 300;
  line-height: 1.05;
}

.pagehead p {
  max-width: calc(var(--px) * 900);
  margin: calc(var(--px) * 26) auto 0;
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 34);
  line-height: 1.45;
}

.page-body {
  padding: calc(var(--px) * 150) calc(var(--px) * 138) calc(var(--px) * 190);
  background: var(--cream);
}

.page-body__inner {
  max-width: calc(var(--px) * 1200);
  margin-inline: auto;
  text-align: center;
}

.page-figure {
  max-width: calc(var(--px) * 460);
  margin: 0 auto calc(var(--px) * 56);
}

.page-figure img {
  width: 100%;
  height: auto;
}

.page-figure--arch img {
  border: calc(var(--px) * 3) solid var(--gold);
  border-radius: calc(var(--px) * 233) calc(var(--px) * 233) 0 0;
}

.page-body h2 {
  font-size: calc(var(--px) * 92);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
}

.page-body p {
  margin-top: calc(var(--px) * 30);
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 34);
  line-height: 1.5;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--px) * 22);
  margin-top: calc(var(--px) * 52);
}

.btn {
  display: inline-block;
  padding: calc(var(--px) * 20) calc(var(--px) * 46);
  border: calc(var(--px) * 2) solid var(--sage);
  font-family: var(--font-caps);
  font-size: calc(var(--px) * 32);
  letter-spacing: 0.1em;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn:hover {
  background: var(--sage);
  color: var(--cream);
}

.btn--solid {
  background: var(--sage);
  color: var(--cream);
}

.btn--solid:hover {
  background: transparent;
  color: var(--sage);
}

/* =============================================================================
   Mobile — below 860px the comp's proportional grid stops being legible
   ========================================================================== */

@media (max-width: 860px) {
  :root {
    --px: 1px;
  }

  body {
    font-size: 16px;
  }

  .announce {
    height: auto;
    gap: 14px;
    padding: 10px 18px;
    flex-wrap: wrap;
  }

  .announce__social img,
  .announce__tools img {
    width: calc(var(--w) * 0.38px);
  }

  .announce__msg {
    order: 3;
    flex-basis: 100%;
    font-size: 15px;
  }

  .masthead__nav {
    height: 62px;
    padding-inline: 18px;
    justify-content: center;
  }

  .masthead__toggle {
    display: block;
    position: absolute;
    left: 14px;
    top: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .masthead__toggle span,
  .masthead__toggle span::before,
  .masthead__toggle span::after {
    display: block;
    height: 1px;
    background: var(--sage);
    content: "";
  }

  .masthead__toggle span::before {
    transform: translateY(-9px);
  }

  .masthead__toggle span::after {
    transform: translateY(8px);
  }

  .masthead__link {
    display: none;
    font-size: 30px;
  }

  .masthead__gap {
    flex: 0 0 auto;
  }

  .masthead__tab,
  .hero__cta {
    display: none;
  }

  .masthead__mark {
    top: 50%;
    width: 62px;
    transform: translate(-50%, -50%);
  }

  .masthead[data-open="true"] .masthead__nav {
    flex-wrap: wrap;
    height: auto;
    padding-block: 14px 22px;
    gap: 10px 26px;
  }

  .masthead[data-open="true"] .masthead__link {
    display: block;
    flex-basis: 100%;
    text-align: center;
  }

  .hero {
    margin-top: 0;
  }

  .panel--arches .panel__content,
  .panel--about .panel__content {
    padding: 46px 20px 56px;
  }

  .panel--arches .panel__plate-mid,
  .panel--about .panel__plate-mid {
    margin-inline: 12px;
  }

  .arches {
    padding-left: 0;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .arch {
    width: min(320px, 82vw);
  }

  .arch__frame {
    border-radius: min(160px, 41vw) min(160px, 41vw) 0 0;
  }

  .arch__label {
    font-size: 44px;
  }

  .promises {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 26px;
    padding: 42px 20px 46px;
  }

  .promise {
    flex: 0 0 26%;
  }

  .promise img {
    width: calc(var(--w) * 0.42px);
    height: auto;
  }

  .promise__label {
    font-size: 13px;
  }

  .collection {
    padding-bottom: 60px;
  }

  .collection__tab {
    height: 62px;
  }

  .collection__tab h2 {
    padding-bottom: 30px;
    font-size: 22px;
  }

  .collection__title {
    margin: 18px 0 26px;
    font-size: 56px;
  }

  .cards {
    flex-direction: column;
    align-items: center;
    gap: 34px;
  }

  .card--first,
  .card--last {
    margin-top: 0;
  }

  .card--sm,
  .card--lg {
    width: min(340px, 84vw);
  }

  .card--sm {
    padding: 16px 20px 0;
  }

  .card--lg {
    padding: 18px 16px 44px;
  }

  .card--sm .card__caption {
    margin-top: -30px;
    padding-bottom: 20px;
  }

  .card--sm .card__name {
    font-size: 34px;
  }

  .card--sm .card__price {
    font-size: 22px;
  }

  .card--lg .card__caption {
    left: 12%;
    top: auto;
    bottom: 22px;
    width: 76%;
    height: 90px;
  }

  .card--lg .card__name {
    font-size: 34px;
  }

  .card--lg .card__price {
    font-size: 24px;
  }

  .panel--about .panel__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about__col {
    flex: none;
    width: 100%;
    padding-left: 0;
  }

  .about__divider {
    width: min(300px, 74vw);
    margin: 0 auto;
  }

  .about__title {
    margin-top: 0;
    font-size: 62px;
    letter-spacing: 0.04em;
  }

  .about__body {
    max-width: none;
    margin-top: 22px;
    font-size: 17px;
  }

  /* Let the copy re-wrap instead of holding the comp's line breaks. */
  .about__body br {
    display: none;
  }

  .about__more {
    margin-top: 18px;
    font-size: 24px;
  }

  .about__flourish {
    display: none;
  }

  .about__figure {
    width: 100%;
    margin-top: 34px;
  }

  .site-footer {
    margin-top: 56px;
  }

  .site-footer__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 40px;
    padding: 40px 20px 0;
    text-align: center;
  }

  .footer-col {
    flex: 0 0 40%;
  }

  .footer-col h2 {
    font-size: 32px;
  }

  .footer-col a {
    font-size: 19px;
  }

  .footer-brand {
    flex-basis: 100%;
    order: -1;
    margin-top: 0;
  }

  .footer-brand__mark {
    width: min(300px, 74vw);
  }

  .footer-brand__social {
    position: static;
    justify-content: center;
    margin-top: -14px;
    transform: none;
  }

  .footer-brand__social img {
    width: calc(var(--w) * 0.48px);
  }

  .footer-news {
    flex: 0 0 100%;
    margin-right: 0;
  }

  .footer-news h2 {
    font-size: 34px;
  }

  .footer-news__form {
    padding: 10px 14px;
  }

  .footer-news__label {
    font-size: 20px;
  }

  .footer-news__form input {
    font-size: 18px;
  }

  .footer-news__form button:focus-visible {
    font-size: 15px;
  }

  .site-footer__florals {
    margin-top: 34px;
  }

  .pagehead {
    padding: 54px 20px 48px;
  }

  .pagehead__eyebrow {
    font-size: 13px;
  }

  .pagehead h1 {
    font-size: 58px;
  }

  .pagehead p,
  .page-body p {
    font-size: 17px;
  }

  .page-body {
    padding: 54px 20px 70px;
  }

  .page-body h2 {
    font-size: 42px;
  }

  .btn {
    font-size: 15px;
    padding: 12px 26px;
  }
}

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