@charset "UTF-8";
/* ElmsPark theme. PageMotor 0.8.2b. Deep Forest palette, Fraunces and Inter. */
/* GRT bridge: Design Options take priority, source design values fall back. */
:root {
  --font1: "Inter", sans-serif;
  --font2: "Fraunces", serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;
  --f1: 47px;
  --f2: 37px;
  --f3: 29px;
  --f4: 23px;
  --f5: 18px;
  --f6: 14px;
  --g1: 71px;
  --g2: 58px;
  --g3: 47px;
  --g4: 38px;
  --g5: 31px;
  --g6: 26px;
  --x1: 50px;
  --x2: 31px;
  --x3: 19px;
  --x4: 12px;
  --x5: 7px;
  --x6: 4px;
  --bg1: rgb(246, 242, 234);
  --bg2: rgb(239, 234, 224);
  --c1: rgb(24, 20, 17);
  --c2: rgb(96, 86, 71);
  --ca: rgb(58, 81, 64);
  --border1: 1px solid #DDD6C6FF;
  --border2: 1px solid #181411FF;
  --border3: 1px solid #3A5140FF;
  --w-content: 940px;
  --w-total: 1152px;
  --gutter-full: 31px;
  --gutter-mobile: 19px;
  --phi: 1.6180339887;
  /* Auxiliary palette tokens, not exposed as Design Options. */
  --ink-soft: #2A231C;
  --accent-hover: #2A3D2F;
  --rule: #DDD6C6;
  --paper-warm: var(--bg2);
  /* Theme-level tokens for fluid section padding and gutters. */
  --pad-x: clamp(var(--gutter-mobile), 5vw, var(--gutter-full));
  --pad-section: clamp(4rem, 10vw, 9rem);
}

/* Reset */
* {
  padding: 0;
  margin: 0;
}

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

h1, h2, h3, h4 {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  word-break: normal;
}

img, fieldset {
  border: 0;
}

abbr {
  text-decoration: none;
}

code {
  line-height: 1em;
}

pre {
  overflow: auto;
  word-wrap: normal;
  tab-size: 4;
}

sub, sup {
  line-height: 0.5em;
}

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

iframe, video, embed, object {
  display: block;
  max-width: 100%;
}

.left, .right, .center {
  display: block;
}

.center {
  float: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

button, input[type=submit] {
  cursor: pointer;
  overflow: visible;
}

/* Body and structural foundations */
html {
  font-size: 100%;
  line-height: 1.5;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background-color: var(--bg1);
  overflow-x: hidden;
}

::selection {
  background: var(--ca);
  color: var(--bg1);
}

.container {
  box-sizing: border-box;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}
@media all and (min-width: 978px) {
  .container {
    max-width: var(--w-content);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 1002px) {
  .container {
    max-width: 100%;
    padding-left: var(--gutter-full);
    padding-right: var(--gutter-full);
    margin-left: 0;
    margin-right: 0;
  }
}
@media all and (min-width: 1214px) {
  .container {
    max-width: var(--w-total);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

.text {
  max-width: var(--w-content);
}

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

/* Common content elements */
h1, h2, h3, h4 {
  font-family: var(--font2);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c1);
}

h1 {
  font-size: var(--f2);
  line-height: var(--g2);
}

h2 {
  font-size: var(--f3);
  line-height: var(--g3);
}

h3 {
  font-size: var(--f4);
  line-height: var(--g4);
}

h4 {
  font-size: var(--f5);
  line-height: var(--g5);
}

@media all and (min-width: 978px) {
  h1 {
    font-size: var(--f1);
    line-height: var(--g1);
  }
  h2 {
    font-size: var(--f2);
    line-height: var(--g2);
  }
  h3 {
    font-size: var(--f3);
    line-height: var(--g3);
  }
  h4 {
    font-size: var(--f4);
    line-height: var(--g4);
  }
}
a {
  color: var(--ca);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}

a:hover, a:focus-visible {
  color: var(--accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
}

blockquote {
  font-family: var(--font2);
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c1);
  padding-left: var(--x3);
  border-left: var(--x5) solid rgba(0, 0, 0, 0.1);
  font-style: italic;
}

blockquote > :last-child {
  margin-bottom: 0;
}

sub, sup {
  color: var(--c2);
}

code, pre, kbd {
  font-family: var(--font-code);
  font-size: 0.875em;
  line-height: var(--g5);
}

code {
  background-color: rgba(0, 0, 0, 0.08);
  padding: var(--x6);
  border-radius: var(--x5);
  margin: 0 1px;
}

strong code {
  font-weight: normal;
}

pre {
  color: var(--c1);
  padding: var(--x3);
  border-left: var(--x5) solid rgba(0, 0, 0, 0.1);
}

kbd {
  font-size: var(--f6);
  line-height: var(--g6);
  color: #4e4e4e;
  background-color: #f7f7f7;
  padding: var(--x6) var(--x5);
  border: 1px solid #ccc;
  border-radius: var(--x5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fafafa inset, 0 0 0 1px #fff inset;
  margin: 0 1px;
}

hr {
  border: var(--border1);
  border-width: 0 0 1px 0;
  margin: var(--x2) 0;
}

.drop-cap {
  font-family: var(--font2);
  font-size: calc(var(--x2) * 2);
  line-height: 1em;
  font-weight: 400;
  color: var(--ca);
  margin-right: var(--x5);
  float: left;
}

.small {
  font-family: var(--font1);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

.callout {
  color: var(--c1);
  background-color: var(--bg2);
  padding: var(--x3);
  border: var(--border1);
  border-left: 3px solid var(--ca);
  border-radius: 0 var(--x4) var(--x4) 0;
}

.callout.alert {
  color: #5a1212;
  background-color: #f8e6e6;
  border-left-color: #b54040;
}

.callout.note {
  color: var(--c1);
  background-color: var(--bg2);
  border-left-color: var(--c2);
}

.highlight {
  background-color: rgba(58, 81, 64, 0.15);
  padding: var(--x6) 0;
}

.impact {
  font-family: var(--font2);
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 400;
  color: var(--c1);
}

@media all and (min-width: 978px) {
  .impact {
    font-size: var(--f3);
    line-height: var(--g3);
  }
}
.pop {
  box-shadow: 0 0 var(--x4) rgba(0, 0, 0, 0.4);
}

.caption {
  font-family: var(--font1);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
}

.center + .caption {
  text-align: center;
}

blockquote + .caption {
  padding-left: calc(var(--x3) + var(--x5));
}

/* Wordmark structural style. The wordmark and accent classes ride inside body copy as well as the header and footer. */
.wordmark {
  font-family: var(--font2);
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark .accent {
  color: var(--ca);
}

/* Brand-mark CSS mask. Framed tree variant. Header default 1.2em, footer override below. */
.brand-mark {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: var(--ca);
  -webkit-mask: url("assets/brand/elmspark-tree-handdrawn.svg") center/contain no-repeat;
  mask: url("assets/brand/elmspark-tree-handdrawn.svg") center/contain no-repeat;
  vertical-align: -0.15em;
  margin-right: 0.4em;
  flex-shrink: 0;
}

/* Eyebrow, section-label, and similar uppercase Inter tags. Used across many sections. */
.eyebrow,
.section-label,
.about-label,
.about-hero-meta,
.notfound-label {
  font-family: var(--font1);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2);
}

.eyebrow {
  margin: 0 0 1.25rem;
}

.section-label {
  margin: 0 0 2rem;
}

.about-label {
  margin: 0;
  padding-top: 0.75rem;
}

.section-title {
  font-family: var(--font2);
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: clamp(2.2rem, 6.05vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0;
}

.section-title .line {
  display: block;
}

/* Dynamic Page Content. Margins and list rules only apply inside .page-content. */
/* Text-only pages (Privacy Policy, Cookie Policy, Reviews) and the
 * 404 page need their page-content wrapper to provide horizontal
 * padding and a max-width matching the rest of the site, because
 * their bodies are plain h2/h3/p without inline structural sections.
 *
 * Pages whose bodies contain inline  elements (About with
 * about-hero/about-section, Contact with contact-hero/contact-main)
 * already handle their own width and padding inside those sections,
 * so this rule must NOT apply to them.
 *
 * The :has() selector excludes any page-content that contains a
 * direct  child, leaving the inline-structured pages alone.
 */
.page-main-page > .page-content:not(:has(> section)),
.page-main-error > .page-content:not(:has(> section)) {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(4rem, 9vw, 7rem) var(--pad-x);
}

.page-container + .page-container {
  margin-top: var(--x1);
}

.page-content h1 {
  margin-bottom: var(--x2);
}

.page-content h2 {
  margin-top: var(--x1);
  margin-bottom: var(--x2);
}

.page-content h3 {
  margin-top: var(--x2);
  margin-bottom: var(--x3);
}

.page-content h4 {
  margin-bottom: var(--x4);
}

.page-content h1 + h2,
.page-content h2 + h3,
.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child,
.page-content hr + h2 {
  margin-top: 0;
}

.page-content > :last-child {
  margin-bottom: 0;
}

.page-content ul {
  list-style-type: disc;
}

.page-content ul,
.page-content ol {
  margin-left: var(--x2);
}

.page-content ul ul,
.page-content ul ol,
.page-content ol ul,
.page-content ol ol {
  margin-top: var(--x4);
  margin-bottom: 0;
  margin-left: var(--x2);
}

.page-content li {
  margin-bottom: var(--x4);
}

.page-content li:last-child {
  margin-bottom: 0;
}

.page-content .callout > :last-child {
  margin-bottom: 0;
}

.page-content .caption {
  margin-top: var(--x4);
}

.page-content h1 + .caption,
.page-content h2 + .caption {
  margin-top: var(--x4);
}

.page-content h3 + .caption {
  margin-top: var(--x4);
  margin-bottom: var(--x3);
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote,
.page-content pre,
.page-content img,
.page-content .callout,
.page-content .caption {
  margin-bottom: var(--x2);
}

.page-content p:last-child,
.page-content ul:last-child,
.page-content ol:last-child,
.page-content blockquote:last-child,
.page-content pre:last-child,
.page-content img:last-child,
.page-content .callout:last-child,
.page-content .caption:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 978px) {
  .page-content h1 + .caption,
  .page-content h2 + .caption {
    margin-top: var(--x4);
  }
  .page-content h3 + .caption {
    margin-top: var(--x4);
  }
}
.page-title {
  font-family: var(--font2);
  font-weight: 400;
}

.page-title a {
  color: var(--c1);
}

.page-title a:hover {
  color: var(--ca);
}

.page-title:has(+ .byline) {
  margin-bottom: 0;
}

.byline {
  font-family: var(--font1);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c2);
  margin-bottom: var(--x2);
}

.page-container,
.headline-area,
.page-content {
  display: flow-root;
}

.modular-content > :last-child {
  margin-bottom: 0;
}

.page-content + .modular-content {
  margin-top: var(--x2);
}

/* Forms */
label {
  display: block;
  font-family: var(--font1);
  font-weight: 500;
}

label .required {
  font-weight: normal;
  color: #b54040;
}

input, textarea, select {
  display: block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--f5);
  line-height: 1em;
  font-weight: inherit;
  color: var(--c1);
  background-color: var(--bg1);
  padding: var(--x5) var(--x4);
  border: var(--border1);
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type=checkbox], input[type=radio], input[type=image], input[type=submit], select {
  width: auto;
}

input[type=checkbox], input[type=radio] {
  display: inline-block;
}

input[type=checkbox] + label,
input[type=radio] + label {
  display: inline;
  font-weight: normal;
  margin-left: var(--x6);
  user-select: none;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ca);
  box-shadow: 0 0 0 3px rgba(58, 81, 64, 0.2);
}

textarea {
  line-height: var(--g5);
  resize: vertical;
}

button, input[type=submit], .button {
  display: inline-block;
  width: auto;
  font-family: var(--font1);
  font-size: 1rem;
  line-height: 1em;
  font-weight: 500;
  vertical-align: top;
  color: var(--bg1);
  text-decoration: none;
  background-color: var(--c1);
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--c1);
  border-radius: 1.75rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button:hover, button:focus-visible,
input[type=submit]:hover, input[type=submit]:focus-visible,
.button:hover, .button:focus-visible {
  background-color: var(--ca);
  border-color: var(--ca);
  color: var(--bg1);
  text-decoration: none;
}

button.save, .button.save {
  background-color: var(--ca);
  border-color: var(--ca);
  color: var(--bg1);
}

button.save:hover, button.save:focus-visible,
.button.save:hover, .button.save:focus-visible {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg1);
}

button.delete, .button.delete {
  background-color: #5a1212;
  border-color: #5a1212;
  color: var(--bg1);
}

button.delete:hover, button.delete:focus-visible,
.button.delete:hover, .button.delete:focus-visible {
  background-color: #3a0a0a;
  border-color: #3a0a0a;
  color: var(--bg1);
}

button.action, .button.action {
  background-color: transparent;
  border-color: var(--c1);
  color: var(--c1);
}

button.action:hover, button.action:focus-visible,
.button.action:hover, .button.action:focus-visible {
  background-color: var(--c1);
  border-color: var(--c1);
  color: var(--bg1);
}

button.update, .button.update {
  background-color: var(--c1);
  border-color: var(--c1);
  color: var(--bg1);
}

button.update:hover, button.update:focus-visible,
.button.update:hover, .button.update:focus-visible {
  background-color: var(--ca);
  border-color: var(--ca);
  color: var(--bg1);
}

button svg, .button svg {
  vertical-align: inherit;
}

/* Site-wide button alias. The .btn class is mirrored to .button for PageMotor compatibility. */
.btn {
  display: inline-block;
  font-family: var(--font1);
  font-size: 1rem;
  line-height: 1em;
  font-weight: 500;
  color: var(--bg1);
  text-decoration: none;
  background-color: var(--c1);
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--c1);
  border-radius: 1.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover, .btn:focus-visible {
  background-color: var(--ca);
  border-color: var(--ca);
  color: var(--bg1);
}

.btn-ghost {
  background-color: transparent;
  color: var(--c1);
  border-color: var(--c1);
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  background-color: var(--c1);
  color: var(--bg1);
  border-color: var(--c1);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background-color: var(--c1);
  color: var(--bg1);
  padding: 0.75rem 1rem;
  font-size: var(--f6);
  line-height: var(--g6);
  text-decoration: none;
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
  color: var(--bg1);
}

/* Site header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wordmark-link {
  color: var(--c1);
  text-decoration: none;
  font-size: 1.375rem;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}

.wordmark-link:hover, .wordmark-link:focus-visible {
  color: var(--c1);
}

.site-nav {
  display: flex;
  gap: clamp(0.875rem, 2vw, 1.75rem);
  align-items: center;
  font-family: var(--font1);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
}

.site-nav a {
  color: var(--c1);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--ca);
  border-bottom-color: var(--ca);
}

.site-nav .cta-link {
  color: var(--c1);
  border: 1px solid var(--c1);
  padding: 0.5rem 1rem;
  border-radius: 1.75rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-nav .cta-link:hover, .site-nav .cta-link:focus-visible {
  background-color: var(--c1);
  color: var(--bg1);
  border-bottom-color: transparent;
  border-color: var(--c1);
}

@media (max-width: 900px) {
  .site-nav {
    gap: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .site-nav a:nth-of-type(1),
  .site-nav a:nth-of-type(2),
  .site-nav a:nth-of-type(3) {
    display: none;
  }
}
@media (max-width: 560px) {
  .site-nav .cta-link {
    display: none;
  }
}
/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 7rem) var(--pad-x) clamp(3rem, 6vw, 5rem);
  max-width: var(--w-total);
  margin: 0 auto;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  width: clamp(24rem, 36vw, 36rem);
  aspect-ratio: 1;
  background-color: var(--c1);
  -webkit-mask: url("assets/brand/elmspark-tree-handdrawn-noframe.svg") center/contain no-repeat;
  mask: url("assets/brand/elmspark-tree-handdrawn-noframe.svg") center/contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.hero-meta {
  font-family: var(--font1);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2);
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  max-width: 100%;
}

.hero-meta span + span::before {
  content: "·";
  margin: 0 0.6em;
  color: var(--c2);
}

.hero-thesis {
  font-family: var(--font2);
  font-weight: 400;
  font-size: clamp(2.75rem, 9vw, 7.5rem);
  line-height: clamp(2.6rem, 8.55vw, 7.125rem);
  letter-spacing: -0.035em;
  color: var(--c1);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}

.hero-thesis .line {
  display: block;
}

.hero-thesis .line-3 {
  color: var(--ink-soft);
}

.hero-lede {
  font-family: var(--font2);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  line-height: clamp(1.8125rem, 3.625vw, 2.359rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 44rem;
  margin: 0 0 2rem;
}

.hero-cta {
  margin-top: 0.5rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
  .hero-grid .hero-thesis {
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: clamp(2.375rem, 5.7vw, 5.225rem);
  }
}
@media (min-width: 960px) {
  .hero-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-grid--single .hero-thesis {
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: clamp(2.375rem, 5.7vw, 5.225rem);
  }
  .hero-grid--single .hero-content {
    max-width: 48rem;
  }
}
.hero-content > p {
  max-width: var(--w-content);
}

/* Signature mark */
.signature-mark-wrap {
  max-width: var(--w-total);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--pad-x);
  display: flex;
  justify-content: center;
}

.signature-mark {
  width: 100%;
  max-width: 44rem;
  height: auto;
  color: var(--ca);
  opacity: 0.9;
}

.signature-mark-wrap + .manifesto {
  border-top: none;
}

/* Manifesto */
.manifesto {
  padding: var(--pad-section) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .manifesto-grid {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}
.manifesto-heading {
  font-family: var(--font2);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: clamp(2.205rem, 5.88vw, 4.41rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0;
}

.manifesto-heading .line {
  display: block;
}

.manifesto-body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--w-content);
}

.manifesto-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 1.5em;
  max-width: 100%;
}

.manifesto-body p:last-child {
  margin-bottom: 0;
}

/* Portrait band */
.portrait-band {
  max-width: var(--w-total);
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  padding: 0 var(--pad-x);
  text-align: center;
}

.portrait-band img {
  display: block;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto;
}

.portrait-band figcaption {
  font-family: var(--font1);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c2);
  margin-top: 0.75rem;
}

/* Stat band: full-bleed dark band with paper-warm tree mark on the right. */
.stat-band {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
  background-color: var(--c1);
  color: var(--bg1);
  border-top: none;
}

.stat-band > * {
  position: relative;
  z-index: 1;
}

.stat-band::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: clamp(8rem, 18vw, 14rem);
  aspect-ratio: 1;
  background-color: var(--paper-warm);
  -webkit-mask: url("assets/brand/elmspark-tree-handdrawn-noframe.svg") center/contain no-repeat;
  mask: url("assets/brand/elmspark-tree-handdrawn-noframe.svg") center/contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.stat-band-content {
  max-width: var(--w-total);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 700px) {
  .stat-band-content {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}
.stat-number {
  font-family: var(--font2);
  font-size: clamp(7rem, 18vw, 15rem);
  line-height: clamp(5.74rem, 14.76vw, 12.3rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  color: var(--bg1);
  margin: 0;
  max-width: none;
}

.stat-label-big {
  font-family: var(--font2);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: clamp(1.8375rem, 3.675vw, 2.8875rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--bg1);
  margin: 0 0 1rem;
  max-width: none;
}

.stat-body {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(246, 242, 234, 0.8);
  margin: 0;
  max-width: 30rem;
}

/* Work */
.work {
  padding: var(--pad-section) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.work-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 820px) {
  .work-head {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: end;
  }
}
.work-intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30rem;
  margin: 0;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
.work-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background-color: var(--bg1);
  border: 1px solid var(--rule);
  color: var(--c1);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
  min-height: 100%;
}

a.work-card:hover, a.work-card:focus-visible {
  border-color: var(--ca);
  color: var(--c1);
}

.work-card-here {
  background-color: var(--paper-warm);
  cursor: default;
}

.work-num {
  font-family: var(--font2);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--c2);
  letter-spacing: 0.04em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.work-title {
  font-family: var(--font2);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: clamp(1.5125rem, 2.75vw, 1.925rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
  color: var(--c1);
}

.work-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 auto;
  max-width: 100%;
}

.work-link {
  font-family: var(--font1);
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ca);
  margin: 1rem 0 0;
  letter-spacing: 0.01em;
}

a.work-card:hover .work-link,
a.work-card:focus-visible .work-link {
  color: var(--accent-hover);
}

.work-card-here .work-link {
  color: var(--c2);
  font-style: italic;
}

/* Commissions */
.commissions-section {
  padding: var(--pad-section) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.commissions-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 820px) {
  .commissions-head {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: end;
  }
}
.commissions-intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30rem;
  margin: 0;
}

.commission {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}

.commission:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.commission-number {
  font-family: var(--font2);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.4;
  color: var(--c2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 1rem;
  margin: 0;
}

.commission-main {
  min-width: 0;
}

.commission-name {
  font-family: var(--font2);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: clamp(2.04rem, 4.59vw, 3.06rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
  color: var(--c1);
}

.commission-desc {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36rem;
  margin: 0 0 1rem;
}

.commission-price {
  font-family: var(--font1);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--c1);
  margin: 0;
}

.commission-action {
  padding-top: 1rem;
  align-self: start;
  white-space: nowrap;
}

.commission-action a {
  color: var(--c1);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
  border-bottom: 1px solid var(--c1);
  padding-bottom: 3px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.commission-action a:hover,
.commission-action a:focus-visible {
  color: var(--ca);
  border-color: var(--ca);
}

@media (max-width: 700px) {
  .commission {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .commission-number {
    padding-top: 0;
  }
  .commission-action {
    padding-top: 0.5rem;
  }
}
/* Suite */
.suite {
  padding: var(--pad-section) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  background-color: var(--paper-warm);
}

.suite-head {
  max-width: var(--w-total);
  margin: 0 auto 3rem;
}

.suite-head .section-title {
  max-width: 32ch;
  margin: 0 0 1.5rem;
}

.suite-intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 48rem;
  margin: 0;
}

.suite-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 640px) {
  .suite-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .suite-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.suite-item {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background-color: var(--bg1);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.suite-item h3 {
  font-family: var(--font2);
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.suite-item h3 span {
  color: var(--ca);
  font-weight: 700;
}

.suite-item p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 100%;
}

.suite-icon {
  width: 40px;
  height: 40px;
  color: var(--ca);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

/* Pull quote (full-bleed accent) */
.pull {
  padding: clamp(5rem, 10vw, 7rem) var(--pad-x);
  max-width: none;
  margin: 0;
  border-top: none;
  background-color: var(--ca);
  color: var(--bg1);
}

.pull blockquote {
  max-width: var(--w-total);
  margin: 0 auto;
  font-family: var(--font2);
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: clamp(2.0125rem, 5.175vw, 3.7375rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--bg1);
  font-style: italic;
  quotes: none;
  padding-left: 0;
  border-left: 0;
}

/* Closing CTA */
.closing-cta {
  padding: var(--pad-section) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .cta-grid {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
}
.cta-body p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--w-content);
  margin: 0 0 2rem;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* About page */
.about-hero {
  padding: clamp(4rem, 10vw, 9rem) var(--pad-x) clamp(3rem, 6vw, 5rem);
  max-width: var(--w-total);
  margin: 0 auto;
}

.about-hero-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font1);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2);
  margin: 0 0 2.5rem;
}

.about-hero-meta span {
  display: inline-block;
}

.about-hero-heading {
  font-family: var(--font2);
  font-size: clamp(2.75rem, 8vw, 6.5rem);
  line-height: clamp(2.6125rem, 7.6vw, 6.175rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  margin: 0 0 2rem;
  max-width: 18ch;
}

.about-hero-lede {
  font-family: var(--font2);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: clamp(1.925rem, 3.5vw, 2.45rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 44rem;
  margin: 0;
}

.about-section {
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 820px) {
  .about-layout {
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.about-heading {
  font-family: var(--font2);
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: clamp(2.1375rem, 5.225vw, 4.0375rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0 2rem;
}

.about-heading .line {
  display: block;
}

.about-body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--w-content);
}

.about-body p {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0 0 1.4em;
  max-width: 100%;
}

.about-body p:last-child {
  margin-bottom: 0;
}

.about-cta {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Contact page */
.contact-hero {
  padding: clamp(4rem, 10vw, 9rem) var(--pad-x) clamp(2.5rem, 5vw, 4rem);
  max-width: var(--w-total);
  margin: 0 auto;
}

.contact-hero .about-hero-meta {
  margin-bottom: 2.5rem;
}

.contact-hero-heading {
  font-family: var(--font2);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: clamp(2.375rem, 6.65vw, 5.225rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}

.contact-hero-price {
  font-family: var(--font2);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 400;
  color: var(--ca);
  margin: 0 0 2rem;
  letter-spacing: -0.02em;
}

.contact-hero-lede {
  font-family: var(--font2);
  font-size: clamp(1.25rem, 2.25vw, 1.625rem);
  line-height: clamp(1.75rem, 3.15vw, 2.275rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 44rem;
  margin: 0;
}

.contact-main {
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.contact-text h2 {
  font-family: var(--font2);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: clamp(1.925rem, 3.85vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 16ch;
}

.contact-text p {
  color: var(--ink-soft);
  max-width: 34rem;
}

.contact-form {
  background-color: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.contact-form > p {
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c2);
}

.form-row {
  margin-bottom: 1.25rem;
}

.form-row label {
  display: block;
  font-family: var(--font1);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  color: var(--c1);
}

.form-row input,
.form-row textarea {
  width: 100%;
  font-family: var(--font1);
  font-size: 1rem;
  line-height: 1em;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--rule);
  background-color: var(--bg1);
  color: var(--c1);
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-row textarea {
  min-height: 6.5rem;
  line-height: 1.55;
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--ca);
  box-shadow: 0 0 0 3px rgba(58, 81, 64, 0.2);
}

.form-note {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--c2);
  margin: 1rem 0 0;
}

/* Contact meta */
.contact-meta {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x);
  max-width: var(--w-total);
  margin: 0 auto;
}

.contact-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 720px) {
  .contact-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .contact-meta-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}
.contact-meta-item h3 {
  font-family: var(--font1);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2);
  margin: 0 0 0.75rem;
}

.contact-meta-item p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.contact-meta-item a {
  color: var(--c1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.contact-meta-item a:hover,
.contact-meta-item a:focus-visible {
  color: var(--ca);
}

/* 404 — A clearing. Award-targeted creative composition.
 *
 * The brand name is ElmsPark. A park is a place you can wander in.
 * A 404 is a kind of wander. The page treats the moment as a clearing
 * in the woods, the tree mark as the only thing standing in it, and
 * trail-marker links back to the path. One small autumn-orange leaf
 * falls every twelve seconds. The only motion and the only non-palette
 * accent on the entire site.
 */
.notfound {
  min-height: calc(100vh - 14rem);
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vw, 6rem) var(--pad-x);
  overflow: hidden;
  position: relative;
}

.notfound-canvas {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--w-total);
  width: 100%;
  position: relative;
}

@media (min-width: 720px) {
  .notfound-canvas {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
.notfound-text {
  z-index: 2;
}

.notfound-eyebrow {
  font-family: var(--font1);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c2);
  margin: 0 0 1.5rem;
}

.notfound-heading {
  font-family: var(--font2);
  font-size: clamp(5.5rem, 18vw, 14rem);
  line-height: 0.88;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ca);
  margin: 0 0 2rem;
}

.notfound-body {
  font-family: var(--font2);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 32ch;
  margin: 0 0 3rem;
}

.notfound-trails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .notfound-trails {
    flex-direction: row;
    gap: 2.5rem;
  }
}
.notfound-trail {
  font-family: var(--font1);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c1);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  transition: border-color 0.2s ease, color 0.2s ease;
  display: inline-block;
}

.notfound-trail:hover,
.notfound-trail:focus-visible {
  color: var(--ca);
  border-color: var(--ca);
}

.notfound-tree {
  position: relative;
  align-self: stretch;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.notfound-tree img {
  width: 100%;
  max-width: 28rem;
  height: auto;
  display: block;
  opacity: 0.85;
}

/* Single autumn-orange leaf, drops slowly from the tree once every
 * twelve seconds. The only colour outside the moss-and-cream palette
 * anywhere on the site. The single moment of motion. */
.notfound-leaf {
  position: absolute;
  top: 18%;
  left: 56%;
  width: 1.5rem;
  height: 1.5rem;
  color: #b66c2e;
  opacity: 0;
  transform: translate(-50%, 0) rotate(0deg);
  animation: notfound-leaf-fall 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  animation-delay: 4s;
  pointer-events: none;
}

@keyframes notfound-leaf-fall {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + 7rem), 60vh) rotate(540deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notfound-leaf {
    animation: none;
    display: none;
  }
}
/* Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) clamp(2rem, 4vw, 3rem);
  background-color: var(--paper-warm);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.site-footer .brand-mark {
  width: 5em;
  height: 5em;
}

.footer-grid {
  max-width: var(--w-total);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}
.footer-brand .wordmark {
  font-size: 1.25rem;
  line-height: 1.2;
  display: block;
  margin-bottom: 0.75rem;
}

.footer-brand p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c2);
  max-width: 24rem;
}

.footer-col h4 {
  font-family: var(--font1);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2);
  margin: 0 0 1rem;
}

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

.footer-col li {
  margin: 0 0 0.5rem;
}

.footer-col a {
  color: var(--c1);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color 0.15s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--ca);
}

.footer-bottom {
  max-width: var(--w-total);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--c2);
}

.footer-bottom p {
  margin: 0;
}

/* Progressive reveal: applied to manifesto-heading and similar via data-reveal. */
[data-reveal] .line {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

[data-reveal].is-revealed .line:nth-child(1) {
  transition-delay: 0ms;
}

[data-reveal].is-revealed .line:nth-child(2) {
  transition-delay: 180ms;
}

[data-reveal].is-revealed .line:nth-child(3) {
  transition-delay: 360ms;
}

[data-reveal].is-revealed .line {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] .line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* EP Email contact form styling overrides.
 * EP Email ships its own contact-form.css with generic blue-button defaults.
 * This partial maps EP Email's class structure onto the ElmsPark theme's
 * existing .contact-form / .form-row / .btn aesthetic, parented under
 * .contact-form-wrap so specificity beats EP Email's inline .
 */
.contact-form-wrap .ep-contact-form-wrapper {
  max-width: none;
  margin: 0;
}

.contact-form-wrap .ep-contact-form {
  background-color: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.contact-form-wrap .ep-contact-form .form-field {
  margin-bottom: 1.25rem;
}

.contact-form-wrap .ep-contact-form label {
  display: block;
  font-family: var(--font1);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  color: var(--c1);
}

.contact-form-wrap .ep-contact-form .required {
  color: var(--ca);
  font-weight: 400;
}

.contact-form-wrap .ep-contact-form input[type=text],
.contact-form-wrap .ep-contact-form input[type=email],
.contact-form-wrap .ep-contact-form input[type=tel],
.contact-form-wrap .ep-contact-form input[type=number],
.contact-form-wrap .ep-contact-form input[type=url],
.contact-form-wrap .ep-contact-form textarea,
.contact-form-wrap .ep-contact-form select {
  width: 100%;
  font-family: var(--font1);
  font-size: 1rem;
  line-height: 1em;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--rule);
  background-color: var(--bg1);
  color: var(--c1);
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.contact-form-wrap .ep-contact-form textarea {
  min-height: 6.5rem;
  line-height: 1.55;
  resize: vertical;
}

.contact-form-wrap .ep-contact-form input:focus,
.contact-form-wrap .ep-contact-form textarea:focus,
.contact-form-wrap .ep-contact-form select:focus {
  outline: none;
  border-color: var(--ca);
  box-shadow: 0 0 0 3px rgba(58, 81, 64, 0.2);
}

.contact-form-wrap .ep-contact-form .checkbox-label,
.contact-form-wrap .ep-contact-form .radio-label,
.contact-form-wrap .ep-contact-form .ep-gdpr-consent-field label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font1);
  font-size: 0.8125rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c2);
  cursor: pointer;
  margin-bottom: 0;
  text-transform: none;
}

.contact-form-wrap .ep-contact-form .checkbox-label input,
.contact-form-wrap .ep-contact-form .radio-label input,
.contact-form-wrap .ep-contact-form .ep-gdpr-consent-field input {
  width: auto;
  margin: 0.2rem 0 0 0;
  flex-shrink: 0;
}

.contact-form-wrap .ep-contact-submit {
  display: inline-block;
  font-family: var(--font1);
  font-size: 1rem;
  line-height: 1em;
  font-weight: 500;
  color: var(--bg1);
  text-decoration: none;
  background-color: var(--c1);
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--c1);
  border-radius: 1.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-top: 0.5rem;
}

.contact-form-wrap .ep-contact-submit:hover,
.contact-form-wrap .ep-contact-submit:focus-visible {
  background-color: var(--ca);
  border-color: var(--ca);
  color: var(--bg1);
}

.contact-form-wrap .ep-contact-response {
  margin-top: 1rem;
  font-family: var(--font1);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c2);
}

.contact-form-wrap .ep-contact-response:not(:empty) {
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  background-color: var(--bg1);
}