.g-container {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.g-container--wide {
  max-width: none;
  padding-inline: 0;
}

.g-container--narrow {
  max-width: 42rem;
}

.g-grid {
  display: flex;
  flex-wrap: wrap;
  --g-gutter: 0rem;
  gap: var(--g-gutter);
}

.g-block {
  flex: 1 1 auto;
  width: 100%;
}

.size-5 {
  flex: 0 0 calc(5% - var(--g-gutter) * (100 - 5) / 100);
  width: calc(5% - var(--g-gutter) * (100 - 5) / 100);
}

.size-6 {
  flex: 0 0 calc(6% - var(--g-gutter) * (100 - 6) / 100);
  width: calc(6% - var(--g-gutter) * (100 - 6) / 100);
}

.size-7 {
  flex: 0 0 calc(7% - var(--g-gutter) * (100 - 7) / 100);
  width: calc(7% - var(--g-gutter) * (100 - 7) / 100);
}

.size-8 {
  flex: 0 0 calc(8% - var(--g-gutter) * (100 - 8) / 100);
  width: calc(8% - var(--g-gutter) * (100 - 8) / 100);
}

.size-9 {
  flex: 0 0 calc(9% - var(--g-gutter) * (100 - 9) / 100);
  width: calc(9% - var(--g-gutter) * (100 - 9) / 100);
}

.size-10 {
  flex: 0 0 calc(10% - var(--g-gutter) * (100 - 10) / 100);
  width: calc(10% - var(--g-gutter) * (100 - 10) / 100);
}

.size-11 {
  flex: 0 0 calc(11% - var(--g-gutter) * (100 - 11) / 100);
  width: calc(11% - var(--g-gutter) * (100 - 11) / 100);
}

.size-12 {
  flex: 0 0 calc(12% - var(--g-gutter) * (100 - 12) / 100);
  width: calc(12% - var(--g-gutter) * (100 - 12) / 100);
}

.size-13 {
  flex: 0 0 calc(13% - var(--g-gutter) * (100 - 13) / 100);
  width: calc(13% - var(--g-gutter) * (100 - 13) / 100);
}

.size-14 {
  flex: 0 0 calc(14% - var(--g-gutter) * (100 - 14) / 100);
  width: calc(14% - var(--g-gutter) * (100 - 14) / 100);
}

.size-15 {
  flex: 0 0 calc(15% - var(--g-gutter) * (100 - 15) / 100);
  width: calc(15% - var(--g-gutter) * (100 - 15) / 100);
}

.size-16 {
  flex: 0 0 calc(16% - var(--g-gutter) * (100 - 16) / 100);
  width: calc(16% - var(--g-gutter) * (100 - 16) / 100);
}

.size-17 {
  flex: 0 0 calc(17% - var(--g-gutter) * (100 - 17) / 100);
  width: calc(17% - var(--g-gutter) * (100 - 17) / 100);
}

.size-18 {
  flex: 0 0 calc(18% - var(--g-gutter) * (100 - 18) / 100);
  width: calc(18% - var(--g-gutter) * (100 - 18) / 100);
}

.size-19 {
  flex: 0 0 calc(19% - var(--g-gutter) * (100 - 19) / 100);
  width: calc(19% - var(--g-gutter) * (100 - 19) / 100);
}

.size-20 {
  flex: 0 0 calc(20% - var(--g-gutter) * (100 - 20) / 100);
  width: calc(20% - var(--g-gutter) * (100 - 20) / 100);
}

.size-21 {
  flex: 0 0 calc(21% - var(--g-gutter) * (100 - 21) / 100);
  width: calc(21% - var(--g-gutter) * (100 - 21) / 100);
}

.size-22 {
  flex: 0 0 calc(22% - var(--g-gutter) * (100 - 22) / 100);
  width: calc(22% - var(--g-gutter) * (100 - 22) / 100);
}

.size-23 {
  flex: 0 0 calc(23% - var(--g-gutter) * (100 - 23) / 100);
  width: calc(23% - var(--g-gutter) * (100 - 23) / 100);
}

.size-24 {
  flex: 0 0 calc(24% - var(--g-gutter) * (100 - 24) / 100);
  width: calc(24% - var(--g-gutter) * (100 - 24) / 100);
}

.size-25 {
  flex: 0 0 calc(25% - var(--g-gutter) * (100 - 25) / 100);
  width: calc(25% - var(--g-gutter) * (100 - 25) / 100);
}

.size-26 {
  flex: 0 0 calc(26% - var(--g-gutter) * (100 - 26) / 100);
  width: calc(26% - var(--g-gutter) * (100 - 26) / 100);
}

.size-27 {
  flex: 0 0 calc(27% - var(--g-gutter) * (100 - 27) / 100);
  width: calc(27% - var(--g-gutter) * (100 - 27) / 100);
}

.size-28 {
  flex: 0 0 calc(28% - var(--g-gutter) * (100 - 28) / 100);
  width: calc(28% - var(--g-gutter) * (100 - 28) / 100);
}

.size-29 {
  flex: 0 0 calc(29% - var(--g-gutter) * (100 - 29) / 100);
  width: calc(29% - var(--g-gutter) * (100 - 29) / 100);
}

.size-30 {
  flex: 0 0 calc(30% - var(--g-gutter) * (100 - 30) / 100);
  width: calc(30% - var(--g-gutter) * (100 - 30) / 100);
}

.size-31 {
  flex: 0 0 calc(31% - var(--g-gutter) * (100 - 31) / 100);
  width: calc(31% - var(--g-gutter) * (100 - 31) / 100);
}

.size-32 {
  flex: 0 0 calc(32% - var(--g-gutter) * (100 - 32) / 100);
  width: calc(32% - var(--g-gutter) * (100 - 32) / 100);
}

.size-33 {
  flex: 0 0 calc(33% - var(--g-gutter) * (100 - 33) / 100);
  width: calc(33% - var(--g-gutter) * (100 - 33) / 100);
}

.size-34 {
  flex: 0 0 calc(34% - var(--g-gutter) * (100 - 34) / 100);
  width: calc(34% - var(--g-gutter) * (100 - 34) / 100);
}

.size-35 {
  flex: 0 0 calc(35% - var(--g-gutter) * (100 - 35) / 100);
  width: calc(35% - var(--g-gutter) * (100 - 35) / 100);
}

.size-36 {
  flex: 0 0 calc(36% - var(--g-gutter) * (100 - 36) / 100);
  width: calc(36% - var(--g-gutter) * (100 - 36) / 100);
}

.size-37 {
  flex: 0 0 calc(37% - var(--g-gutter) * (100 - 37) / 100);
  width: calc(37% - var(--g-gutter) * (100 - 37) / 100);
}

.size-38 {
  flex: 0 0 calc(38% - var(--g-gutter) * (100 - 38) / 100);
  width: calc(38% - var(--g-gutter) * (100 - 38) / 100);
}

.size-39 {
  flex: 0 0 calc(39% - var(--g-gutter) * (100 - 39) / 100);
  width: calc(39% - var(--g-gutter) * (100 - 39) / 100);
}

.size-40 {
  flex: 0 0 calc(40% - var(--g-gutter) * (100 - 40) / 100);
  width: calc(40% - var(--g-gutter) * (100 - 40) / 100);
}

.size-41 {
  flex: 0 0 calc(41% - var(--g-gutter) * (100 - 41) / 100);
  width: calc(41% - var(--g-gutter) * (100 - 41) / 100);
}

.size-42 {
  flex: 0 0 calc(42% - var(--g-gutter) * (100 - 42) / 100);
  width: calc(42% - var(--g-gutter) * (100 - 42) / 100);
}

.size-43 {
  flex: 0 0 calc(43% - var(--g-gutter) * (100 - 43) / 100);
  width: calc(43% - var(--g-gutter) * (100 - 43) / 100);
}

.size-44 {
  flex: 0 0 calc(44% - var(--g-gutter) * (100 - 44) / 100);
  width: calc(44% - var(--g-gutter) * (100 - 44) / 100);
}

.size-45 {
  flex: 0 0 calc(45% - var(--g-gutter) * (100 - 45) / 100);
  width: calc(45% - var(--g-gutter) * (100 - 45) / 100);
}

.size-46 {
  flex: 0 0 calc(46% - var(--g-gutter) * (100 - 46) / 100);
  width: calc(46% - var(--g-gutter) * (100 - 46) / 100);
}

.size-47 {
  flex: 0 0 calc(47% - var(--g-gutter) * (100 - 47) / 100);
  width: calc(47% - var(--g-gutter) * (100 - 47) / 100);
}

.size-48 {
  flex: 0 0 calc(48% - var(--g-gutter) * (100 - 48) / 100);
  width: calc(48% - var(--g-gutter) * (100 - 48) / 100);
}

.size-49 {
  flex: 0 0 calc(49% - var(--g-gutter) * (100 - 49) / 100);
  width: calc(49% - var(--g-gutter) * (100 - 49) / 100);
}

.size-50 {
  flex: 0 0 calc(50% - var(--g-gutter) * (100 - 50) / 100);
  width: calc(50% - var(--g-gutter) * (100 - 50) / 100);
}

.size-51 {
  flex: 0 0 calc(51% - var(--g-gutter) * (100 - 51) / 100);
  width: calc(51% - var(--g-gutter) * (100 - 51) / 100);
}

.size-52 {
  flex: 0 0 calc(52% - var(--g-gutter) * (100 - 52) / 100);
  width: calc(52% - var(--g-gutter) * (100 - 52) / 100);
}

.size-53 {
  flex: 0 0 calc(53% - var(--g-gutter) * (100 - 53) / 100);
  width: calc(53% - var(--g-gutter) * (100 - 53) / 100);
}

.size-54 {
  flex: 0 0 calc(54% - var(--g-gutter) * (100 - 54) / 100);
  width: calc(54% - var(--g-gutter) * (100 - 54) / 100);
}

.size-55 {
  flex: 0 0 calc(55% - var(--g-gutter) * (100 - 55) / 100);
  width: calc(55% - var(--g-gutter) * (100 - 55) / 100);
}

.size-56 {
  flex: 0 0 calc(56% - var(--g-gutter) * (100 - 56) / 100);
  width: calc(56% - var(--g-gutter) * (100 - 56) / 100);
}

.size-57 {
  flex: 0 0 calc(57% - var(--g-gutter) * (100 - 57) / 100);
  width: calc(57% - var(--g-gutter) * (100 - 57) / 100);
}

.size-58 {
  flex: 0 0 calc(58% - var(--g-gutter) * (100 - 58) / 100);
  width: calc(58% - var(--g-gutter) * (100 - 58) / 100);
}

.size-59 {
  flex: 0 0 calc(59% - var(--g-gutter) * (100 - 59) / 100);
  width: calc(59% - var(--g-gutter) * (100 - 59) / 100);
}

.size-60 {
  flex: 0 0 calc(60% - var(--g-gutter) * (100 - 60) / 100);
  width: calc(60% - var(--g-gutter) * (100 - 60) / 100);
}

.size-61 {
  flex: 0 0 calc(61% - var(--g-gutter) * (100 - 61) / 100);
  width: calc(61% - var(--g-gutter) * (100 - 61) / 100);
}

.size-62 {
  flex: 0 0 calc(62% - var(--g-gutter) * (100 - 62) / 100);
  width: calc(62% - var(--g-gutter) * (100 - 62) / 100);
}

.size-63 {
  flex: 0 0 calc(63% - var(--g-gutter) * (100 - 63) / 100);
  width: calc(63% - var(--g-gutter) * (100 - 63) / 100);
}

.size-64 {
  flex: 0 0 calc(64% - var(--g-gutter) * (100 - 64) / 100);
  width: calc(64% - var(--g-gutter) * (100 - 64) / 100);
}

.size-65 {
  flex: 0 0 calc(65% - var(--g-gutter) * (100 - 65) / 100);
  width: calc(65% - var(--g-gutter) * (100 - 65) / 100);
}

.size-66 {
  flex: 0 0 calc(66% - var(--g-gutter) * (100 - 66) / 100);
  width: calc(66% - var(--g-gutter) * (100 - 66) / 100);
}

.size-67 {
  flex: 0 0 calc(67% - var(--g-gutter) * (100 - 67) / 100);
  width: calc(67% - var(--g-gutter) * (100 - 67) / 100);
}

.size-68 {
  flex: 0 0 calc(68% - var(--g-gutter) * (100 - 68) / 100);
  width: calc(68% - var(--g-gutter) * (100 - 68) / 100);
}

.size-69 {
  flex: 0 0 calc(69% - var(--g-gutter) * (100 - 69) / 100);
  width: calc(69% - var(--g-gutter) * (100 - 69) / 100);
}

.size-70 {
  flex: 0 0 calc(70% - var(--g-gutter) * (100 - 70) / 100);
  width: calc(70% - var(--g-gutter) * (100 - 70) / 100);
}

.size-71 {
  flex: 0 0 calc(71% - var(--g-gutter) * (100 - 71) / 100);
  width: calc(71% - var(--g-gutter) * (100 - 71) / 100);
}

.size-72 {
  flex: 0 0 calc(72% - var(--g-gutter) * (100 - 72) / 100);
  width: calc(72% - var(--g-gutter) * (100 - 72) / 100);
}

.size-73 {
  flex: 0 0 calc(73% - var(--g-gutter) * (100 - 73) / 100);
  width: calc(73% - var(--g-gutter) * (100 - 73) / 100);
}

.size-74 {
  flex: 0 0 calc(74% - var(--g-gutter) * (100 - 74) / 100);
  width: calc(74% - var(--g-gutter) * (100 - 74) / 100);
}

.size-75 {
  flex: 0 0 calc(75% - var(--g-gutter) * (100 - 75) / 100);
  width: calc(75% - var(--g-gutter) * (100 - 75) / 100);
}

.size-76 {
  flex: 0 0 calc(76% - var(--g-gutter) * (100 - 76) / 100);
  width: calc(76% - var(--g-gutter) * (100 - 76) / 100);
}

.size-77 {
  flex: 0 0 calc(77% - var(--g-gutter) * (100 - 77) / 100);
  width: calc(77% - var(--g-gutter) * (100 - 77) / 100);
}

.size-78 {
  flex: 0 0 calc(78% - var(--g-gutter) * (100 - 78) / 100);
  width: calc(78% - var(--g-gutter) * (100 - 78) / 100);
}

.size-79 {
  flex: 0 0 calc(79% - var(--g-gutter) * (100 - 79) / 100);
  width: calc(79% - var(--g-gutter) * (100 - 79) / 100);
}

.size-80 {
  flex: 0 0 calc(80% - var(--g-gutter) * (100 - 80) / 100);
  width: calc(80% - var(--g-gutter) * (100 - 80) / 100);
}

.size-81 {
  flex: 0 0 calc(81% - var(--g-gutter) * (100 - 81) / 100);
  width: calc(81% - var(--g-gutter) * (100 - 81) / 100);
}

.size-82 {
  flex: 0 0 calc(82% - var(--g-gutter) * (100 - 82) / 100);
  width: calc(82% - var(--g-gutter) * (100 - 82) / 100);
}

.size-83 {
  flex: 0 0 calc(83% - var(--g-gutter) * (100 - 83) / 100);
  width: calc(83% - var(--g-gutter) * (100 - 83) / 100);
}

.size-84 {
  flex: 0 0 calc(84% - var(--g-gutter) * (100 - 84) / 100);
  width: calc(84% - var(--g-gutter) * (100 - 84) / 100);
}

.size-85 {
  flex: 0 0 calc(85% - var(--g-gutter) * (100 - 85) / 100);
  width: calc(85% - var(--g-gutter) * (100 - 85) / 100);
}

.size-86 {
  flex: 0 0 calc(86% - var(--g-gutter) * (100 - 86) / 100);
  width: calc(86% - var(--g-gutter) * (100 - 86) / 100);
}

.size-87 {
  flex: 0 0 calc(87% - var(--g-gutter) * (100 - 87) / 100);
  width: calc(87% - var(--g-gutter) * (100 - 87) / 100);
}

.size-88 {
  flex: 0 0 calc(88% - var(--g-gutter) * (100 - 88) / 100);
  width: calc(88% - var(--g-gutter) * (100 - 88) / 100);
}

.size-89 {
  flex: 0 0 calc(89% - var(--g-gutter) * (100 - 89) / 100);
  width: calc(89% - var(--g-gutter) * (100 - 89) / 100);
}

.size-90 {
  flex: 0 0 calc(90% - var(--g-gutter) * (100 - 90) / 100);
  width: calc(90% - var(--g-gutter) * (100 - 90) / 100);
}

.size-91 {
  flex: 0 0 calc(91% - var(--g-gutter) * (100 - 91) / 100);
  width: calc(91% - var(--g-gutter) * (100 - 91) / 100);
}

.size-92 {
  flex: 0 0 calc(92% - var(--g-gutter) * (100 - 92) / 100);
  width: calc(92% - var(--g-gutter) * (100 - 92) / 100);
}

.size-93 {
  flex: 0 0 calc(93% - var(--g-gutter) * (100 - 93) / 100);
  width: calc(93% - var(--g-gutter) * (100 - 93) / 100);
}

.size-94 {
  flex: 0 0 calc(94% - var(--g-gutter) * (100 - 94) / 100);
  width: calc(94% - var(--g-gutter) * (100 - 94) / 100);
}

.size-95 {
  flex: 0 0 calc(95% - var(--g-gutter) * (100 - 95) / 100);
  width: calc(95% - var(--g-gutter) * (100 - 95) / 100);
}

.size-33-3 {
  flex: 0 0 calc(33.333% - var(--g-gutter) * 2 / 3);
  width: calc(33.333% - var(--g-gutter) * 2 / 3);
}

.size-66-6 {
  flex: 0 0 calc(66.666% - var(--g-gutter) * 1 / 3);
  width: calc(66.666% - var(--g-gutter) * 1 / 3);
}

.size-16-7 {
  flex: 0 0 calc(16.666% - var(--g-gutter) * 5 / 6);
  width: calc(16.666% - var(--g-gutter) * 5 / 6);
}

@media (max-width: 47.99rem) {
  [class*=size-] {
    flex-grow: 0;
    flex-basis: 100%;
    max-width: 100%;
  }
}
.g-grid--gutter {
  --g-gutter: 1.5rem;
}

.g-grid--gutter-large {
  --g-gutter: 2.5rem;
}

@media (max-width: 47.99rem) {
  .g-grid--gutter,
  .g-grid--gutter-large {
    --g-gutter: 1.25rem;
  }
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
}

@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 104.2%;
  ascent-override: 87.1%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial");
  size-adjust: 102.8%;
  ascent-override: 92.5%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}
:root {
  --op-base: #e6e9ef;
  --op-surface: #e6e9ef;
  --op-surface-light: #ffffff;
  --op-surface-dark: #c8cdd8;
  --op-text-heading: #2e3440;
  --op-text-body: #5b6472;
  --op-text-muted: #8891a0;
  --op-accent: #7c8fb8;
  --op-accent-dark: #66779c;
  --op-accent-contrast: #ffffff;
  --op-radius-sm: 12px;
  --op-radius-md: 20px;
  --op-radius-lg: 28px;
  --op-radius-pill: 999px;
  --op-shadow-distance-sm: 6px;
  --op-shadow-distance-md: 10px;
  --op-shadow-distance-lg: 16px;
  --op-shadow-blur-sm: 14px;
  --op-shadow-blur-md: 22px;
  --op-shadow-blur-lg: 36px;
  --op-font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --op-font-body: 'Manrope', 'Manrope Fallback', system-ui, sans-serif;
  --op-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --op-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --op-shadow-dark: rgba(163, 177, 198, 0.55);
  --op-shadow-light: rgba(255, 255, 255, 0.85);
  --op-shadow-dark-inset: rgba(163, 177, 198, 0.5);
  --op-shadow-light-inset: rgba(255, 255, 255, 0.7);
  --op-shadow-ambient: rgba(163, 177, 198, 0.35);
  --op-divider: rgba(163, 177, 198, 0.25);
  --op-divider-strong: rgba(163, 177, 198, 0.3);
  --op-focus-ring: rgba(124, 143, 184, 0.35);
  --op-glow-ring: rgba(124, 143, 184, 0.12);
  --op-surface-dark-rgb: 198, 204, 216;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --op-base: #1c1e22;
    --op-surface: #24272c;
    --op-surface-light: #2c2f35;
    --op-surface-dark: #15171a;
    --op-text-heading: #eef0f3;
    --op-text-body: #b8bec7;
    --op-text-muted: #7a8290;
    --op-accent: #93a5cc;
    --op-accent-dark: #aebbdc;
    --op-accent-contrast: #14161a;
    --op-shadow-dark: rgba(0, 0, 0, 0.55);
    --op-shadow-light: rgba(255, 255, 255, 0.05);
    --op-shadow-dark-inset: rgba(0, 0, 0, 0.5);
    --op-shadow-light-inset: rgba(255, 255, 255, 0.04);
    --op-shadow-ambient: rgba(0, 0, 0, 0.45);
    --op-divider: rgba(255, 255, 255, 0.08);
    --op-divider-strong: rgba(255, 255, 255, 0.1);
    --op-focus-ring: rgba(147, 165, 204, 0.4);
    --op-glow-ring: rgba(147, 165, 204, 0.16);
    --op-surface-dark-rgb: 21, 23, 26;
  }
}
:root[data-theme=dark] {
  --op-base: #1c1e22;
  --op-surface: #24272c;
  --op-surface-light: #2c2f35;
  --op-surface-dark: #15171a;
  --op-text-heading: #eef0f3;
  --op-text-body: #b8bec7;
  --op-text-muted: #7a8290;
  --op-accent: #93a5cc;
  --op-accent-dark: #aebbdc;
  --op-accent-contrast: #14161a;
  --op-shadow-dark: rgba(0, 0, 0, 0.55);
  --op-shadow-light: rgba(255, 255, 255, 0.05);
  --op-shadow-dark-inset: rgba(0, 0, 0, 0.5);
  --op-shadow-light-inset: rgba(255, 255, 255, 0.04);
  --op-shadow-ambient: rgba(0, 0, 0, 0.45);
  --op-divider: rgba(255, 255, 255, 0.08);
  --op-divider-strong: rgba(255, 255, 255, 0.1);
  --op-focus-ring: rgba(147, 165, 204, 0.4);
  --op-glow-ring: rgba(147, 165, 204, 0.16);
  --op-surface-dark-rgb: 21, 23, 26;
}

:root[data-theme=light] {
  --op-base: #e6e9ef;
  --op-surface: #e6e9ef;
  --op-surface-light: #ffffff;
  --op-surface-dark: #c8cdd8;
  --op-text-heading: #2e3440;
  --op-text-body: #5b6472;
  --op-text-muted: #8891a0;
  --op-accent: #7c8fb8;
  --op-accent-dark: #66779c;
  --op-accent-contrast: #ffffff;
  --op-shadow-dark: rgba(163, 177, 198, 0.55);
  --op-shadow-light: rgba(255, 255, 255, 0.85);
  --op-shadow-dark-inset: rgba(163, 177, 198, 0.5);
  --op-shadow-light-inset: rgba(255, 255, 255, 0.7);
  --op-shadow-ambient: rgba(163, 177, 198, 0.35);
  --op-divider: rgba(163, 177, 198, 0.25);
  --op-divider-strong: rgba(163, 177, 198, 0.3);
  --op-focus-ring: rgba(124, 143, 184, 0.35);
  --op-glow-ring: rgba(124, 143, 184, 0.12);
  --op-surface-dark-rgb: 198, 204, 216;
}

html, body {
  background: var(--op-base);
  color: var(--op-text-body);
  font-family: var(--op-font-body);
  font-size: 16px;
  line-height: 1.7;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--op-font-display);
  color: var(--op-text-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.op-section {
  padding: 6rem 0;
}

@media (min-width: 48rem) and (max-width: 59.99rem) {
  #g-service-features [class*=size-],
  #g-projects [class*=size-],
  #Team [class*=size-],
  #Pricing [class*=size-] {
    flex: 0 0 calc(50% - var(--g-gutter) / 2);
    width: calc(50% - var(--g-gutter) / 2);
    max-width: calc(50% - var(--g-gutter) / 2);
  }
}

@media (min-width: 48rem) and (max-width: 59.99rem) {
  .op-service-cards-grid [class*=size-],
  #g-blog-posts [class*=size-],
  #Portfolio [class*=size-] {
    flex: 0 0 calc(50% - var(--g-gutter) / 2);
    width: calc(50% - var(--g-gutter) / 2);
    max-width: calc(50% - var(--g-gutter) / 2);
  }
}

.op-section-muted {
  background: var(--op-surface-dark);
  background: linear-gradient(180deg, rgba(var(--op-surface-dark-rgb), 0.35), rgba(var(--op-surface-dark-rgb), 0));
}

.op-section-head {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.op-eyebrow {
  display: inline-block;
  font-family: var(--op-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--op-accent-dark);
  margin-bottom: 0.75rem;
}

.op-section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0;
}

.op-panel-raised {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow-distance-lg) var(--op-shadow-distance-lg) var(--op-shadow-blur-lg) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-lg) * -1) calc(var(--op-shadow-distance-lg) * -1) var(--op-shadow-blur-lg) 0 var(--op-shadow-light);
}

.op-panel-inset {
  background: var(--op-surface);
  border-radius: var(--op-radius-md);
  padding: 10px;
  box-shadow: inset var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark-inset), inset calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light-inset);
}
.op-panel-inset img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--op-radius-md) - 6px);
}

.op-toolbar {
  background: var(--op-base);
  padding: 0.6rem 0;
}

.op-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--op-text-muted);
}

.op-toolbar-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.op-toolbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--op-text-muted);
  transition: color 0.2s var(--op-ease-out);
}
.op-toolbar-link svg {
  width: 14px;
  height: 14px;
}
.op-toolbar-link:hover, .op-toolbar-link:focus-visible {
  color: var(--op-accent-dark);
}

.op-toolbar-social {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.9rem;
}
.op-toolbar-social a {
  display: inline-flex;
  color: var(--op-text-muted);
  transition: color 0.2s var(--op-ease-out), transform 0.2s var(--op-ease-spring);
}
.op-toolbar-social a svg {
  width: 15px;
  height: 15px;
}
.op-toolbar-social a:hover, .op-toolbar-social a:focus-visible {
  color: var(--op-accent-dark);
  transform: translateY(-2px);
}

.op-nav {
  z-index: 99;
  background: var(--op-base);
  padding: 0.9rem 0;
  position: relative;
  transition: box-shadow 0.3s var(--op-ease-out), padding 0.3s var(--op-ease-out), transform 0.3s var(--op-ease-out);
}

.op-nav.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 8px 30px var(--op-shadow-ambient);
  padding: 0.6rem 0;
}

.op-nav.is-fixed.is-hidden {
  transform: translateY(-100%);
}

.op-nav-placeholder {
  display: none;
}

.op-nav-placeholder.is-active {
  display: block;
}

.op-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.op-logo {
  font-family: var(--op-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--op-text-heading) !important;
  letter-spacing: -0.01em;
}

.op-nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 0.25rem;
}

.op-nav-links a {
  display: inline-block;
  color: var(--op-text-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  border-radius: var(--op-radius-pill);
  transition: color 0.2s var(--op-ease-out), background 0.2s var(--op-ease-out);
}

.op-nav-links li.is-active a,
.op-nav-links a:hover {
  color: var(--op-accent-dark);
  background: var(--op-surface);
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}

.op-nav-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--op-radius-pill);
  background: var(--op-surface);
  color: var(--op-text-heading);
  border: none;
  cursor: pointer;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}
.op-nav-toggle svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 60rem) {
  .op-nav-links {
    display: flex;
  }
  .op-nav-toggle {
    display: none;
  }
}
.op-mobile-nav-panel {
  position: fixed;
  inset: 0;
  z-index: 1030;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--op-ease-out);
}

.op-mobile-nav-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

.op-mobile-nav-bar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 320px);
  background: var(--op-base);
  padding: 2rem;
  transform: translateX(100%);
  transition: transform 0.3s var(--op-ease-out);
  display: flex;
  flex-direction: column;
}

.op-mobile-nav-panel.is-open .op-mobile-nav-bar {
  transform: translateX(0);
}

.op-mobile-nav-close {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--op-text-heading);
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.op-mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.op-mobile-nav li a {
  display: block;
  padding: 0.9rem 1rem;
  border-radius: var(--op-radius-md);
  color: var(--op-text-heading);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.op-mobile-nav li a:hover, .op-mobile-nav li a:focus-visible {
  background: var(--op-surface);
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}

.op-mobile-nav li.is-active a {
  color: var(--op-accent-dark);
  background: var(--op-surface);
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}

.op-button {
  display: inline-block;
  border-radius: var(--op-radius-pill);
  padding: 0.9rem 2rem;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s var(--op-ease-spring), box-shadow 0.25s var(--op-ease-out), color 0.2s var(--op-ease-out);
}
.op-button:hover, .op-button:focus-visible {
  transform: translateY(-2px);
}
.op-button:active {
  transform: translateY(0);
}

.op-button-primary {
  background: var(--op-accent);
  color: var(--op-accent-contrast) !important;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}
.op-button-primary:hover, .op-button-primary:focus-visible {
  background: var(--op-accent-dark);
  color: var(--op-accent-contrast) !important;
}
.op-button-primary:active {
  box-shadow: inset var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark-inset), inset calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light-inset);
}

.op-button-ghost {
  background: var(--op-surface);
  color: var(--op-text-heading) !important;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}
.op-button-ghost:hover, .op-button-ghost:focus-visible {
  color: var(--op-accent-dark) !important;
}
.op-button-ghost:active {
  box-shadow: inset var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark-inset), inset calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light-inset);
}

.op-button-block {
  width: 100%;
  display: block;
}

.op-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.op-hero {
  background: var(--op-base);
  padding: 7rem 0 6rem;
}

.op-hero-grid {
  display: flex;
  align-items: center;
}

.op-hero-content {
  max-width: 560px;
}

.op-hero-title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin: 0 0 1.25rem;
}

.op-hero-lead {
  font-size: 1.05rem;
  color: var(--op-text-body);
  margin: 0;
}

.op-hero-visual {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.op-hero-visual-ring {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: var(--op-surface);
  box-shadow: inset 10px 10px 26px 0 var(--op-shadow-dark-inset), inset calc(10px * -1) calc(10px * -1) 26px 0 var(--op-shadow-light-inset);
}

.op-hero-visual-dot {
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--op-accent);
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
  box-shadow: 10px 10px 22px 0 var(--op-shadow-dark), -10px -10px 22px 0 var(--op-shadow-light), 0 0 0 14px var(--op-glow-ring);
}

.op-icon-badge {
  width: 64px;
  height: 64px;
  border-radius: var(--op-radius-md);
  background: var(--op-surface);
  color: var(--op-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}
.op-icon-badge svg {
  width: 26px;
  height: 26px;
}

.op-icon-badge-inline {
  margin-left: auto;
  margin-right: auto;
}

.op-feature-card {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  padding: 2.25rem 2rem;
  height: 100%;
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
  transition: transform 0.3s var(--op-ease-spring), box-shadow 0.3s var(--op-ease-out);
}
.op-feature-card:hover {
  transform: translateY(-4px);
}

.op-feature-title {
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
}

.op-feature-text {
  margin: 0;
  font-size: 0.95rem;
}

.op-about-image img {
  aspect-ratio: 4/4.5;
  object-fit: cover;
}

.op-about-heading {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.op-about-text {
  margin: 0 0 1.25rem;
}

.op-about-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.op-about-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.op-about-list li h4 {
  font-size: 1rem;
  margin: 0 0 0.3rem;
}
.op-about-list li p {
  margin: 0;
  font-size: 0.92rem;
}

.op-about-list-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--op-surface);
  color: var(--op-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
}
.op-about-list-icon svg {
  width: 18px;
  height: 18px;
}

.op-main {
  padding: 5rem 0;
  background: var(--op-base);
}

.op-article {
  max-width: 720px;
  margin: 0 auto;
}

.op-article-kicker {
  font-family: var(--op-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--op-accent-dark);
  margin: 0 0 0.75rem;
}

.op-article-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0 0 2rem;
}

.op-article-body h2 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
}
.op-article-body h3 {
  font-size: 1.1rem;
  margin: 2rem 0 0.75rem;
}
.op-article-body p {
  margin: 0 0 1.25rem;
  color: var(--op-text-body);
}
.op-article-body p:last-child {
  margin-bottom: 0;
}

.op-progress-group {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.op-progress-label {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--op-text-heading);
  font-size: 0.92rem;
  margin-bottom: 0.6rem;
}

.op-progress-value {
  color: var(--op-accent-dark);
}

.op-progress-track {
  height: 14px;
  border-radius: var(--op-radius-pill);
  background: var(--op-surface);
  box-shadow: inset 4px 4px 8px 0 var(--op-shadow-dark-inset), inset calc(4px * -1) calc(4px * -1) 8px 0 var(--op-shadow-light-inset);
  overflow: hidden;
}

.op-progress-fill {
  height: 100%;
  border-radius: var(--op-radius-pill);
  background: linear-gradient(90deg, var(--op-accent), var(--op-accent-dark));
  transition: width 1.2s var(--op-ease-out);
}

.op-counter {
  padding: 1rem;
  text-align: center;
}

.op-counter-icon {
  color: var(--op-accent-dark);
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;
}
.op-counter-icon svg {
  width: 30px;
  height: 30px;
}

.op-counter-number {
  font-family: var(--op-font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--op-text-heading);
}

.op-counter-label {
  font-size: 0.9rem;
  color: var(--op-text-muted);
  margin-top: 0.4rem;
}

@media (min-width: 48rem) {
  .op-logo-strip-item {
    flex: 0 0 calc(16.666% - var(--g-gutter) * 5 / 6);
    width: calc(16.666% - var(--g-gutter) * 5 / 6);
  }
}
.op-logo-panel {
  background: var(--op-surface);
  border-radius: var(--op-radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.2s var(--op-ease-out), filter 0.2s var(--op-ease-out);
}
.op-logo-panel:hover {
  filter: grayscale(0);
  opacity: 1;
}
.op-logo-panel img {
  max-width: 100%;
  height: auto;
}

.op-service-card {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  padding: 2.5rem 2rem;
  height: 100%;
  text-align: center;
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
  transition: transform 0.3s var(--op-ease-spring);
}
.op-service-card:hover {
  transform: translateY(-4px);
}

.op-service-title {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}

.op-service-text {
  font-size: 0.92rem;
  margin: 0;
}

.op-service-rows {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.op-service-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.op-service-row-image img {
  aspect-ratio: 14/9;
  object-fit: cover;
}

.op-service-row-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--op-accent-dark);
  margin-bottom: 0.6rem;
}

.op-service-row-title {
  font-size: 1.5rem;
  margin: 0 0 0.9rem;
}

.op-service-row-text {
  margin: 0;
}

.op-order-swap {
  order: -1;
}

@media (min-width: 960px) {
  .op-order-swap {
    order: 0;
  }
  .op-service-row-reverse {
    flex-direction: row-reverse;
  }
}
.op-article-card {
  display: block;
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  overflow: hidden;
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
  transition: transform 0.3s var(--op-ease-spring);
  color: var(--op-text-heading);
}
.op-article-card:hover {
  transform: translateY(-4px);
  color: var(--op-accent-dark);
}
.op-article-card img {
  display: block;
  width: 100%;
  height: auto;
}

.op-article-card-body {
  padding: 1.5rem;
  text-align: center;
}
.op-article-card-body h3 {
  font-size: 1.05rem;
  margin: 0;
}

.op-testimonial-card {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  padding: 2.25rem;
  height: 100%;
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
}

.op-testimonial-quote {
  font-family: var(--op-font-display);
  font-size: 1.05rem;
  color: var(--op-text-heading);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.op-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.op-testimonial-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.op-testimonial-author strong {
  display: block;
  font-size: 0.9rem;
  color: var(--op-text-heading);
}
.op-testimonial-author span {
  font-size: 0.82rem;
  color: var(--op-text-muted);
}

.op-portfolio-item {
  border-radius: var(--op-radius-lg);
  padding: 10px;
  background: var(--op-surface);
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
  transition: transform 0.3s var(--op-ease-spring);
}
.op-portfolio-item:hover {
  transform: translateY(-4px) scale(1.01);
}
.op-portfolio-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--op-radius-lg) - 6px);
}

.op-team-card {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
  transition: transform 0.3s var(--op-ease-spring);
}
.op-team-card:hover {
  transform: translateY(-4px);
}
.op-team-card img {
  width: 100%;
  aspect-ratio: 4/4.5;
  object-fit: cover;
  border-radius: var(--op-radius-md);
  margin-bottom: 1.1rem;
}

.op-team-name {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.op-team-role {
  font-size: 0.85rem;
  color: var(--op-accent-dark);
  font-weight: 600;
}

.op-price-card {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  padding: 2.5rem 2rem;
  height: 100%;
  text-align: center;
  position: relative;
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
}

.op-price-card-featured {
  box-shadow: var(--op-shadow-distance-lg) var(--op-shadow-distance-lg) var(--op-shadow-blur-lg) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-lg) * -1) calc(var(--op-shadow-distance-lg) * -1) var(--op-shadow-blur-lg) 0 var(--op-shadow-light);
  transform: scale(1.03);
}

.op-price-badge {
  display: inline-block;
  background: var(--op-accent);
  color: var(--op-accent-contrast);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: var(--op-radius-pill);
  margin-bottom: 1rem;
}

.op-price-badge-muted {
  background: var(--op-surface-dark);
  color: var(--op-text-heading);
}

.op-price-tier {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.op-price-value {
  font-family: var(--op-font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--op-text-heading);
  margin-bottom: 1.5rem;
}

.op-price-symbol {
  font-size: 1.4rem;
  vertical-align: top;
}

.op-price-period {
  font-family: var(--op-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--op-text-muted);
}

.op-price-features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  text-align: left;
}
.op-price-features li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--op-text-body);
  border-bottom: 1px solid var(--op-divider);
}
.op-price-features li:last-child {
  border-bottom: none;
}

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

.op-accordion-item {
  background: var(--op-surface);
  border-radius: var(--op-radius-md);
  margin-bottom: 1rem;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
  overflow: hidden;
}

.op-accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  color: var(--op-text-heading);
  font-size: 0.98rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--op-font-body);
}
.op-accordion-title svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--op-accent-dark);
  transition: transform 0.3s var(--op-ease-out);
}

.op-accordion-item.is-open .op-accordion-title svg {
  transform: rotate(-180deg);
}

.op-accordion-content {
  overflow: hidden;
  transition: max-height 0.3s var(--op-ease-out);
}

.op-accordion-content-inner {
  padding: 0 1.5rem 1.25rem;
  color: var(--op-text-body);
  font-size: 0.92rem;
}
.op-accordion-content-inner p {
  margin: 0;
}

.op-contact-card {
  background: var(--op-surface);
  border-radius: var(--op-radius-lg);
  padding: 2rem;
  text-align: center;
  height: 100%;
  box-shadow: var(--op-shadow-distance-md) var(--op-shadow-distance-md) var(--op-shadow-blur-md) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-md) * -1) calc(var(--op-shadow-distance-md) * -1) var(--op-shadow-blur-md) 0 var(--op-shadow-light);
  display: block;
  color: var(--op-text-heading);
}
.op-contact-card h3 {
  font-size: 1.05rem;
  margin: 1rem 0 0.5rem;
}
.op-contact-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--op-text-body);
}

.op-contact-card-link {
  transition: transform 0.3s var(--op-ease-spring);
}
.op-contact-card-link:hover {
  transform: translateY(-4px);
  color: var(--op-accent-dark);
}

.op-contact-split {
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.op-map-placeholder img {
  aspect-ratio: 8/5;
  object-fit: cover;
}

input.op-input,
textarea.op-input {
  background: var(--op-surface);
  border: none;
  border-radius: var(--op-radius-md);
  padding: 0.9rem 1.2rem;
  color: var(--op-text-heading);
  font-family: var(--op-font-body);
  font-size: 0.95rem;
  width: 100%;
  box-shadow: inset var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark-inset), inset calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light-inset);
  transition: box-shadow 0.2s var(--op-ease-out);
}
input.op-input::placeholder,
textarea.op-input::placeholder {
  color: var(--op-text-muted);
}
input.op-input:focus,
textarea.op-input:focus {
  outline: none;
  box-shadow: inset 4px 4px 10px 0 var(--op-shadow-dark-inset), inset -4px -4px 10px 0 var(--op-shadow-light-inset), 0 0 0 3px var(--op-focus-ring);
}

.op-input-block {
  margin-top: 1rem;
}

textarea.op-input {
  resize: vertical;
  min-height: 120px;
}

.op-form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.op-form-row > div {
  flex: 1 1 200px;
}

.op-form .op-button {
  margin-top: 1.25rem;
}

.op-newsletter {
  padding: 3rem;
}

.op-newsletter-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.op-newsletter-copy,
.op-newsletter-action {
  flex: 1 1 280px;
}

.op-newsletter-title {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.op-newsletter-text {
  margin: 0;
}

.op-newsletter-form {
  display: flex;
  gap: 0.75rem;
}
.op-newsletter-form .op-input {
  flex: 1;
}
.op-newsletter-form .op-button {
  flex: 0 0 auto;
  padding: 0.9rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-newsletter-form .op-button svg {
  width: 18px;
  height: 18px;
}

.op-footer {
  background: var(--op-surface-dark);
  padding-top: 5rem;
}

.op-footer-col {
  padding-bottom: 3rem;
}

.op-footer-logo {
  display: inline-block;
  margin-bottom: 1rem;
}

.op-footer-text {
  font-size: 0.9rem;
  color: var(--op-text-body);
  max-width: 320px;
  margin: 0 0 1.5rem;
}

.op-footer-social {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.op-footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--op-surface);
  color: var(--op-text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
  transition: color 0.2s var(--op-ease-out), transform 0.2s var(--op-ease-spring);
}
.op-footer-social a svg {
  width: 16px;
  height: 16px;
}
.op-footer-social a:hover {
  color: var(--op-accent-dark);
  transform: translateY(-2px);
}

.op-footer-heading {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--op-text-heading);
  margin: 0 0 1.25rem;
}

.op-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-footer-links li {
  margin-bottom: 0.75rem;
}
.op-footer-links a {
  color: var(--op-text-body);
  font-size: 0.92rem;
  transition: color 0.2s var(--op-ease-out);
}
.op-footer-links a:hover {
  color: var(--op-accent-dark);
}

.op-bottom-strap {
  margin-top: 3.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--op-divider-strong);
  font-size: 0.82rem;
  color: var(--op-text-muted);
}

.op-bottom-strap-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.op-back-to-top,
.op-theme-toggle {
  position: fixed;
  bottom: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--op-surface);
  color: var(--op-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark), calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light);
  transition: transform 0.2s var(--op-ease-spring), color 0.2s var(--op-ease-out), opacity 0.25s var(--op-ease-out), visibility 0.25s;
}
.op-back-to-top:hover,
.op-theme-toggle:hover {
  transform: translateY(-3px);
}
.op-back-to-top:active,
.op-theme-toggle:active {
  box-shadow: inset var(--op-shadow-distance-sm) var(--op-shadow-distance-sm) var(--op-shadow-blur-sm) 0 var(--op-shadow-dark-inset), inset calc(var(--op-shadow-distance-sm) * -1) calc(var(--op-shadow-distance-sm) * -1) var(--op-shadow-blur-sm) 0 var(--op-shadow-light-inset);
}

.op-back-to-top {
  right: 2rem;
  opacity: 0;
  visibility: hidden;
}

.op-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.op-back-to-top-icon {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

.op-theme-toggle {
  left: 2rem;
}
.op-theme-toggle svg {
  position: absolute;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.35s var(--op-ease-spring), transform 0.35s var(--op-ease-spring);
}
.op-theme-toggle .op-theme-toggle-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.op-theme-toggle .op-theme-toggle-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme=dark] .op-theme-toggle .op-theme-toggle-sun,
  html:not([data-theme]) .op-theme-toggle .op-theme-toggle-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  html[data-theme=dark] .op-theme-toggle .op-theme-toggle-moon,
  html:not([data-theme]) .op-theme-toggle .op-theme-toggle-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
  }
}

html[data-theme=dark] .op-theme-toggle .op-theme-toggle-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
html[data-theme=dark] .op-theme-toggle .op-theme-toggle-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

html[data-theme=light] .op-theme-toggle .op-theme-toggle-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
html[data-theme=light] .op-theme-toggle .op-theme-toggle-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@keyframes op-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes op-slide-bottom-medium {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes op-slide-left-medium {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes op-slide-right-medium {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes op-slide-left-small {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes op-scale-up {
  0% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}
[class*=op-animate-] {
  opacity: 0;
}

.op-animate-slide-bottom-medium.op-in-view {
  animation: op-fade 0.6s var(--op-ease-out) both, op-slide-bottom-medium 0.6s var(--op-ease-out) both;
}

.op-animate-slide-left-medium.op-in-view {
  animation: op-fade 0.6s var(--op-ease-out) both, op-slide-left-medium 0.6s var(--op-ease-out) both;
}

.op-animate-slide-right-medium.op-in-view {
  animation: op-fade 0.6s var(--op-ease-out) both, op-slide-right-medium 0.6s var(--op-ease-out) both;
}

.op-animate-slide-left-small.op-in-view {
  animation: op-fade 0.5s var(--op-ease-out) both, op-slide-left-small 0.5s var(--op-ease-out) both;
}

.op-animate-scale-up.op-in-view {
  animation: op-fade 0.5s var(--op-ease-out) both, op-scale-up 0.5s var(--op-ease-out) both;
}

[class*=op-animate-].op-animation-done {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [class*=op-animate-] {
    opacity: 1;
    animation: none !important;
  }
}