:root {
  --eob-ink: #0b1017;
  --eob-ink-soft: #161f2c;
  --eob-ink-line: rgba(11, 16, 23, 0.12);
  --eob-paper: #f7f4ef;
  --eob-paper-2: #efe9df;
  --eob-white: #ffffff;
  --eob-mute-ink: #55606f;
  --eob-accent: #ff5c39;
  --eob-accent-2: #ffb245;
  --eob-accent-deep: #d9411f;
  --eob-lime: #c7f464;
  --eob-radius-sm: 10px;
  --eob-radius: 18px;
  --eob-radius-lg: 30px;
  --eob-shadow-sm: 0 6px 18px rgba(11, 16, 23, 0.08);
  --eob-shadow: 0 26px 60px -30px rgba(11, 16, 23, 0.45);
  --eob-shadow-lg: 0 40px 90px -40px rgba(11, 16, 23, 0.55);
  --eob-font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --eob-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --eob-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--eob-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--eob-ink);
  background: var(--eob-paper);
  overflow-x: hidden;
}

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

a {
  color: var(--eob-accent-deep);
  text-decoration: none;
  transition: color 0.25s var(--eob-ease);
}

a:hover,
a:focus {
  color: var(--eob-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--eob-font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--eob-ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }

p {
  margin: 0 0 1.25rem;
}

ul, ol {
  padding-left: 1.2rem;
}

::selection {
  background: var(--eob-accent);
  color: var(--eob-ink);
}

:focus-visible {
  outline: 3px solid var(--eob-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.page-shell {
  overflow: hidden;
}

.container-tight {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  position: relative;
  padding: 110px 0;
  background-color: var(--eob-paper);
}

.section--ink {
  background-color: var(--eob-ink);
  color: var(--eob-paper);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--eob-white);
}

.section--paper-2 {
  background-color: var(--eob-paper-2);
}

.section--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--eob-white);
}

.section--bg h1,
.section--bg h2,
.section--bg h3,
.section--bg h4 {
  color: var(--eob-white);
}

.section--tight {
  padding: 72px 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--eob-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--eob-accent-deep);
  margin-bottom: 18px;
}

.section--ink .eyebrow,
.section--bg .eyebrow {
  color: var(--eob-accent-2);
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.lead {
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--eob-mute-ink);
  max-width: 62ch;
}

.section--ink .lead,
.section--bg .lead {
  color: rgba(247, 244, 239, 0.85);
}

.text-accent {
  color: var(--eob-accent);
}

.display-outline {
  -webkit-text-stroke: 1.5px var(--eob-ink);
  color: transparent;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 64px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--eob-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 16px 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--eob-ease), background 0.3s var(--eob-ease), color 0.3s var(--eob-ease), box-shadow 0.3s var(--eob-ease);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--eob-accent);
  color: var(--eob-ink);
  box-shadow: 0 14px 32px -14px rgba(255, 92, 57, 0.9);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--eob-ink);
  color: var(--eob-white);
}

.btn-dark {
  background: var(--eob-ink);
  color: var(--eob-white);
}

.btn-dark:hover,
.btn-dark:focus {
  background: var(--eob-accent);
  color: var(--eob-ink);
}

.btn-outline {
  border-color: var(--eob-ink);
  color: var(--eob-ink);
  background: transparent;
}

.btn-outline:hover,
.btn-outline:focus {
  background: var(--eob-ink);
  color: var(--eob-white);
}

.btn-outline-light {
  border-color: rgba(247, 244, 239, 0.55);
  color: var(--eob-white);
  background: transparent;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background: var(--eob-white);
  color: var(--eob-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--eob-ink);
  padding: 10px 4px;
  border-radius: 0;
  border-bottom: 2px solid var(--eob-ink);
}

.btn-ghost:hover {
  color: var(--eob-accent-deep);
  border-color: var(--eob-accent);
  transform: none;
}

.btn-lg {
  padding: 20px 42px;
  font-size: 1.08rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--eob-font-display);
  font-weight: 600;
  color: var(--eob-ink);
}

.link-arrow i {
  transition: transform 0.3s var(--eob-ease);
}

.link-arrow:hover i {
  transform: translateX(6px);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  padding: 20px 0;
  transition: background 0.35s var(--eob-ease), padding 0.35s var(--eob-ease), box-shadow 0.35s var(--eob-ease);
}

.site-header.is-scrolled {
  background: rgba(247, 244, 239, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 0;
  box-shadow: 0 10px 30px -20px rgba(11, 16, 23, 0.5);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--eob-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--eob-ink);
  margin-right: auto;
}

.site-brand img {
  width: 80px;
  height: auto;
}

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

.site-nav a {
  font-weight: 500;
  color: var(--eob-ink);
  position: relative;
  padding: 6px 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--eob-accent);
  transition: width 0.3s var(--eob-ease);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
  width: 100%;
}

.site-header__contact {
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: right;
  color: var(--eob-ink);
}

.site-header__contact span {
  display: block;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--eob-ink);
  background: transparent;
  color: var(--eob-ink);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s var(--eob-ease), color 0.3s var(--eob-ease);
}

.nav-toggle:hover {
  background: var(--eob-ink);
  color: var(--eob-white);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: var(--eob-ink);
  color: var(--eob-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  transform: translateY(-100%);
  transition: transform 0.5s var(--eob-ease);
}

.mobile-nav.is-open {
  transform: translateY(0);
}

.mobile-nav a {
  font-family: var(--eob-font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--eob-white);
  padding: 10px 0;
  border-bottom: 1px solid rgba(247, 244, 239, 0.16);
}

.mobile-nav a:hover {
  color: var(--eob-accent-2);
}

.mobile-nav__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(247, 244, 239, 0.5);
  background: transparent;
  color: var(--eob-white);
  font-size: 1.15rem;
  cursor: pointer;
}

.hero {
  position: relative;
  padding: 200px 0 130px;
  background-color: var(--eob-ink);
  color: var(--eob-white);
  overflow: hidden;
}

.hero h1 {
  color: var(--eob-white);
  max-width: 16ch;
}

.hero p {
  color: rgba(247, 244, 239, 0.88);
  max-width: 58ch;
  font-size: 1.2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 70px;
  padding-top: 44px;
  border-top: 1px solid rgba(247, 244, 239, 0.18);
}

.hero__stat strong {
  display: block;
  font-family: var(--eob-font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--eob-accent-2);
  line-height: 1;
}

.hero__stat span {
  font-size: 0.95rem;
  color: rgba(247, 244, 239, 0.85);
}

.hero__badge {
  position: absolute;
  right: -60px;
  top: 160px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px dashed rgba(247, 244, 239, 0.35);
  animation: eobSpin 40s linear infinite;
}

@keyframes eobSpin {
  to { transform: rotate(360deg); }
}

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--eob-ink-line);
  border-bottom: 1px solid var(--eob-ink-line);
  padding: 26px 0;
  background: var(--eob-paper-2);
}

.marquee__track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: eobMarquee 34s linear infinite;
}

.marquee__item {
  font-family: var(--eob-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--eob-ink);
  display: inline-flex;
  align-items: center;
  gap: 60px;
}

.marquee__item::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--eob-accent);
}

@keyframes eobMarquee {
  to { transform: translateX(-50%); }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
}

.card-service {
  display: flex;
  flex-direction: column;
  background: var(--eob-white);
  border-radius: var(--eob-radius-lg);
  overflow: hidden;
  box-shadow: var(--eob-shadow-sm);
  transition: transform 0.45s var(--eob-ease), box-shadow 0.45s var(--eob-ease);
}

.card-service:hover {
  transform: translateY(-8px);
  box-shadow: var(--eob-shadow);
}

.card-service__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--eob-paper-2);
}

.card-service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--eob-ease);
}

.card-service:hover .card-service__media img {
  transform: scale(1.06);
}

.card-service__body {
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-service__index {
  font-family: var(--eob-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--eob-accent-deep);
  margin-bottom: 12px;
}

.card-service p {
  color: var(--eob-mute-ink);
}

.card-service .link-arrow {
  margin-top: auto;
}

.card-flat {
  background: var(--eob-white);
  border: 1px solid var(--eob-ink-line);
  border-radius: var(--eob-radius);
  padding: 32px;
  transition: transform 0.4s var(--eob-ease), border-color 0.4s var(--eob-ease), box-shadow 0.4s var(--eob-ease);
}

.card-flat:hover {
  transform: translateY(-6px);
  border-color: var(--eob-accent);
  box-shadow: var(--eob-shadow-sm);
}

.card-flat__icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: var(--eob-ink);
  color: var(--eob-accent-2);
  margin-bottom: 22px;
}

.card-flat p {
  color: var(--eob-mute-ink);
  margin-bottom: 0;
}

.card-dark {
  background: var(--eob-ink-soft);
  border: 1px solid rgba(247, 244, 239, 0.1);
  border-radius: var(--eob-radius);
  padding: 34px;
  color: var(--eob-paper);
  height: 100%;
}

.card-dark h3 {
  color: var(--eob-white);
}

.card-dark p {
  color: rgba(247, 244, 239, 0.85);
  margin-bottom: 0;
}

.card-dark__icon {
  font-size: 1.6rem;
  color: var(--eob-accent-2);
  margin-bottom: 18px;
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}

.split__media {
  position: relative;
  border-radius: var(--eob-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--eob-paper-2);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__media--offset {
  margin-top: 60px;
}

.badge-float {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--eob-accent);
  color: var(--eob-ink);
  padding: 18px 22px;
  border-radius: var(--eob-radius);
  font-family: var(--eob-font-display);
  font-weight: 700;
  line-height: 1.2;
  box-shadow: var(--eob-shadow);
}

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

.check-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  color: var(--eob-ink);
}

.section--ink .check-list li,
.section--bg .check-list li {
  color: var(--eob-paper);
}

.check-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--eob-accent);
}

.testimonial {
  background: var(--eob-white);
  border-radius: var(--eob-radius-lg);
  padding: 40px;
  box-shadow: var(--eob-shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial__quote {
  font-family: var(--eob-font-display);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--eob-ink);
  flex-grow: 1;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--eob-ink-line);
}

.testimonial__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--eob-paper-2);
  flex-shrink: 0;
}

.testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__meta strong {
  display: block;
  font-family: var(--eob-font-display);
  color: var(--eob-ink);
}

.testimonial__meta span {
  font-size: 0.9rem;
  color: var(--eob-mute-ink);
}

.testimonial__stars {
  color: var(--eob-accent-deep);
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.slider {
  overflow: hidden;
  border-radius: var(--eob-radius-lg);
}

.slider .carousel-item img {
  width: 100%;
  height: clamp(320px, 52vw, 620px);
  object-fit: cover;
}

.slider__caption {
  position: absolute;
  left: 44px;
  bottom: 44px;
  right: 44px;
  background: rgba(11, 16, 23, 0.82);
  color: var(--eob-white);
  border-radius: var(--eob-radius);
  padding: 26px 30px;
  max-width: 560px;
}

.slider__caption h3 {
  color: var(--eob-white);
  margin-bottom: 6px;
}

.slider__caption p {
  margin: 0;
  color: rgba(247, 244, 239, 0.9);
}

.slider .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background-color: var(--eob-white);
  opacity: 0.5;
}

.slider .carousel-indicators .active {
  opacity: 1;
  background-color: var(--eob-accent);
}

.gallery-tile {
  position: relative;
  border-radius: var(--eob-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--eob-paper-2);
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--eob-ease);
}

.gallery-tile:hover img {
  transform: scale(1.08);
}

.gallery-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px;
  background: linear-gradient(to top, rgba(11, 16, 23, 0.9), rgba(11, 16, 23, 0));
  color: var(--eob-white);
  font-family: var(--eob-font-display);
  font-weight: 600;
}

.gallery-tile__caption span {
  display: block;
  font-family: var(--eob-font-body);
  font-weight: 400;
  font-size: 0.88rem;
  color: rgba(247, 244, 239, 0.85);
}

.pricing-card {
  background: var(--eob-white);
  border: 1px solid var(--eob-ink-line);
  border-radius: var(--eob-radius-lg);
  padding: 42px 36px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.4s var(--eob-ease), box-shadow 0.4s var(--eob-ease);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--eob-shadow);
}

.pricing-card--featured {
  background: var(--eob-ink);
  border-color: var(--eob-ink);
  color: var(--eob-paper);
}

.pricing-card--featured h3,
.pricing-card--featured .pricing-card__price {
  color: var(--eob-white);
}

.pricing-card--featured .check-list li {
  color: var(--eob-paper);
}

.pricing-card__tag {
  display: inline-block;
  font-family: var(--eob-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--eob-paper-2);
  color: var(--eob-ink);
  margin-bottom: 20px;
  align-self: flex-start;
}

.pricing-card--featured .pricing-card__tag {
  background: var(--eob-accent);
  color: var(--eob-ink);
}

.pricing-card__price {
  font-family: var(--eob-font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--eob-ink);
  line-height: 1;
}

.pricing-card__price small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--eob-mute-ink);
}

.pricing-card--featured .pricing-card__price small {
  color: rgba(247, 244, 239, 0.75);
}

.pricing-card .check-list {
  margin: 26px 0 32px;
}

.pricing-card .btn {
  margin-top: auto;
}

.process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.process-list li {
  position: relative;
  padding: 30px 0 30px 92px;
  border-bottom: 1px solid var(--eob-ink-line);
  counter-increment: step;
}

.section--ink .process-list li,
.section--bg .process-list li {
  border-color: rgba(247, 244, 239, 0.16);
}

.process-list li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 30px;
  font-family: var(--eob-font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--eob-accent);
  line-height: 1;
}

.process-list h3 {
  margin-bottom: 6px;
}

.process-list p {
  margin: 0;
  color: var(--eob-mute-ink);
}

.section--ink .process-list p,
.section--bg .process-list p {
  color: rgba(247, 244, 239, 0.85);
}

.faq-accordion .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--eob-ink-line);
}

.faq-accordion .accordion-button {
  background: transparent;
  font-family: var(--eob-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--eob-ink);
  padding: 24px 0;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--eob-accent-deep);
}

.faq-accordion .accordion-button::after {
  background-image: none;
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--eob-accent-deep);
  width: auto;
  height: auto;
  transform: none;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
  transform: none;
}

.faq-accordion .accordion-body {
  padding: 0 0 26px;
  color: var(--eob-mute-ink);
}

.form-panel {
  background: var(--eob-white);
  border-radius: var(--eob-radius-lg);
  padding: 46px;
  box-shadow: var(--eob-shadow);
}

.section--ink .form-panel {
  background: var(--eob-ink-soft);
}

.form-field {
  margin-bottom: 22px;
}

.form-field label {
  display: block;
  font-family: var(--eob-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--eob-ink);
}

.section--ink .form-field label {
  color: var(--eob-paper);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 15px 18px;
  font-size: 1rem;
  font-family: var(--eob-font-body);
  color: var(--eob-ink);
  background: var(--eob-paper);
  border: 1px solid var(--eob-ink-line);
  border-radius: var(--eob-radius-sm);
  transition: border-color 0.25s var(--eob-ease), box-shadow 0.25s var(--eob-ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--eob-mute-ink);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--eob-accent);
  box-shadow: 0 0 0 3px rgba(255, 92, 57, 0.25);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--eob-mute-ink);
}

.form-consent input {
  width: auto;
  margin-top: 4px;
}

.form-status {
  margin-top: 18px;
  font-weight: 600;
  color: var(--eob-accent-deep);
  display: none;
}

.form-status.is-visible {
  display: block;
}

.newsletter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.newsletter input {
  flex: 1 1 240px;
}

.cta-band {
  position: relative;
  padding: 130px 0;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: var(--eob-white);
}

.cta-band h2 {
  color: var(--eob-white);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band p {
  color: rgba(247, 244, 239, 0.9);
  max-width: 60ch;
  margin: 0 auto 32px;
}

.team-card {
  text-align: center;
}

.team-card__photo {
  border-radius: var(--eob-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--eob-paper-2);
  margin-bottom: 20px;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--eob-ease);
}

.team-card:hover .team-card__photo img {
  transform: scale(1.05);
}

.team-card h3 {
  margin-bottom: 2px;
  font-size: 1.2rem;
}

.team-card span {
  font-size: 0.92rem;
  color: var(--eob-accent-deep);
  font-weight: 600;
}

.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--eob-ink-line);
}

.timeline__item {
  position: relative;
  padding-bottom: 42px;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--eob-accent);
  border: 4px solid var(--eob-paper);
}

.timeline__year {
  font-family: var(--eob-font-display);
  font-weight: 700;
  color: var(--eob-accent-deep);
  letter-spacing: 0.1em;
}

.stat-block {
  text-align: center;
  padding: 20px;
}

.stat-block strong {
  display: block;
  font-family: var(--eob-font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  color: var(--eob-ink);
}

.section--ink .stat-block strong,
.section--bg .stat-block strong {
  color: var(--eob-accent-2);
}

.stat-block span {
  color: var(--eob-mute-ink);
}

.section--ink .stat-block span,
.section--bg .stat-block span {
  color: rgba(247, 244, 239, 0.85);
}

.map-frame {
  border-radius: var(--eob-radius-lg);
  overflow: hidden;
  box-shadow: var(--eob-shadow);
  line-height: 0;
}

.map-frame iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
}

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

.contact-list li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--eob-ink-line);
}

.contact-list i {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--eob-ink);
  color: var(--eob-accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-list strong {
  display: block;
  font-family: var(--eob-font-display);
}

.article-card {
  background: var(--eob-white);
  border-radius: var(--eob-radius-lg);
  overflow: hidden;
  box-shadow: var(--eob-shadow-sm);
  transition: transform 0.4s var(--eob-ease), box-shadow 0.4s var(--eob-ease);
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--eob-shadow);
}

.article-card__media {
  aspect-ratio: 16 / 9;
  background: var(--eob-paper-2);
  overflow: hidden;
}

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

.article-card:hover .article-card__media img {
  transform: scale(1.06);
}

.article-card__body {
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-card__meta {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eob-accent-deep);
  margin-bottom: 12px;
}

.article-card p {
  color: var(--eob-mute-ink);
}

.article-card .link-arrow {
  margin-top: auto;
}

.article-body {
  max-width: 780px;
  margin: 0 auto;
}

.article-body h2 {
  margin-top: 2em;
}

.article-body h3 {
  margin-top: 1.6em;
}

.article-body p,
.article-body li {
  font-size: 1.1rem;
  color: var(--eob-ink-soft);
}

.article-body blockquote {
  border-left: 4px solid var(--eob-accent);
  padding-left: 22px;
  margin: 32px 0;
  font-family: var(--eob-font-display);
  font-size: 1.3rem;
  color: var(--eob-ink);
}

.page-hero {
  position: relative;
  padding: 190px 0 96px;
  background-size: cover;
  background-position: center;
  color: var(--eob-white);
}

.page-hero h1 {
  color: var(--eob-white);
  max-width: 18ch;
}

.page-hero p {
  color: rgba(247, 244, 239, 0.9);
  max-width: 62ch;
  font-size: 1.15rem;
}

.site-footer {
  background: var(--eob-ink);
  color: rgba(247, 244, 239, 0.85);
  padding: 90px 0 40px;
}

.site-footer h4 {
  color: var(--eob-white);
  font-size: 1.05rem;
  margin-bottom: 22px;
}

.site-footer a {
  color: rgba(247, 244, 239, 0.85);
}

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

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 46px;
}

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

.footer-list li {
  margin-bottom: 12px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--eob-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--eob-white);
}

.footer-brand img {
  width: 80px;
  height: auto;
}

.footer-bottom {
  margin-top: 64px;
  padding-top: 30px;
  border-top: 1px solid rgba(247, 244, 239, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 0.88rem;
}

.footer-legal {
  font-size: 0.82rem;
  color: rgba(247, 244, 239, 0.7);
  margin-top: 22px;
  line-height: 1.6;
}

.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--eob-accent);
  color: var(--eob-ink);
  font-size: 1.15rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s var(--eob-ease), transform 0.3s var(--eob-ease), visibility 0.3s;
  z-index: 1100;
  box-shadow: 0 14px 32px -14px rgba(255, 92, 57, 0.9);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.eob-cookie {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1400;
  background: var(--eob-ink);
  color: var(--eob-paper);
  border-radius: var(--eob-radius-lg);
  box-shadow: var(--eob-shadow-lg);
  border: 1px solid rgba(247, 244, 239, 0.12);
  transform: translateY(140%);
  animation: eobCookieIn 0.7s var(--eob-ease) 0.6s forwards;
}

@keyframes eobCookieIn {
  to { transform: translateY(0); }
}

.eob-cookie[hidden] {
  display: none;
}

.eob-cookie__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 26px 30px;
}

.eob-cookie__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--eob-accent);
  color: var(--eob-ink);
}

.eob-cookie__title {
  font-family: var(--eob-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--eob-white);
  margin: 0 0 6px;
}

.eob-cookie__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(247, 244, 239, 0.85);
  max-width: 70ch;
}

.eob-cookie__link {
  color: var(--eob-accent-2);
  text-decoration: underline;
}

.eob-cookie__link:hover {
  color: var(--eob-white);
}

.eob-cookie__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.eob-cookie__btn {
  font-family: var(--eob-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s var(--eob-ease), background 0.3s var(--eob-ease), color 0.3s var(--eob-ease);
  border: 2px solid transparent;
}

.eob-cookie__btn:hover {
  transform: translateY(-2px);
}

.eob-cookie__btn--ghost {
  background: transparent;
  border-color: rgba(247, 244, 239, 0.4);
  color: var(--eob-paper);
}

.eob-cookie__btn--ghost:hover {
  border-color: var(--eob-white);
  color: var(--eob-white);
}

.eob-cookie__btn--solid {
  background: var(--eob-accent);
  color: var(--eob-ink);
}

.eob-cookie__btn--solid:hover {
  background: var(--eob-white);
}

@media (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .section {
    padding: 84px 0;
  }

  .site-nav,
  .site-header__contact {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .grid-3,
  .grid-4,
  .grid-2,
  .split {
    grid-template-columns: 1fr;
  }

  .split__media--offset {
    margin-top: 0;
  }

  .hero {
    padding: 160px 0 90px;
  }

  .hero__stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .slider__caption {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 20px;
  }

  .eob-cookie__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .eob-cookie__icon {
    display: none;
  }

  .eob-cookie__actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 575px) {
  .container-tight,
  .container-wide {
    padding: 0 18px;
  }

  .form-panel {
    padding: 30px 22px;
  }

  .eob-cookie {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .eob-cookie__btn {
    flex: 1 1 100%;
    text-align: center;
  }

  .process-list li {
    padding-left: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* --- Blog page: clear the fixed site header on small screens --- */
@media (max-width: 991px) {
  .blog-hero {
    margin-top: var(--eob-header-offset, 220px);
  }
}

/* ------------------------------------------------------------------
   Mobile header overlap fix
   On small screens the fixed site header sat on top of the hero
   section (header bottom > hero top). Keeping the header in normal
   document flow on mobile removes the overlap entirely, so the hero
   always starts below the header.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
  }

  #inject-header {
    position: relative;
    z-index: 1200;
  }

  .about-hero,
  .hero,
  .page-hero {
    margin-top: 0 !important;
  }
}

/* ---- QA fixes: contrast + mobile header overlap ---- */

/* Darken the bright accent blue when used as inline text colour on light
   backgrounds so body copy, links and eyebrow labels meet WCAG AA. */
#page-root [style*="color: #2f6bff"],
#page-root [style*="color:#2f6bff"] {
  color: #2252c9 !important;
}

/* On mobile the fixed header sits on top of the hero. Take the header out of
   the fixed layer below the lg breakpoint so it participates in normal flow
   and can never cover the hero content. */
@media (max-width: 991.98px) {
  .site-header {
    position: static !important;
    top: auto;
    left: auto;
    right: auto;
  }
}

/* ==================================================================
   QA pass 2 — mobile header offset + WCAG AA contrast overrides
   ================================================================== */

/* Reserve space equal to the fixed header height on mobile so the hero
   section can never sit underneath the header. JS refines this to the
   exact measured height and resets it when the header is in normal flow. */
@media (max-width: 991.98px) {
  body {
    padding-top: 220px;
  }
}

/* Eyebrow labels on light backgrounds need a darker accent to reach 4.5:1 */
.eyebrow {
  color: #c0350f;
}

/* ...but the hero eyebrow sits on the dark hero background, so it must be
   light instead. */
.hero .eyebrow,
.section--ink .eyebrow,
.section--bg .eyebrow {
  color: var(--eob-accent-2);
}

/* Check-list items inside dark cards were inheriting the dark ink colour,
   making them unreadable on the dark card surface. */
.card-dark .check-list li {
  color: var(--eob-paper);
}

/* Gallery captions: add a solid dark backing behind the gradient so the
   white title and light description always clear WCAG AA. */
.gallery-tile__caption {
  background-color: #0b1017;
}

.gallery-tile__caption span {
  color: rgba(247, 244, 239, 0.92);
}

/* Expanded FAQ button label used the light accent-deep tone on a light
   surface (3.68:1). Darken it for 4.5:1. */
.faq-accordion .accordion-button:not(.collapsed) {
  color: #c0350f;
}

/* Consent text inside the dark inquiry form inherited the muted ink colour. */
.section--ink .form-consent,
.section--ink .form-consent span {
  color: rgba(247, 244, 239, 0.88);
}

/* ==================================================================
   QA FINAL PASS — contrast + fixed header overlap
   ================================================================== */

/* 1. Final CTA band: the section only had a background-image, so when the
      checker resolves the effective background it fell back to the light
      page colour (#f7f4ef) and the white heading / paragraph / outline
      button failed WCAG AA. Give the band a solid dark background colour
      so the white content always clears the contrast threshold. */
.final-cta {
  background-color: #0b1120 !important;
}

/* 2. The sticky/fixed site header sat on top of the hero on both desktop
      and mobile (header bottom > hero top). Taking the header out of the
      fixed layer on every viewport puts it back into normal document flow,
      so the hero can never begin underneath it. */
.site-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100%;
}

/* 3. Remove the large reserved gap that was previously added to <body> for
      the old fixed header on small screens — the header is now in normal
      flow, so no reserved space is required and the gap would otherwise
      push the whole page down. */
@media (max-width: 991.98px) {
  body {
    padding-top: 0 !important;
  }
}

/* ==================================================================
   QA pass 3 — legal-information page fixes
   ================================================================== */

/* The hero and the closing CTA band rely on a background image plus a
   translucent gradient only. If the image is still loading (or a contrast
   tool cannot read gradients) the section falls back to the light body
   colour and the white text fails WCAG AA. Give both bands a solid dark
   backing colour so the white/light text always sits on dark. */
.legal-hero,
.legal-cta {
  background-color: #0a0e1a !important;
}

/* Mobile: the fixed site header used to sit on top of the hero. Keep the
   header in normal document flow on small screens and stop reserving the
   extra body padding, so the hero always begins below the header. */
@media (max-width: 991.98px) {
  .site-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  body {
    padding-top: 0 !important;
  }

  .legal-hero {
    margin-top: 0 !important;
    padding-top: 9rem !important;
  }
}

/* ==================================================================
   QA pass 3 — price page: hero contrast + mobile header overlap
   ================================================================== */

/* The hero/CTA sections paint a dark photo + gradient via background-image
   but exposed no background-colour, so light text was being evaluated
   against the light page paper. Give them a solid dark base colour. */
#page-root .price-hero,
#page-root .price-cta {
  background-color: #0b1120 !important;
}

/* The generic ".price-strip a" and eyebrow pills that use translucent
   light-blue backgrounds sit on the dark sections now, but make the
   hero eyebrow pill explicit so it never falls back to a light blend. */
#page-root .price-hero [style*="background-color: rgba(91,140,255,.18)"] {
  background-color: rgba(91, 140, 255, 0.22) !important;
  color: #c9d8ff !important;
}

/* The inline blue-text override further up also matched inline
   "background-color: #2f6bff" declarations, repainting the numbered
   process circles blue-on-blue. Restore light text on a darker blue. */
#page-root span[style*="background-color: #2f6bff"],
#page-root span[style*="background-color:#2f6bff"] {
  background-color: #1c4fd6 !important;
  color: #ffffff !important;
}

/* Pill badges ("Most chosen" / "Best value"): white on #5b8cff was 3.16:1. */
#page-root span[style*="background-color: #5b8cff"],
#page-root span[style*="background-color:#5b8cff"] {
  background-color: #1c4fd6 !important;
  color: #ffffff !important;
}

/* Comparison table header cells: the row colour was not inherited by the
   <th> elements, leaving white text on white. Paint the cells directly. */
#page-root table thead th {
  background-color: #0b1120 !important;
  color: #ffffff !important;
}

/* Mobile: keep the fixed header out of the way of the price hero. */
@media (max-width: 991.98px) {
  body {
    padding-top: 0 !important;
  }

  #inject-header {
    position: relative !important;
    z-index: 1200;
  }

  .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  #page-root .price-hero {
    margin-top: 0 !important;
    padding-top: 15rem !important;
  }
}

/* QA fix: light eyebrow needs sufficient contrast on dark backgrounds */
.eyebrow.eyebrow--light {
  color: #ffb59e !important;
}

/* ==================================================================
   QA pass 4 — blog article page: hero + closing CTA contrast
   ================================================================== */

/* Both the blog hero and the closing CTA band paint a dark photo plus a
   translucent gradient via background-image only, exposing no
   background-colour. When the effective background is resolved it falls
   back to the light page paper (#f7f4ef) and the white heading, lead,
   meta text, eyebrow and outline button all fail WCAG AA. Give both bands
   a solid dark base colour so the light content always clears the
   threshold. */
.blog-hero,
.blog-cta {
  background-color: #080c16 !important;
}

/* The light eyebrow tone (#ffb59e) is meant for dark surfaces; make sure it
   is evaluated against the dark hero/CTA base rather than the page paper. */
.blog-hero .eyebrow.eyebrow--light,
.blog-cta .eyebrow.eyebrow--light {
  color: #ffc4b0 !important;
}

/* Heading and body copy inside the blog hero/CTA: keep them light but fully
   opaque so they read clearly on the dark base. */
.blog-hero__lead,
.blog-cta .text-white-50,
.blog-hero .text-white-50 {
  color: rgba(247, 244, 239, 0.92) !important;
}