/* Global styles, copied from the design. */
html, body { margin: 0; padding: 0; }
html { background: #E3E4E2; }
body {
  background: #F4F4F1;
  color: #1A1D1B;
  font-family: "Geist", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #1A1D1B; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(26,29,27,.4); }
a:hover { color: #1A1D1B; text-decoration-color: #1A1D1B; }
@keyframes bpMenu { from { opacity: 0; } to { opacity: 1; } }
@keyframes bpChar { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes bpFade { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; }
}

/* The design uses <button> for navigation. These links copy the browser's
   default button styles so they look the same. */
.btn {
  display: inline-block;
  font: 400 13.333px system-ui, sans-serif;
  font: -webkit-small-control;
  line-height: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

/* Hover states from the design's style-hover attributes. */
.h-nav:hover { color: #1A1D1B !important; }
.h-menu:hover { background: rgba(26,29,27,.07) !important; }
.h-light:hover { background: #FFFFFF !important; }
.h-more:hover { color: #1A1D1B !important; border-bottom-color: #1A1D1B !important; }
.h-darklink:hover { color: #F4F4F1 !important; border-bottom-color: #F4F4F1 !important; }
.h-dark:hover { background: #131614 !important; }
.h-outline:hover { border-color: #1A1D1B !important; background: rgba(26,29,27,.05) !important; }

/* Header. site.js sets these values while you scroll. */
.bp-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(26,29,27,0.000);
  box-shadow: none;
}
.bp-nav { display: flex; }
.bp-toggle { display: none; }
.bp-menu { display: none; }

/* Hero. site.js sets exact values for the window width. */
.bp-hero-pos { object-position: 50% 63%; }
.bp-hero-text {
  padding: calc(clamp(160px, calc(160px + (100vw - 390px) * 0.019782), 180px) + 55px) 26px clamp(60px,10vh,120px);
  align-items: center;
  text-align: center;
}
.bp-hero-title-row { justify-content: center; }
.bp-hero-title { font-size: min(62px, calc(48.8px + (100vw - 390px) * 0.013056)); }
.bp-eyebrow-narrow { display: none; }

/* Parallax. Where the browser supports scroll-linked animations, CSS moves
   the hero layers at 0.504 times the scroll, the same rate as site.js. The
   browser then moves them in step with the scroll itself, so they don't lag
   behind on iPhones. Other browsers use site.js. */
@keyframes bpParallax {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 604.8px, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .bp-css-parallax .bp-parallax {
    animation: bpParallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 1200px;
  }
}

@media (min-width: 1401px) {
  .bp-hero-pos { object-position: 50% 59%; }
  .bp-hero-text { padding-top: calc(min(195px, calc(180px + (100vw - 1401px) * 0.02994)) + 55px); }
}
@media (min-width: 1902px) {
  .bp-hero-pos { object-position: 50% 55%; }
}
@media (max-width: 390px) {
  .bp-hero-title { font-size: max(38px, 12.5vw); }
}
@media (max-width: 759.98px) {
  .bp-header {
    background: rgba(246,246,243,0.58);
    -webkit-backdrop-filter: saturate(150%) blur(16.0px);
    backdrop-filter: saturate(150%) blur(16.0px);
    border-bottom-color: rgba(26,29,27,0.100);
    box-shadow: 0 1px 0 rgba(255,255,255,0.50) inset, 0 8px 24px rgba(26,29,27,0.050);
  }
  .bp-nav { display: none; }
  .bp-toggle { display: flex; }
  .bp-menu.is-open { display: flex; }
  .bp-hero-text { align-items: flex-start; text-align: left; padding-top: calc(clamp(160px, calc(160px + (100vw - 390px) * 0.019782), 180px) + 40px); }
  .bp-hero-title-row { justify-content: flex-start; }
  .bp-eyebrow-wide { display: none; }
  .bp-eyebrow-narrow { display: block; }
  /* Phones show Corinne's photo across the full width. */
  .bp-intro-photo { flex: 1 1 100% !important; }
}

/* Book a conversation: buttons stacked on the left, email address beside
   the top one. On phones everything stacks, with the address last. */
.bp-contact {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-areas: "send address" "li .";
  gap: 14px 28px;
  align-items: center;
}
.bp-contact-send { grid-area: send; }
.bp-contact-address { grid-area: address; min-width: 0; overflow-wrap: anywhere; }
.bp-contact-li { grid-area: li; display: grid; }
.bp-contact-li > a { justify-content: center; }
@media (max-width: 759.98px) {
  .bp-contact { grid-template-columns: 1fr; grid-template-areas: "send" "li" "address"; }
}

/* Home tagline. Without JavaScript, or with reduced motion, both lines show,
   one under the other. site.js adds .bp-rotating to stack them in one spot
   and fade between them. The spot is as big as the longer line, so nothing
   below it moves. */
.bp-swap-line { display: block; }
.bp-rotating .bp-swap { display: grid; }
.bp-rotating .bp-swap-line {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.6em);
  filter: blur(6px);
  transition: opacity .6s cubic-bezier(.22,.9,.28,1), transform .6s cubic-bezier(.22,.9,.28,1), filter .6s cubic-bezier(.22,.9,.28,1);
}
.bp-rotating .bp-swap-line.is-in { opacity: 1; transform: none; filter: blur(0); }
.bp-rotating .bp-swap-line.is-out { opacity: 0; transform: translateY(-.6em); filter: blur(6px); }

/* Dots under the tagline. The active dot stretches into a bar that fills
   over the 4 seconds each line stays up. */
.bp-dots { display: flex; justify-content: center; margin: 10px 0 -10px; }
.bp-eyebrow-narrow .bp-dots { justify-content: flex-start; margin-left: -4px; }
.bp-dot {
  appearance: none;
  border: 0;
  background: none;
  padding: 10px 4px;
  cursor: pointer;
}
.bp-dot-bar {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(26,29,27,.22);
  overflow: hidden;
  transition: width .45s cubic-bezier(.65,0,.35,1), background .2s ease;
}
.bp-dot:hover .bp-dot-bar { background: rgba(26,29,27,.4); }
.bp-dot-fill {
  display: block;
  height: 100%;
  background: #2A2F2B;
  transform: scaleX(0);
  transform-origin: left;
}
.bp-dot.is-active .bp-dot-bar { width: 28px; }
.bp-dot.is-active .bp-dot-fill { animation: bpDotFill 4s linear forwards; }
@keyframes bpDotFill { to { transform: scaleX(1); } }

/* "Find out more" prompt at the bottom of the first screen. It sits above
   the fold even though the hero is taller than the window. */
.bp-scroll-cue {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  bottom: calc(max(0px, min(112vh, 1060px) - 100vh) + clamp(22px, 4vh, 40px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 22px;
  border-radius: 999px;
  background: rgba(246,246,243,.72);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 24px rgba(19,22,20,.18);
  color: #1A1D1B;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease;
  animation: bpFade .6s cubic-bezier(.22,.9,.28,1) both;
}
@supports (height: 100svh) {
  .bp-scroll-cue { bottom: calc(max(0px, min(112vh, 1060px) - 100svh) + clamp(22px, 4vh, 40px)); }
}
.bp-scroll-cue:hover { color: #1A1D1B; background: rgba(246,246,243,.9); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 28px rgba(19,22,20,.24); }
.bp-scroll-cue-ring {
  display: flex;
  animation: bpNudge 2.4s ease-in-out 1.2s infinite;
}
.bp-scroll-cue:focus-visible { outline: 2px solid #F4F4F1; outline-offset: 4px; }
@keyframes bpNudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .bp-scroll-cue, .bp-scroll-cue-ring { animation: none; }
}