/* ==========================================================================
   Landing pages. All colours/typography come from tokens.css; per-landing
   overrides live in /landings/<slug>/theme.css.
   ========================================================================== */

/* ---- Demo bar (only rendered in demo mode) ---- */
.demo-bar {
  background: var(--cimero-black);
  color: var(--cimero-offwhite);
  border-bottom: var(--border-width) solid var(--color-dark-border);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  /* Call-to-action button: metallic gold finish and attention effect (see README, "Demo bar button") */
  --demo-cta-gold-top: #e9d29a; /* gradient, top (light gold) */
  --demo-cta-gold-bottom: #a98648; /* gradient, bottom (deeper gold; do not go darker) */
  --demo-cta-highlight: rgb(255 255 255 / 0.55); /* 1px inner top highlight */
  --demo-cta-edge: rgb(80 55 10 / 0.45); /* 1px darker bottom edge */
  --demo-cta-glow: rgb(200 169 110 / 0.28); /* soft glow at rest */
  --demo-cta-glow-size: 0.75rem;
  --demo-cta-glow-hover: rgb(200 169 110 / 0.5); /* glow on hover / focus */
  --demo-cta-glow-size-hover: 1rem;
  --demo-cta-sheen: rgb(255 255 255 / 0.55); /* peak colour of the sheen band */
  --demo-cta-sheen-width: 36%; /* band width, relative to the button */
  --demo-cta-delay: 1.2s; /* wait after page load before the first sweep */
  --demo-cta-cycle: 7.4s; /* 1.4s sweep (first ~18%) + ~6s rest */
  --demo-cta-repeats: 4; /* total sweeps; keep it finite */
  --demo-cta-hover-sweep: 0.7s; /* extra sweep on hover / focus-visible */
  /* "Cimero Studio" link in the message */
  --demo-link-gold: #c8a96e; /* resting and pressed text colour */
  --demo-link-gold-light: #e9d29a; /* hover / focus text colour and underline */
  --demo-link-underline: rgb(200 169 110 / 0.55); /* resting 1px underline (about 3.3:1 on the bar, the non-colour link cue) */
  --demo-link-offset: 0em; /* lifts the underline from the bottom of the text box (about 0.25em below the baseline at 0) */
  --demo-link-hover-thickness: 2px; /* underline thickness on hover / focus */
  --demo-link-in: 220ms; /* underline draws in */
  --demo-link-out: 160ms; /* underline relaxes back */
}
.demo-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  padding-block: var(--space-1);
}
.demo-bar :focus-visible {
  outline-color: var(--cimero-gold);
}
.demo-bar__badge {
  display: none;
}
.demo-bar__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cimero-gold);
}
.demo-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  /* room inside the clip box for the link's focus ring; the negative margin keeps the layout identical */
  padding: 6px;
  margin: -6px;
}
/* The "Cimero Studio" link in the message: thin offset underline that draws in on hover / focus (background-size only) */
.demo-bar__text a {
  --demo-link-line: var(--demo-link-gold-light); /* colour of the full-opacity underline (rest gold while pressed) */
  color: var(--demo-link-gold);
  text-decoration: none;
  background-image: linear-gradient(var(--demo-link-underline), var(--demo-link-underline)), linear-gradient(var(--demo-link-line), var(--demo-link-line));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--demo-link-offset)), 0 calc(100% - var(--demo-link-offset));
  background-size: 100% 1px, 0 var(--demo-link-hover-thickness);
  transition:
    background-size var(--demo-link-out) ease-out,
    color var(--demo-link-out) ease-out;
}
.demo-bar__text a:hover,
.demo-bar__text a:focus-visible {
  color: var(--demo-link-gold-light);
  background-size: 100% 1px, 100% var(--demo-link-hover-thickness);
  transition-duration: var(--demo-link-in);
}
.demo-bar__text a:active {
  --demo-link-line: var(--demo-link-gold);
  color: var(--demo-link-gold);
}
.demo-bar__text a:focus-visible {
  outline: 2px solid var(--cimero-gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .demo-bar__text a {
    transition: none;
  }
}
@media (forced-colors: active) {
  .demo-bar__text a,
  .demo-bar__text a:hover,
  .demo-bar__text a:focus-visible,
  .demo-bar__text a:active {
    background-image: none;
    color: LinkText;
    text-decoration: underline;
  }
}
.demo-bar__long,
.demo-bar__cta-long {
  display: none;
}
.demo-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}
.demo-bar__cta {
  position: relative;
  isolation: isolate; /* the sheen sits behind the text (z-index -1), above the gold */
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 1.875rem;
  /* 1px transparent border (visible only in forced-colors) is taken out of the padding: the size never changes */
  padding: 0 calc(var(--space-3) - 1px);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden; /* clips the sheen; the focus outline and the glow are drawn outside, so they are not clipped */
  background-color: var(--cimero-gold);
  background-image: linear-gradient(to bottom, var(--demo-cta-gold-top), var(--cimero-gold) 50%, var(--demo-cta-gold-bottom));
  box-shadow:
    inset 0 1px 0 var(--demo-cta-highlight),
    inset 0 -1px 0 var(--demo-cta-edge),
    0 0 var(--demo-cta-glow-size) var(--demo-cta-glow);
  color: var(--cimero-black);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
}
/* Sheen: a narrow diagonal band that crosses the button. ::before runs the finite intro loop, ::after the hover/focus sweep. */
.demo-bar__cta::before,
.demo-bar__cta::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--demo-cta-sheen-width);
  background: linear-gradient(105deg, transparent, var(--demo-cta-sheen) 50%, transparent);
  opacity: 0;
  transform: translateX(-100%) skewX(-20deg);
  pointer-events: none;
  z-index: -1;
}
.demo-bar__cta::before {
  /* one animation: the sweep takes the first ~18% of the cycle (1.4s of 7.4s), the rest is idle; finite, then it stops for good */
  animation: demo-cta-sheen var(--demo-cta-cycle) ease-in-out var(--demo-cta-delay) var(--demo-cta-repeats) both;
}
.demo-bar__cta:hover::after,
.demo-bar__cta:focus-visible::after {
  animation: demo-cta-sheen-once var(--demo-cta-hover-sweep) ease-in-out 1 both;
}
@keyframes demo-cta-sheen {
  0% {
    opacity: 1;
    transform: translateX(-100%) skewX(-20deg);
  }
  18% {
    opacity: 1;
    transform: translateX(310%) skewX(-20deg);
  }
  18.01%,
  100% {
    opacity: 0;
    transform: translateX(310%) skewX(-20deg);
  }
}
@keyframes demo-cta-sheen-once {
  from {
    opacity: 1;
    transform: translateX(-100%) skewX(-20deg);
  }
  99% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(310%) skewX(-20deg);
  }
}
/* The arrow is the only aria-hidden child of the button */
.demo-bar__cta > [aria-hidden='true'] {
  display: inline-block;
  transition: transform 0.15s ease-out;
}
.demo-bar__cta:hover,
.demo-bar__cta:focus-visible {
  background-color: var(--cimero-offwhite);
  background-image: linear-gradient(to bottom, #fff, var(--cimero-offwhite) 50%, #e4dccb);
  box-shadow:
    inset 0 1px 0 var(--demo-cta-highlight),
    inset 0 -1px 0 var(--demo-cta-edge),
    0 0 var(--demo-cta-glow-size-hover) var(--demo-cta-glow-hover);
}
.demo-bar__cta:hover > [aria-hidden='true'],
.demo-bar__cta:focus-visible > [aria-hidden='true'] {
  transform: translateX(3px);
}
.demo-bar__cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 var(--demo-cta-highlight),
    inset 0 -1px 0 var(--demo-cta-edge),
    0 0 calc(var(--demo-cta-glow-size) / 2) var(--demo-cta-glow);
}
.demo-bar__cta:focus-visible {
  outline: 2px solid var(--cimero-gold); /* gold on the #0d0d0d bar: about 9:1 */
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  /* the static metallic finish and the hover colour change stay; no sweep, no nudge, no transitions */
  .demo-bar__cta::before,
  .demo-bar__cta::after {
    display: none;
    animation: none;
  }
  .demo-bar__cta > [aria-hidden='true'] {
    transition: none;
  }
  .demo-bar__cta:hover > [aria-hidden='true'],
  .demo-bar__cta:focus-visible > [aria-hidden='true'],
  .demo-bar__cta:active {
    transform: none;
  }
}
@media (forced-colors: active) {
  .demo-bar__cta,
  .demo-bar__cta:hover,
  .demo-bar__cta:focus-visible {
    background: ButtonFace;
    background-image: none;
    border-color: ButtonText;
    box-shadow: none;
    color: ButtonText;
  }
  .demo-bar__cta::before,
  .demo-bar__cta::after {
    display: none;
  }
}
.demo-bar__close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cimero-offwhite);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
/* Very narrow screens: keep the dot, the link, the button and the close button; the surrounding words stay for screen readers. */
@media (max-width: 23.75rem) {
  .demo-bar__badge {
    display: inline-flex;
  }
  .demo-bar__badge-text,
  .demo-bar__short {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .demo-bar__inner {
    gap: var(--space-2);
  }
  .demo-bar__cta {
    gap: 0.25em;
    padding-inline: calc(var(--space-2) - 1px);
    font-size: 0.75rem;
    letter-spacing: 0;
  }
  .demo-bar__actions {
    gap: 0;
  }
}
@media (min-width: 48rem) {
  .demo-bar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .demo-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: start;
    padding: 0.125rem var(--space-3);
    border: var(--border-width) solid var(--color-dark-border);
    border-radius: 999px;
    color: var(--cimero-offwhite);
    white-space: nowrap;
  }
  .demo-bar__text {
    text-align: center;
  }
  .demo-bar__actions {
    justify-self: end;
  }
  .demo-bar__long,
  .demo-bar__cta-long {
    display: inline;
  }
  .demo-bar__short,
  .demo-bar__cta-short {
    display: none;
  }
}
.demo-bar-dismissed .demo-bar {
  display: none;
}
.demo-footer-link {
  display: inline;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- Header & navigation ---- */
.site-header {
  background: var(--header-bg);
  border-bottom: var(--border-width) solid var(--header-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.25rem;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--border-width) solid var(--header-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-toggle__bar {
  position: relative;
}
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav ul {
  display: grid;
  gap: var(--space-1);
}
.site-nav a:not(.button) {
  display: block;
  padding: var(--space-3) 0;
  text-decoration: none;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}
.site-nav a:not(.button):hover {
  color: var(--color-accent);
}

/* Mobile: nav collapses only when JS is available (no-JS users always see it). */
.js .site-nav {
  position: absolute;
  inset: 100% 0 auto;
  background: var(--header-bg);
  border-bottom: var(--border-width) solid var(--header-border);
  padding: var(--space-3) var(--gutter) var(--space-5);
}
.js .site-nav:not(.is-open) {
  display: none;
}
html:not(.js) .nav-toggle {
  display: none;
}
html:not(.js) .site-header__inner {
  flex-wrap: wrap;
}

@media (min-width: 52rem) {
  .nav-toggle,
  html:not(.js) .nav-toggle {
    display: none;
  }
  .js .site-nav,
  .js .site-nav:not(.is-open) {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }
  .site-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
}

/* ---- Hero ---- */
.hero {
  background: var(--hero-bg);
  padding-block: var(--hero-space);
}
.hero__inner {
  display: grid;
  gap: var(--space-5);
  max-width: 54rem;
  margin-inline: 0;
}
@media (min-width: 72rem) {
  .hero__inner {
    margin-inline: auto;
    max-width: var(--container);
  }
  .hero__inner > * {
    max-width: 50rem;
  }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ---- Services ---- */
.feature-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.feature {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
.feature p {
  color: var(--color-text-muted);
}

/* ---- Process ---- */
.process {
  counter-reset: step;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.process__step {
  counter-increment: step;
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border-strong);
}
.process__step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-accent-ink);
}
.process__step p {
  color: var(--color-text-muted);
}

/* ---- Social proof placeholder ---- */
.placeholder-block {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  text-align: center;
  color: var(--color-text-muted);
}
.placeholder-block__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

/* ---- FAQ ---- */
.faq {
  border-top: var(--border-width) solid var(--color-border-strong);
}
.faq details {
  border-bottom: var(--border-width) solid var(--color-border-strong);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  color: var(--color-accent-ink);
  transition: transform var(--duration) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding-bottom: var(--space-5);
  color: var(--color-text-muted);
}

/* ---- Contact ---- */
.contact {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 60rem) {
  .contact {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}
.contact__intro {
  display: grid;
  gap: var(--space-4);
}
.contact-form {
  display: grid;
  gap: var(--space-5);
}
.field {
  display: grid;
  gap: var(--space-2);
}
.field label {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  color: var(--field-text);
}
.field textarea {
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--color-accent);
}
.field [aria-invalid="true"] {
  border-color: var(--feedback-error);
}
.field__error {
  font-size: var(--text-sm);
  color: var(--feedback-error);
}
.field__error:empty {
  display: none;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-turnstile {
  min-height: 65px;
}
.contact-form .button {
  justify-self: start;
}
.form-status {
  font-size: var(--text-sm);
}
.form-status:empty {
  display: none;
}
.form-status[data-state="success"] {
  padding: var(--space-4);
  border-left: 3px solid var(--feedback-success);
  color: var(--feedback-success);
}
.form-status[data-state="error"] {
  padding: var(--space-4);
  border-left: 3px solid var(--feedback-error);
  color: var(--feedback-error);
}

/* ---- Footer ---- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: var(--border-width) solid var(--footer-border);
  font-size: var(--text-sm);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.site-footer__links {
  display: flex;
  gap: var(--space-5);
}
.site-footer a {
  display: inline-block;
  padding-block: var(--space-2);
}
.site-footer a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Layout variants (opt-in modifier classes). Snippets: /landings/_partials/.
   None of these apply unless the class is present in the markup.
   ========================================================================== */

/* ---- Header: light ---- */
.site-header--light {
  --header-bg: var(--color-bg);
  --header-border: var(--color-border);
  color: var(--color-text);
}
.site-header--light .site-nav a:not(.button):hover {
  color: var(--color-accent-ink);
}

/* ---- Hero: split (content + art) ---- */
.hero--split .hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  align-items: center;
  gap: var(--space-7);
}
.hero--split .hero__inner > * {
  max-width: none;
}
.hero__content {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.hero__art {
  width: 100%;
  max-width: 28rem;
  justify-self: center;
}
.hero__art svg {
  width: 100%;
  height: auto;
}
@media (min-width: 60rem) {
  .hero--split .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .hero--split.hero--art-first .hero__art {
    order: -1;
  }
}

/* ---- Hero: centered ---- */
.hero--centered .hero__inner,
.hero--centered .hero__content {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}
.hero--centered .lead {
  margin-inline: auto;
}
.hero--centered .hero__actions {
  justify-content: center;
}

/* ---- Statement (large intro paragraph — brand voice, never a testimonial) ---- */
.statement {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.35;
  max-width: 44rem;
  text-wrap: balance;
}
.statement--center {
  margin-inline: auto;
  text-align: center;
}

/* ---- Feature grid: cards ---- */
.feature-grid--cards .feature {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--space-6);
}
.feature__icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-accent-ink);
}

/* ---- Feature grid: numbered ---- */
.feature-grid--numbered {
  counter-reset: feature;
}
.feature-grid--numbered .feature {
  counter-increment: feature;
}
.feature-grid--numbered .feature::before {
  content: counter(feature, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-accent-ink);
}

/* ---- Process: vertical timeline ---- */
.process--timeline {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 42rem;
}
.process--timeline .process__step {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-8);
  border-top: 0;
}
.process--timeline .process__step::before {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  font-size: 1.125rem;
}
.process--timeline .process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: 0;
  width: 1px;
  background: var(--color-border-strong);
}

/* ---- KPI strip (figures MUST be real and approved before production) ---- */
.kpi-strip {
  padding-block: var(--space-7);
  background: var(--color-surface);
  border-block: var(--border-width) solid var(--color-border);
}
.kpi-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-5);
  margin: 0;
}
.kpi {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-accent);
}
.kpi dt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.kpi dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}
.kpi-strip__note {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---- FAQ: two columns on wide screens ---- */
@media (min-width: 60rem) {
  .faq--columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    border-top: 0;
  }
  .faq--columns details:nth-child(-n + 2) {
    border-top: var(--border-width) solid var(--color-border-strong);
  }
}

/* ---- Contact: card on a light section ---- */
.contact--card {
  padding: var(--space-7) var(--gutter);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
}
.contact-form--light {
  --field-bg: #fff;
  --field-border: var(--color-border-strong);
  --field-text: var(--color-text);
  --feedback-error: var(--color-error);
  --feedback-success: var(--color-success);
}

/* ---- Pictures from the image pipeline (<!-- build:picture -->, see scripts/images.mjs) ----
   The wrapper sets the slot's aspect ratio (in the landing's theme.css); the placeholder
   colour/blur is generated per image as .ph-<id> and appended to theme.css by the build. */
.ph {
  display: block;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}