/*
  Jacqui Jarosy's website.

  The look is her previous Squarespace site's, rebuilt by hand so the new site looks the same:
  the same fonts, sizes, colours and spacing, and the same changes at the same screen widths.
  Where a number looks odd (17px, 1.6em, 956px), it is the one the old site used.

  Screen widths the layout changes at:
    1044px and below  the menu becomes a menu button (the old site did this in JavaScript, when the
                      menu no longer fitted beside the site name; with these fonts that is below 1045px)
    767px and below   less space around the page
    640px and below   phone layout: columns stack, smaller headings and site name
*/

/* ------------------------------------------------------------------ fonts

  The old site's fonts (Calluna, Proxima Nova and Adobe Garamond) came with Squarespace. These are
  the closest free ones (SIL Open Font License, see fonts/LICENSE.md), kept on the site itself:
    Gentium Book Plus  for Calluna (the words, headings and menu)
    Figtree            for Proxima Nova (the home page's name heading, the form's button)
    EB Garamond        for Adobe Garamond (the words beside the home page's photo; only its regular
                       weight, which the browser makes bold, as the old site's was)
  Each is sized so its words take the room the old font's took (so lines break in the same places),
  and given the old font's line spacing (ascent and descent), so boxes keep their heights.
  The sizes were checked against the old site at every screen width: 98% of the paragraphs break
  their lines in the same places.
  "Gentium Book Plus Caps" is the same font sized for capitals, which in Gentium are narrower than
  Calluna's: the menu, the site name and the buttons (all in capitals) take the same room as before. */
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gentium-book-plus-400-latin-ext.woff2") format("woff2"); size-adjust: 99.80%; ascent-override: 94.19%; descent-override: 25.15%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gentium-book-plus-400-latin.woff2") format("woff2"); size-adjust: 99.80%; ascent-override: 94.19%; descent-override: 25.15%; line-gap-override: 0%; 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: "Gentium Book Plus"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/gentium-book-plus-400-italic-latin-ext.woff2") format("woff2"); size-adjust: 99.80%; ascent-override: 94.29%; descent-override: 24.95%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/gentium-book-plus-400-italic-latin.woff2") format("woff2"); size-adjust: 99.80%; ascent-override: 94.29%; descent-override: 24.95%; line-gap-override: 0%; 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: "Gentium Book Plus"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/gentium-book-plus-700-latin-ext.woff2") format("woff2"); size-adjust: 99.80%; ascent-override: 95.79%; descent-override: 25.45%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/gentium-book-plus-700-latin.woff2") format("woff2"); size-adjust: 99.80%; ascent-override: 95.79%; descent-override: 25.45%; line-gap-override: 0%; 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: "Gentium Book Plus Caps"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gentium-book-plus-400-latin-ext.woff2") format("woff2"); size-adjust: 114.51%; ascent-override: 82.09%; descent-override: 21.92%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus Caps"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gentium-book-plus-400-latin.woff2") format("woff2"); size-adjust: 114.51%; ascent-override: 82.09%; descent-override: 21.92%; line-gap-override: 0%; 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: "Gentium Book Plus Caps"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/gentium-book-plus-700-latin-ext.woff2") format("woff2"); size-adjust: 109.94%; ascent-override: 86.05%; descent-override: 22.92%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus Caps"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/gentium-book-plus-700-latin.woff2") format("woff2"); size-adjust: 109.94%; ascent-override: 86.05%; descent-override: 22.92%; line-gap-override: 0%; 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: "Figtree"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/figtree-300-latin-ext.woff2") format("woff2"); size-adjust: 96.44%; ascent-override: 111.88%; descent-override: 31.52%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/figtree-300-latin.woff2") format("woff2"); size-adjust: 96.44%; ascent-override: 111.88%; descent-override: 31.52%; line-gap-override: 0%; 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: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/figtree-400-latin-ext.woff2") format("woff2"); size-adjust: 96.93%; ascent-override: 111.32%; descent-override: 33.53%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/figtree-400-latin.woff2") format("woff2"); size-adjust: 96.93%; ascent-override: 111.32%; descent-override: 33.53%; line-gap-override: 0%; 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: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/figtree-600-latin-ext.woff2") format("woff2"); size-adjust: 97.40%; ascent-override: 110.78%; descent-override: 36.45%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/figtree-600-latin.woff2") format("woff2"); size-adjust: 97.40%; ascent-override: 110.78%; descent-override: 36.45%; line-gap-override: 0%; 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: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/eb-garamond-400-latin-ext.woff2") format("woff2"); size-adjust: 100.00%; ascent-override: 91.70%; descent-override: 35.40%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/eb-garamond-400-latin.woff2") format("woff2"); size-adjust: 100.00%; ascent-override: 91.70%; descent-override: 35.40%; line-gap-override: 0%; 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; }

:root {
  --serif: "Gentium Book Plus", Georgia, "Times New Roman", serif;
  --serif-caps: "Gentium Book Plus Caps", Georgia, "Times New Roman", serif;
  --sans: Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --garamond: "EB Garamond", Garamond, Georgia, serif;
  --header: #5ec1c5;
  --page: #63b9ca;
  --banner: #5b98a4;
  --text: rgba(26, 26, 26, .94);
  --footer-text: #050000;
}

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

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--page); }
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; }
a { background: transparent; text-decoration: none; color: var(--text); }
a:active, a:hover { outline: 0; }
b, strong { font-weight: bold; }
hr { box-sizing: content-box; height: 0; }
img { border: 0; }
figure { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button { -webkit-appearance: button; cursor: pointer; }
textarea { overflow: auto; vertical-align: top; }
*::selection { background-color: #000; color: #fff; }

/* Everything on the page sits in #siteWrapper; the phone menu (#sidecarNav) sits behind it and is
   shown by sliding #siteWrapper to the left. */
#siteWrapper {
  position: relative;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.6em;
  color: var(--text);
}

/* ------------------------------------------------------------------ text */

/* .heading-1 looks like an h1 without being one: her name in the header and the footer, and the
   home page's lines under its one main heading, so each page has one h1 (for search engines and
   screen readers) and still looks as it did. */
h1, h2, h3, .heading-1 { text-rendering: optimizeLegibility; margin: 1em 0 .5em; }
h1:first-child, h2:first-child, h3:first-child, .heading-1:first-child { margin-top: 0; }
h1, .heading-1 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: none;
  color: rgba(26, 26, 26, .9);
}
h2 {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .05em;
  line-height: 1.2em;
  text-transform: uppercase;
  color: #4a4a4a;
}
.html-content { outline: none; }
.html-content *:not(h1):not(h2):not(h3):not(.heading-1) { word-wrap: break-word; }
.html-content > *:first-child { margin-top: 0; }
.html-content > *:last-child { margin-bottom: 0; }
.html-content a { color: #3d9991; text-decoration: none; }

/* Bulleted lists: the bullet hangs in the margin, as on the old site. */
ul[data-rte-list] li { list-style-type: none; }
ul[data-rte-list] li > * { margin-top: .5em; margin-bottom: .5em; }
ul[data-rte-list] li > *:first-child::before {
  display: inline-block;
  margin-left: -40px;
  min-width: 40px;
  padding-right: 10px;
  box-sizing: border-box;
  text-align: right;
  white-space: pre;
  content: "\2022";
}
p[data-rte-preserve-empty]:empty::before { content: ""; display: inline-block; }

/* ------------------------------------------------------------------ header */

#header {
  position: relative;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  line-height: 1em;
  background-color: var(--header);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
#header a { text-decoration: none; }
.header-inner {
  display: table;
  width: 100%;
  box-sizing: border-box;
  margin: auto;
  padding: 20px 0;
  animation: header-anim 1s ease-in-out;
}
#siteTitle { position: relative; z-index: 1000; }
#siteTitle, #siteTitle a {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: var(--serif-caps);
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 1em;
  text-transform: uppercase;
  color: #fff;
}

/* The menu, in the header and in the phone menu. */
#headerNav nav a, #sidecarNav nav a {
  font-family: var(--serif-caps);
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
#headerNav nav a:hover, #sidecarNav nav a:hover { color: #fff; }

/* The last menu link (Contact) is a white outlined pill. */
#headerNav nav .nav-button a, #sidecarNav nav .nav-button a {
  display: block;
  margin-left: 1em;
  padding: 1em 1.5em !important;
  border: 2px solid #fff;
  border-radius: 300px;
  background-color: transparent;
  color: #fff;
  letter-spacing: 2px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  transition: background-color .1s 0s ease-in-out, color .1s 0s ease-in-out;
}
#headerNav nav .nav-button a:hover, #sidecarNav nav .nav-button a:hover { background-color: #fff; color: #181818; }

@media only screen and (min-width: 641px) {
  #header { width: 100%; }
  #siteTitleWrapper, #headerNav { display: table-cell; vertical-align: middle; box-sizing: border-box; }
  #siteTitleWrapper, #siteTitle { width: 220px; }
  #headerNav { text-align: right; }
  #mainNavWrapper { position: relative; z-index: 1000; }
}
@media only screen and (min-width: 1045px) {
  #headerNav { white-space: nowrap; }
  #mainNavWrapper { position: relative; }
  #mainNavigation > div { display: inline-block; vertical-align: middle; margin: 0; }
  #mainNavigation > div > a { display: block; padding: .75em 1em; transition: color .1s 0s ease-in-out; }
  #mainNavigation > div:last-child > a { padding-right: 0; }
}

/* The menu button (three bars; a cross while the phone menu is open). */
.mobile-nav-toggle {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
}
.mobile-nav-toggle span { display: block; }

/* ------------------------------------------------------------------ the phone menu */

#sidecarNav {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  visibility: hidden;
  line-height: 1em;
  text-align: left;
  background-color: var(--header);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  transition: height 0s .14s linear, visibility 0s .14s linear;
}
#sidecarNav nav { padding: 24px 36px 72px; }
#sidecarNav nav div { box-sizing: border-box; }
#sidecarNav nav div a { display: block; padding: .75em 0; }

.mobile-nav-open .body-overlay {
  position: absolute;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: e-resize;
  transform: translatex(-260px) translatez(0);
}

/* Screens 641px to 1044px wide: the old site's "force mobile nav" (the menu didn't fit). */
@media only screen and (min-width: 641px) and (max-width: 1044px) {
  #header #headerNav { display: none; }
  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 1002;
    top: 50%;
    right: 20px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    margin-top: -8px;
    padding: 0;
    vertical-align: middle;
    line-height: 16px;
    text-align: right;
    cursor: pointer;
    user-select: none;
    color: #fff;
  }
  .mobile-nav-toggle .top-bar, .mobile-nav-toggle .middle-bar, .mobile-nav-toggle .bottom-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 2px;
    background-color: #fff;
    transition: transform .1s 0s ease-in-out, top .1s .1s ease-in-out;
    transform-origin: 50% 50%;
  }
  .mobile-nav-toggle .middle-bar { top: 7px; transition: opacity 0s .15s linear; }
  .mobile-nav-toggle .bottom-bar { top: 14px; }
  #siteWrapper { width: 100%; transition: transform .2s ease-in-out; }
  .mobile-nav-open #siteWrapper { position: fixed; transform: translate3d(-260px, 0, 0); }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .top-bar,
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .bottom-bar { transition: top .1s .1s ease-in-out, transform .1s .2s ease-in-out; }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .top-bar { transform: rotate(45deg); top: 7px; }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .middle-bar { opacity: 0; }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .bottom-bar { transform: rotate(-45deg); top: 7px; }
  .mobile-nav-open #sidecarNav { height: 100%; visibility: visible; transition: height 0s .14s linear, visibility 0s 0s linear; }
  #sidecarNav nav .nav-button a { display: inline-block; margin: 1em 0 0 0; line-height: 1; padding: 1em 1.5em; }
}

/* ------------------------------------------------------------------ the top photo (home page) */

.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  padding: 130px 0;
  background-color: var(--banner);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.banner-image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  animation: feature-bg-anim .6s ease-in-out;
}
.banner-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
/* The original photo (2500 x 1408) is placed exactly as the old site placed it: as wide as the
   window and centred top to bottom, or 324px tall and centred side to side when the window is
   narrower than the photo's shape. A replaced photo (no srcset) fills the space with its focus
   point instead. */
.banner-image img[srcset] {
  position: absolute;
  top: 50%;
  left: 0;
  height: auto;
  margin-top: -28.16%;
  object-fit: fill;
  aspect-ratio: 2500 / 1408; /* the original's shape, not the resized copy's (1500 x 845) */
}
@media (max-width: 575.28px) {
  .banner-image img[srcset] { top: 0; left: 50%; width: auto; height: 100%; margin-top: 0; margin-left: -287.642px; }
}
.desc-wrapper {
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 956px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 32px;
  text-align: center;
  animation: feature-text-anim .75s ease-in-out;
}

/* ------------------------------------------------------------------ the page and its grid */

#page {
  box-sizing: border-box;
  width: auto;
  max-width: 1020px;
  margin: auto;
  padding: 96px 32px;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
}
#content { display: block; width: 100%; margin: auto; }

/* Rows of columns (12 to a row); blocks inside them have 17px of space around. */
.row { width: auto; }
.row::before, .row::after { content: ""; display: table; }
.row::after { clear: both; }
.col { float: left; }
.col-12 { width: 100%; }
.col-10 { width: 83.3333%; }
.col-7 { width: 58.3333%; }
.col-5 { width: 41.6667%; }
.col-3 { width: 25%; }
.col-2 { width: 16.6667%; }
.layout > .row { margin-left: -17px; margin-right: -17px; }
.block { position: relative; height: auto; padding-top: 17px; padding-bottom: 17px; }
.col .block { padding-left: 17px; padding-right: 17px; }
.block:not(.block-html) { clear: both; }
.block.float { z-index: 10; box-sizing: border-box; clear: none; }
.block.float-left { float: left; margin-right: 17px; }
.block-html { clear: none; }
/* No space above the first block of a row, or below the last one (as on the old site). */
.layout .row .block:not(.float):first-child { padding-top: 0; }
.layout .row .block:not(.float):first-child:last-child { padding-bottom: 0; }
.layout .block + .row .block:not(.float):first-child { padding-top: 17px; }
.layout .block + .row .block:not(.float):first-child:last-child { padding-bottom: 17px; }
.layout > .row:first-child > .col:first-child > .block:not(:first-child):last-child,
.layout .block + .row .block:not(.float):last-child { padding-bottom: 17px; }
.layout > .row:last-child > .col > .block:last-child { padding-bottom: 0; }

/* ------------------------------------------------------------------ lines */

.block-hr hr {
  height: 1px;
  margin: 32px 0;
  border: none;
  border-style: none;
  border-width: 0;
  color: rgba(26, 26, 26, .15);
  background-color: rgba(26, 26, 26, .15);
}
#footer .block-hr hr { color: rgba(5, 0, 0, .15); background-color: rgba(5, 0, 0, .15); }

/* ------------------------------------------------------------------ photos */

/* A photo shown at a set shape (the old site's "inline" image block). */
.image-inline { position: relative; margin: auto; }
.image-shape { position: relative; overflow: hidden; line-height: 0; text-align: center; }
.image-shape img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* The home page's photo with words and a button beside it (the old site's "card" image block).
   Its words scale with the width of the block, like the old site's (see site.js). */
.block-card { container-type: inline-size; }
.image-card { position: relative; margin: 0; }
.image-card:not(.narrow) { display: flex; justify-content: space-between; }
.image-card:not(.narrow) > :first-child { width: calc(40% - 1%); }
.image-card:not(.narrow)::after { content: ""; display: block; clear: both; }
.card-image { position: relative; }
.card-image a { display: block; }
/* As on the old site: the photo is clipped by its own box, which decides how its edge pixels are drawn. */
.card-shape { position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.card-image img { display: block; width: 100%; height: auto; object-fit: contain; object-position: var(--focus, 50% 50%); }
.card-text-wrapper { position: relative; z-index: 2; background-color: #fff; pointer-events: none; }
.image-card:not(.narrow) .card-text-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60% - 1%);
  min-height: 100%;
  margin-left: 2%;
}
.image-card.narrow .card-text-wrapper { margin-top: 2%; }
.card-text { position: relative; width: 100%; padding: 9% 0; pointer-events: auto; }
.card-text > * { text-align: center !important; }
.card-subtitle-wrapper, .card-button-wrapper { padding: 0 9%; }
.card-subtitle-wrapper { font-size: 6vw; }
.card-subtitle p {
  margin: 0;
  font-family: var(--garamond);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.5em;
  text-transform: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, .8);
}
.card-button-wrapper { margin-top: 8%; font-size: 3.2vw; }
.card-button a {
  display: inline-block;
  padding: 1em 2.5em;
  border: 0 solid #000;
  border-radius: 5em;
  background-color: rgba(94, 193, 197, .87);
  font-family: var(--serif-caps);
  font-size: inherit !important;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .1em;
  line-height: 1.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.card-button a:hover { opacity: .8; text-decoration: none; }
.dynamic-text { min-width: 100%; line-height: 1em; }
/* Before site.js sizes them (and without JavaScript): nearly the same sizes, from the wrappers' widths. */
.card-subtitle-wrapper, .card-button-wrapper { container-type: inline-size; }
.card-subtitle { font-size: max(.75rem, 6cqw); }
.card-button { font-size: max(.75rem, 3.2cqw); }
.min-font-set, .min-font-set ~ * { font-size: 13px !important; }
/* Without JavaScript (see site.js), the block's own width decides the layout. */
@container (width < 414.5px) {
  html:not(.js) .image-card { display: block; }
  html:not(.js) .image-card > :first-child { width: auto; }
  html:not(.js) .image-card .card-text-wrapper { display: block; width: auto; margin: 2% 0 0; }
}
/* It slides up into place when it comes into view. */
.js .image-card .card-image,
.js .image-card .card-text {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 20);
  transition: opacity 800ms cubic-bezier(.4, 0, .2, 1), transform 800ms cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
.js .image-card.animation-loaded .card-image,
.js .image-card.animation-loaded.text-ready .card-text { opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); }
.image-card.animation-loaded { transform: translatez(0); }

/* ------------------------------------------------------------------ video */

.video-wrapper { position: relative; z-index: 1; }
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transition: opacity 1s ease;
}

/* ------------------------------------------------------------------ the contact form */

.form-wrapper { display: grid; grid-template-areas: "form"; }
.contact-form { grid-area: form; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }
.field-list { line-height: normal; }
.field-list .title { display: block; }
.field-list .fields { display: flex; flex-direction: row; align-items: flex-end; column-gap: 10px; margin: 0; }
.field-list .fields .field { width: 50%; float: unset; }
.field-list .field { position: relative; margin: 0 0 18px; }
.field-list .field .caption { font-size: 12px; }
.field-list .description { display: block; padding: .5em 0; font-size: 12px; opacity: .7; white-space: pre-wrap; }
.field-list .description.required { padding: 0; }
.field-list .fields .description.required { line-height: 1em; }
/* The labels are laid out as on the old site (an inline label holding an inline-block), which
   is where the small gaps above and below "First Name" come from. */
.field-list label.title { padding-bottom: 4px; }
.field-list .caption-box, .field-list .title-box { display: inline-block; }
.field-list .caption-text, .field-list .title-text, .field-list .title-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1ex; }
.field-list .title-row { white-space: nowrap; }
.field-list input, .field-list textarea {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #a9a9a9;
  border-radius: 0;
  background-color: #fafafa;
  color: #000;
}
.field-list input::placeholder, .field-list textarea::placeholder { color: #cfcfcf; font-weight: 400; opacity: 1 !important; }
.field-list textarea { min-height: 100px; resize: vertical; }
.field-list input:focus, .field-list textarea:focus { outline-offset: -2px; }
.form-trap { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-button-wrapper { text-align: left; }
.form-submit-button {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 1em 2.5em;
  border: 0 solid #69cebf;
  border-radius: 300px;
  outline: none;
  background-color: #69cebf;
  font-family: var(--sans);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-backface-visibility: hidden;
  transition: .1s opacity linear;
}
.form-submit-button:hover { opacity: .8; }
.form-submit-button:disabled { opacity: .5; cursor: progress; }
/* What went wrong, in the old site's red bar. */
.form-error, .field-error {
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
  padding: 6px 10px;
  background-color: #ce2c30;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}
.form-error[hidden], .field-error[hidden] { display: none; }
.form-error-icon { flex: none; width: 1em; height: 1em; margin-top: .25em; }
.field .field-error, .form-item .field-error { margin-bottom: .5em; }
.form-submission-text { margin-top: 20px; }
.form-submission-text:focus { outline: none; }

/* ------------------------------------------------------------------ map */

.block-map .map { height: 408px; overflow: hidden; }
.block-map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Without a Google Maps key, the map is a picture of the place that opens it in Google Maps (site.js). */
.block-map .map-link { display: block; height: 100%; }
.block-map .map-link iframe { pointer-events: none; }

/* ------------------------------------------------------------------ footer */

#footer {
  background-color: rgba(99, 185, 202, .9);
  color: var(--footer-text);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
#footer h1, #footer h2, #footer h3, #footer .heading-1 { color: var(--footer-text); }
.footer-inner { width: auto; max-width: 1020px; box-sizing: border-box; margin: auto; padding: 64px 32px; }
#footerBlocks { margin-top: 1.5em; }
#footer .html-content a, #footer .html-content a:visited { color: var(--footer-text); border-bottom: 1px solid var(--footer-text); }
#footer nav {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}
#footer nav a, #footer nav a:visited { text-decoration: none; line-height: 1.25em; color: #fff; border: none; }
.back-to-top-nav { display: none; }
/* Phones only (by the size of the phone's screen, not the window), as on the old site. */
@media only screen and (max-device-width: 667px) {
  .back-to-top-nav { display: block; }
  .back-to-top { display: inline-block; }
  .back-to-top a { display: block; padding: .75em 1em; }
}

/* ------------------------------------------------------------------ smaller screens */

@media only screen and (max-width: 1024px) {
  .block-hr hr { margin: 32px 0; }
}
@media only screen and (max-width: 767px) {
  #page { padding: 32px; }
}
@media only screen and (max-width: 640px) {
  .layout .col, .layout .block.float { float: none !important; width: auto !important; }
  .layout .row .block:first-child { padding-top: 17px !important; }
  .layout .row .block:last-child { padding-bottom: 17px !important; }
  .layout .row + .row, .layout .row + .block { margin-top: 0 !important; }
  #page { padding: 40px 20px; }
  #header { padding: 0 20px; }
  h2 { font-size: 26px; }
  h1, .heading-1 { font-size: 30px; }
  .block-hr hr { margin: initial; }
  .header-inner { display: block; padding: 20px 0; }
  .footer-inner { padding: 20px; text-align: center; }
  #siteTitleWrapper { display: inline-block; vertical-align: middle; max-width: 240px; padding: 0; box-sizing: border-box; }
  #headerNav { display: none; }
  #siteTitle, #siteTitle a { font-size: 16px; line-height: 1; }
  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 1002;
    top: 50%;
    right: 20px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    margin-top: -8px;
    padding: 0;
    vertical-align: middle;
    line-height: 16px;
    text-align: right;
    cursor: pointer;
    user-select: none;
    color: #fff;
  }
  .mobile-nav-toggle .top-bar, .mobile-nav-toggle .middle-bar, .mobile-nav-toggle .bottom-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 2px;
    background-color: #fff;
    transition: transform .15s 0s ease-in-out, top .15s .15s ease-in-out;
    transform-origin: 50% 50%;
  }
  .mobile-nav-toggle .middle-bar { top: 7px; transition: opacity 0s .15s linear; }
  .mobile-nav-toggle .bottom-bar { top: 14px; }
  #siteWrapper { width: 100%; height: 99.9%; transition: transform .14s ease-in-out; }
  .mobile-nav-open #sidecarNav { visibility: visible; transition: height 0s .14s linear, visibility 0s 0s linear; }
  .mobile-nav-open #siteWrapper { position: fixed; height: 100%; transform: translate3d(-260px, 0, 0); }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .top-bar,
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .bottom-bar { transition: top .15s .15s ease-in-out, transform .15s .3s ease-in-out; }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .top-bar { transform: rotate(45deg); top: 7px; }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .middle-bar { opacity: 0; }
  .mobile-nav-open #siteWrapper .mobile-nav-toggle .bottom-bar { transform: rotate(-45deg); top: 7px; }
  #sidecarNav nav .nav-button a { display: inline-block; margin: .75em 0 0 0; line-height: 1; padding: 1em 1.5em; }
  .back-to-top { text-align: center; margin: 24px 0; }
}

/* ------------------------------------------------------------------ the fade-in as a page opens */

@keyframes header-anim { 0% { opacity: 0; } 72% { opacity: 0; } 100% { opacity: 1; } }
@keyframes feature-bg-anim { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes feature-text-anim {
  0% { opacity: 0; transform: translate3d(0, 10px, 0); }
  75% { opacity: 0; transform: translate3d(0, 10px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}