@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
}

:root {
  --ink: #2b1b12;
  --brown: #5b3a29;
  --muted: #75594e;
  --rule: #d9cfc6;
  --stone: #f3efea;
  --paper: #fff;
  --dome: #2c5a7a;
  --dome-dark: #1f4560;
  --on-dark: #e8dbd0;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --measure: 66ch;
  --wrap: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --grid-gap: clamp(2rem, 5vw, 4.5rem);
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--dome);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--dome-dark);
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--dome);
  outline-offset: 3px;
}

/* Display type is set light and large; weight comes from size, not bold */
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  color: var(--brown);
  margin: 0 0 0.5em;
}
h1 {
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-top: 1.6em;
}
h3 {
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 1.4em;
}
p,
ul,
ol {
  margin: 0 0 1em;
}
li + li {
  margin-top: 0.35em;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.prose {
  max-width: var(--measure);
}
.lede {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 40ch;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--paper);
}
.skip-link:focus {
  left: 1rem;
  z-index: 10;
}

/* Header: logo, nav, and one filled button, because contacting the firm
   is the site's main job. Below 67rem the nav folds behind "Menu". */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.site-header__logo {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  color: var(--brown);
  text-decoration: none;
}
.site-header__logo:hover {
  color: var(--brown);
}
/* The seal's hairlines vanish at nav size; draw them heavier there */
.site-header .seal circle {
  stroke-width: 2.6;
}
.site-header__name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav {
  margin-left: auto;
}
.site-nav ul {
  display: flex;
  gap: 0.25rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
.site-nav li + li {
  margin-top: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--brown);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.site-nav a:hover {
  text-decoration-color: currentColor;
}
.site-header__cta {
  padding: 0.6rem 1.15rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper);
  background: var(--brown);
  border: 1px solid var(--brown);
  text-decoration: none;
}
.site-header__cta:hover,
.site-header__cta[aria-current="page"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.site-menu-toggle {
  display: none;
  padding: 0.6rem 1rem;
  font: 600 0.98rem/1.2 var(--body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  cursor: pointer;
}

/* Page head: the title runs across the grid, the lede sits in the content column */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--grid-gap);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-head h1 {
  grid-column: 1 / -1;
  max-width: 20ch;
  margin-bottom: 0.6em;
}
.page-head .lede {
  grid-column: 2;
  max-width: 40ch;
  margin: 0;
  font-size: clamp(1.25rem, 1.9vw, 1.45rem);
}

/* Photography: one toned image, cropped wide. A light brown wash keeps
   each photo sitting with the palette; it darkens only where text sits. */
.hero,
.band {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero picture,
.band picture {
  position: absolute;
  inset: 0;
}
.hero img,
.band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after,
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(43, 27, 18, 0.55), rgba(43, 27, 18, 0) 30%),
    rgba(91, 58, 41, 0.08);
  pointer-events: none;
}
.hero figcaption,
.band figcaption {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: 0.75rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Home: the photo carries the page; one light serif line set on it */
.hero {
  min-height: clamp(28rem, 74vh, 48rem);
  display: flex;
  align-items: flex-end;
}
.hero::after {
  background:
    linear-gradient(to top, rgba(43, 27, 18, 0.8), rgba(43, 27, 18, 0) 70%),
    linear-gradient(to right, rgba(43, 27, 18, 0.5), rgba(43, 27, 18, 0) 65%),
    rgba(91, 58, 41, 0.08);
}
.hero__photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero__title {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* The firm's wordmark leads: people arrive here looking for the name */
.hero__brand {
  margin: 0;
  line-height: 0;
}
.hero__brand img {
  display: block;
  width: clamp(17rem, 38vw, 33rem);
  height: auto;
}
.hero__tagline {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
}
/* Contact straight from the first screen: email, a booking, then a
   sentence with the phones and WhatsApp */
.hero__actions {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hero .contact-routes {
  color: rgba(255, 255, 255, 0.88);
}
.hero .contact-routes a,
.hero .contact-routes a:hover {
  color: #fff;
}

/* Home sections share one grid: heading (or the seal) in a narrow left
   column, content in the wide right one, a hairline between sections.
   The contact band at the foot of every page uses it too. */
.ledger {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--grid-gap);
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  border-top: 1px solid var(--rule);
}
.ledger--intro {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 0;
}
h2.ledger__aside {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  max-width: 13ch;
  margin: 0;
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
}
.ledger__body > :first-child {
  margin-top: 0;
}
.ledger__body > :last-child {
  margin-bottom: 0;
}
.ledger__body.prose {
  max-width: none;
}
.ledger__body.prose > * {
  max-width: var(--measure);
}

.seal {
  display: block;
  flex: none;
}
.seal__text {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
}
.ledger--intro .ledger__body {
  grid-column: 2;
}

/* The opening statement: set in the display serif, large, in plain words */
.statement {
  max-width: 30ch;
  margin-bottom: 1.25rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.1vw, 2.45rem);
  line-height: 1.24;
  color: var(--ink);
}
.statement-sub {
  max-width: 48ch;
  font-size: 1.15rem;
  color: var(--muted);
}

/* "What do you need?": an index of situations, one row each */
.needs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.needs li + li {
  margin-top: 0;
  border-top: 1px solid var(--rule);
}
.needs a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.25rem 2rem;
  align-items: baseline;
  padding: 1.05rem 0;
  color: var(--ink);
  text-decoration: none;
}
.needs li:first-child a {
  padding-top: 0.2rem;
}
.needs__label {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--brown);
}
.needs__hint {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
}
.needs a:hover .needs__label,
.needs a:focus-visible .needs__label {
  color: var(--dome);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.ledger__photo {
  margin: 0 0 2rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--stone);
}
.ledger__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Service pages: a shorter band above the page head */
.band {
  height: clamp(12rem, 34vw, 26rem);
}
.band + .wrap .page-head {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

/* Steps: used only where the content is a real sequence (closing timeline) */
.steps {
  counter-reset: step;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.25rem 3rem;
  margin: 0;
  border-left: 1px solid var(--rule);
  margin-left: 1rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: -1rem;
  top: -0.1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--brown);
  background: var(--paper);
  border: 1px solid var(--brown);
  border-radius: 50%;
}
.steps > li:last-child {
  border-left-color: transparent;
}
.steps strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--brown);
}

.table-wrap {
  overflow-x: auto;
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
th {
  font-weight: 600;
  color: var(--brown);
}

/* Calls to action */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0 0;
}
.button {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--paper);
  background: var(--brown);
  border: 1px solid var(--brown);
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  color: var(--paper);
  background: var(--ink);
  text-decoration: none;
}
.button--quiet {
  color: var(--brown);
  background: transparent;
}
.button--quiet:hover {
  color: var(--paper);
  background: var(--brown);
}
/* Buttons set on a photo */
.button--light {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}
.button--light:hover {
  color: var(--ink);
  background: var(--stone);
}
.button--outline-light {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.85);
}
.button--outline-light:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.contact-band {
  margin-top: 2rem;
}
.contact-band .actions {
  margin-top: 1.25rem;
}

/* The phones and WhatsApp, as one sentence under the contact buttons */
.contact-routes {
  max-width: 52ch;
  margin: 1.1rem 0 0;
  font-size: 1rem;
  color: var(--muted);
}

/* Forms */
.form {
  display: grid;
  gap: 1.1rem;
  max-width: 36rem;
}
.form label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #b9aaa0;
  border-radius: 2px;
}
.form textarea {
  min-height: 9rem;
  resize: vertical;
}
.form .hint {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--muted);
}
.form-status {
  min-height: 1.5em;
  font-weight: 600;
}
.form-status[data-state="error"] {
  color: #9b2c1f;
}
.form-status[data-state="ok"] {
  color: #2f6b3a;
}
.visually-hidden,
.form .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Contact page */
.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-list li + li {
  margin-top: 1rem;
}
.contact-list span {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
}

/* Payments */
.pay {
  max-width: 26rem;
  padding: 1.75rem;
  border: 1px solid var(--rule);
}
.pay__total {
  min-height: 1.6em;
  color: var(--muted);
}
#paypal-button-container {
  margin-top: 1rem;
}

/* Team */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  max-width: 60rem;
}
.people h3 {
  margin-top: 0;
}
.people__role {
  margin-top: -0.4rem;
  color: var(--muted);
}

/* About: founders' photo */
.portrait {
  margin: 0;
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.portrait figcaption {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--muted);
}
/* Leaving for the immigration site (assets/js/leaving.js): one full-screen
   moment in the footer's colours. A passport opens and takes the seal as its
   stamp, whose lettering keeps turning, while a hairline fills. */
.leaving {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--on-dark);
  background: var(--ink);
}
.leaving::backdrop {
  background: transparent;
}
.leaving[open] {
  display: grid;
  place-items: center;
  animation: leaving-fade 0.45s ease-out both;
}
.leaving__inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 34rem;
  padding: 2rem var(--gutter);
  text-align: center;
}
.leaving[open] .leaving__inner {
  animation: leaving-rise 0.6s 0.1s ease-out both;
}
/* The passport: two pages once open. The cover hangs on the spine (the
   page's left edge) and ends folded over to the left. Base styles are the
   end state, so reduced motion simply shows it open and stamped; the
   animations below run from the closed state. */
.passport {
  --page-w: 7rem;
  position: relative;
  width: calc(var(--page-w) * 2);
  height: 9.8rem;
  perspective: 900px;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
}
.passport__page,
.passport__cover {
  position: absolute;
  top: 0;
  left: var(--page-w);
  width: var(--page-w);
  height: 100%;
}
.passport__page,
.passport__inside {
  --spine: rgba(43, 27, 18, 0.2);
  --ruled: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(91, 58, 41, 0.1) 13px 14px);
  background-color: #f4ede3;
}
.passport__page {
  border-radius: 0 4px 4px 0;
  background-image: linear-gradient(to right, var(--spine), transparent 16%), var(--ruled);
}
.passport__stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(-10deg);
}
/* Inked in the cathedral-dome blue, like an entry stamp */
.passport__stamp .seal {
  color: var(--dome);
  opacity: 0.85;
}
.passport__stamp .seal circle {
  stroke-width: 2.4;
}
.passport__cover {
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(-180deg);
}
.passport__front,
.passport__inside {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.passport__front {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.7rem;
  border-radius: 0 4px 4px 0;
  background: #6b4532;
  box-shadow:
    inset 0 0 0 6px #6b4532,
    inset 0 0 0 7px rgba(232, 219, 208, 0.45);
}
.passport__front::before {
  content: "";
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(232, 219, 208, 0.7);
  border-radius: 50%;
}
.passport__front::after {
  content: "PASSPORT";
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  color: rgba(232, 219, 208, 0.8);
}
.passport__inside {
  border-radius: 4px 0 0 4px;
  background-image: linear-gradient(to left, var(--spine), transparent 16%), var(--ruled);
  transform: rotateY(180deg);
}
.leaving[open] .passport {
  animation: passport-centre 0.8s 0.55s ease-in-out both;
}
.leaving[open] .passport__cover {
  animation: passport-open 0.8s 0.55s ease-in-out both;
}
.leaving[open] .passport__stamp {
  animation: passport-stamp 0.35s 1.5s ease-out both;
}
.leaving[open] .passport__page {
  animation: passport-press 0.25s 1.75s ease-out;
}
.leaving .seal__ring {
  transform-box: fill-box;
  transform-origin: center;
}
.leaving[open] .seal__ring {
  animation: leaving-turn 14s linear infinite;
}
.leaving__title {
  margin: 0.5rem 0 0;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 300;
  color: #fff;
}
.leaving__text {
  max-width: 34ch;
  margin: 0;
  font-size: 1.1rem;
  color: rgba(232, 219, 208, 0.85);
}
.leaving__progress {
  width: min(16rem, 70vw);
  height: 1px;
  margin-top: 0.75rem;
  background: rgba(232, 219, 208, 0.25);
}
.leaving__progress span {
  display: block;
  height: 100%;
  background: var(--on-dark);
  transform: scaleX(0);
  transform-origin: left;
}
.leaving[open] .leaving__progress span {
  animation: leaving-progress var(--leaving-ms, 3000ms) linear forwards;
}
.leaving__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
}
.leaving__stay {
  padding: 0.5rem 0;
  font: inherit;
  font-size: 1rem;
  color: #fff;
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.leaving :focus-visible {
  outline-color: var(--on-dark);
}
@keyframes leaving-fade {
  from {
    opacity: 0;
  }
}
@keyframes leaving-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}
/* While closed the book sits centred; it slides as it opens */
@keyframes passport-centre {
  from {
    transform: translateX(-25%);
  }
}
@keyframes passport-open {
  from {
    transform: rotateY(0deg);
  }
}
@keyframes passport-stamp {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(1.8);
  }
  70% {
    opacity: 1;
    transform: rotate(-10deg) scale(0.94);
  }
}
@keyframes passport-press {
  50% {
    transform: scale(0.985);
  }
}
@keyframes leaving-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes leaving-progress {
  to {
    transform: scaleX(1);
  }
}

/* Footer */
.site-footer {
  margin-top: 4rem;
  padding: 3.5rem 0 2rem;
  color: var(--on-dark);
  background: var(--ink);
  font-size: 1rem;
}
.site-footer a {
  color: #fff;
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li + li {
  margin-top: 0.4rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 0.8fr;
  gap: 2.5rem;
}
.site-footer .seal {
  margin-bottom: 1.25rem;
  color: var(--on-dark);
}
.site-footer__name {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
.site-footer__title {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(232, 219, 208, 0.7);
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(232, 219, 208, 0.25);
  font-size: 0.95rem;
}
.site-footer__bottom p {
  margin: 0;
}

@media (max-width: 67rem) {
  .site-menu-toggle {
    display: inline-block;
  }
  .site-header__cta {
    margin-left: auto;
  }
  .site-nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }
  .site-header.is-open .site-nav {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.75rem;
    border-top: 1px solid var(--rule);
  }
  .site-nav li + li {
    border-top: 1px solid var(--rule);
  }
  .site-nav a {
    display: block;
    padding: 0.8rem 0;
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--brown);
  }
}
@media (max-width: 860px) {
  .ledger,
  .page-head {
    grid-template-columns: 1fr;
  }
  .page-head .lede {
    grid-column: 1;
  }
  .ledger {
    row-gap: 1.5rem;
  }
  h2.ledger__aside {
    position: static;
    max-width: none;
  }
  .ledger--intro .ledger__body {
    grid-column: 1;
  }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .people,
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-header .seal {
    width: 52px;
    height: 52px;
  }
  .site-header__name {
    font-size: 1.25rem;
  }
  .site-header__inner {
    gap: 0.75rem;
  }
  .site-header__cta,
  .site-menu-toggle {
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
  }
  .needs a {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: 31rem;
  }
  /* On a narrow crop the wordmark lands on the pale domes: darken further up */
  .hero::after {
    background:
      linear-gradient(to top, rgba(43, 27, 18, 0.85), rgba(43, 27, 18, 0.45) 70%, rgba(43, 27, 18, 0.1)),
      rgba(91, 58, 41, 0.08);
  }
}
/* Seal, name, "Contact us" and "Menu" don't fit side by side on small phones */
@media (max-width: 30rem) {
  .site-header__name {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  /* No movement, and no timed hand-off: the notice waits for a click */
  .leaving[open],
  .leaving[open] .leaving__inner,
  .leaving[open] .seal__ring,
  .leaving[open] .passport,
  .leaving[open] .passport__cover,
  .leaving[open] .passport__stamp,
  .leaving[open] .passport__page {
    animation: none;
  }
  .leaving__progress {
    display: none;
  }
}