/*
 * Healing Earth Design: photo-led sections on a sage ground, moss ink for
 * every call to action, a coral bloom for small marks only.
 *
 * Plain CSS, served as written (no build): custom properties for the design
 * tokens, cascade layers for order, native nesting. Breakpoints: 40rem (sm),
 * 48rem (md), 64rem (lg).
 */
@layer reset, tokens, base, layout, components, sections, pages;

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/healing/work-sans-39bfcb06.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/healing/raleway-98f07eea.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/assets/healing/playfair-display-ba34ac7d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset {
  *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: inherit; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; background: transparent; }
  button { cursor: pointer; }
  dialog { max-width: none; max-height: none; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    /* primary: moss green, sampled from the garden photography. 700 is the CTA fill. */
    --primary-50: oklch(97.2% 0.012 140);
    --primary-100: oklch(93.6% 0.024 140);
    --primary-200: oklch(87.5% 0.045 140);
    --primary-300: oklch(79% 0.07 141);
    --primary-400: oklch(68% 0.09 142);
    --primary-500: oklch(57% 0.095 143);
    --primary-600: oklch(48.5% 0.085 144);
    --primary-700: oklch(41% 0.072 146);
    --primary-800: oklch(34% 0.058 148);
    --primary-900: oklch(28% 0.045 150);
    --primary-950: oklch(20% 0.032 152);

    /* base: neutrals leaning toward the moss, so they read as sage, not grey */
    --base-50: oklch(98.3% 0.006 120);
    --base-100: oklch(95.4% 0.011 125);
    --base-200: oklch(90% 0.014 128);
    --base-300: oklch(80.5% 0.016 130);
    --base-400: oklch(66% 0.016 135);
    --base-500: oklch(55.5% 0.016 138);
    --base-600: oklch(48% 0.016 140);
    --base-700: oklch(41.5% 0.016 142);
    --base-800: oklch(35% 0.016 145);
    --base-900: oklch(27.5% 0.018 148);
    --base-950: oklch(21% 0.018 150);

    /* bloom: the coral of the hero's geraniums; deep keeps 4.5:1 behind white text */
    --bloom: oklch(64% 0.17 25);
    --bloom-deep: oklch(50% 0.15 28);
    --error: oklch(50.5% 0.213 27.5);

    --font-sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-label: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-card: 0 24px 60px -36px var(--primary-900);
    --container: 74rem;
    --gutter: 1rem;
  }
}

@layer base {
  html {
    font-family: var(--font-sans);
    line-height: 1.65;
    color: var(--base-900);
    background: var(--base-50);
    color-scheme: light;
    scroll-behavior: smooth;
  }

  body { min-height: 100vh; }
  *, ::before, ::after { border-color: var(--base-200); }
  h1, h2, h3 { text-wrap: balance; }
  :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

  .icon { width: 1em; height: 1em; flex-shrink: 0; }
  .muted { color: var(--base-600); }
  .small { font-size: 0.875rem; line-height: 1.25rem; }
  .centered { text-align: center; }
  .bloom { color: var(--bloom); }

  .lead {
    margin-top: 1.25rem;
    max-width: 40rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .h1, .h2 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.025em; }
  .h1 { font-size: 2.25rem; line-height: 1.08; }
  .h2 { font-size: 1.875rem; line-height: 1.12; }
  .h3 { font-family: var(--font-label); font-size: 1.125rem; font-weight: 600; line-height: 1.375; }

  @media (width >= 48rem) {
    .h1 { font-size: 3.75rem; }
    .h2 { font-size: 3rem; }
    .h3 { font-size: 1.25rem; }
  }

  /* a small tracked label, styled after a nursery plant tag */
  .eyebrow {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1rem;
    text-transform: uppercase;
    color: var(--primary-600);

    @media (width >= 48rem) { font-size: 0.875rem; line-height: 1.25rem; }

    &.eyebrow--light { color: var(--primary-100); }
    &.bloom { color: var(--bloom); }
  }

  .rich-text > * + * { margin-top: 1em; }
}

@layer layout {
  .page { min-height: 100lvh; }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow { max-width: 60rem; }
  .container--story { max-width: 72rem; }

  .section {
    padding-block: 4rem;
    scroll-margin-top: 5rem;

    @media (width >= 48rem) { padding-block: 7rem; }
  }

  .section--muted { background: var(--base-100); }
  .section--tint { background: var(--primary-50); }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2rem;
  }

  .actions--below { margin-top: 2.5rem; }
  .actions--center { justify-content: center; }
  .actions--tight { flex-shrink: 0; gap: 0.75rem; margin-top: 0; }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .section-head--spaced {
    margin-bottom: 3rem;

    @media (width >= 48rem) { margin-bottom: 4rem; }
  }

  .section-head__intro { max-width: 40rem; }
  .section-head__title { margin-top: 0.75rem; }
  .section-head__title--narrow { max-width: 20ch; }

  .card {
    min-width: 0;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--base-50);
    color: var(--base-900);
  }

  .card--form {
    border: 1px solid var(--base-200);
    box-shadow: var(--shadow-card);

    @media (width >= 48rem) { padding: 2.5rem; }
  }

  .rule {
    height: 1px;
    margin-top: 3.5rem;
    background: var(--base-300);
    transform-origin: left center;

    @media (width >= 48rem) { margin-top: 5rem; }
  }
}

@layer components {
  /* Buttons: primary (the one action we want), secondary (light, over photos), outline, ghost. */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-family: var(--font-label);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.025em;
    transition: background-color 200ms, color 200ms, box-shadow 200ms, scale 300ms var(--ease);

    &:active { scale: 0.97; }
    &:disabled { pointer-events: none; opacity: 0.7; }
  }

  .button__arrow {
    width: 1.4em;
    height: 1.4em;
    transition: translate 200ms;

    .button:hover & { translate: 0.25rem 0; }
  }

  .button--primary {
    background: var(--primary-700);
    color: var(--base-50);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.15), 0 6px 18px -8px var(--primary-900);

    &:hover { background: var(--primary-800); }
    &:focus-visible { outline-color: var(--primary-400); }
  }

  .button--secondary {
    background: var(--base-50);
    color: var(--primary-900);

    &:hover { background: var(--primary-100); }
    &:focus-visible { outline-color: var(--primary-300); }
  }

  .button--outline {
    border: 1.5px solid var(--primary-700);
    color: var(--primary-800);

    &:hover { background: var(--primary-700); color: var(--base-50); }
    &:focus-visible { outline-color: var(--primary-300); }
  }

  .button--ghost {
    padding-inline: 0;
    border-radius: 0;
    color: var(--primary-800);
    text-decoration: underline 1px;
    text-underline-offset: 6px;

    &:hover { text-decoration-thickness: 2px; }
  }

  .button--wide { width: 100%; }

  .button--fit {
    width: 100%;

    @media (width >= 40rem) { width: fit-content; }
  }

  /* An underlined link beside a button over a photo, and its plain-ground sibling. */
  .photo-link, .text-link {
    font-family: var(--font-label);
    text-decoration: underline 1px;
    text-underline-offset: 6px;
    transition: text-decoration-color 200ms;
  }

  .photo-link {
    font-weight: 500;
    color: var(--base-50);
    text-decoration-color: color-mix(in oklab, var(--base-50) 50%, transparent);

    &:hover { text-decoration-color: var(--base-50); }
  }

  .text-link { font-weight: 600; color: var(--primary-800); }

  .more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-family: var(--font-label);
    font-weight: 600;
    color: var(--primary-800);

    .icon { width: 1.25rem; height: 1.25rem; transition: translate 200ms; }
    a:hover & .icon { translate: 0.25rem 0; }
  }

  .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-label);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: opacity 200ms;

    &:hover { opacity: 0.7; }
  }

  .logo {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* The nav: fixed over the page. Over a photo header it starts white; once the page scrolls (.is-scrolled) it turns solid and the announcement folds away. */
  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    display: flex;
    flex-direction: column;
    color: var(--base-900);
    transition: background-color 300ms, color 300ms;
    view-transition-name: nav;

    &.nav--over-photo:not(.is-scrolled) { color: white; }

    &.is-scrolled {
      background: color-mix(in oklch, var(--base-50) 92%, transparent);
      backdrop-filter: blur(10px);
      box-shadow: 0 1px 0 var(--base-200);
    }
  }

  .nav__bar {
    padding-block: 0.5rem;
    transition: padding 300ms;

    .is-scrolled & { padding-block: 0; }
  }

  .nav__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 4rem;

    .logo { margin-right: auto; }
  }

  .nav__menu {
    display: none;

    ul { display: flex; align-items: center; padding-inline: 1rem; }
    .nav-link { height: 2.5rem; }

    @media (width >= 48rem) { display: block; }
    @media (width >= 64rem) { ul { gap: 1rem; } }
  }

  .nav__cta {
    display: none;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;

    @media (width >= 48rem) { display: inline-flex; }
    @media (width >= 64rem) { margin-left: 1rem; }
  }

  .nav__burger {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;

    .icon { width: 2rem; height: 2rem; }

    @media (width >= 48rem) { display: none; }
  }

  .announcement {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 300ms ease;

    > div { overflow: hidden; }
    .is-scrolled & { grid-template-rows: 0fr; }
  }

  /* On a phone the link's label takes a row of its own, under the text. */
  .announcement__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.75rem;

    @media (width >= 40rem) { flex-direction: row; }
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    line-height: 1.375;
    text-align: center;
    color: var(--base-50);
    background: var(--bloom-deep);
  }

  .announcement__label {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-label);
    font-weight: 600;
    text-decoration: underline 1px;
    text-underline-offset: 4px;

    .icon { transition: translate 200ms; }
    .announcement__link:hover & .icon { translate: 0.25rem 0; }
  }

  /* The small-screen menu: a native <dialog> drawer from the right. */
  .mobile-menu {
    inset: 0 0 0 auto;
    width: 18rem;
    height: 100dvh;
    margin: 0;
    padding: 0.5rem 1rem;
    overflow-x: hidden;
    font-size: 1.25rem;
    color: var(--base-900);
    background: var(--base-50);
    translate: 100% 0;
    transition: translate 300ms var(--ease), display 300ms allow-discrete, overlay 300ms allow-discrete;

    &[open] {
      translate: 0 0;

      @starting-style { translate: 100% 0; }
    }

    &::backdrop {
      background: rgb(0 0 0 / 0);
      transition: background-color 300ms, display 300ms allow-discrete, overlay 300ms allow-discrete;
    }

    &[open]::backdrop {
      background: rgb(0 0 0 / 0.4);

      @starting-style { background: rgb(0 0 0 / 0); }
    }

    nav { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--base-200); }
    .nav-link { padding-block: 0.5rem; font-size: 1.25rem; }
    .button { margin-top: 0.5rem; }
  }

  .mobile-menu__top {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0;

    button { padding: 0.5rem; }
    .icon { width: 2rem; height: 2rem; }
  }

  /* A booking bar for small screens, shown between the header and the contact form. */
  .mobile-cta {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--base-200);
    background: color-mix(in oklab, var(--base-50) 95%, transparent);
    backdrop-filter: blur(8px);
    opacity: 0;
    translate: 0 120%;
    transition: translate 450ms var(--ease), opacity 450ms var(--ease);

    &.is-visible { opacity: 1; translate: 0 0; }

    @media (width >= 48rem) { display: none; }
  }

  /* Forms */
  .contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
  .contact-form--compact { gap: 1rem; }

  .contact-form__fields {
    display: grid;
    gap: 1.25rem;

    @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .field--wide {
    @media (width >= 40rem) { grid-column: span 2; }
  }

  .field__label {
    font-family: var(--font-label);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--base-800);
  }

  .field__optional { font-weight: 400; color: var(--base-500); }

  .field__input {
    display: block;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--base-300);
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--base-900);
    background-color: var(--base-50);
    transition: border-color 200ms, box-shadow 200ms;

    &::placeholder { color: var(--base-400); opacity: 1; }

    &:focus, &:focus-visible {
      border-color: var(--primary-600);
      outline: none;
      box-shadow: 0 0 0 1px var(--primary-600);
    }
  }

  select.field__input {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  textarea.field__input { resize: vertical; }

  .field__error { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--error); }

  .contact-form__submit {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    @media (width >= 40rem) {
      .contact-form:not(.contact-form--compact) & { flex-direction: row; align-items: center; gap: 1.25rem; }
    }
  }

  /* Turnstile, as wide as the form (data-size="flexible" fills its box). */
  .cf-turnstile { width: 100%; }

  .contact-form__status { font-weight: 500; color: var(--primary-800); }

  /* Markdown and rich text from the CMS */
  .prose {
    line-height: 1.65;
    color: color-mix(in oklab, var(--base-900) 85%, transparent);

    p:not(li p) { margin-top: 0.75rem; }
    :is(h1, h2, h3, h4, h5, h6) { margin: 0.5rem 0 1rem; font-family: var(--font-serif); font-weight: 500; color: var(--base-900); }
    :not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 2.5rem; }
    h1 { font-size: 1.875rem; line-height: 1.2; }
    h2 { font-size: 1.5rem; line-height: 1.33; }
    h3 { font-size: 1.25rem; line-height: 1.4; }
    h4 { font-size: 1.125rem; }
    a { color: var(--primary-700); text-decoration: underline; transition: color 200ms; &:hover { color: var(--primary-800); } }
    strong { font-weight: 700; color: var(--base-900); }
    em { font-style: italic; color: var(--base-900); }
    blockquote { padding-left: 1rem; border-left: 4px solid var(--primary-700); font-style: italic; font-weight: 500; }
    :is(img, video, iframe) { width: 100%; height: auto; margin-block: 1rem; border-radius: 0.375rem; }
    :is(ul, ol) { margin: 1rem 0 2rem 1.5rem; list-style-position: outside; > li + li { margin-top: 0.5rem; } }
    ul { list-style-type: disc; }
    ol { list-style-type: decimal; ::marker { color: color-mix(in oklab, var(--base-900) 60%, transparent); } }
    li { padding-left: 0.5rem; overflow-wrap: anywhere; }
    hr { margin-block: 2rem; border-bottom: 1px solid var(--base-300); }
    code { padding-inline: 0.125rem; border: 2px solid var(--base-200); border-radius: 0.375rem; background: var(--base-100); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    table { width: 100%; margin-bottom: 1rem; border-spacing: 0; font-size: 0.875rem; }
    :is(th, td) { padding: 0.5rem 1rem; border-bottom: 1px solid var(--base-200); vertical-align: baseline; text-align: start; }

    @media (width >= 48rem) {
      h1 { font-size: 2.25rem; }
      h2 { font-size: 1.875rem; }
      h3 { font-size: 1.5rem; }
      h4 { font-size: 1.25rem; }
    }
  }
}

@layer sections {
  /* Photo headers: the home hero and inner pages' page_header, under the transparent nav. */
  .hero, .photo-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .photo-header { background: var(--primary-950); }

  .photo-header__media {
    position: absolute;
    inset: 0;
    z-index: -1;

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

  /* a light top scrim keeps the white nav legible; the main one is darkest bottom-left, where the copy sits */
  .photo-header__scrim {
    --scrim-mid: 55%;
    --scrim-end: 15%;

    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to bottom, color-mix(in oklab, var(--primary-950) 45%, transparent), transparent) top / 100% 8rem no-repeat,
      linear-gradient(to top right, color-mix(in oklab, var(--primary-950) 85%, transparent), color-mix(in oklab, var(--primary-950) var(--scrim-mid), transparent), color-mix(in oklab, var(--primary-950) var(--scrim-end), transparent));

    .hero & { --scrim-mid: 50%; --scrim-end: 10%; }
  }

  .photo-header__body {
    padding-block: 11rem 3.5rem;
    color: var(--base-50);

    @media (width >= 48rem) { padding-block: 13rem 5rem; }
  }

  .photo-header__copy { max-width: 44rem; }

  .photo-header__title {
    margin-top: 1rem;
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.025em;

    @media (width >= 48rem) { font-size: 3.75rem; }
  }

  .photo-header__intro {
    max-width: 36rem;
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--base-100);

    .hero & { max-width: 34rem; }

    @media (width >= 48rem) { font-size: 1.25rem; }
  }

  .hero__grid {
    display: grid;
    gap: 3rem;
    padding-block: 11rem 3.5rem;

    @media (width >= 48rem) { padding-block: 12rem 5rem; }

    @media (width >= 64rem) {
      grid-template-columns: minmax(0, 1fr) 27rem;
      align-items: center;
      gap: 4rem;
    }
  }

  .hero__copy { min-width: 0; max-width: 40rem; color: var(--base-50); }

  .hero__title {
    margin-top: 1rem;
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.025em;

    @media (width >= 48rem) { font-size: 4.25rem; }
  }

  /* on small screens the form sits below the fold, so the main action jumps to it */
  .hero__jump {
    @media (width >= 64rem) { display: none; }
  }

  .hero__quote {
    max-width: 30rem;
    margin-top: 2.5rem;
    padding-left: 1.25rem;
    border-left: 2px solid color-mix(in oklab, var(--base-50) 30%, transparent);

    blockquote { font-family: var(--font-serif); font-size: 1.125rem; font-style: italic; line-height: 1.375; color: var(--base-50); }
    figcaption { margin-top: 0.75rem; font-family: var(--font-label); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--primary-100); }
  }

  .hero__form {
    scroll-margin-top: 6rem;
    box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.6);

    @media (width >= 48rem) { padding: 2rem; }

    > .small { margin-top: 0.5rem; }
    .contact-form { margin-top: 1.5rem; }
  }

  .hero__form-title {
    margin-top: 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;

    @media (width >= 48rem) { font-size: 1.875rem; }
  }

  .page-title {
    padding-top: 10rem;
    text-align: center;

    @media (width >= 48rem) { padding-top: 11rem; }

    h1 { max-width: 72rem; margin-inline: auto; }
    .lead { margin: 1.5rem auto 0; }
  }

  .page-title__statement { text-transform: uppercase; text-wrap: pretty; }

  .proof {
    color: var(--primary-50);
    background: var(--primary-900);
  }

  .proof__list {
    display: grid;
    gap: 1rem 2rem;
    padding-block: 1.75rem;

    li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; line-height: 1.375; }

    @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 2rem; }
  }

  .proof__leaf { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--primary-300); }

  .statement {
    display: grid;
    gap: 1.5rem;

    @media (width >= 64rem) { grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; }
  }

  .statement__eyebrow { padding-top: 0.75rem; }

  .statement__text {
    max-width: 22ch;

    @media (width >= 48rem) { max-width: 26ch; }
  }

  .themes {
    display: grid;
    gap: 2.5rem;
    padding-top: 2.5rem;

    @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .theme {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    p { max-width: 22rem; @media (width >= 48rem) { font-size: 1.125rem; line-height: 1.75rem; } }
  }

  .theme__title {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-style: italic;
    line-height: 1;
    color: var(--primary-700);

    @media (width >= 48rem) { font-size: 3rem; }
  }

  /* Case studies */
  .featured-studies {
    display: grid;
    gap: 3rem;
    margin-top: 3rem;

    @media (width >= 48rem) { margin-top: 4rem; }
    @media (width >= 64rem) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
  }

  .featured-studies__rest { display: grid; align-content: center; gap: 3rem; }

  .portfolio-card {
    display: grid;
    align-content: start;
    gap: 1.25rem;

    p.muted { margin-top: 0.75rem; text-wrap: pretty; }
  }

  .portfolio-card--horizontal {
    @media (width >= 40rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 1.75rem; }
  }

  .portfolio-card__photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--base-200);

    img { width: 100%; height: 100%; object-fit: cover; transition: scale 700ms ease-out; }
    .portfolio-card:hover & img { scale: 1.04; }

    .portfolio-card--featured & {
      aspect-ratio: 4 / 5;

      @media (width >= 64rem) { aspect-ratio: 5 / 6; }
    }
  }

  .portfolio-card__text { min-width: 0; }

  .portfolio-card__title {
    margin-top: 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--base-900);

    .portfolio-card--featured & {
      font-size: 1.875rem;

      @media (width >= 48rem) { font-size: 2.25rem; }
    }
  }

  .portfolio-grid {
    display: grid;
    gap: 3rem 2rem;
    padding-top: 2.5rem;

    @media (width >= 48rem) { padding-top: 3.5rem; }
  }

  .portfolio-grid--2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .portfolio-grid--3 { @media (width >= 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .grid-heading { margin-top: 4rem; }

  /* Testimonials */
  .testimonial {
    display: grid;
    align-items: center;
    gap: 2.5rem;
    margin-top: 1.5rem;

    @media (width >= 64rem) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 5rem; }

    > div:first-child { min-width: 0; }
  }

  .testimonial__quote {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--base-900);

    @media (width >= 48rem) { font-size: 2.4rem; line-height: 1.25; }
  }

  .testimonial__name {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    font-family: var(--font-label);
    font-weight: 600;
    color: var(--base-800);
  }

  .testimonial__rule { width: 2.5rem; height: 1px; background: var(--primary-600); }

  .testimonial__photo {
    max-height: 34rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--base-200);

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

  .testimonials {
    display: grid;
    gap: 2.5rem;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--base-200);

    @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
  }

  .testimonial-small {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1.25rem;

    @media (width >= 40rem) { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; }

    > div:last-child { min-width: 0; }
    blockquote { text-wrap: pretty; color: var(--base-800); @media (width >= 48rem) { font-size: 1.125rem; line-height: 1.75rem; } }
    figcaption { margin-top: 1rem; font-family: var(--font-label); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--base-700); }
  }

  .testimonial-small__photo {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--base-200);

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

  .testimonials__cta { margin-top: 4rem; }

  .callout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1rem;

    @media (width >= 48rem) { flex-direction: row; align-items: center; padding: 2.5rem; }

    > .button { flex-shrink: 0; }
    .muted { margin-top: 0.5rem; }
  }

  .callout--tint { background: var(--primary-100); }
  .callout--bloom { background: color-mix(in oklab, var(--bloom) 15%, transparent); }
  .callout--dark { color: var(--primary-50); background: var(--primary-900); .muted { color: var(--primary-200); } }

  .callout__heading {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.33;

    :is(.callout--tint, .callout--bloom) & { color: var(--primary-950); }

    @media (width >= 48rem) { font-size: 1.875rem; }
  }

  .callout__body { max-width: 36rem; }

  .band {
    padding-bottom: 4rem;

    @media (width >= 48rem) { padding-bottom: 6rem; }
  }

  /* Services: five lay out 3 + 2 on large screens; an odd last card spans the row */
  .service-cards {
    display: grid;
    gap: 1.25rem;

    > li { min-width: 0; }

    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      &:is(.service-cards--1, .service-cards--3, .service-cards--5, .service-cards--7, .service-cards--9) > li:last-child { grid-column: span 2; }
    }

    @media (width >= 64rem) {
      &:is(.service-cards--3, .service-cards--6, .service-cards--9) { grid-template-columns: repeat(3, minmax(0, 1fr)); > li:last-child { grid-column: auto; } }
      &.service-cards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); > li { grid-column: span 2; } > li:nth-child(n + 4) { grid-column: span 3; } }
    }
  }

  .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--base-200);
    border-radius: 1rem;
    background: var(--base-50);
    transition: border-color 300ms, box-shadow 300ms;

    &:hover { border-color: var(--primary-300); box-shadow: 0 20px 40px -28px var(--primary-900); }

    @media (width >= 48rem) { padding: 1.75rem; }

    p.muted { margin-top: 0.75rem; text-wrap: pretty; }
    .more-link { margin-top: auto; padding-top: 1.5rem; }
  }

  .service-card__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    color: var(--primary-700);
    background: var(--primary-100);

    .icon { width: 1.5rem; height: 1.5rem; }
  }

  .service-card__title {
    margin-top: 1.25rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--base-900);
  }

  .more-services { margin-top: 2.5rem; }

  /* About */
  .about {
    display: grid;
    align-items: center;
    gap: 3rem;

    @media (width >= 48rem) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    @media (width >= 64rem) { gap: 5rem; }

    .rich-text { margin-top: 1.5rem; max-width: 36rem; }
  }

  .about__photo {
    max-width: 28rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--base-200);

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

    @media (width >= 48rem) { max-width: none; }
  }

  .signoff {
    margin-top: 1.5rem;
    font-family: var(--font-serif);
    font-size: 1.875rem;
    font-style: italic;
    line-height: 2.25rem;
    color: var(--primary-800);
  }

  .story { padding-bottom: 4rem; @media (width >= 48rem) { padding-bottom: 6rem; } }

  .story__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    margin-top: 4rem;

    &:first-child { margin-top: 3rem; }

    @media (width >= 48rem) {
      flex-direction: row;
      margin-top: 6rem;

      &:first-child { margin-top: 5rem; }
      &:nth-child(even) { flex-direction: row-reverse; }
    }
  }

  .story__text {
    .rich-text { margin-top: 1rem; @media (width >= 48rem) { font-size: 1.125rem; line-height: 1.75rem; } }

    @media (width >= 48rem) { width: 50%; }
  }

  .story__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;

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

    @media (width >= 48rem) { width: 50%; }
  }

  .offer-wrap { margin-top: -2rem; @media (width >= 48rem) { margin-top: -2.5rem; } }

  .offer {
    position: relative;
    padding: 1.75rem;
    border-left: 4px solid var(--bloom);
    border-radius: 1rem;
    background: var(--base-50);
    box-shadow: var(--shadow-card);

    @media (width >= 48rem) { padding: 2.25rem; }
  }

  .offer__text {
    max-width: 48rem;
    margin-top: 0.75rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.375;
    color: var(--base-900);

    @media (width >= 48rem) { font-size: 1.875rem; }
  }

  .reasons, .steps {
    display: grid;
    gap: 2.5rem;
    margin-top: 3rem;

    @media (width >= 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .reason {
    padding-top: 1.5rem;
    border-top: 1px solid var(--base-300);

    p { margin-top: 0.75rem; }
  }

  .reason__title { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.25; color: var(--primary-800); }

  .step {
    padding: 1.75rem;
    border: 1px solid var(--base-200);
    border-radius: 1rem;
    background: var(--base-50);

    .h3 { margin-top: 1rem; color: var(--base-900); }
    p.muted { margin-top: 0.5rem; }
  }

  .step__season { font-family: var(--font-serif); font-size: 2.25rem; font-style: italic; line-height: 2.5rem; color: var(--bloom); }

  .pull-quote {
    padding-block: 4rem;
    color: var(--primary-50);
    background: var(--primary-900);

    @media (width >= 48rem) { padding-block: 6rem; }

    blockquote {
      margin-top: 1rem;
      font-family: var(--font-serif);
      font-size: 1.5rem;
      line-height: 1.375;

      @media (width >= 48rem) { font-size: 2.25rem; }
    }

    figcaption { margin-top: 2rem; font-family: var(--font-label); font-weight: 600; color: var(--primary-200); }
  }

  .pull-quote__mark { display: block; font-family: var(--font-serif); font-size: 4.5rem; line-height: 0.5; color: var(--bloom); }

  /* Contact */
  .contact { scroll-margin-top: 4rem; }

  .contact__grid {
    display: grid;
    align-items: start;
    gap: 3rem;

    @media (width >= 64rem) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; }

    > div:first-child { min-width: 0; }
    .h2 { margin-top: 0.75rem; }
    .lead { max-width: 32rem; }
  }

  .contact__highlights {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;

    li { display: flex; align-items: center; gap: 0.75rem; }
    .icon { width: 1.25rem; height: 1.25rem; color: var(--primary-600); }
  }

  .contact__photo {
    display: none;
    aspect-ratio: 4 / 3;
    margin-top: 2.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--base-200);

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

    @media (width >= 64rem) { display: block; }
  }

  .container--prose {
    max-width: 48rem;
    padding-bottom: 4rem;

    .prose {
      margin-top: 2rem;
      font-size: 0.875rem;

      @media (width >= 48rem) { margin-top: 3rem; padding-inline: 2rem; font-size: 1rem; }
    }

    @media (width >= 48rem) { padding-bottom: 6rem; }
  }

  .footer {
    margin-top: 3rem;
    padding-block: 2rem;
    background: color-mix(in oklab, var(--base-100) 40%, transparent);
  }

  .footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;

    @media (width >= 48rem) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  .footer__group {
    display: flex;
    gap: 1rem;

    @media (width >= 48rem) { grid-column: span 2; }
  }

  .footer__group--left { justify-content: flex-end; }

  .footer__logo { display: flex; justify-content: center; text-align: center; }
  .footer__logo--small { padding-block: 0.5rem; @media (width >= 48rem) { display: none; } }
  .footer__logo--wide { display: none; @media (width >= 48rem) { display: flex; } }

  .footer__blurb { max-width: 21rem; margin: 1.5rem auto 0; padding-inline: 1rem; text-align: center; }

  .footer__socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    color: var(--primary-500);

    .icon { width: 1.5rem; height: 1.5rem; transition: opacity 200ms; }
    a:hover .icon { opacity: 0.8; }
  }

  .footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin-block: 1rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
    opacity: 0.8;

    a { text-underline-offset: 4px; &:hover { text-decoration: underline; } }
  }
}

@layer pages {
  /* A service's page */
  .service {
    display: grid;
    gap: 3rem;

    @media (width >= 64rem) { &.service--with-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 5rem; } }
    .prose { min-width: 0; }
  }

  .features {
    display: grid;
    gap: 1.25rem 2.5rem;
    margin-top: 1.5rem;

    @media (width >= 48rem) { .service:not(.service--with-body) & { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    li { display: flex; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--base-200); font-size: 1.125rem; line-height: 1.375; }
    .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--primary-600); }
  }

  /* A case study's page */
  .study-hero {
    position: relative;
    height: 50svh;
    overflow: hidden;

    &::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.3); }
    img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

    @media (width >= 48rem) { height: 70svh; }
  }

  .container--study {
    max-width: 72rem;
    margin-top: 3rem;

    @media (width >= 48rem) { margin-top: 5rem; }
  }

  .study__title { margin-top: 1rem; text-align: center; text-transform: uppercase; }

  .study__location { margin-top: 2.5rem; text-align: center; letter-spacing: 0.1em; color: var(--primary-500); }

  .study__cards {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;

    @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width >= 48rem) { gap: 2rem; margin-top: 4rem; }
  }

  .study-card {
    padding: 1.5rem;
    border-radius: 0.375rem;
    background: var(--base-100);

    @media (width >= 48rem) { padding: 2rem; p { font-size: 1.125rem; line-height: 1.75rem; } }

    p { margin-top: 1rem; text-wrap: pretty; }
    .h3 { text-transform: uppercase; }
  }

  .study-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .icon { width: 1.75rem; height: 1.75rem; color: var(--primary-500); }
  }

  .study__body { max-width: 48rem; margin: 3rem auto 0; }

  .gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 64rem;
    margin: 3rem auto 0;

    @media (width >= 48rem) { gap: 4rem; margin-top: 5rem; }
  }

  .gallery__row {
    display: grid;
    gap: 1.5rem;

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

    @media (width >= 48rem) { gap: 4rem; }
  }

  .gallery__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .container--grid { max-width: 64rem; margin-top: 3rem; @media (width >= 48rem) { margin-top: 4rem; } }
  .study ~ .contact { margin-top: 3rem; }

  .not-found {
    max-width: 36rem;
    padding-top: 9rem;
    text-align: center;

    @media (width >= 48rem) { padding-top: 11rem; }

    p { margin-top: 1rem; }
  }
}

/* Motion (healing/motion.js): the hero copy is held while the entrance is about to run */
.motion-pending [data-hero-item] { opacity: 0; }

/* Page to page: the browser's own cross-document view transition */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}