@charset "UTF-8";
/* ---------------------------------------------------------------------------
   Marvify theme styles
   --------------------------------------------------------------------------- */
/* Self-hosted Google Fonts (Inter / Cormorant Garamond / Caveat). Generated
   by bin/selfhost-fonts.js — re-run that script when adding a new weight
   or family. WOFF2 files in assets/fonts/. */
/*
 * Self-hosted Google Fonts. Auto-generated by bin/selfhost-fonts.js.
 * Subsets included: latin, latin-ext.
 * Re-run the script when adding a new weight or family.
 */
/* Caveat 500 latin-ext */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/caveat-500-latin-ext.woff2) format("woff2");
  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;
}
/* Caveat 500 latin */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/caveat-500-latin.woff2) format("woff2");
  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;
}
/* Caveat 700 latin-ext */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat-700-latin-ext.woff2) format("woff2");
  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;
}
/* Caveat 700 latin */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat-700-latin.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 300 latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-latin-ext.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 300 latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-latin.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 400 latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-400-latin-ext.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 400 latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-400-latin.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 500 latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-latin-ext.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 500 latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-latin.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 600 latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-latin-ext.woff2) format("woff2");
  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;
}
/* Cormorant Garamond 600 latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-latin.woff2) format("woff2");
  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;
}
/* Inter 300 latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/inter-300-latin-ext.woff2) format("woff2");
  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;
}
/* Inter 300 latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/inter-300-latin.woff2) format("woff2");
  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;
}
/* Inter 400 latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin-ext.woff2) format("woff2");
  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;
}
/* Inter 400 latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin.woff2) format("woff2");
  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;
}
/* Inter 500 latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin-ext.woff2) format("woff2");
  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;
}
/* Inter 500 latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin.woff2) format("woff2");
  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;
}
/* Inter 600 latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin-ext.woff2) format("woff2");
  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;
}
/* Inter 600 latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin.woff2) format("woff2");
  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;
}
/* Inter 700 latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-latin-ext.woff2) format("woff2");
  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;
}
/* Inter 700 latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-latin.woff2) format("woff2");
  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 {
  --color-bg: #fff;
  --color-bg-alt: #f6f4f0;
  --color-bg-dark: #111110;
  --color-ink: #111110;
  --color-ink-soft: #4a4a48;
  --color-ink-muted: #8a8a86;
  --color-line: #e6e3dc;
  --color-line-dark: #2a2a28;
  --color-accent: #b08c4a;
  --color-accent-dark: #95743a;
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container-max: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

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

/* Skip-to-main-content link. Visually hidden until focused (Tab key
   reveals it for keyboard / screen-reader users). The earlier
   `top: -40px` approach left a few pixels of the element poking into
   the viewport because the element's padded height exceeded 40px;
   the sr-only pattern below is bulletproof. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  left: 0;
  top: 0;
}

.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  padding: 0.5rem 1rem;
  background: var(--color-ink);
  color: #fff;
  z-index: 100;
}

/* --- layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--section-y) 0;
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--dark {
  background: var(--color-bg-dark);
  color: #f4f1ea;
}

.section--center {
  text-align: center;
}

.section__header {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 760px;
}

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

.section__header--left {
  text-align: left;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 1.25rem;
}

.eyebrow--light {
  color: rgba(244, 241, 234, 0.7);
}

.section__title {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 1rem;
}

.section__title--display {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: 3rem;
}

.section__title--light {
  color: #f4f1ea;
}

.section__lede {
  font-size: 1.125rem;
  color: var(--color-ink-soft);
  max-width: 60ch;
}

.section__header--center .section__lede {
  margin-left: auto;
  margin-right: auto;
}

.section__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  justify-content: center;
}

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.25rem;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--color-ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  color: #fff;
  border-color: var(--color-accent-dark);
}

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

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

.section--dark .btn--primary {
  background: #fff;
  color: var(--color-ink);
  border-color: #fff;
}

.section--dark .btn--primary:hover {
  background: transparent;
  color: #fff;
}

/* --- header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  box-shadow: 0 8px 30px -25px rgba(17, 17, 16, 0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.site-logo img {
  height: 32px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav__list a,
.site-nav__list .site-nav__inactive,
.site-nav__dropdown-trigger {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav__inactive {
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

/* --- Product dropdown -------------------------------------------------- */
.site-nav__item--has-children {
  position: relative;
}

.site-nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.site-nav__chevron {
  width: 11px;
  height: 11px;
  transition: transform 0.25s var(--ease);
}

.site-nav__dropdown-trigger[aria-expanded=true] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 180px;
  margin: 0;
  padding: 0.55rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 22px 50px -25px rgba(17, 17, 16, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s var(--ease);
  z-index: 60;
}

/* Invisible hover-bridge: extends the dropdown's hit area up to the
   trigger so the mouse stays hovered while crossing the visual gap. */
.site-nav__dropdown::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  height: 0.7rem;
}

.site-nav__item--has-children:hover > .site-nav__dropdown,
.site-nav__item--has-children:focus-within > .site-nav__dropdown,
.site-nav__dropdown-trigger[aria-expanded=true] + .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown li {
  margin: 0;
}

.site-nav__dropdown a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.site-nav__dropdown a:hover {
  color: var(--color-accent);
}

.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}

.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform 0.25s var(--ease), top 0.25s var(--ease), opacity 0.15s var(--ease);
}

.site-nav__bars {
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-nav__bars::before {
  top: -7px;
}

.site-nav__bars::after {
  top: 7px;
}

.site-nav__toggle[aria-expanded=true] .site-nav__bars {
  background: transparent;
}

.site-nav__toggle[aria-expanded=true] .site-nav__bars::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.site-nav__toggle[aria-expanded=true] .site-nav__bars::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 768px) {
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.25rem var(--gutter);
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .site-nav__list[data-open=true] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav__list > li {
    width: 100%;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-line);
  }
  .site-nav__list > li:first-child {
    border-top: 0;
  }
  /* On mobile the dropdown flattens: chevron hides, children render
     inline beneath the section label as a simple indented list. */
  .site-nav__chevron {
    display: none;
  }
  .site-nav__dropdown-trigger {
    cursor: default;
    color: var(--color-ink-muted);
  }
  .site-nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0.5rem 0 0;
    min-width: 0;
  }
  .site-nav__dropdown a {
    padding: 0.35rem 0 0.35rem 0.75rem;
  }
}
/* --- placeholders ------------------------------------------------------- */
.placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: repeating-linear-gradient(45deg, rgba(17, 17, 16, 0.04) 0 12px, rgba(17, 17, 16, 0.07) 12px 24px);
  border: 1px dashed rgba(17, 17, 16, 0.25);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.placeholder__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.placeholder__caption {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
  max-width: 32ch;
}

/* Small placeholder variants: tighter padding, smaller text so the
   descriptive caption still fits without overflowing the box. */
.placeholder--scene,
.placeholder--overview {
  padding: 0.5rem;
  gap: 0.3rem;
}

.placeholder--scene .placeholder__label,
.placeholder--overview .placeholder__label {
  font-size: 9px;
  letter-spacing: 0.16em;
}

.placeholder--scene .placeholder__caption,
.placeholder--overview .placeholder__caption {
  font-size: 0.7rem;
  line-height: 1.3;
  max-width: 100%;
}

/* Homepage use-case 4-up tiles are mid-sized; slightly smaller caption. */
.use-case-tile .placeholder__caption {
  font-size: 0.78rem;
  line-height: 1.35;
  max-width: 100%;
}

.use-case-tile .placeholder {
  padding: 0.85rem;
  gap: 0.45rem;
}

.placeholder--viewer {
  aspect-ratio: 1/1;
}

.placeholder--video {
  aspect-ratio: 16/10;
}

.placeholder--portrait {
  aspect-ratio: 9/16;
  max-width: 60%;
  margin: 0 auto;
}

@media (max-width: 880px) {
  .placeholder--portrait {
    max-width: 70%;
  }
}
.section--alt .placeholder {
  background-color: rgba(255, 255, 255, 0.5);
}

/* --- hero (split: viewer left, text right) ----------------------------- */
.hero {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 7rem);
  background: radial-gradient(ellipse at top left, rgba(176, 140, 74, 0.08), transparent 60%), var(--color-bg);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}

.hero__media {
  position: relative;
}

.hero__media .placeholder--viewer {
  aspect-ratio: 1/1;
}

/* --- hero viewer (preview still + click-to-start play overlay) --------- */
.hero-viewer {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

.hero-viewer__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-viewer__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  aspect-ratio: 1/1;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -10px rgba(17, 17, 16, 0.35);
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.hero-viewer__play svg {
  /* Polygon is balanced symmetrically in the viewBox (bounding-box
     centre at x=12.5, visually centred once optical mass is accounted
     for), so the flex centring on the button does the rest. */
  width: 55%;
  height: 55%;
}

.hero-viewer__play:hover,
.hero-viewer__play:focus-visible {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 28px -10px rgba(17, 17, 16, 0.4);
  transform: translate(-50%, -50%) scale(1.06);
}

.hero-viewer__play:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Viewer custom element fills the square slot once activated. Default
   hidden so the still + play overlay are the only thing shown in idle
   state; revealed by the active-state rule below. */
.hero-viewer marvify-model-viewer {
  display: none;
  width: 100%;
  height: 100%;
}

/* Active state: viewer takes the slot, still + play overlay hide. */
.hero-viewer[data-hero-viewer-state=active] marvify-model-viewer {
  display: block;
}

.hero-viewer[data-hero-viewer-state=active] .hero-viewer__image,
.hero-viewer[data-hero-viewer-state=active] .hero-viewer__play {
  display: none;
}

/* Temporary hide (2026-05-25): the corner "More scenes" button and its
   hand-drawn hint annotation are hidden until additional viewer
   experiences are built out. DOM, JS, and modal wiring all stay in
   place; revert by removing these two rules when the extra scenes
   ship. `!important` is required because the full .viewer-expand
   definition further down in this file sets display: inline-flex and
   would otherwise win on cascade order. */
.hero-hint--right {
  display: none !important;
}

.viewer-expand {
  display: none !important;
}

/* Playful hand-drawn "Try it!" annotation sticking out of the viewer's
   top-left corner. */
.hero-hint {
  position: absolute;
  width: 9rem;
  height: 6.5rem;
  color: var(--color-accent);
  pointer-events: none;
  z-index: 3;
  animation: hero-hint-bob 4s ease-in-out infinite;
}

.hero-hint--left {
  top: -5rem;
  left: -5.5rem;
}

.hero-hint--right {
  top: -7.5rem;
  right: -5.5rem;
  text-align: right;
  animation-delay: -2s;
}

/* Swedish "Fler scener!" sits visually slightly higher than the English
   "More scenes!" without this nudge — the Caveat handwritten font + the
   8-degree rotation interact differently with the shorter Swedish line
   metrics. Move the whole hint (text + arrow as one unit) down ~1rem
   so the two languages line up at the same visual height. */
:lang(sv) .hero-hint--right {
  top: -6.5rem;
}

.hero-hint__text {
  display: inline-block;
  font-family: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}

.hero-hint--left .hero-hint__text {
  transform: rotate(-8deg);
  transform-origin: 0 50%;
}

.hero-hint--right .hero-hint__text {
  transform: rotate(8deg);
  transform-origin: 100% 50%;
}

.hero-hint__arrow {
  display: block;
  width: 6rem;
  height: 4.5rem;
}

.hero-hint--left .hero-hint__arrow {
  margin: 0.1rem 0 0 1.75rem;
}

.hero-hint--right .hero-hint__arrow {
  margin: 0.1rem 1.75rem 0 auto;
}

/* --- viewer expand button (sits over the 3D viewer) ------------------- */
.viewer-expand {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--color-accent);
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px -6px rgba(17, 17, 16, 0.3);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.viewer-expand:hover {
  background: var(--color-accent-dark);
  transform: scale(1.06);
}

.viewer-expand:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.viewer-expand svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* --- viewer modal (full-page overlay) --------------------------------- */
.viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  animation: viewer-modal-fade-in 0.2s var(--ease);
}

.viewer-modal[hidden] {
  display: none;
}

.viewer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 16, 0.7);
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.viewer-modal__inner {
  position: relative;
  z-index: 1;
  width: 70vw;
  height: 90vh;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 24px 60px -20px rgba(17, 17, 16, 0.4);
  animation: viewer-modal-pop-in 0.3s var(--ease);
}

@media (max-width: 880px) {
  .viewer-modal__inner {
    width: 92vw;
    height: 92vh;
  }
}
.viewer-modal__close {
  position: absolute;
  top: clamp(0.75rem, 1.5vw, 1.25rem);
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.viewer-modal__close:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.viewer-modal__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.viewer-modal__close svg {
  width: 1rem;
  height: 1rem;
}

.placeholder--viewer-large {
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* Scene thumbnail row inside the modal. Capped width so the 3D viewer keeps focus. */
.viewer-scenes {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 140px));
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 720px) {
  .viewer-scenes {
    grid-template-columns: repeat(4, minmax(0, 90px));
  }
}
.viewer-scene {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.viewer-scene:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.viewer-scene:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.viewer-scene .placeholder--scene {
  aspect-ratio: 16/10;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  border-bottom: 1px dashed rgba(17, 17, 16, 0.2);
}

.viewer-scene__title {
  display: block;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-ink);
  line-height: 1.2;
}

@keyframes viewer-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes viewer-modal-pop-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* When the modal is open, lock the page from scrolling underneath. */
body.viewer-modal-open {
  overflow: hidden;
}

@keyframes hero-hint-bob {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(2px, -4px);
  }
}
@media (max-width: 880px) {
  /* Hero stacks vertically on mobile; hide the annotation rather than
     let it collide with the title above. */
  .hero-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hint {
    animation: none;
  }
}
.hero__body {
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.hero__top, .hero__middle, .hero__bottom {
  display: flex;
  flex-direction: column;
}

.hero__title {
  font-size: clamp(2rem, 4.5vw, 3.7rem);
  line-height: 1.02;
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.02em;
}

.hero__subtitle {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--color-ink-soft);
  margin: 0 0 1.5rem;
}

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

@media (max-width: 880px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__body {
    max-width: none;
  }
}
/* Mobile polish for the hero (per management feedback 2026-05-26): less
   empty space between the header and the H1, and slightly smaller CTA
   buttons so they stay side-by-side on narrow phones instead of wrapping
   to two lines. */
@media (max-width: 880px) {
  .hero {
    padding-top: clamp(1rem, 3vw, 1.75rem);
  }
  .hero__actions .btn {
    padding: 0.7rem 1rem;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}
/* --- homepage teaser cards (media + brief copy + link to sub-page) ----- */
.teaser__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .teaser__inner {
    grid-template-columns: 1fr;
  }
  .teaser--media-left .teaser__media {
    order: 2;
  }
}
.teaser__body {
  max-width: 36rem;
}

.teaser__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0.5rem 0 1rem;
}

.teaser__copy {
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 50ch;
}

.teaser__media .placeholder {
  aspect-ratio: 16/10;
}

/* Teaser photo replaces the placeholder when a real image lands. Sized to
   the same 16:10 slot the placeholder uses so the column rhythm stays
   consistent across teasers; object-fit: cover trims slightly when the
   source aspect differs (e.g. home_services.png is 16:9). */
.teaser__media .teaser__photo {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}

/* Stack variant: header centered, four media tiles in a row below. */
.teaser--stack .use-case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 880px) {
  .teaser--stack .use-case-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.use-case-tile {
  margin: 0;
}

.use-case-tile .placeholder {
  aspect-ratio: 4/3;
}

.use-case-tile__caption {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
  text-align: center;
}

/* --- use-cases page: group bands, alternating scenes, variants callout - */
.surface-group-band {
  background: var(--color-bg-alt);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.surface-group__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0.35rem 0 0.75rem;
  letter-spacing: -0.01em;
}

.surface-group__lede {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.surface-scene {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.surface-scene--alt {
  background: var(--color-bg-alt);
}

/* Auto-alternate when surface scenes are rendered as marvify/feature-scene
   blocks. Same approach as process-step: nth-of-type(even) mirrors the
   index-based alternation the legacy templates did. */
.surface-scene:nth-of-type(even):not(.surface-scene--alt) {
  background: var(--color-bg-alt);
}

.surface-scene__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.surface-scene--alt .surface-scene__media,
.surface-scene:nth-of-type(even):not(.surface-scene--alt) .surface-scene__media {
  order: 2;
}

@media (max-width: 880px) {
  .surface-scene__inner {
    grid-template-columns: 1fr;
  }
  .surface-scene--alt .surface-scene__media,
  .surface-scene:nth-of-type(even):not(.surface-scene--alt) .surface-scene__media {
    order: 0;
  }
}
.surface-scene__media .placeholder {
  aspect-ratio: 4/3;
}

/* Real-image variant of the surface-scene media slot. Same 4:3 box the
   placeholder uses, contain-fit so wider source compositions (e.g.
   viewer.png at 16:10) show in full without clipping side content like
   the gold 3D badge or the product info column. */
.surface-scene__media .surface-scene__photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  display: block;
}

/* /about brand-slogans values strip and prose tweaks. Three-column
   editorial strip on a cream alt-section, with the SDG 13 entry
   carrying a small link to the UN goals source under its slogan line.
   Stacks on narrow viewports. */
.about-values__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 880px) {
  .about-values__list {
    grid-template-columns: 1fr;
  }
}
.about-values__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-values__line {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink);
}

.about-values__note {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 0;
}

.about-prose p {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Shared prose typography for legal pages (privacy policy, future
   terms, etc.). Reads comfortably for long-form static text. Links
   are explicitly underlined so legal references and email/contact
   links are unambiguous against the prose. */
.legal-prose {
  color: var(--color-ink);
}

.legal-prose p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 1em;
}

.legal-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.75rem;
}

.legal-prose ul {
  padding-left: 1.5rem;
  margin: 0 0 1em;
}

.legal-prose ul li {
  line-height: 1.7;
  margin: 0 0 0.25em;
}

.legal-prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-prose a:hover {
  color: var(--color-accent-dark);
}

/* Expandable "Company details" disclosure at the bottom of /about.
   Satisfies the e-handelslagen §8 information requirement (org-nr, VAT,
   etc. must be published) while staying visually quiet -- collapsed by
   default, click-to-expand. Uses native <details>/<summary> so it is
   keyboard-accessible without any JS. */
.about-imprint {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
}

.about-imprint__summary {
  color: var(--color-ink-soft);
  cursor: pointer;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s var(--ease);
}

.about-imprint__summary:hover {
  color: var(--color-accent);
}

.about-imprint[open] .about-imprint__summary {
  color: var(--color-ink);
}

.about-imprint__body {
  margin: 1rem auto 0;
  max-width: 22rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  text-align: left;
}

.about-imprint__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
  margin: 0;
}

.about-imprint__list dt {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.about-imprint__list dd {
  margin: 0;
  color: var(--color-ink);
}

/* /integration extras: paired text-only footer cards sitting between the
   image-led feature scenes and the closing CTA. Two columns on desktop
   so the two items read as a single combined "and there's more" moment;
   stacks on narrow viewports. */
.integration-extras__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

@media (max-width: 720px) {
  .integration-extras__grid {
    grid-template-columns: 1fr;
  }
}
.integration-extras__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.integration-extras__short {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

.integration-extras__body {
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

.surface-scene__body {
  max-width: 36rem;
}

.surface-scene__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

.surface-scene__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.surface-scene__short {
  font-size: 1.1rem;
  color: var(--color-ink);
  margin: 0 0 1.5rem;
  line-height: 1.55;
}

.surface-scene__copy {
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* "One 3D Twin, many variants" callout linking to /integration. */
.variants-callout {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.variants-callout__body {
  max-width: 640px;
  margin: 0 auto;
}

.variants-callout__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0.35rem 0 0.9rem;
}

.variants-callout__copy {
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

/* --- services overview strip (at-a-glance, links into pillar detail) --- */
.services-overview {
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem);
}

.services-overview__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 880px) {
  .services-overview__cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .services-overview__cards {
    grid-template-columns: 1fr;
  }
}
.services-overview__card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.1rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.services-overview__card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  color: inherit;
}

.services-overview__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.services-overview__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.2;
}

.services-overview__summary {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  line-height: 1.45;
  margin-top: auto;
}

/* --- pillar rows (services sub-page) ----------------------------------- */
.pillar-rows {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

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

.pillar-row:nth-child(even) .pillar-row__media {
  order: 2;
}

@media (max-width: 880px) {
  .pillar-row {
    grid-template-columns: 1fr;
  }
  .pillar-row:nth-child(even) .pillar-row__media {
    order: 0;
  }
}
.pillar-row__media .placeholder {
  aspect-ratio: 4/3;
}

/* Real-image variant of the pillar media slot. Same 4:3 box the
   placeholder uses, with object-fit: contain so wider source images
   (the 16:10 browser mockups for /services Pillar 3 Viewer and
   Pillar 4 Toolkit) fit fully without clipping their side content
   (the gold 3D badge, the product info column, the editor toolbar).
   Letterbox strips show through to the white section bg; the
   mockup images themselves have white backgrounds so the seam is
   invisible. */
.pillar-row__media .pillar-row__photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  display: block;
}

.pillar-row__body {
  max-width: 36rem;
}

.pillar-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0.35rem 0 0.9rem;
}

.pillar-row__copy {
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* --- process sub-page --------------------------------------------------
   Top: a compact infographic strip with four numbered thumbnails plus
   hand-drawn connectors. Below: each step rendered as a full-bleed
   alternating image + detail section with longer copy.                 */
.process-hero {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
}

.process-overview {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 0 var(--gutter);
}

.process-overview__steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 1rem);
}

.process-overview__step {
  display: contents;
}

.process-overview__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease);
}

.process-overview__link:hover {
  transform: translateY(-3px);
}

.process-overview__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.process-overview__thumb {
  display: block;
  width: 100%;
  max-width: 150px;
}

.placeholder--overview {
  aspect-ratio: 1/1;
}

.process-overview__thumb .thread__circle {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.process-overview__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-ink);
  text-align: center;
  line-height: 1.25;
}

.process-overview__connector {
  width: 60px;
  height: 30px;
  color: var(--color-accent);
}

@media (max-width: 720px) {
  .process-overview__steps {
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
  .process-overview__connector {
    display: none;
  }
  .process-overview__thumb {
    max-width: 200px;
  }
}
/* --- big alternating step detail sections ----------------------------- */
.process-step-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.process-step-section--alt {
  background: var(--color-bg-alt);
}

/* Auto-alternate when process steps are rendered as marvify/process-step blocks
   (no manual --alt class on every other section). nth-of-type(even) matches
   the 2nd and 4th <section> children of the same parent, which mirrors the
   index-based alternation the legacy PHP template did. The :not() guard
   prevents double-styling if both the class and the auto-rule apply. */
.process-step-section:nth-of-type(even):not(.process-step-section--alt) {
  background: var(--color-bg-alt);
}

.process-step-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.process-step-section--alt .process-step-section__media,
.process-step-section:nth-of-type(even):not(.process-step-section--alt) .process-step-section__media {
  order: 2;
}

@media (max-width: 880px) {
  .process-step-section__inner {
    grid-template-columns: 1fr;
  }
  .process-step-section--alt .process-step-section__media,
  .process-step-section:nth-of-type(even):not(.process-step-section--alt) .process-step-section__media {
    order: 0;
  }
}
.process-step-section__media .placeholder {
  aspect-ratio: 4/3;
}

/* Real-image variant of the process-step media slot. Same 4:3 box the
   placeholder uses, contain-fit so wider source images (e.g. the 16:9
   integrate composition for step 3) show their full width without
   side-cropping. Letterbox strips show through to the section bg --
   white on odd-index steps, cream on the even-index (alt) step. */
.process-step-section__media .process-step-section__photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  display: block;
}

.process-step-section__body {
  max-width: 36rem;
}

.process-step-section__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

.process-step-section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.process-step-section__short {
  font-size: 1.1rem;
  color: var(--color-ink);
  margin: 0 0 1.5rem;
  line-height: 1.55;
}

.process-step-section__copy {
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.process-step-section__copy:last-child {
  margin-bottom: 0;
}

/* --- about page extended prose --------------------------------------- */
.about-prose {
  text-align: center;
}

.placeholder-note {
  border: 1px dashed rgba(17, 17, 16, 0.25);
  border-radius: var(--radius);
  padding: 2rem;
  color: var(--color-ink-soft);
  font-style: italic;
  background: var(--color-bg-alt);
  margin: 0 auto 2rem;
  max-width: 60ch;
  line-height: 1.6;
}

/* --- pillars (What you get) ------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.pillar {
  position: relative;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -22px rgba(17, 17, 16, 0.18);
}

.pillar__index {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-accent);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 1rem;
}

.pillar__title {
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0 0 0.65rem;
  line-height: 1.2;
}

.pillar__body {
  color: var(--color-ink-soft);
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

/* --- surface cards (click-to-expand, currently unused) ---------------- */
.surface {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.surface:hover {
  border-color: var(--color-ink);
}

.surface__trigger {
  display: block;
  width: 100%;
  padding: 1.6rem 1.5rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.surface__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.surface__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.surface__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  flex: 1;
}

.surface__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.25s var(--ease);
  position: relative;
}

.surface__icon svg {
  position: absolute;
  width: 14px;
  height: 14px;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.surface__icon-play {
  transform: translateX(1px);
  opacity: 1;
}

.surface__icon-close {
  opacity: 0;
}

.surface:hover .surface__icon {
  background: var(--color-accent);
  color: #fff;
  transform: scale(1.05);
}

.surface__body {
  display: block;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.surface__detail {
  padding: 0 1.5rem 1.75rem;
  animation: surface-detail-in 0.35s var(--ease);
}

.surface__detail[hidden] {
  display: none;
}

.placeholder--media {
  aspect-ratio: 16/9;
}

@keyframes surface-detail-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Expanded state: span full grid width and swap play -> close. */
.surface.is-expanded {
  grid-column: 1/-1;
  border-color: var(--color-ink);
  box-shadow: 0 20px 50px -28px rgba(17, 17, 16, 0.25);
}

.surface.is-expanded .surface__icon {
  background: var(--color-accent);
  color: #fff;
}

.surface.is-expanded .surface__icon-play {
  opacity: 0;
}

.surface.is-expanded .surface__icon-close {
  opacity: 1;
}

.surface.is-expanded .surface__title {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

/* --- editor (capability grid, reuses .surface card markup + behavior) - */
.editor-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 880px) {
  .editor-features {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .editor-features {
    grid-template-columns: 1fr;
  }
}
/* --- integration (the 2-line embed snippet) --------------------------- */
#snippet .code-block {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2rem;
  font-size: 0.8rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

#snippet .code-notes {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.code-block {
  margin: 0 0 1.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.65;
  overflow-x: auto;
}

.code-block code {
  background: none;
  color: inherit;
  padding: 0;
  font: inherit;
}

.code-block .code-comment {
  color: var(--color-ink-muted);
  font-style: italic;
}

.code-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.code-notes li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--color-line);
}

.code-notes li:last-child {
  border-bottom: 0;
}

.code-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
}

/* --- alternating media + text rows ------------------------------------- */
.alt-rows {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.alt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.alt-row__media {
  display: flex;
}

.alt-row__media .placeholder {
  width: 100%;
}

.alt-row__body {
  max-width: 36rem;
}

.alt-row__index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}

.alt-row__title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.alt-row__copy {
  color: var(--color-ink-soft);
  margin: 0;
}

/* even rows: media on the right, text on the left */
.alt-row:nth-child(even) .alt-row__media {
  order: 2;
}

@media (max-width: 880px) {
  .alt-row {
    grid-template-columns: 1fr;
  }
  .alt-row:nth-child(even) .alt-row__media {
    order: 0;
  }
}
/* --- split (image + text) ---------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  color: var(--color-ink);
}

.quote p {
  margin: 0 0 0.75rem;
}

.quote__emphasis {
  font-style: italic;
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
  }
}
/* --- why 3D (stat-led benefit cards) ---------------------------------- */
/* The default section__header max-width of 760px forces "...into 3D." onto
   a second line, so widen this section's header to let the title flow on one. */
#why-3d .section__header {
  max-width: 920px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 880px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}
.why-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem 2rem;
  text-align: left;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px -28px rgba(17, 17, 16, 0.18);
}

.why-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.why-card__label {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0 0 0.65rem;
  color: var(--color-ink);
  line-height: 1.2;
}

.why-card__body {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* --- 3-step process (homepage) ----------------------------------------- */
.three-step__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 880px) {
  .three-step__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.three-step__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.three-step__media {
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;
}

.three-step__media .thread__circle {
  width: 220px;
  height: 220px;
}

.three-step__num {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.three-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--color-ink);
}

.three-step__body {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- Marketing-funnel infographic (homepage "Problems we solve") -------
   Three story panels (RCS + social, product page, fewer returns) + a bonus
   strip of one-source asset stills. Replaces the legacy converging-thread
   diagram below; the legacy .thread / .problems styles are kept temporarily
   in case the team rolls back to the pre-marketing-infographic tag. */
/* This section's container is moderately wider than the default. The
   panels are now squarer and smaller, so the row no longer needs to
   approach the full viewport width. */
.marketing-funnel > .container {
  max-width: clamp(960px, 90vw, 1500px);
}

.marketing-funnel__panels {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  /* Columns auto-size to each panel's natural width at the locked media
     height. Phone (portrait) ends up narrower than laptop / box (squarer),
     but the heights all match. */
  grid-template-columns: auto auto auto auto auto;
  justify-content: center;
  align-items: start;
  /* Tight gaps so the panels almost touch left-to-right at max size. */
  gap: clamp(0.25rem, 0.6vw, 0.75rem);
}

.marketing-funnel__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  max-width: 100%;
  min-width: 0;
}

.marketing-funnel__panel-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.marketing-funnel__panel-label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.marketing-funnel__panel-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0;
}

.marketing-funnel__panel-media {
  /* Locked height across all three panels so they all sit at the same
     visual height. All three images are now identically sized at 1060 x
     1130 (aspect ~0.938), so the aspect-sum across the row is ~2.814
     (3 * 1060/1130). Height calc tracks the section container so the row
     fits cleanly; upper bound pulled in so the panels don't stretch
     edge-to-edge on large screens. */
  height: clamp(280px, (min(90vw, 1500px) - 100px) / 2.814, 480px);
  display: flex;
  justify-content: center;
  align-items: center;
  /* No background or border-radius: the panel-image backgrounds are already
     cream and the section itself sits on cream now, so the images merge
     seamlessly into the page rather than reading as cards. */
  overflow: hidden;
}

.marketing-funnel__panel-media img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.marketing-funnel__panel-caption {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  text-align: center;
  margin: 0;
  max-width: 32ch;
  align-self: center;
}

.marketing-funnel__connector {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  /* Align with the panel images on either side: each panel stacks
     header + image + caption, so centring the connector vertically in
     the grid row lines it up with the image (the dominant middle
     element) rather than the small header label above. Images don't
     shift -- only the connector's position within its grid cell does. */
  align-self: center;
}

.marketing-funnel__connector svg {
  width: clamp(56px, 6vw, 96px);
  height: auto;
  opacity: 0.7;
}

.marketing-funnel__bonus {
  /* Sit close to the panels above so the mosaic reads as part of the same
     infographic rather than a separate section. */
  margin-top: clamp(1rem, 2vw, 2rem);
  /* Flex (not grid) so both children take their natural content widths
     and the pair centres together, rather than text pinned left and
     thumbnails pinned right with stretched space between. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
  flex-wrap: wrap;
  /* Subtle bordered card so the text + thumbnails read as a single bonus
     feature rather than two loose elements floating on the section. */
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
  /* Constrain width so the bonus card doesn't stretch the full container;
     it's a supporting strip, not the dominant element. */
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.marketing-funnel__bonus-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 36ch;
  margin: 0;
  text-align: left;
}

.marketing-funnel__bonus-label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.25;
}

.marketing-funnel__bonus-caption {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: 0;
}

.marketing-funnel__mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Smaller thumbnail-style stills, much smaller than the main panels.
     Sized to read as a supporting strip alongside the bonus text. */
  grid-template-columns: repeat(4, clamp(96px, 11vw, 156px));
  gap: clamp(0.5rem, 1vw, 0.9rem);
  justify-content: start;
}

.marketing-funnel__mosaic li {
  /* No background or border-radius: the mosaic-image backgrounds are
     already cream and blend into the cream section. */
  overflow: hidden;
  aspect-ratio: 1/1;
  display: flex;
}

.marketing-funnel__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.marketing-funnel__cta {
  max-width: 760px;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .marketing-funnel__panels {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }
  .marketing-funnel__connector {
    padding-top: 0;
    transform: rotate(90deg);
  }
  .marketing-funnel__panel-caption {
    max-width: none;
  }
  .marketing-funnel__bonus {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .marketing-funnel__bonus-text {
    text-align: center;
  }
  .marketing-funnel__mosaic {
    grid-template-columns: repeat(4, clamp(72px, 18vw, 120px));
  }
}
/* --- Problems we solve (homepage, legacy thread diagram) ---------------- */
.problems__cta {
  max-width: 760px;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  display: flex;
  justify-content: flex-end;
}

.quiet-link {
  font-size: 0.95rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.quiet-link:hover {
  color: var(--color-accent);
  border-bottom-color: currentColor;
}

/* --- Homepage journey diagram (thread + branching outcomes) ----------- */
/* The recurring bag: a CSS-only abstraction of the bag silhouette,
   reused inside each thread__circle scene. */
.mock__bag {
  width: 64%;
  aspect-ratio: 1/1;
  margin: 0 auto;
  background: radial-gradient(ellipse at 35% 30%, #d4ad7a 0%, #a07b48 45%, #5d4525 100%);
  border-radius: 48% 48% 44% 44%/38% 38% 62% 62%;
}

.mock__bag--lit {
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.25));
}

.thread {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.thread__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.thread__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread__circle {
  position: relative;
  width: 240px;
  height: 240px;
  max-width: 100%;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thread__circle--square {
  border-radius: 12px;
}

/* Photo variant: source images fill the circle via object-fit. Square-ish
   landscape sources get a centred 1:1 crop, which the parent's
   border-radius: 50% masks to a circle. */
.thread__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thread__caption {
  max-width: 38ch;
}

.thread__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 400;
  margin: 0 0 1rem;
  line-height: 1.15;
  color: var(--color-ink);
}

.thread__body {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* === Scene visuals inside each circle ================================= */
/* 01 Box: cardboard tone with tape and the bag inside */
.thread__circle--box {
  background: #d4b88a;
}

.thread__box {
  position: relative;
  width: 78%;
  height: 78%;
  background: #c19f6a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.1);
}

.thread__box-tape--h {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 50%;
  height: 14px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(220, 200, 160, 0.7));
}

.thread__box .mock__bag {
  width: 60%;
  opacity: 0.55;
  z-index: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}

/* 02 Studio: dark studio with a soft key light from above */
.thread__circle--studio {
  background: #1a1a18;
}

.thread__studio {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-bottom: 18%;
}

.thread__spot {
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  aspect-ratio: 1/1.3;
  background: radial-gradient(ellipse at top, rgba(255, 235, 200, 0.5) 0%, rgba(255, 235, 200, 0.15) 35%, transparent 70%);
  pointer-events: none;
}

.thread__studio .mock__bag {
  position: relative;
  z-index: 1;
  width: 56%;
  filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.6));
}

/* 03 Embed: a tiny browser-window frame holding the bag.
   Background is matched to the integrate photo's neutral gray so the
   object-fit: contain letterbox blends seamlessly with the image. */
.thread__circle--embed {
  background: #c0c1c3;
}

.thread__circle--embed .thread__photo {
  object-fit: contain;
  transform: scale(1.15);
}

.thread__browser {
  position: relative;
  width: 78%;
  height: 78%;
  background: #fff;
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thread__browser-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: #efece5;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
}

.thread__browser-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c5c2b8;
}

.thread__browser .mock__bag {
  width: 58%;
  margin-top: 18px;
}

.thread__badge {
  position: absolute;
  top: 26px;
  right: 10px;
  background: var(--color-accent);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 0.2rem 0.45rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  z-index: 2;
}

/* 04 Ad: moody dark ad creative with brand line and bag */
.thread__circle--ad {
  background: linear-gradient(135deg, #18181a 0%, #2c2c28 100%);
  color: #f4f1ea;
}

.thread__ad {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22% 0 18%;
}

.thread__ad-brand {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  margin-bottom: 0.3rem;
}

.thread__ad-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: rgba(244, 241, 234, 0.92);
  margin-bottom: 0.65rem;
}

.thread__ad .mock__bag {
  width: 52%;
}

/* 05 Cart: bag with a 'Purchased' tag overlay */
.thread__circle--cart {
  background: #efece5;
}

.thread__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.thread__cart .mock__bag {
  width: 60%;
}

.thread__cart-tag {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ink);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.4rem 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 06 Reuse: 3x2 grid of asset tiles */
.thread__circle--reuse {
  background: #f4f1ea;
  padding: 14%;
}

.thread__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
}

.thread__grid span {
  background: #efece5;
  background-image: radial-gradient(ellipse at 35% 30%, #d4ad7a 0%, #a07b48 45%, #5d4525 100%);
  background-blend-mode: multiply;
  opacity: 0.6;
}

/* --- Converging layout: 3 branches at top, single anchor at bottom ---- */
/* Three arrows fan UP from the anchor (Live on your page in 3D) to the
   three branch outcomes (Marketing, Product page, Media assets). The
   leads-to outcomes sit at the very TOP of each branch so the reader's
   eye lands on the business benefit first. */
.thread--converging .thread__branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.thread__branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.thread__branch .thread__circle {
  width: 200px;
  height: 200px;
}

/* Featured outcomes block at the top of each branch */
.thread__leads-to--featured {
  margin: 0 0 0.5rem;
  padding: 0;
  text-align: center;
}

.thread__leads-to--featured ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.thread__leads-to--featured li {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}

.thread__leads-to--featured li:last-child {
  margin-bottom: 0;
  color: var(--color-accent);
}

.thread__caption--branch {
  max-width: 30ch;
  text-align: center;
}

.thread__caption--branch .thread__body {
  max-width: 30ch;
  font-size: 0.92rem;
}

.thread__caption--branch .thread__title {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--color-ink-soft);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

/* The anchor at the bottom: Live on your page in 3D */
.thread--converging .thread__anchor {
  margin: 4.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.thread--converging .thread__anchor .thread__circle {
  width: 260px;
  height: 260px;
}

.thread__caption--anchor {
  margin-top: 1.5rem;
  max-width: 44ch;
  text-align: center;
}

/* Mobile: drop the SVG arrows, stack everything */
@media (max-width: 900px) {
  .thread__svg {
    display: none;
  }
  .thread--converging .thread__branches {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .thread__branch {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .thread--converging .thread__anchor {
    margin-top: 3rem;
  }
}
/* --- FAQ --------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--color-line);
}

.faq__item {
  border-bottom: 1px solid var(--color-line);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--color-ink);
  transition: transform 0.25s var(--ease);
}

.faq__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq__icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}

.faq__item[open] .faq__icon::after {
  transform: translateX(-50%) scaleY(0);
}

.faq__answer {
  padding: 0 0 1.5rem;
  color: var(--color-ink-soft);
  max-width: 70ch;
}

.faq__answer p {
  margin: 0;
}

/* --- pricing tabs ------------------------------------------------------- */
#pricing > .container {
  text-align: center;
}

#pricing [role=tabpanel] {
  text-align: left;
}

.pricing-subtitle {
  margin: 0.75rem 0 0;
  color: var(--color-ink-soft);
  font-size: 1rem;
  transition: opacity 0.3s var(--ease);
}

.pricing-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Container that holds both tab buttons. Animates between two looks:
   intro = transparent shell with wide gap → buttons read as individual choices
   active = pill-shaped segmented control with tight 4px gap.            */
.pricing-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  gap: clamp(2rem, 8vw, 6rem);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: max-width 0.5s var(--ease), gap 0.5s var(--ease), padding 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* Each tab: gold-filled standalone button in intro, transparent pill segment in active. */
.pricing-tabs__tab {
  flex: 0 0 auto;
  min-width: 9rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  cursor: pointer;
  transition: padding 0.4s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.4s var(--ease), min-width 0.4s var(--ease);
}

.pricing-tabs__tab:hover:not([aria-selected=true]) {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.pricing-tabs__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Two-column description block shown in the intro state, one per tab. */
.pricing-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 8vw, 6rem);
  max-width: 600px;
  width: 100%;
  margin-top: 1.5rem;
  color: var(--color-ink-soft);
  text-align: center;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.35s var(--ease), margin-top 0.4s var(--ease);
}

.pricing-intro p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.98rem;
}

@media (max-width: 640px) {
  .pricing-intro {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .pricing-tabs {
    gap: 1rem;
  }
}
.pricing-panels {
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

[role=tabpanel][hidden] {
  display: none;
}

/* --- INTRO state (default) -------------------------------------------- */
#pricing[data-pricing-state=intro] .pricing-shell {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  transition: padding-top 0.45s var(--ease);
}

#pricing[data-pricing-state=intro] .pricing-intro {
  max-height: 240px;
  opacity: 1;
}

#pricing[data-pricing-state=intro] .pricing-panels {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- ACTIVE state (after first tab click) -----------------------------
   Two animation phases timed via transition-delay:
   Phase 1 (0 to 450ms): tabs slide together, subtitle fades, individual
                       button borders fade out, pill background fades in.
   Phase 2 (from 450ms): tabs slide up (padding-top), descriptions collapse,
                       panels fade in.                                       */
#pricing[data-pricing-state=active] .pricing-subtitle {
  opacity: 0;
  pointer-events: none;
}

#pricing[data-pricing-state=active] .pricing-tabs {
  max-width: 360px;
  gap: 4px;
  padding: 4px;
  background-color: var(--color-bg-alt);
  border-color: var(--color-line);
}

#pricing[data-pricing-state=active] .pricing-tabs__tab {
  background: transparent;
  border-color: transparent;
  color: var(--color-ink);
  min-width: 0;
  padding: 0.7rem 1.5rem;
}

#pricing[data-pricing-state=active] .pricing-tabs__tab[aria-selected=true] {
  background: var(--color-accent);
  color: #fff;
}

/* Phase 2: wait for the merge before sliding up. */
#pricing[data-pricing-state=active] .pricing-shell {
  padding-top: 0;
  transition: padding-top 0.45s var(--ease) 0.45s;
}

#pricing[data-pricing-state=active] .pricing-intro {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
  transition: max-height 0.5s var(--ease) 0.45s, opacity 0.35s var(--ease) 0.45s, margin-top 0.4s var(--ease) 0.45s;
}

#pricing[data-pricing-state=active] .pricing-panels {
  max-height: none;
  opacity: 1;
  animation: pricing-panels-in 0.55s var(--ease) 0.9s both;
}

@keyframes pricing-panels-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- pricing ----------------------------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.75rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.plan--featured {
  border-color: var(--color-ink);
  box-shadow: 0 30px 60px -30px rgba(17, 17, 16, 0.25);
  transform: translateY(-4px);
}

.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.plan__name {
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.plan__tagline {
  color: var(--color-ink-muted);
  font-size: 14px;
  letter-spacing: 0.05em;
  margin: 0 0 1.5rem;
}

.plan__price {
  margin: 0 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.plan__amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

.plan__interval {
  color: var(--color-ink-muted);
  font-size: 0.95rem;
}

.plan__description {
  color: var(--color-ink-soft);
}

.plan__features {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  flex: 1;
}

.plan__features li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.15rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

.plan__features li:last-child {
  border-bottom: 0;
}

.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
}

.plan__cta {
  margin-top: auto;
  align-self: stretch;
}

@media (max-width: 900px) {
  .pricing {
    grid-template-columns: 1fr;
  }
  .plan--featured {
    transform: none;
  }
}
/* --- marvify-form (Fluent Forms pill override) ------------------------- */
.form-caption {
  margin: 2rem auto 0.75rem;
  max-width: 48ch;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.form-caption--small {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.marvify-form {
  margin: 0 auto 1.5rem;
  max-width: 520px;
  --pill-h: 56px;
}

/* Compact variant: used in the hero next to the CTA buttons. */
.marvify-form--compact {
  max-width: 380px;
  margin: 0;
  --pill-h: 44px;
}

.marvify-form--compact input.ff-el-form-control {
  padding: 0 1.1rem !important;
  font-size: 0.9rem !important;
}

.marvify-form--compact .ff-btn,
.marvify-form--compact .ff-btn.ff-btn-sm,
.marvify-form--compact .ff_btn_style,
.marvify-form--compact button.ff-btn-submit {
  padding: 0 1.1rem !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

/* The form element itself becomes the pill capsule. */
.marvify-form .frm-fluent-form {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  overflow: hidden;
  min-height: var(--pill-h);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.marvify-form .frm-fluent-form:focus-within {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 16, 0.06);
}

/* Flatten Fluent Forms' fieldset wrapper into a flex row. */
.marvify-form .frm-fluent-form fieldset {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

.marvify-form .frm-fluent-form fieldset > legend {
  display: none;
}

/* Each field group flexes; the button group stays its natural width. */
.marvify-form .ff-el-group {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
}

.marvify-form .ff_submit_btn_wrapper {
  flex: 0 0 auto;
}

/* Hide labels: placeholder is enough on a pill form. */
.marvify-form .ff-el-input--label {
  display: none !important;
}

.marvify-form .ff-el-input--content {
  flex: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  height: 100%;
}

/* Fixed pill height + matching line-height = bulletproof single-line centering. */
.marvify-form input.ff-el-form-control {
  flex: 1 !important;
  width: 100% !important;
  height: var(--pill-h) !important;
  padding: 0 1.5rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: var(--pill-h) !important;
  color: var(--color-ink) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

.marvify-form input.ff-el-form-control::placeholder {
  color: var(--color-ink-muted);
}

.marvify-form .ff_submit_btn_wrapper {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Beat Fluent Forms' per-form inline <style> (`.ff_btn_style`) with !important. */
.marvify-form .ff-btn,
.marvify-form .ff-btn.ff-btn-sm,
.marvify-form .ff_btn_style,
.marvify-form button.ff-btn-submit {
  background: var(--color-accent) !important;
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 1.75rem !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.marvify-form .ff-btn:hover,
.marvify-form .ff_btn_style:hover,
.marvify-form button.ff-btn-submit:hover {
  background: var(--color-accent-dark) !important;
  background-color: var(--color-accent-dark) !important;
}

/* Validation + success messaging styled to match the theme. */
.marvify-form .ff-el-form-check,
.marvify-form .text-danger,
.marvify-form .error {
  color: #b03a3a;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  text-align: center;
}

.marvify-form .ff-message-success,
.marvify-form .ff_submit_btn_wrapper .success {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(17, 17, 16, 0.04);
  color: var(--color-ink);
  font-size: 0.95rem;
  text-align: center;
}

/* On narrow screens, stack vertically so the input has room. */
@media (max-width: 520px) {
  .marvify-form .frm-fluent-form {
    flex-direction: column;
    border-radius: 18px;
  }
  .marvify-form .ff-btn,
  .marvify-form button.ff-btn-submit {
    padding: 1rem;
    width: 100%;
  }
}
/* --- contact info ------------------------------------------------------ */
.contact-info {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.05rem;
  margin: 1.5rem 0 0;
}

.contact-info__sep {
  color: var(--color-ink-muted);
}

/* --- article archive (/articles) --------------------------------------- */
/* Tight section padding so the article grid is visible above the fold. */
.section--archive {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.archive-header {
  text-align: center;
  margin: 0 auto clamp(1.75rem, 3.5vw, 3rem);
  max-width: 640px;
}

.archive-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0.5rem 0 0.65rem;
}

.archive-header__lede {
  color: var(--color-ink-soft);
  font-size: 1rem;
  margin: 0;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(2rem, 4vw, 3rem) 2.25rem;
}

.article-card {
  margin: 0;
}

.article-card__link {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease);
}

.article-card__link:hover {
  transform: translateY(-3px);
  color: inherit;
}

.article-card__media {
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
  overflow: hidden;
  border-radius: var(--radius);
}

.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}

.article-card__link:hover .article-card__media img {
  transform: scale(1.04);
}

.article-card__media--empty {
  background: repeating-linear-gradient(45deg, rgba(17, 17, 16, 0.04) 0 12px, rgba(17, 17, 16, 0.07) 12px 24px);
  border: 1px dashed rgba(17, 17, 16, 0.18);
}

.article-card__body {
  padding: 0;
}

.article-card__date {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 0.5rem;
}

.article-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.65rem;
}

.article-card__excerpt {
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.article-card__more {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.article-card__link:hover .article-card__more {
  color: var(--color-accent);
}

.pagination {
  margin-top: clamp(3rem, 5vw, 5rem);
  text-align: center;
}

.pagination .nav-links {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.pagination a, .pagination span {
  display: inline-block;
  padding: 0.55rem 1rem;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  border-radius: var(--radius);
}

.pagination a:hover {
  color: var(--color-accent);
}

.pagination .current {
  color: var(--color-ink);
  font-weight: 500;
  background: var(--color-bg-alt);
}

.article-empty {
  text-align: center;
  color: var(--color-ink-muted);
  padding: 4rem 0;
}

/* --- single article ----------------------------------------------------- */
.single-post {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
}

.single-post__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.single-post__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0.5rem 0 1rem;
}

.single-post__lede {
  font-size: 1.15rem;
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.55;
}

.single-post__content {
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--color-ink);
}

.single-post__content > * {
  margin: 0 0 1.5em;
}

.single-post__content > *:last-child {
  margin-bottom: 0;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  margin-top: 2.25em;
  margin-bottom: 0.65em;
}

.single-post__content h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.single-post__content h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.single-post__content h4 {
  font-size: 1.15rem;
}

.single-post__content a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s var(--ease);
}

.single-post__content a:hover {
  text-decoration-color: var(--color-accent);
  color: var(--color-accent);
}

.single-post__content blockquote,
.single-post__content .wp-block-quote {
  border-left: 3px solid var(--color-accent);
  margin: 2em 0;
  padding-left: 1.5em;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-ink-soft);
}

.single-post__content img,
.single-post__content .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.single-post__content figure {
  margin: 2em 0;
}

.single-post__content figcaption {
  margin-top: 0.75em;
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.single-post__content ul,
.single-post__content ol {
  padding-left: 1.5em;
}

.single-post__content li {
  margin-bottom: 0.5em;
}

.single-post__content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--color-bg-alt);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.single-post__content pre {
  background: var(--color-bg-alt);
  padding: 1.25rem;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.92rem;
}

.single-post__footer {
  margin-top: clamp(3rem, 5vw, 4rem);
  text-align: center;
}

/* --- footer ------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-alt);
  color: var(--color-ink-soft);
  padding: clamp(4rem, 7vw, 6rem) 0 2rem;
  border-top: 1px solid var(--color-line);
}

.site-footer a {
  color: var(--color-ink);
}

.site-footer a:hover {
  color: var(--color-accent);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-line);
}

.site-footer__logo img {
  height: 36px;
  width: auto;
  margin-bottom: 1.5rem;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 1rem;
}

.site-footer p {
  margin: 0 0 0.5rem;
}

.site-footer__bottom {
  padding-top: 2rem;
  color: var(--color-ink-muted);
  font-size: 13px;
}

@media (max-width: 880px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 520px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav li {
  margin: 0 0 0.4rem;
}

.site-footer__nav a {
  font-size: 0.95rem;
}