/* ============================================================
   Base styles
   ============================================================ */
:root {

  --red: #ff1738;

  --ink: #f6f5f2;

  --card: 266px;

  --gap: 9px;

}

* {

  box-sizing: border-box;

}

html, body {

  margin: 0;

  background: #080a0c;

  color: var(--ink);

  font-family: "Geologica", Arial, "Helvetica Neue", sans-serif;

}

a {

  color: inherit;

  text-decoration: none;

}

body {

  min-width: 1180px;

}

.hero {

  position: relative;

  width: 100%;

  height: 941px;

  overflow: hidden;

  background: #090b0d;

  isolation: isolate;

}

.hero__base {

  position: absolute;

  inset: 0;

  z-index: -5;

  background: radial-gradient(circle at 60% 30%, rgba(116,76,48,.15), transparent 28%),
    linear-gradient(90deg, #0a0c0e 0%, #0c0e10 56%, #07090b 100%);

}

.hero__portrait-scene {

  position: absolute;

  inset: 0;

  z-index: -3;

  overflow: hidden;

  pointer-events: none;

}

.hero__portrait-scene img {

  position: absolute;

  left: 635px;

  top: 0;

  width: 1672px;

  height: 941px;

  max-width: none;

  object-fit: cover;

  filter: saturate(.94) contrast(1.01);

}

.hero__left-vignette {

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background: linear-gradient(90deg, #0a0c0e 0%, rgba(10,12,14,.97) 25%, rgba(10,12,14,.79) 42%, rgba(10,12,14,.18) 58%, transparent 69%);

}

.hero__right-vignette {

  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background: linear-gradient(90deg, transparent 70%, rgba(0,0,0,.10) 100%);

}

.artboard {

  position: relative;

  width: 1540px;

  height: 941px;

  margin: 0 auto;

}

.topbar {

  position: absolute;

  left: 0;

  top: 0;

  z-index: 30;

  width: 100%;

  height: 94px;

  display: flex;

  align-items: center;

}

.brand {

  position: absolute;

  left: 0;

  top: 25px;

  height: 44px;

  display: flex;

  align-items: center;

}

.brand__mark {

  display: block;

  width: 47px;

  height: auto;

  aspect-ratio: 56.1 / 48;

  color: #fff;

  flex: 0 0 auto;

}

.brand__mark svg {

  display: block;

  width: 100%;

  height: auto;

  overflow: visible;

  shape-rendering: geometricPrecision;

  transform: none;

}

.brand__dash {

  width: 28px;

  height: 2px;

  margin: 0 20px 0 22px;

  background: var(--red);

}

.brand__text {

  display: flex;

  flex-direction: column;

  gap: 2px;

  white-space: nowrap;

}

.brand__text strong {

  font-size: 17px;

  font-weight: 300;

}

.brand__text small {

  font-size: 11px;

  color: #b7b7b7;

  letter-spacing: .01em;

}

.nav {

  position: absolute;

  left: 410px;

  top: 34px;

  display: flex;

  gap: 52px;

  font-size: 15px;

  font-weight: 300;

  color: #e9e9e9;

}

.nav a {

  opacity: .92;

  transition: .2s;

}

.nav a:hover {

  opacity: 1;

  color: #fff;

}

.topbar__menu-panel {
  display: contents;
}

.call-btn {

  position: absolute;

  right: 0;

  top: 20px;

  height: 46px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 13px;

  padding: 0;

  color: rgba(255,255,255,.9);

  font-size: 14px;

  font-weight: 300;

  letter-spacing: .02em;

  transition: color .2s ease;

}

.call-btn svg {

  box-sizing: content-box;

  width: 18px;

  height: 18px;

  padding: 9px;

  border: 1px solid rgba(255,23,56,.72);

  border-radius: 50%;

  color: var(--red);

  fill: none;

  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;

}

.call-btn span {

  position: relative;

}

.call-btn span::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -5px;

  height: 1px;

  background: rgba(255,255,255,.48);

  transition: right .22s ease;

}

.call-btn:hover {

  color: #fff;

}

.call-btn:hover svg {

  border-color: var(--red);

  box-shadow: 0 0 16px rgba(255,23,56,.18);

  transform: translateY(-1px);

}

.call-btn:hover span::after {

  right: 0;

}

.call-btn:active svg {

  transform: translateY(1px);

}

.hero-copy {

  position: absolute;

  left: 0;

  top: 158px;

  z-index: 20;

  width: 790px;

}

.hero-copy h1 {

  margin: 0;

  font-family: "Prata", Georgia, "Times New Roman", serif;

  font-weight: 300;

  font-size: 70px;

  line-height: .98;

  letter-spacing: .008em;

  text-wrap: balance;

  transform: translateY(-20px);

}

.hero-subtitle {

  margin: 24px 0 0;

  width: 620px;

  font-family: "Geologica", Arial, "Helvetica Neue", sans-serif;

  font-size: 17px;

  line-height: 1.45;

  font-weight: 300;

  letter-spacing: .005em;

  color: rgba(255,255,255,.72);

  transform: translateY(-20px);

}

.hero-accent-word {

  position: relative;

  display: inline-block;

  padding: 0 .02em .16em;

}

.hero-accent-word::after {

  content: "";

  position: absolute;

  left: -3%;

  bottom: -.04em;

  width: 112%;

  height: 3px;

  border-radius: 999px;

  background: linear-gradient(90deg, rgba(255,23,56,.18) 0%, rgba(255,23,56,.92) 12%, rgba(255,23,56,1) 50%, rgba(255,23,56,.88) 88%, rgba(255,23,56,.16) 100%);

  transform: rotate(-1.7deg);

  box-shadow: 0 0 8px rgba(255,23,56,.18);

}

.actions {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 34px;

  transform: translateY(-10px);

}

.action {

  position: relative;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 38px;

  white-space: nowrap;

  font-size: 17px;

  font-weight: 500;

  text-align: center;

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;

}

.action--primary {

  height: 76.5px;

  min-width: 356px;

  padding: 0 41px;

  border: 2px solid rgba(255,72,79,.66);

  border-radius: 999px;

  color: #fff;

  background: linear-gradient(180deg, #ff2028 0%, #f51520 52%, #cf0b16 100%);

  font-size: 14.2px;

  letter-spacing: .14em;

  text-transform: uppercase;

  box-shadow: 0 3px 0 #8f0b17, 0 10px 22px rgba(156,5,14,.28), 0 0 28px rgba(255,18,34,.92), 0 0 64px rgba(255,18,34,.72), 0 0 110px rgba(255,18,34,.42), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -8px 14px rgba(80,0,7,.24);

}

.action--primary:hover {

  transform: translateY(-1px);

  filter: brightness(1.03);

  box-shadow: 0 4px 0 #8f0b17, 0 12px 26px rgba(156,5,14,.32), 0 0 34px rgba(255,18,34,1), 0 0 76px rgba(255,18,34,.82), 0 0 128px rgba(255,18,34,.48), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 14px rgba(80,0,7,.24);

}

.action--primary:active {

  transform: translateY(3px);

  box-shadow: 0 1px 0 #8f0b17, 0 5px 12px rgba(156,5,14,.20), 0 0 18px rgba(255,18,34,.34), 0 0 38px rgba(255,18,34,.18), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -6px 12px rgba(80,0,7,.30);

}

.action--ghost {

  height: auto;

  min-width: 0;

  justify-content: flex-start;

  gap: 12px;

  padding: 0 6px;

  overflow: visible;

  border: 0;

  border-radius: 0;

  color: rgba(255,255,255,.88);

  background: transparent;

  font-size: 16px;

  font-weight: 300;

}

.action--ghost svg {

  width: 24px;

  height: 24px;

  flex: 0 0 auto;

  fill: none;

  stroke: var(--red);

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.action--ghost span {

  position: relative;

}

.action--ghost span::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -5px;

  height: 1px;

  background: rgba(255,255,255,.55);

  transition: right .22s ease;

}

.action--ghost:hover {

  color: #fff;

  transform: none;

}

.action--ghost:hover span::after {

  right: 0;

}

.card-row {

  position: absolute;

  left: 0;

  top: 527px;

  z-index: 40;

  width: 1091px;

  display: grid;

  grid-template-columns: repeat(4, var(--card));

  gap: var(--gap);

}

.insurance-card {

  position: relative;

  width: var(--card);

  height: var(--card);

  overflow: hidden;

  isolation: isolate;

  border: 1px solid rgba(255,255,255,.26);

  border-radius: 22px;

  background: #0d1013;

  box-shadow: 0 14px 34px rgba(0,0,0,.27);

}

.insurance-card__media {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .35s ease;

}

.insurance-card:nth-child(1) .insurance-card__media {

  object-position: 58% 48%;

}

.insurance-card:nth-child(2) .insurance-card__media {

  object-position: 67% 50%;

}

.insurance-card:nth-child(3) .insurance-card__media {

  object-position: 50% 50%;

}

.insurance-card:nth-child(4) .insurance-card__media {

  object-position: 50% 47%;

}

.insurance-card__overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(180deg, rgba(5,8,12,.02), rgba(5,8,12,.08) 38%, rgba(5,8,12,.60) 70%, rgba(5,8,12,.96) 100%);

}

.insurance-card__content {

  position: absolute;

  inset: 0;

  z-index: 2;

}

.insurance-card__icon {

  position: absolute;

  left: 18px;

  top: 129px;

  display: block;

  height: 34px;

  max-width: 39px;

  object-fit: contain;

}

.insurance-card:nth-child(1) .insurance-card__icon, .insurance-card:nth-child(4) .insurance-card__icon {

  top: 130px;

  height: 33px;

}

.insurance-card h2 {

  position: absolute;

  left: 18px;

  right: 61px;

  top: 173px;

  margin: 0;

  font-size: 17px;

  line-height: 1.08;

  font-weight: 600;

  letter-spacing: -.02em;

}

.insurance-card p {

  position: absolute;

  left: 18px;

  right: 65px;

  top: 218px;

  margin: 0;

  color: rgba(255,255,255,.62);

  font-size: 12px;

  line-height: 1.2;

  font-weight: 300;

}

.insurance-card__cta {

  position: absolute;

  right: 18px;

  bottom: 18px;

  width: 46px;

  height: 46px;

  display: grid;

  place-items: center;

  border: 1.5px solid var(--red);

  border-radius: 50%;

  background: rgba(5,8,12,.18);

  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;

}

.insurance-card__cta img {

  width: 18px;

  height: 18px;

  transition: filter .22s ease;

}

.insurance-card:hover .insurance-card__media {

  transform: scale(1.03);

}

.insurance-card:hover .insurance-card__cta {

  box-shadow: 0 0 0 4px rgba(255,23,56,.07), 0 0 18px rgba(255,23,56,.14);

}

.insurance-card:hover .insurance-card__cta:hover {

  border-color: var(--red);

  background: var(--red);

  box-shadow: 0 0 0 4px rgba(255,23,56,.12), 0 0 16px 2px rgba(255,23,56,.38), 0 0 30px 6px rgba(255,23,56,.18), inset 0 0 8px rgba(255,255,255,.04);

}

.insurance-card:hover .insurance-card__cta:hover img {

  filter: brightness(0) invert(1);

}

.benefits {

  position: absolute;

  left: 0;

  top: 823px;

  z-index: 45;

  width: max-content;

  display: flex;

  align-items: stretch;

}

.benefit {

  min-height: 72px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 0 30px;

  border-right: 1px solid rgba(255,255,255,.18);

  color: #f3f4f6;

  font-size: 15px;

  line-height: 1.22;

  white-space: nowrap;

}

.benefit:first-child {

  padding-left: 0;

}

.benefit--last {

  padding-right: 0;

  border-right: 0;

}

.benefit svg {

  width: 41.4px;

  height: 41.4px;

  flex: 0 0 auto;

  overflow: visible;

  color: var(--red);

  fill: none;

  stroke: currentColor;

  stroke-width: 1.1;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.benefit span {

  display: block;

}

.experience-accent {

  position: absolute;

  right: 8px;

  top: 137px;

  z-index: 35;

  width: 264.5px;

  pointer-events: none;

  text-align: center;

}

.experience-accent__art {

  display: block;

  width: 253px;

  height: auto;

  margin: 0 auto;

}

.experience-accent__copy {

  margin-top: 8px;

  color: rgba(255,255,255,.68);

  font-size: 13.8px;

  line-height: 1.2;

  font-weight: 300;

  letter-spacing: .16em;

  text-transform: lowercase;

  white-space: nowrap;

}

@media (max-width: 1500px) {

  body {

    min-width: 0;

  }

  .hero {

    height: min(941px, 56.28vw);

  }

  .artboard {

    width: 1540px;

    transform-origin: top center;

    transform: scale(calc(100vw / 1672));

  }

  .hero__portrait-scene img {

    transform-origin: top left;

  }

}

.workflow {

  position: relative;

  height: 941px;

  min-height: 941px;

  overflow: hidden;

  background: radial-gradient(ellipse at 78% 37%, rgba(232,104,34,.16), transparent 29%),
    radial-gradient(ellipse at 67% 53%, rgba(255,172,67,.055), transparent 20%),
    radial-gradient(circle at 18% 80%, rgba(255,23,56,.07), transparent 27%),
    linear-gradient(180deg, #090b0d 0%, #100e0d 46%, #080a0c 100%);

  color: var(--ink);

}

.workflow::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .22;

  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

  background-size: 84px 84px;

  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 84%, transparent);

}

.workflow::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 18%, rgba(255,255,255,.16) 82%, transparent);

}

.workflow__inner {

  position: relative;

  z-index: 1;

  width: 1540px;

  margin: 0 auto;

  height: 941px;

  padding: 70px 0 64px;

}

.workflow__object-scene {

  position: absolute;

  z-index: 0;

  left: 50%;

  top: 326px;

  bottom: auto;

  width: 700px;

  margin-left: -660px;

  opacity: .46;

  pointer-events: none;

  filter: sepia(.12) saturate(1.08) contrast(1.05) drop-shadow(0 0 34px rgba(221,102,35,.08));

  transform: rotate(-2.5deg);

  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 84%, transparent 100%);

}

.workflow__object-scene::after {

  content: "";

  position: absolute;

  inset: 24% 15%;

  z-index: -1;

  border-radius: 50%;

  background: rgba(225,102,35,.15);

  filter: blur(80px);

}

.workflow__object-scene img {

  display: block;

  width: 100%;

  height: auto;

}

.workflow__head {

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

  margin-bottom: 42px;

}

.workflow__eyebrow {

  display: flex;

  align-items: center;

  gap: 17px;

  color: rgba(255,255,255,.56);

  font-size: 12px;

  font-weight: 400;

  letter-spacing: .17em;

  text-transform: uppercase;

}

.workflow__eyebrow::before {

  content: "";

  width: 46px;

  height: 2px;

  background: var(--red);

  box-shadow: 0 0 12px rgba(255,23,56,.32);

}

.workflow__layout {

  display: grid;

  grid-template-columns: 475px 1fr;

  gap: 112px;

  align-items: start;

}

.workflow__intro h2 {

  max-width: 460px;

  margin: 0;

  font-family: "Prata", Georgia, "Times New Roman", serif;

  font-size: 58px;

  line-height: 1.08;

  font-weight: 300;

  letter-spacing: -.018em;

}

.workflow__accent {

  position: relative;

  display: inline-block;

  color: #fff;

}

.workflow__accent::after {

  content: "";

  position: absolute;

  left: -2%;

  right: -5%;

  bottom: -.13em;

  height: 3px;

  border-radius: 999px;

  background: linear-gradient(90deg, rgba(255,23,56,.18), var(--red) 18%, var(--red) 80%, rgba(255,23,56,.15));

  transform: rotate(-1.4deg);

  box-shadow: 0 0 9px rgba(255,23,56,.17);

}

.workflow__lead {

  max-width: 430px;

  margin: 31px 0 0;

  color: rgba(255,255,255,.64);

  font-size: 16px;

  line-height: 1.62;

  font-weight: 300;

}

.workflow__promise {

  position: relative;

  max-width: 430px;

  margin-top: 58px;

  padding: 23px 0 23px 28px;

  border-left: 1px solid rgba(255,23,56,.72);

}

.workflow__promise strong {

  display: block;

  margin-bottom: 8px;

  color: #fff;

  font-size: 15px;

  font-weight: 500;

}

.workflow__promise span {

  display: block;

  color: rgba(255,255,255,.56);

  font-size: 13px;

  line-height: 1.55;

  font-weight: 300;

}

.workflow__action {

  display: inline-flex;

  align-items: center;

  gap: 13px;

  margin-top: 38px;

  color: rgba(255,255,255,.88);

  font-size: 15px;

  font-weight: 300;

}

.workflow__action-icon {

  width: 45px;

  height: 45px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(255,23,56,.76);

  border-radius: 50%;

  color: var(--red);

  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;

}

.workflow__action-icon svg {

  width: 19px;

  height: 19px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.workflow__action:hover .workflow__action-icon {

  color: #fff;

  background: var(--red);

  box-shadow: 0 0 25px rgba(255,23,56,.26);

  transform: translateX(3px);

}

.workflow__action span:last-child {

  position: relative;

}

.workflow__action span:last-child::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -5px;

  height: 1px;

  background: rgba(255,255,255,.5);

  transition: right .22s ease;

}

.workflow__action:hover span:last-child::after {

  right: 0;

}

.workflow__steps {

  position: relative;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;

}

.workflow__route {

  position: absolute;

  z-index: 0;

  inset: 20px -20px -40px;

  width: calc(100% + 40px);

  height: calc(100% + 60px);

  overflow: visible;

  pointer-events: none;

}

.workflow__route-path {

  fill: none;

  stroke: rgba(255,255,255,.09);

  stroke-width: 1;

  stroke-dasharray: 4 8;

}

.workflow__route-accent {

  fill: none;

  stroke: rgba(255,23,56,.72);

  stroke-width: 1.4;

  stroke-linecap: round;

  filter: drop-shadow(0 0 5px rgba(255,23,56,.34));

}

.workflow__steps::before {

  content: "";

  position: absolute;

  left: 50%;

  top: -29px;

  bottom: -29px;

  width: 1px;

  background: linear-gradient(180deg, transparent, rgba(255,255,255,.1) 12%, rgba(255,255,255,.1) 88%, transparent);

}

.workflow-card {

  position: relative;

  z-index: 1;

  min-height: 232px;

  overflow: hidden;

  padding: 30px 31px 28px;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 27px;

  background: radial-gradient(circle at 88% 12%, rgba(241,119,43,.075), transparent 29%),
    radial-gradient(circle at 8% 100%, rgba(255,23,56,.035), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.062), rgba(255,255,255,.014) 52%, rgba(0,0,0,.12)),
    rgba(12,15,18,.76);

  box-shadow: 0 18px 46px rgba(0,0,0,.18);

  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;

}

.workflow-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  border-radius: inherit;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -28px 50px rgba(0,0,0,.08);

  pointer-events: none;

}

.workflow-card__top, .workflow-card h3, .workflow-card p {

  position: relative;

  z-index: 1;

}

.workflow-card:nth-child(even) {

  transform: translateY(49px);

}

.workflow-card::before {

  content: "";

  position: absolute;

  left: 0;

  top: 28px;

  bottom: 28px;

  width: 2px;

  opacity: 0;

  background: var(--red);

  box-shadow: 0 0 16px rgba(255,23,56,.35);

  transition: opacity .28s ease;

}

.workflow-card:hover {

  transform: translateY(-4px);

  border-color: rgba(255,255,255,.26);

  background: linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 52%, rgba(0,0,0,.11)),
    rgba(12,15,18,.9);

  box-shadow: 0 22px 54px rgba(0,0,0,.25);

}

.workflow-card:nth-child(even):hover {

  transform: translateY(45px);

}

.workflow-card:hover::before {

  opacity: 1;

}

.workflow-card__top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 30px;

}

.workflow-card__number {

  color: rgba(255,255,255,.24);

  font-family: "Prata", Georgia, serif;

  font-size: 20px;

  line-height: 1;

}

.workflow-card__number::before {

  content: "этап";

  margin-right: 8px;

  color: rgba(255,255,255,.26);

  font-family: "Geologica", Arial, sans-serif;

  font-size: 8px;

  letter-spacing: .16em;

  text-transform: uppercase;

  vertical-align: 3px;

}

.workflow-card__icon {

  width: 43px;

  height: 43px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(255,23,56,.58);

  border-radius: 50%;

  color: var(--red);

  background: rgba(255,23,56,.025);

}

.workflow-card__icon svg {

  width: 21px;

  height: 21px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.65;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.workflow-card h3 {

  margin: 0;

  color: #fff;

  font-size: 19px;

  line-height: 1.2;

  font-weight: 500;

  letter-spacing: -.015em;

}

.workflow-card p {

  max-width: 335px;

  margin: 14px 0 0;

  color: rgba(255,255,255,.56);

  font-size: 13px;

  line-height: 1.55;

  font-weight: 300;

}

.workflow-card__graphic {

  position: absolute;

  right: -21px;

  bottom: -25px;

  width: 164px;

  height: 164px;

  color: rgba(255,255,255,.085);

  pointer-events: none;

  transform: rotate(-6deg);

  transition: color .28s ease, transform .4s ease;

}

.workflow-card:nth-child(even) .workflow-card__graphic {

  transform: rotate(6deg);

}

.workflow-card__graphic svg {

  display: block;

  width: 100%;

  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.15;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.workflow-card__graphic .accent-line {

  color: rgba(255,23,56,.22);

  stroke: currentColor;

}

.workflow-card:hover .workflow-card__graphic {

  color: rgba(255,255,255,.125);

  transform: rotate(-2deg) scale(1.035);

}

.workflow-card:nth-child(even):hover .workflow-card__graphic {

  transform: rotate(2deg) scale(1.035);

}

@media (max-width: 1650px) {

  .workflow__inner {

    width: calc(100% - 96px);

  }

  .workflow__layout {

    grid-template-columns: 420px 1fr;

    gap: 70px;

  }

}

@media (max-width: 1180px) {

  .workflow {

    height: auto;

    min-height: 0;

  }

  .workflow__inner {

    width: calc(100% - 56px);

    height: auto;

    padding: 70px 0 106px;

  }

  .workflow__head {

    margin-bottom: 42px;

  }

  .workflow__layout {

    grid-template-columns: 1fr;

    gap: 58px;

  }

  .workflow__intro {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px 64px;

  }

  .workflow__intro h2 {

    max-width: 560px;

  }

  .workflow__lead {

    margin-top: 4px;

  }

  .workflow__promise {

    margin-top: 0;

  }

  .workflow__action {

    align-self: start;

    margin-top: 8px;

  }

  .workflow__object-scene {

    left: auto;

    right: -90px;

    top: auto;

    bottom: 110px;

    width: 650px;

    margin-left: 0;

    opacity: .22;

  }

}

@media (max-width: 700px) {

  .workflow__inner {

    width: auto;

    margin: 0;

    padding: 58px 18px 108px;

  }

  .workflow__head {

    margin-bottom: 31px;

  }

  .workflow__eyebrow {

    gap: 12px;

    font-size: 10px;

  }

  .workflow__eyebrow::before {

    width: 32px;

  }

  .workflow__layout {

    gap: 42px;

  }

  .workflow__intro {

    display: block;

  }

  .workflow__intro h2 {

    font-size: clamp(39px, 11vw, 50px);

  }

  .workflow__lead {

    margin-top: 25px;

    font-size: 14px;

    line-height: 1.6;

  }

  .workflow__promise {

    margin-top: 35px;

    padding-left: 20px;

  }

  .workflow__action {

    margin-top: 28px;

  }

  .workflow__steps {

    grid-template-columns: 1fr;

    gap: 10px;

  }

  .workflow__steps::before {

    display: none;

  }

  .workflow-card, .workflow-card:nth-child(even), .workflow-card:hover, .workflow-card:nth-child(even):hover {

    transform: none;

  }

  .workflow-card {

    min-height: 212px;

    padding: 26px 25px;

    border-radius: 19px;

  }

  .workflow-card__top {

    margin-bottom: 25px;

  }

  .workflow__route {

    display: none;

  }

  .workflow__object-scene {

    right: -180px;

    bottom: 36%;

    width: 560px;

    opacity: .13;

  }

  .workflow-card__graphic {

    width: 142px;

    height: 142px;

  }

}

.services-showcase {

  --service-red: #ff1738;

  --service-ink: #f6f5f2;

  position: relative;

  height: 941px;

  min-height: 941px;

  overflow: hidden;

  color: var(--service-ink);

  background: radial-gradient(ellipse at 53% 47%, rgba(226,103,36,.17), transparent 31%),
    radial-gradient(ellipse at 63% 56%, rgba(255,175,70,.055), transparent 19%),
    radial-gradient(circle at 88% 13%, rgba(255,23,56,.09), transparent 25%),
    linear-gradient(135deg, #080a0c 0%, #110e0d 49%, #080a0c 100%);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);

}

.services-showcase::before {

  content: "";

  position: absolute;

  width: 760px;

  height: 760px;

  left: 27%;

  top: 155px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(239,116,42,.13), rgba(255,168,65,.035) 42%, transparent 68%);

  filter: blur(10px);

}

.services-showcase::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: linear-gradient(90deg, rgba(8,10,12,.42), transparent 30%, transparent 72%, rgba(8,10,12,.3)),
    linear-gradient(180deg, rgba(8,10,12,.2), transparent 34%, rgba(8,10,12,.38));

}

.services-showcase__inner {

  position: relative;

  z-index: 2;

  width: 1540px;

  height: 941px;

  margin: 0 auto;

  padding-top: 63px;

}

.services-showcase__top {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.services-showcase__eyebrow {

  display: flex;

  align-items: center;

  gap: 17px;

  font-size: 12px;

  font-weight: 500;

  letter-spacing: .17em;

  text-transform: uppercase;

}

.services-showcase__eyebrow::before {

  content: "";

  width: 46px;

  height: 2px;

  background: var(--service-red);

}

.services-showcase__brand-note {

  display: flex;

  align-items: center;

  gap: 10px;

  color: rgba(255,255,255,.45);

  font-size: 12px;

  font-weight: 400;

  letter-spacing: .035em;

}

.services-showcase__brand-note::before {

  content: "";

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--service-red);

  box-shadow: 0 0 0 5px rgba(232,23,50,.1);

}

.services-showcase__title {

  position: absolute;

  left: 0;

  top: 103px;

  z-index: 4;

  margin: 0;

  font-family: "Prata", Georgia, serif;

  font-size: 56px;

  line-height: 1.08;

  font-weight: 300;

  letter-spacing: -.02em;

}

.services-showcase__title span {

  position: relative;

  display: inline-block;

  color: #fff;

  padding-bottom: 7px;

}

.services-showcase__title span::after {

  content: "";

  position: absolute;

  left: -2%;

  right: -3%;

  bottom: 1px;

  height: 3px;

  border-radius: 999px;

  background: linear-gradient(90deg, rgba(255,23,56,.2), var(--service-red) 16%, #ff526b 70%, rgba(255,23,56,.2));

  box-shadow: 0 0 13px rgba(255,23,56,.28);

  transform: rotate(-1.4deg);

  transform-origin: left center;

}

.services-showcase__main {

  position: absolute;

  left: 0;

  right: 0;

  top: 205px;

  bottom: 82px;

  display: block;

}

.services-tabs {

  position: absolute;

  left: 0;

  top: 50%;

  z-index: 8;

  width: 270px;

  display: flex;

  flex-direction: column;

  transform: translateY(-50%);

  border-top: 1px solid rgba(255,255,255,.12);

  background: linear-gradient(90deg, rgba(8,10,12,.72), rgba(8,10,12,.16) 82%, transparent);

}

.services-tab {

  position: relative;

  min-height: 76px;

  display: grid;

  grid-template-columns: 34px 1fr;

  gap: 8px;

  align-items: center;

  padding: 0 5px;

  border: 0;

  border-bottom: 1px solid rgba(255,255,255,.12);

  color: rgba(255,255,255,.48);

  background: transparent;

  font: inherit;

  text-align: left;

  cursor: pointer;

  transition: color .28s ease, padding-left .28s ease, transform .28s ease;

}

.services-tab::before {

  content: "";

  position: absolute;

  left: 0;

  top: 21px;

  bottom: 21px;

  width: 2px;

  opacity: 0;

  background: var(--service-red);

  transition: opacity .25s ease;

}

.services-tab__number {

  font-family: "Prata", Georgia, serif;

  font-size: 12px;

  color: rgba(255,255,255,.25);

}

.services-tab__label {

  font-size: 15px;

  font-weight: 300;

  letter-spacing: .01em;

}

.services-tab__arrow {

  display: none;

}

.services-tab:hover {

  color: var(--service-ink);

  transform: translateX(4px);

}

.services-tab[aria-selected="true"] {

  padding-left: 18px;

  color: var(--service-ink);

}

.services-tab[aria-selected="true"]::before {

  opacity: 1;

}

.services-tab[aria-selected="true"] .services-tab__label {

  font-weight: 400;

}

.services-tab[aria-selected="true"] .services-tab__number {

  color: var(--service-red);

}

.services-tab[aria-selected="true"] .services-tab__arrow {

  color: #fff;

  border-color: var(--service-red);

  background: var(--service-red);

  transform: rotate(-35deg);

}

.services-visual {

  position: absolute;

  z-index: 2;

  left: 180px;

  right: 80px;

  top: -99px;

  bottom: -100px;

  min-width: 0;

  overflow: hidden;

  margin: 0;

}

.services-visual::after {

  content: none;

}

.services-visual__halo {

  display: none;

}

.services-visual__word {

  display: none;

}

.services-visual__item {

  position: absolute;

  z-index: 2;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: stretch;

  opacity: 0;

  visibility: hidden;

  transform: translateX(22px) scale(1.025);

  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.75,.2,1), visibility .5s;

}

.services-visual__item.is-active {

  opacity: 1;

  visibility: visible;

  transform: translateX(0) scale(1);

}

.services-visual__item img {

  display: block;

  width: 100%;

  max-width: none;

  height: 100%;

  object-fit: contain;

  object-position: 50% 50%;

  opacity: 1;

  border-radius: 0;

  -webkit-mask-image: none;

  mask-image: none;

  filter: saturate(.98)
    contrast(1.025)
    drop-shadow(0 34px 42px rgba(0,0,0,.58))
    drop-shadow(0 0 34px rgba(183,99,51,.07));

}

.services-visual__item[data-service="auto"] img {

  object-position: 49% 53%;

}

.services-visual__item[data-service="property"] img {

  object-position: 52% 51%;

}

.services-visual__item[data-service="health"] img {

  object-position: 54% 50%;

}

.services-visual__item[data-service="life"] img {

  object-position: 49% 48%;

}

.services-visual__item[data-service="travel"] img {

  object-position: 52% 49%;

}

.services-visual__item[data-service="other"] img {

  object-position: 50% 51%;

}

.services-detail {

  position: absolute;

  z-index: 7;

  right: 18px;

  bottom: 30px;

  width: 430px;

  min-height: 512px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.16);

  border-radius: 22px;

  color: #f5f3ef;

  background: radial-gradient(circle at 88% 8%, rgba(238,112,39,.105), transparent 31%),
    radial-gradient(circle at 100% 82%, rgba(255,23,56,.055), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018) 52%, rgba(0,0,0,.14)),
    rgba(12,15,18,.82);

  box-shadow: 0 20px 50px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(18px);

}

.services-detail::after {

  content: "";

  position: absolute;

  z-index: 0;

  inset: 0;

  border-radius: inherit;

  box-shadow: inset 0 -36px 60px rgba(0,0,0,.1);

  pointer-events: none;

}

.services-panel {

  position: absolute;

  inset: 0;

  z-index: 1;

  padding: 30px 31px 26px;

  opacity: 0;

  visibility: hidden;

  transform: translateX(18px);

  transition: opacity .28s ease, transform .35s ease, visibility .28s;

}

.services-panel.is-active {

  opacity: 1;

  visibility: visible;

  transform: translateX(0);

}

.services-panel__count {

  display: block;

  margin-bottom: 25px;

  color: rgba(255,255,255,.32);

  font-size: 10px;

  letter-spacing: .18em;

  text-transform: uppercase;

}

.services-panel h3 {

  max-width: 330px;

  margin: 0;

  font-family: "Prata", Georgia, serif;

  font-size: 38px;

  line-height: 1.1;

  font-weight: 300;

}

.services-panel__description {

  max-width: 342px;

  min-height: 61px;

  margin: 15px 0 22px;

  color: rgba(255,255,255,.57);

  font-size: 13px;

  line-height: 1.55;

  font-weight: 300;

}

.services-products {

  border-top: 1px solid rgba(255,255,255,.13);

}

.service-product {

  width: 100%;

  min-height: 52px;

  display: grid;

  grid-template-columns: 1fr 26px;

  gap: 12px;

  align-items: center;

  padding: 0;

  border: 0;

  border-bottom: 1px solid rgba(255,255,255,.13);

  color: rgba(255,255,255,.8);

  background: transparent;

  font: inherit;

  text-align: left;

  cursor: pointer;

  transition: color .22s ease, padding-left .22s ease;

}

.service-product span:first-child {

  font-size: 13px;

  font-weight: 300;

}

.service-product span:last-child {

  width: 24px;

  height: 30px;

  display: grid;

  place-items: center;

  border: 0;

  color: var(--service-red);

  transition: color .2s ease, background .2s ease, transform .2s ease;

}

.service-product:hover {

  color: #fff;

  padding-left: 6px;

}

.service-product:hover span:last-child {

  color: #fff;

  background: transparent;

  transform: translateX(3px);

}

.services-panel__hint {

  display: flex;

  gap: 10px;

  align-items: center;

  margin-top: 17px;

  color: rgba(255,255,255,.37);

  font-size: 10px;

  line-height: 1.4;

}

.services-panel__hint::before {

  content: "";

  width: 5px;

  height: 5px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--service-red);

}

.services-online-cta {
  position: relative;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  margin-top: 13px;
  padding: 8px 13px 8px 15px;
  overflow: hidden;
  border: 1px solid rgba(255,23,56,.42);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(circle at 12% 50%, rgba(255,23,56,.16), transparent 46%),
    linear-gradient(90deg, rgba(255,23,56,.085), rgba(255,255,255,.018) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 26px rgba(0,0,0,.11);
  transition:
    border-color .24s ease,
    background .24s ease,
    box-shadow .28s ease,
    transform .28s var(--motion-ease);
}

.services-online-cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: var(--service-red);
  box-shadow: 0 0 12px rgba(255,23,56,.46);
}

.services-online-cta__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.services-online-cta__eyebrow {
  color: rgba(255,23,56,.92);
  font-size: 8px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.services-online-cta strong {
  display: block;
  min-width: 0;
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
}

.services-online-cta__arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255,23,56,.42);
  border-radius: 50%;
  color: var(--service-red);
  font-size: 13px;
  line-height: 1;
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .24s ease;
}

.services-online-cta:focus-visible {
  outline: 2px solid rgba(255,23,56,.82);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .services-online-cta:hover {
    border-color: rgba(255,23,56,.68);
    background:
      radial-gradient(circle at 12% 50%, rgba(255,23,56,.22), transparent 48%),
      linear-gradient(90deg, rgba(255,23,56,.12), rgba(255,255,255,.026) 72%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 0 22px rgba(255,23,56,.08),
      0 12px 28px rgba(0,0,0,.14);
    transform: translateY(-1px);
  }

  .services-online-cta:hover .services-online-cta__arrow {
    color: #fff;
    border-color: rgba(255,23,56,.72);
    background: rgba(255,23,56,.12);
    transform: translate(2px,-2px);
  }
}

.lead-drawer {

  position: fixed;

  z-index: 200;

  inset: 0;

  display: flex;

  justify-content: flex-end;

  opacity: 0;

  visibility: hidden;

  transition: opacity .28s ease, visibility .28s;

}

.lead-drawer.is-open {

  opacity: 1;

  visibility: visible;

}

.lead-drawer__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(5,6,8,.72);

  backdrop-filter: blur(5px);

}

.lead-drawer__panel {

  position: relative;

  z-index: 1;

  width: min(520px, 100%);

  height: 100%;

  overflow-y: auto;

  padding: 54px 56px;

  color: #f5f3ef;

  background: radial-gradient(circle at 100% 0, rgba(232,23,50,.2), transparent 27%),
    #121316;

  box-shadow: -28px 0 70px rgba(0,0,0,.28);

  transform: translateX(100%);

  transition: transform .42s cubic-bezier(.2,.75,.2,1);

}

.lead-drawer.is-open .lead-drawer__panel {

  transform: translateX(0);

}

.lead-drawer__close {

  position: absolute;

  right: 27px;

  top: 25px;

  width: 42px;

  height: 42px;

  border: 1px solid rgba(255,255,255,.22);

  border-radius: 50%;

  color: #fff;

  background: transparent;

  font-size: 24px;

  font-weight: 200;

  cursor: pointer;

}

.lead-drawer__eyebrow {

  color: var(--service-red);

  font-size: 10px;

  letter-spacing: .16em;

  text-transform: uppercase;

}

.lead-drawer h2 {

  margin: 28px 0 13px;

  font-family: "Prata", Georgia, serif;

  font-size: 39px;

  line-height: 1.12;

  font-weight: 300;

}

.lead-drawer__intro {

  margin: 0 0 34px;

  color: rgba(255,255,255,.55);

  font-size: 13px;

  line-height: 1.55;

}

.lead-form {

  display: grid;

  gap: 20px;

}

.lead-field {

  display: grid;

  gap: 9px;

}

.lead-field span {

  color: rgba(255,255,255,.52);

  font-size: 11px;

}

.lead-field input, .lead-field select, .lead-field textarea {

  width: 100%;

  min-height: 52px;

  padding: 0 16px;

  border: 1px solid rgba(255,255,255,.17);

  border-radius: 13px;

  outline: 0;

  color: #fff;

  background: rgba(255,255,255,.045);

  font: 300 14px "Geologica", Arial, sans-serif;

}

.lead-field textarea {

  min-height: 92px;

  padding-top: 14px;

  resize: vertical;

}

.lead-field input:focus, .lead-field select:focus, .lead-field textarea:focus {

  border-color: rgba(232,23,50,.9);

  box-shadow: 0 0 0 3px rgba(232,23,50,.09);

}

.lead-form__submit {

  min-height: 59px;

  margin-top: 5px;

  border: 1px solid #f04457;

  border-radius: 999px;

  color: #fff;

  background: linear-gradient(180deg, #f42a41, #cf1028);

  box-shadow: 0 12px 30px rgba(207,16,40,.23);

  font: 500 12px "Geologica", Arial, sans-serif;

  letter-spacing: .13em;

  text-transform: uppercase;

  cursor: pointer;

}

.lead-form__legal {

  margin: 0;

  color: rgba(255,255,255,.34);

  font-size: 9px;

  line-height: 1.5;

}

.lead-form__success {

  display: none;

  margin-top: 60px;

}

.lead-form__success strong {

  display: block;

  font-family: "Prata", Georgia, serif;

  font-size: 34px;

  font-weight: 300;

}

.lead-form__success span {

  display: block;

  margin-top: 15px;

  color: rgba(255,255,255,.56);

  font-size: 13px;

  line-height: 1.55;

}

.lead-drawer.is-sent .lead-form, .lead-drawer.is-sent .lead-drawer__intro {

  display: none;

}

.lead-drawer.is-sent .lead-form__success {

  display: block;

}

@media (max-width: 1650px) {

  .services-showcase__inner {

    width: calc(100% - 96px);

  }

}

@media (max-width: 1180px) {

  .services-showcase {

    height: auto;

    min-height: 0;

  }

  .services-showcase__inner {

    width: calc(100% - 56px);

    height: auto;

    padding: 70px 0 108px;

  }

  .services-showcase__title {

    position: relative;

    top: auto;

    margin-top: 32px;

  }

  .services-showcase__main {

    position: relative;

    top: auto;

    bottom: auto;

    display: grid;

    margin-top: 48px;

    grid-template-columns: 1fr;

  }

  .services-tabs {

    position: relative;

    left: auto;

    top: auto;

    width: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    transform: none;

  }

  .services-tab {

    min-height: 66px;

    border-top: 1px solid rgba(255,255,255,.14);

  }

  .services-tab:hover {

    transform: none;

  }

  .services-visual {

    position: relative;

    left: auto;

    right: auto;

    top: auto;

    bottom: auto;

    min-height: 500px;

    margin: 0;

  }

  .services-visual__item {

    justify-content: center;

  }

  .services-visual__item img {

    width: 100%;

    height: 500px;

  }

  .services-detail {

    position: relative;

    right: auto;

    bottom: auto;

    width: calc(100% - 40px);

    min-height: 520px;

    margin: -72px 20px 0;

  }

}

@media (max-width: 700px) {

  .services-showcase__inner {

    width: auto;

    padding: 56px 18px 104px;

  }

  .services-showcase__brand-note {

    display: none;

  }

  .services-showcase__title {

    font-size: clamp(39px, 11vw, 50px);

  }

  .services-showcase__main {

    margin-top: 35px;

  }

  .services-tabs {

    display: flex;

    flex-direction: row;

    overflow-x: auto;

    border: 0;

    scrollbar-width: none;

  }

  .services-tab {

    min-width: 175px;

    min-height: 58px;

    grid-template-columns: 27px 1fr;

    padding: 0 12px;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 999px;

  }

  .services-tab + .services-tab {

    margin-left: 7px;

  }

  .services-tab::before, .services-tab__arrow {

    display: none;

  }

  .services-tab[aria-selected="true"] {

    padding-left: 12px;

    color: #fff;

    border-color: rgba(255,23,56,.66);

    background: rgba(255,23,56,.14);

  }

  .services-visual {

    min-height: 370px;

  }

  .services-visual__item img {

    width: 100%;

    max-width: none;

    height: 360px;

  }

  .services-visual__word {

    font-size: 60px;

  }

  .services-detail {

    width: 100%;

    min-height: 560px;

    margin: -38px 0 0;

  }

  .services-panel {

    padding: 30px 24px;

  }

  .services-panel h3 {

    font-size: 31px;

  }

  .lead-drawer__panel {

    padding: 54px 22px 34px;

  }

}

@media (prefers-reduced-motion: reduce) {

  .services-visual__item, .services-panel, .lead-drawer, .lead-drawer__panel {

    transition: none;

  }

}

.tail-section {

  position: relative;

  min-height: 941px;

  overflow: hidden;

  color: var(--ink);

}

.tail-section__inner {

  position: relative;

  z-index: 2;

  width: 1540px;

  height: 941px;

  margin: 0 auto;

  padding: 70px 0 64px;

}

.tail-kicker {

  display: flex;

  align-items: center;

  gap: 17px;

  color: rgba(255,255,255,.56);

  font-size: 12px;

  font-weight: 400;

  letter-spacing: .17em;

  text-transform: uppercase;

}

.tail-kicker::before {

  content: "";

  width: 46px;

  height: 2px;

  background: var(--red);

  box-shadow: 0 0 12px rgba(255,23,56,.28);

}

.tail-title {

  margin: 29px 0 0;

  font-family: "Prata", Georgia, serif;

  font-size: 58px;

  line-height: 1.08;

  font-weight: 300;

  letter-spacing: -.018em;

}

.tail-title em {

  position: relative;

  color: #fff;

  font-style: normal;

}

.tail-title em::after {

  content: "";

  position: absolute;

  left: -2%;

  right: -4%;

  bottom: -.12em;

  height: 3px;

  border-radius: 999px;

  background: linear-gradient(90deg,rgba(255,23,56,.18),var(--red) 18%,var(--red) 82%,rgba(255,23,56,.15));

  transform: rotate(-1.4deg);

}

.about-section {

  background: radial-gradient(ellipse at 79% 39%,rgba(232,104,34,.14),transparent 31%), radial-gradient(circle at 18% 82%,rgba(255,23,56,.07),transparent 27%), linear-gradient(145deg,#090b0d 0%,#100e0d 51%,#080a0c 100%);

}

.about-section::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: .18;

  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

  background-size: 84px 84px;

  mask-image: linear-gradient(90deg,transparent,#000 20%,#000 83%,transparent);

}

.about-layout {

  display: grid;

  grid-template-columns: 650px 1fr;

  gap: 118px;

  margin-top: 72px;

  align-items: start;

}

.about-copy {

  max-width: 610px;

}

.about-copy__lead {

  margin: 0;

  color: #fff;

  font-family: "Prata",Georgia,serif;

  font-size: 31px;

  line-height: 1.35;

  font-weight: 300;

}

.about-copy__text {

  margin: 27px 0 0;

  max-width: 570px;

  color: rgba(255,255,255,.58);

  font-size: 15px;

  line-height: 1.75;

  font-weight: 300;

}

.about-principles {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}

.about-quote {

  margin-top: 34px;

  padding: 24px 0 24px 27px;

  border-left: 1px solid rgba(255,23,56,.72);

  color: rgba(255,255,255,.67);

  font-size: 14px;

  line-height: 1.65;

}

.contacts-section {

  min-height: 820px;

  background: radial-gradient(ellipse at 50% 40%,rgba(232,104,34,.15),transparent 30%),radial-gradient(circle at 78% 58%,rgba(255,23,56,.10),transparent 28%),linear-gradient(180deg,#0a0b0d 0%,#0c0c0d 55%,#070809 100%);

}

.contacts-section .tail-section__inner {

  height: 820px;

  padding-top: 70px;

  padding-bottom: 52px;

}

.contacts-primary {

  height: 76px;

  border: 2px solid rgba(255,72,79,.66);

  border-radius: 999px;

  color: #fff;

  background: linear-gradient(180deg,#ff2028 0%,#f51520 52%,#cf0b16 100%);

  font: 500 13.5px/1 "Geologica",sans-serif;

  letter-spacing: .13em;

  text-transform: uppercase;

  cursor: pointer;

  box-shadow: 0 3px 0 #8f0b17,0 10px 22px rgba(156,5,14,.28),0 0 40px rgba(255,18,34,.50);

  transition: .22s;

}

.contacts-primary:hover {

  transform: translateY(-1px);

  filter: brightness(1.04);

  box-shadow: 0 4px 0 #8f0b17,0 12px 26px rgba(156,5,14,.32),0 0 58px rgba(255,18,34,.62);

}

.site-footer {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 22px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  color: rgba(255,255,255,.28);

  font-size: 10px;

  letter-spacing: .045em;

}

.site-footer a:hover {

  color: rgba(255,255,255,.7);

}

@media (max-width:1650px) {

  .tail-section__inner {

    width: calc(100% - 96px);

  }

  .about-layout {

    grid-template-columns: 560px 1fr;

    gap: 70px;

  }

}

@media (max-width:1180px) {

  .tail-section {

    min-height: 0;

  }

  .tail-section__inner, .contacts-section .tail-section__inner {

    width: calc(100% - 56px);

    height: auto;

    padding: 70px 0 106px;

  }

  .about-layout {

    grid-template-columns: 1fr;

    gap: 48px;

    margin-top: 54px;

  }

  .about-copy {

    max-width: 780px;

  }

  .site-footer {

    position: static;

    margin-top: 32px;

  }

}

@media (max-width:700px) {

  .tail-section__inner, .contacts-section .tail-section__inner {

    width: auto;

    margin: 0;

    padding: 58px 18px 98px;

  }

  .tail-title {

    font-size: clamp(39px,11vw,50px);

  }

  .tail-kicker {

    font-size: 10px;

    gap: 12px;

  }

  .tail-kicker::before {

    width: 32px;

  }

  .about-layout {

    margin-top: 42px;

  }

  .about-principles {

    grid-template-columns: 1fr;

  }

  .about-copy__lead {

    font-size: 26px;

  }

  .site-footer {

    display: block;

    line-height: 1.7;

  }

  .site-footer span {

    display: block;

  }

}

:root {

  --site-max: 1672px;

  --site-gutter: 80px;

}

.artboard {

  width: var(--site-max);

}

.nav {

  left: 448px;

  gap: 58px;

}

.hero-copy {

  width: 830px;

}

.card-row {

  width: 1180px;

  grid-template-columns: repeat(4, 280px);

  gap: 20px;

}

.insurance-card {

  width: 280px;

  height: 280px;

}

.insurance-card__icon {

  top: 140px;

}

.insurance-card:nth-child(1) .insurance-card__icon, .insurance-card:nth-child(4) .insurance-card__icon {

  top: 141px;

}

.insurance-card h2 {

  top: 184px;

}

.insurance-card p {

  top: 229px;

}

.benefits {

  max-width: 1180px;

}

.workflow__inner, .services-showcase__inner, .tail-section__inner {

  width: min(calc(100% - (var(--site-gutter) * 2)), var(--site-max));

}

.workflow__layout {

  grid-template-columns: 500px minmax(0,1fr);

  gap: 128px;

}

.workflow__intro h2 {

  max-width: 490px;

}

.workflow__lead, .workflow__promise {

  max-width: 455px;

}

.workflow__object-scene {

  margin-left: -706px;

  width: 740px;

}

.services-tabs {

  width: 290px;

}

.services-visual {

  left: 205px;

  right: 72px;

}

.services-detail {

  right: 0;

  width: 446px;

}

.services-panel {

  padding-left: 34px;

  padding-right: 34px;

}

.about-layout {

  grid-template-columns: 620px minmax(0,1fr);

  gap: 92px;

}

.about-copy {

  max-width: 650px;

}

@media (max-width:1672px) {

  body {

    min-width: 0;

  }

  .hero {

    height: min(941px,56.28vw);

  }

  .artboard {

    width: 1672px;

    transform-origin: top center;

    transform: scale(calc(100vw / 1672));

  }

}

@media (max-width:1200px) {

  :root {

    --site-gutter: 36px;

  }

  .workflow__inner, .services-showcase__inner, .tail-section__inner, .contacts-section .tail-section__inner {

    width: calc(100% - 72px);

  }

}

@media (max-width:760px) {

  :root {

    --site-gutter: 18px;

  }

  .workflow__inner, .services-showcase__inner, .tail-section__inner, .contacts-section .tail-section__inner {

    width: auto;

    margin-left: 18px;

    margin-right: 18px;

  }

}

@media (min-width:1400px) and (min-height:1000px) {

  .hero, .workflow, .services-showcase, .tail-section, .contacts-section {

    height: 100svh;

    min-height: 1000px;

  }

  .workflow__inner, .services-showcase__inner, .tail-section__inner, .contacts-section .tail-section__inner {

    height: 100svh;

    min-height: 1000px;

  }

  .artboard {

    height: 100svh;

    min-height: 1000px;

  }

  .hero__portrait-scene img {

    left: 650px;

    width: auto;

    height: 100%;

    min-height: 1000px;

  }

  .topbar {

    top: 10px;

  }

  .hero-copy {

    top: 184px;

  }

  .hero-copy h1 {

    font-size: 74px;

  }

  .hero-subtitle {

    margin-top: 28px;

    font-size: 18px;

    max-width: 660px;

  }

  .actions {

    margin-top: 38px;

  }

  .card-row {

    top: 594px;

  }

  .benefits {

    top: auto;

    bottom: 88px;

  }

  .experience-accent {

    top: 158px;

  }

  .workflow__inner {

    padding-top: 78px;

    padding-bottom: 78px;

  }

  .workflow__head {

    margin-bottom: 52px;

  }

  .workflow__layout {

    grid-template-columns: 520px minmax(0,1fr);

    gap: 142px;

  }

  .workflow__intro h2 {

    font-size: 62px;

    max-width: 515px;

  }

  .workflow__lead {

    margin-top: 35px;

    font-size: 17px;

    line-height: 1.65;

  }

  .workflow__promise {

    margin-top: 64px;

  }

  .workflow__steps {

    gap: 22px;

  }

  .workflow-card {

    min-height: 252px;

    padding: 32px 34px 30px;

  }

  .workflow-card__top {

    margin-bottom: 32px;

  }

  .workflow-card h3 {

    font-size: 20px;

  }

  .workflow-card p {

    font-size: 13.5px;

    max-width: 360px;

  }

  .workflow__object-scene {

    top: 390px;

    width: 790px;

    margin-left: -760px;

    opacity: .42;

  }

  .services-showcase__inner {

    padding-top: 76px;

  }

  .services-showcase__title {

    top: 124px;

    font-size: 60px;

  }

  .services-showcase__main {

    top: 238px;

    bottom: 105px;

  }

  .services-tabs {

    width: 302px;

  }

  .services-tab {

    min-height: 82px;

  }

  .services-visual {

    left: 220px;

    right: 88px;

    top: -92px;

    bottom: -80px;

  }

  .services-detail {

    right: 0;

    bottom: 26px;

    width: 462px;

    min-height: 548px;

  }

  .services-panel {

    padding: 34px 36px 30px;

  }

  .services-panel h3 {

    font-size: 40px;

  }

  .services-panel__description {

    font-size: 13.5px;

    line-height: 1.6;

    margin-top: 18px;

    margin-bottom: 25px;

  }

  .service-product {

    min-height: 56px;

  }

  .tail-section__inner {

    padding-top: 78px;

    padding-bottom: 76px;

  }

  .tail-title {

    font-size: 62px;

    margin-top: 32px;

  }

  .about-layout {

    grid-template-columns: 650px minmax(0,1fr);

    gap: 108px;

    margin-top: 82px;

  }

  .about-copy__lead {

    font-size: 33px;

    max-width: 640px;

  }

  .about-copy__text {

    font-size: 15.5px;

    max-width: 610px;

  }

  .about-principles {

    gap: 20px;

  }

  .about-quote {

    margin-top: 40px;

    font-size: 14.5px;

  }

  .contacts-section .tail-section__inner {

    padding-top: 78px;

    padding-bottom: 58px;

  }

  .contacts-primary {

    height: 80px;

    font-size: 14px;

  }

  .site-footer {

    bottom: 24px;

  }

}

@media (min-width:1673px) {

  .artboard {

    transform: none;

  }

}

:root {

  --site-max: 1672px;

  --site-gutter: 80px;

  --section-top: 48px;

  --section-bottom: 54px;

}

@media (min-width:1400px) {

  .workflow, .services-showcase, .tail-section, .contacts-section {

    height: 100svh;

    min-height: 960px;

  }

  .workflow__inner, .services-showcase__inner, .tail-section__inner, .contacts-section .tail-section__inner {

    width: min(calc(100% - 160px),1672px);

    height: 100svh;

    min-height: 960px;

    margin-inline: auto;

    padding-top: var(--section-top);

    padding-bottom: var(--section-bottom);

  }

  .hero {

    height: 100svh;

    min-height: 960px;

  }

  .artboard {

    width: 1672px;

    height: 100svh;

    min-height: 960px;

  }

  .topbar {

    top: 0;

    height: 92px;

  }

  .brand {

    top: 24px;

  }

  .nav {

    left: 430px;

    top: 35px;

    gap: 46px;

  }

  .call-btn {

    top: 23px;

  }

  .hero-copy {

    top: 188px;

    width: 850px;

  }

  .hero-copy h1 {

    font-size: 76px;

    line-height: .96;

  }

  .hero-subtitle {

    margin-top: 27px;

    width: 650px;

    font-size: 18px;

    line-height: 1.42;

  }

  .actions {

    margin-top: 34px;

  }

  .card-row {

    top: 575px;

    width: 1216px;

    grid-template-columns: repeat(4,289px);

    gap: 20px;

  }

  .insurance-card {

    width: 289px;

    height: 289px;

    border-radius: 20px;

  }

  .insurance-card__icon {

    top: 146px;

  }

  .insurance-card:nth-child(1) .insurance-card__icon, .insurance-card:nth-child(4) .insurance-card__icon {

    top: 147px;

  }

  .insurance-card h2 {

    top: 191px;

  }

  .insurance-card p {

    top: 237px;

  }

  .benefits {

    top: auto;

    bottom: 47px;

  }

  .experience-accent {

    top: 145px;

    right: 0;

  }

  .hero__portrait-scene img {

    left: 660px;

    height: 100%;

    width: auto;

    min-height: 960px;

  }

  .workflow__head {

    margin-bottom: 38px;

  }

  .workflow__eyebrow, .services-showcase__eyebrow, .tail-kicker {

    font-size: 12px;

    gap: 18px;

    letter-spacing: .12em;

  }

  .workflow__eyebrow::before, .services-showcase__eyebrow::before, .tail-kicker::before {

    width: 44px;

    height: 1px;

    box-shadow: none;

  }

  .workflow__layout {

    grid-template-columns: 545px minmax(0,1fr);

    gap: 118px;

  }

  .workflow__intro h2 {

    font-size: 68px;

    line-height: .98;

    max-width: 535px;

  }

  .workflow__lead {

    margin-top: 25px;

    max-width: 500px;

    font-size: 17px;

    line-height: 1.5;

  }

  .workflow__promise {

    margin-top: 42px;

    max-width: 500px;

    padding: 20px 0 20px 27px;

  }

  .workflow__action {

    margin-top: 28px;

  }

  .workflow__steps {

    gap: 18px;

  }

  .workflow-card {

    min-height: 238px;

    padding: 28px 30px 26px;

    border-radius: 20px;

  }

  .workflow-card__top {

    margin-bottom: 26px;

  }

  .workflow-card h3 {

    font-size: 20px;

  }

  .workflow-card p {

    font-size: 13px;

    line-height: 1.5;

  }

  .workflow-card:nth-child(even) {

    transform: translateY(42px);

  }

  .workflow-card:nth-child(even):hover {

    transform: translateY(38px);

  }

  .workflow__object-scene {

    top: 350px;

    width: 760px;

    margin-left: -745px;

    opacity: .36;

  }

  .services-showcase__inner {

    padding-top: 48px;

  }

  .services-showcase__title {

    top: 96px;

    font-size: 68px;

    line-height: .98;

  }

  .services-showcase__main {

    top: 220px;

    bottom: 72px;

  }

  .services-tabs {

    width: 300px;

  }

  .services-tab {

    min-height: 74px;

  }

  .services-visual {

    left: 205px;

    right: 90px;

    top: -78px;

    bottom: -64px;

  }

  .services-detail {

    right: 0;

    bottom: 22px;

    width: 460px;

    min-height: 522px;

    border-radius: 18px;

  }

  .services-panel {

    padding: 30px 34px 28px;

  }

  .services-panel h3 {

    font-size: 39px;

  }

  .service-product {

    min-height: 53px;

  }

  .tail-title {

    margin-top: 24px;

    font-size: 68px;

    line-height: .98;

  }

  .about-layout {

    grid-template-columns: 610px minmax(0,1fr);

    gap: 92px;

    margin-top: 52px;

  }

  .about-copy__lead {

    font-size: 31px;

    line-height: 1.3;

  }

  .about-copy__text {

    margin-top: 20px;

    font-size: 15px;

    line-height: 1.6;

  }

  .about-quote {

    margin-top: 28px;

    padding-top: 20px;

    padding-bottom: 20px;

  }

  .about-principles {

    gap: 16px;

  }

  .contacts-section .tail-section__inner {

    padding-top: 48px;

    padding-bottom: 40px;

  }

  .contacts-primary {

    height: 68px;

  }

  .site-footer {

    bottom: 18px;

  }

}

@media (max-width:1200px) {

  .workflow__inner, .services-showcase__inner, .tail-section__inner, .contacts-section .tail-section__inner {

    width: calc(100% - 72px);

  }

}

@media (max-width:760px) {

  .workflow__inner, .services-showcase__inner, .tail-section__inner, .contacts-section .tail-section__inner {

    width: auto;

    margin-inline: 18px;

  }

}

.hero {

  height: 941px;

  min-height: 0;

}

.artboard {

  height: 941px;

  min-height: 0;

}

.hero__portrait-scene img {

  height: 941px;

  min-height: 0;

}

@media (min-width:1400px) {

  .hero {

    height: 941px;

    min-height: 0;

  }

  .artboard {

    height: 941px;

    min-height: 0;

  }

  .hero__portrait-scene img {

    height: 941px;

    min-height: 0;

  }

  .topbar {

    top: 0;

  }

  .hero-copy {

    top: 158px;

  }

  .hero-copy h1 {

    font-size: 70px;

    line-height: .98;

  }

  .hero-subtitle {

    margin-top: 24px;

    font-size: 17px;

    line-height: 1.45;

  }

  .actions {

    margin-top: 34px;

  }

  .card-row {

    top: 527px;

  }

  .benefits {

    top: 823px;

    bottom: auto;

  }

  .experience-accent {

    top: 137px;

  }

}

@media (max-width:1500px) {

  .hero {

    height: min(941px,56.28vw);

  }

  .artboard {

    height: 941px;

  }

  .hero__portrait-scene img {

    height: 941px;

  }

}

@media (min-width: 1181px) {

  .workflow__inner {

    padding-top: 118px !important;

    padding-bottom: 56px !important;

  }

  .workflow__head {

    margin-bottom: 34px !important;

  }

  .workflow__layout {

    min-height: 690px;

    align-items: stretch !important;

  }

  .workflow__intro {

    min-height: 690px;

    display: flex;

    flex-direction: column;

  }

  .workflow__lead {

    margin-top: 31px !important;

  }

  .workflow__promise {

    margin-top: 54px !important;

  }

  .workflow__action {

    margin-top: auto !important;

    margin-bottom: 14px;

  }

  .workflow__steps {

    align-self: start;

    margin-top: 4px;

  }

  .workflow__object-scene {

    top: auto !important;

    bottom: 6px !important;

    width: 760px !important;

    margin-left: -690px !important;

    opacity: .58 !important;

    filter: sepia(.12) saturate(1.08) contrast(1.05) drop-shadow(0 0 44px rgba(221,102,35,.12)) !important;

  }

  .workflow__route {

    inset: 28px -24px -86px !important;

    width: calc(100% + 48px) !important;

    height: calc(100% + 114px) !important;

  }

}

@media (min-width: 1500px) {

  .workflow__layout {

    grid-template-columns: 500px 1fr !important;

    gap: 124px !important;

  }

}

@media (min-width: 1400px) {

  .card-row {

    width: 1044px;

    grid-template-columns: repeat(4,246px);

    gap: 20px;

  }

  .insurance-card {

    width: 289px;

    height: 289px;

    transform: scale(.85);

    transform-origin: top left;

    justify-self: start;

  }

}

.about-section {

  isolation: isolate;

  background: radial-gradient(ellipse at 77% 31%,rgba(232,104,34,.18),transparent 27%),
    radial-gradient(circle at 93% 74%,rgba(255,23,56,.075),transparent 24%),
    radial-gradient(circle at 17% 77%,rgba(255,23,56,.09),transparent 25%),
    linear-gradient(145deg,#090b0d 0%,#110e0d 48%,#080a0c 100%);

}

.about-section::before {

  opacity: .23;

  background-image: linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);

  background-size: 84px 84px;

  mask-image: linear-gradient(90deg,transparent,#000 13%,#000 90%,transparent);

}

.about-section::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background: linear-gradient(90deg,rgba(8,10,12,.12),transparent 38%,transparent 76%,rgba(8,10,12,.18)),
    linear-gradient(180deg,transparent 68%,rgba(4,5,7,.30));

}

.about-section .tail-section__inner {

  z-index: 2;

}

.about-scene {

  position: absolute;

  z-index: -1;

  left: -84px;

  bottom: -40px;

  width: 690px;

  height: 540px;

  opacity: .30;

  pointer-events: none;

  filter: drop-shadow(0 0 34px rgba(225,102,35,.08));

  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 14%,#000 89%,transparent 100%);

  mask-image: linear-gradient(90deg,transparent 0%,#000 14%,#000 89%,transparent 100%);

}

.about-scene svg {

  display: block;

  width: 100%;

  height: 100%;

  overflow: visible;

}

.about-scene .accent-line {

  stroke: rgba(255,23,56,.76);

  stroke-width: 2;

  filter: drop-shadow(0 0 6px rgba(255,23,56,.28));

}

.about-layout {

  position: relative;

  z-index: 2;

  grid-template-columns: 600px minmax(0,1fr) !important;

  gap: 108px !important;

  align-items: start;

}

.about-copy {

  position: relative;

  max-width: 600px !important;

}

.about-copy__lead {

  position: relative;

  z-index: 2;

  max-width: 590px;

}

.about-copy__text {

  position: relative;

  z-index: 2;

  max-width: 560px;

}

.about-quote {

  position: relative;

  z-index: 2;

  max-width: 555px;

  min-height: 132px;

  margin-top: 32px !important;

  padding: 39px 34px 27px 36px !important;

  border: 1px solid rgba(255,255,255,.13) !important;

  border-left: 2px solid rgba(255,23,56,.78) !important;

  border-radius: 0 18px 18px 0;

  background: radial-gradient(circle at 92% 10%,rgba(238,112,39,.08),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 58%,rgba(0,0,0,.12)),
    rgba(12,15,18,.60);

  box-shadow: 0 18px 44px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);

  backdrop-filter: blur(8px);

}

.about-quote::before {

  content: "ПРИНЦИП";

  position: absolute;

  left: 36px;

  top: 17px;

  color: rgba(255,255,255,.28);

  font-size: 9px;

  line-height: 1;

  letter-spacing: .18em;

}

.about-quote::after {

  content: "“";

  position: absolute;

  right: 22px;

  top: 4px;

  color: rgba(255,23,56,.14);

  font-family: "Prata",Georgia,serif;

  font-size: 78px;

  line-height: 1;

}

.about-principles {

  position: relative;

  z-index: 3;

  gap: 18px !important;

  padding: 6px 0 24px;

}

.about-principles::before {

  content: "";

  position: absolute;

  z-index: -1;

  left: 50%;

  top: -22px;

  bottom: -16px;

  width: 1px;

  background: linear-gradient(180deg,transparent,rgba(255,255,255,.10) 14%,rgba(255,255,255,.10) 86%,transparent);

}

.about-principles::after {

  content: "";

  position: absolute;

  z-index: -1;

  left: -26px;

  right: -24px;

  top: 50%;

  height: 1px;

  background: linear-gradient(90deg,transparent,rgba(255,255,255,.08) 12%,rgba(255,255,255,.08) 88%,transparent);

}

@media (max-width:1400px) {

  .about-layout {

    grid-template-columns: 540px minmax(0,1fr) !important;

    gap: 68px !important;

  }

  .about-scene {

    left: -120px;

    width: 620px;

    opacity: .23;

  }

}

@media (max-width:1180px) {

  .about-layout {

    grid-template-columns: 1fr !important;

    gap: 48px !important;

  }

  .about-copy {

    max-width: 760px !important;

  }

  .about-scene {

    right: -120px;

    left: auto;

    bottom: 35%;

    opacity: .13;

  }

}

@media (max-width:700px) {

  .about-scene {

    display: none;

  }

  .about-principles {

    padding-bottom: 0;

  }

  .about-principles::before, .about-principles::after {

    display: none;

  }

  .about-quote {

    padding: 38px 24px 24px 25px !important;

  }

  .about-quote::before {

    left: 25px;

  }

}

.contacts-functional {

  position: relative;

  min-height: 941px;

  height: 941px;

  overflow: hidden;

  isolation: isolate;

  background: radial-gradient(ellipse at 73% 42%,rgba(232,104,34,.14),transparent 30%),
    radial-gradient(circle at 92% 65%,rgba(255,23,56,.08),transparent 24%),
    linear-gradient(135deg,#080a0c 0%,#100e0d 50%,#07090b 100%);

}

.contacts-functional::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .18;

  background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);

  background-size: 84px 84px;

  mask-image: linear-gradient(90deg,transparent,#000 24%,#000 88%,transparent);

}

.contacts-functional__inner {

  position: relative;

  z-index: 2;

  width: min(calc(100% - 160px),1672px) !important;

  height: 941px !important;

  min-height: 941px;

  margin-inline: auto;

  padding: 48px 0 42px !important;

}

.contacts-functional__title {

  margin-top: 26px;

  font-size: 58px;

  line-height: 1.06;

  max-width: 800px;

}

.contacts-functional__stage {

  position: absolute;

  left: 0;

  right: 0;

  top: 198px;

  bottom: 58px;

  display: grid;

  grid-template-columns: minmax(0,760px) minmax(0,1fr);

  gap: 96px;

  align-items: stretch;

}

.contacts-functional__content {

  min-width: 0;

  display: flex;

  flex-direction: column;

  padding-top: 9px;

}

.contacts-functional__lead {

  max-width: 650px;

  margin: 22px 0 0;

  color: rgba(255,255,255,.58);

  font-size: 15px;

  line-height: 1.62;

  font-weight: 300;

}

.contacts-functional__main-contact {

  display: grid;

  grid-template-columns: 48px minmax(0,1fr) auto;

  align-items: center;

  gap: 16px;

  min-height: 88px;

  margin-top: 27px;

  padding: 0 23px;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 20px;

  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),rgba(12,15,18,.66);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);

}

.contacts-functional__contact-icon {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(255,23,56,.58);

  border-radius: 50%;

  color: var(--red);

}

.contacts-functional__contact-icon svg {

  width: 20px;

  height: 20px;

  fill: currentColor;

}

.contacts-functional__contact-copy span {

  display: block;

  margin-bottom: 4px;

  color: rgba(255,255,255,.36);

  font-size: 9px;

  letter-spacing: .15em;

  text-transform: uppercase;

}

.contacts-functional__contact-copy a {

  display: inline-block;

  text-decoration: none;

}

.contacts-functional__contact-copy strong {

  color: #fff;

  font-family: "Prata",Georgia,serif;

  font-size: 25px;

  line-height: 1;

  font-weight: 300;

}

.contacts-functional__contact-hint {

  color: rgba(255,255,255,.40);

  font-size: 11px;

}

.contacts-functional__messengers {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-top: 12px;

}

.contacts-functional__channel {

  min-height: 88px;

  display: grid;

  grid-template-columns: 44px 1fr 20px;

  align-items: center;

  gap: 13px;

  padding: 0 19px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.13);

  border-radius: 18px;

  color: #fff;

  text-decoration: none;

  background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008)),rgba(12,15,18,.58);

  transition: border-color .22s ease,background .22s ease,transform .22s ease;

}

.contacts-functional__channel:hover {

  transform: translateY(-2px);

  border-color: rgba(255,255,255,.24);

  background: linear-gradient(145deg,rgba(255,255,255,.064),rgba(255,255,255,.012)),rgba(12,15,18,.74);

}

.contacts-functional__channel-icon {

  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(255,23,56,.50);

  border-radius: 50%;

  color: var(--red);

}

.contacts-functional__channel-icon svg {

  width: 20px;

  height: 20px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.contacts-functional__channel-icon--max {

  font-size: 9px;

  font-weight: 600;

  letter-spacing: -.03em;

}

.contacts-functional__channel small {

  display: block;

  color: rgba(255,255,255,.34);

  font-size: 9px;

  letter-spacing: .12em;

  text-transform: uppercase;

}

.contacts-functional__channel strong {

  display: inline-block;

  margin-top: 4px;

  font-size: 15px;

  font-weight: 500;

}

.contacts-functional__channel em {

  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: rgba(255,255,255,.40);

  font-size: 10px;

  font-style: normal;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.contacts-functional__channel-arrow {

  color: var(--red);

  font-size: 16px;

}

.contacts-functional__channel.is-placeholder {

  cursor: default;

  opacity: .68;

}

.contacts-functional__channel.is-placeholder:hover {

  transform: none;

  border-color: rgba(255,255,255,.13);

}

.contacts-functional__details {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-top: 12px;

}

.contacts-functional__detail {

  min-height: 69px;

  padding: 15px 18px 14px;

  border-top: 1px solid rgba(255,255,255,.11);

}

.contacts-functional__detail span {

  display: block;

  margin-bottom: 8px;

  color: rgba(255,255,255,.34);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}

.contacts-functional__detail a {

  text-decoration: none;

}

.contacts-functional__detail strong {

  display: block;

  overflow: hidden;

  color: rgba(255,255,255,.76);

  font-size: 13px;

  font-weight: 400;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.contacts-functional__detail--address strong {

  white-space: normal;

  line-height: 1.35;

}

.contacts-functional__actions {

  display: grid;

  grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);

  gap: 12px;

  margin-top: 22px;

}

.contacts-functional__actions .contacts-primary {

  height: 64px;

  width: 100%;

  font-size: 12.2px;

}

.contacts-functional__save {

  height: 64px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 0 20px;

  border: 1px solid rgba(255,255,255,.18);

  border-radius: 999px;

  color: rgba(255,255,255,.86);

  background: rgba(255,255,255,.025);

  font: 400 12px/1 "Geologica",sans-serif;

  letter-spacing: .02em;

  cursor: pointer;

  transition: border-color .22s ease,background .22s ease,transform .22s ease;

}

.contacts-functional__save svg {

  width: 18px;

  height: 18px;

  fill: none;

  stroke: var(--red);

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.contacts-functional__save:hover {

  transform: translateY(-1px);

  border-color: rgba(255,23,56,.55);

  background: rgba(255,23,56,.045);

}

.contacts-functional__vcard-note {

  margin: 10px 4px 0;

  color: rgba(255,255,255,.28);

  font-size: 9.5px;

  line-height: 1.45;

}
@media (max-width:1180px) {

  .contacts-functional {

    height: auto;

    min-height: 0;

  }

  .contacts-functional__inner {

    width: calc(100% - 56px) !important;

    height: auto !important;

    min-height: 0;

    padding: 58px 0 42px !important;

  }

  .contacts-functional__stage {

    position: relative;

    top: auto;

    bottom: auto;

    margin-top: 42px;

    grid-template-columns: 1fr;

    gap: 34px;

  }
}

@media (max-width:700px) {

  .contacts-functional__inner {

    width: auto !important;

    margin: 0 18px;

    padding: 52px 0 34px !important;

  }

  .contacts-functional__title {

    font-size: clamp(39px,11vw,50px);

  }

  .contacts-functional__lead {

    font-size: 14px;

  }

  .contacts-functional__main-contact {

    grid-template-columns: 42px 1fr;

    padding: 0 16px;

  }

  .contacts-functional__contact-hint {

    display: none;

  }

  .contacts-functional__contact-copy strong {

    font-size: 21px;

  }

  .contacts-functional__messengers, .contacts-functional__details, .contacts-functional__actions {

    grid-template-columns: 1fr;

  }

}

.about-section::after {

  background: linear-gradient(90deg,rgba(8,10,12,.10),transparent 38%,transparent 78%,rgba(8,10,12,.14)) !important;

}

.about-section {

  border-bottom: 1px solid rgba(255,255,255,.055);

}

.contacts-functional {

  background: #090b0d !important;

}

.contacts-functional::before {

  opacity: .14 !important;

  background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) !important;

  background-size: 84px 84px !important;

  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 18%,#000 86%,transparent 100%);

  mask-image: linear-gradient(90deg,transparent 0%,#000 18%,#000 86%,transparent 100%) !important;

}

.contacts-functional::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background: radial-gradient(circle at 81% 45%,rgba(225,102,35,.085),transparent 25%),
    radial-gradient(circle at 13% 82%,rgba(255,23,56,.035),transparent 22%);

}

.contacts-functional__inner {

  z-index: 2 !important;

}

.contacts-functional__title {

  max-width: 760px;

  font-size: 56px;

}

.contacts-functional__stage {

  top: 205px;

  bottom: 62px;

  grid-template-columns: minmax(0,720px) minmax(0,1fr);

  gap: 88px;

  align-items: stretch;

}

.contacts-functional__content {

  padding-top: 4px;

  justify-content: flex-start;

}

.contacts-functional__lead {

  max-width: 620px;

  margin: 0;

  font-size: 15px;

  line-height: 1.62;

}

.contacts-functional__main-contact {

  min-height: 104px;

  margin-top: 30px;

  padding: 0 0 0 18px;

  grid-template-columns: 48px minmax(0,1fr) auto;

  border: 0;

  border-top: 1px solid rgba(255,255,255,.17);

  border-bottom: 1px solid rgba(255,255,255,.17);

  border-radius: 0;

  background: transparent;

  box-shadow: none;

}

.contacts-functional__contact-icon {

  width: 40px;

  height: 40px;

  background: rgba(255,23,56,.025);

}

.contacts-functional__contact-copy span {

  margin-bottom: 7px;

}

.contacts-functional__contact-copy strong {

  font-size: 28px;

}

.contacts-functional__contact-hint {

  padding-right: 4px;

  font-size: 10px;

  letter-spacing: .10em;

  text-transform: uppercase;

}

.contacts-functional__messengers {

  gap: 0;

  margin-top: 0;

  border-bottom: 1px solid rgba(255,255,255,.17);

}

.contacts-functional__channel {

  min-height: 92px;

  padding: 0 18px;

  border: 0;

  border-radius: 0;

  background: transparent;

}

.contacts-functional__channel + .contacts-functional__channel {

  border-left: 1px solid rgba(255,255,255,.17);

}

.contacts-functional__channel:hover {

  transform: none;

  border-color: transparent;

  background: rgba(255,255,255,.025);

}

.contacts-functional__channel-icon {

  width: 38px;

  height: 38px;

}

.contacts-functional__channel small {

  font-size: 8.5px;

}

.contacts-functional__channel strong {

  font-size: 14px;

}

.contacts-functional__channel em {

  font-size: 9.5px;

}

.contacts-functional__details {

  gap: 0;

  margin-top: 0;

  border-bottom: 1px solid rgba(255,255,255,.17);

}

.contacts-functional__detail {

  min-height: 82px;

  padding: 17px 18px 15px;

  border-top: 0;

}

.contacts-functional__detail + .contacts-functional__detail {

  border-left: 1px solid rgba(255,255,255,.17);

}

.contacts-functional__detail strong {

  font-size: 14px;

  font-weight: 500;

  line-height: 1.42;

}

.contacts-functional__actions {

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 25px;

}

.contacts-functional__actions .contacts-primary, .contacts-functional__save {

  height: 66px;

}

.contacts-functional__vcard-note {

  margin-top: 11px;

  max-width: 610px;

}

@media (max-width:1180px) {

  .contacts-functional__stage {

    top: auto;

    bottom: auto;

    grid-template-columns: 1fr;

    margin-top: 40px;

    gap: 32px;

  }

  .contacts-functional__lead {

    margin-top: 0;

  }

}

@media (max-width:700px) {

  .contacts-functional__main-contact {

    padding-left: 8px;

  }

  .contacts-functional__messengers, .contacts-functional__details, .contacts-functional__actions {

    grid-template-columns: 1fr;

  }

  .contacts-functional__channel + .contacts-functional__channel, .contacts-functional__detail + .contacts-functional__detail {

    border-left: 0;

    border-top: 1px solid rgba(255,255,255,.14);

  }

}

.contacts-functional .tail-kicker {

  color: rgba(255,255,255,.68) !important;

}

.contacts-functional__lead {

  color: rgba(255,255,255,.74) !important;

  font-weight: 300;

}

.contacts-functional__channel.is-placeholder, .contacts-functional__main-contact.is-placeholder, .contacts-functional__detail.is-placeholder {

  opacity: 1 !important;

}

.contacts-functional__contact-copy span, .contacts-functional__channel small, .contacts-functional__detail span {

  color: rgba(255,255,255,.54) !important;

}

.contacts-functional__contact-copy strong {

  color: rgba(255,255,255,.96) !important;

}

.contacts-functional__contact-hint {

  color: rgba(255,255,255,.58) !important;

}

.contacts-functional__channel {

  color: rgba(255,255,255,.96) !important;

}

.contacts-functional__channel strong {

  color: rgba(255,255,255,.95) !important;

}

.contacts-functional__channel em {

  color: rgba(255,255,255,.66) !important;

}

.contacts-functional__detail strong {

  color: rgba(255,255,255,.88) !important;

}

.contacts-functional__save {

  color: rgba(255,255,255,.94) !important;

}

.contacts-functional__vcard-note {

  color: rgba(255,255,255,.53) !important;

}
.contacts-functional__main-contact.is-placeholder .contacts-functional__contact-copy strong, .contacts-functional__channel.is-placeholder em, .contacts-functional__detail.is-placeholder strong {

  color: rgba(255,255,255,.68) !important;

}

.contacts-functional__channel.is-placeholder .contacts-functional__channel-arrow {

  color: rgba(255,23,56,.62) !important;

}

.contacts-functional__main-contact, .contacts-functional__messengers, .contacts-functional__details {

  border-color: rgba(255,255,255,.20) !important;

}

.contacts-functional__channel + .contacts-functional__channel, .contacts-functional__detail + .contacts-functional__detail {

  border-color: rgba(255,255,255,.20) !important;

}

@media (min-width: 1181px) {

  .services-detail {

    top: 50%;

    bottom: auto;

    transform: translateY(-50%);

  }

}

.hero .action--primary {

  height: 68.85px;

  min-width: 320.4px;

  padding: 0 36.9px;

  border-width: 1.8px;

  font-size: 12.78px;

  box-shadow: 0 2.7px 0 #9f1020, 0 9px 19.8px rgba(156,5,14,.26), 0 0 25.2px rgba(255,18,34,.88), 0 0 57.6px rgba(255,18,34,.66), 0 0 99px rgba(255,18,34,.38), inset 0 .9px 0 rgba(255,255,255,.10), inset 0 -7.2px 12.6px rgba(126,8,22,.24);

}

.hero .action--primary:hover {

  box-shadow: 0 3.6px 0 #a91324, 0 10.8px 23.4px rgba(156,5,14,.30), 0 0 30.6px rgba(255,18,34,.96), 0 0 68.4px rgba(255,18,34,.76), 0 0 115.2px rgba(255,18,34,.44), inset 0 .9px 0 rgba(255,255,255,.12), inset 0 -7.2px 12.6px rgba(126,8,22,.24);

}

.hero .action--primary:active {

  box-shadow: 0 .9px 0 #86101d, 0 4.5px 10.8px rgba(156,5,14,.20), 0 0 16.2px rgba(255,18,34,.32), 0 0 34.2px rgba(255,18,34,.17), inset 0 .9px 0 rgba(255,255,255,.08), inset 0 -5.4px 10.8px rgba(112,7,19,.30);

}

:root {

  --site-max: 1672px;

  --site-gutter: 80px;

  --ui-line: rgba(255,255,255,.18);

}

button, input, select, textarea {

  font-family: inherit;

}

button, a, input, select, textarea {

  -webkit-tap-highlight-color: transparent;

}

a:focus-visible, button:focus-visible {

  outline: 2px solid var(--red);

  outline-offset: 5px;

}

.workflow__intro, .workflow__steps, .about-copy, .about-principles {

  min-width: 0;

}

.lead-drawer {

  --service-red: var(--red);

}

.lead-drawer__panel {

  overscroll-behavior: contain;

}

.contacts-section.contacts-functional {

  height: auto;

  min-height: 941px;

  overflow: hidden;

  isolation: isolate;

}

.contacts-section .contacts-functional__inner {

  width: min(calc(100% - 160px),var(--site-max)) !important;

  height: auto !important;

  min-height: 941px;

  padding: 48px 0 32px !important;

  display: flex;

  flex-direction: column;

  margin-inline: auto;

}

.contacts-functional__title {

  position: relative;

  margin: 26px 0 0;

  line-height: 1.12;

}

.contacts-functional__stage {

  position: relative;

  inset: auto;

  display: grid;

  grid-template-columns: minmax(0,720px) minmax(0,1fr);

  gap: clamp(40px,5vw,96px);

  align-items: start;

  margin: 48px 0 44px;

}

.contacts-functional__content {

  min-width: 0;

  padding: 0;

}

.contacts-functional__lead {

  margin: 0;

}

.contacts-functional__main-contact {

  margin-top: 26px;

}

.contacts-functional__messengers, .contacts-functional__details {

  grid-template-columns: repeat(2,minmax(0,1fr));

}

.contacts-functional__channel {

  grid-template-columns: 40px minmax(0,1fr) 18px;

  gap: 12px;

}

.contacts-functional__channel > span, .contacts-functional__contact-copy, .contacts-functional__detail {

  min-width: 0;

}

.contacts-functional__contact-copy strong {

  line-height: 1.2;

  overflow-wrap: anywhere;

}

.contacts-functional__detail strong {

  white-space: normal;

  overflow-wrap: anywhere;

}

.contacts-functional__actions {

  grid-template-columns: repeat(2,minmax(0,1fr));

}

.contacts-functional__actions button {

  height: auto;

  min-height: 66px;

  padding: 18px 20px;

  line-height: 1.45;

}

.contacts-functional__vcard-note {

  max-width: 610px;

  font-size: 11px;

  line-height: 1.5;

}
.contacts-functional::before, .contacts-functional::after {

  pointer-events: none;

}

@media (min-width:1400px) {

  .contacts-section.contacts-functional, .contacts-section .contacts-functional__inner {

    min-height: max(960px,100svh);

  }

}

@media (max-width:1180px) {

  .contacts-section.contacts-functional {

    min-height: 0;

  }

  .contacts-section .contacts-functional__inner {

    width: calc(100% - 56px) !important;

    min-height: 0;

    padding: 58px 0 32px !important;

  }

  .contacts-functional__stage {

    grid-template-columns: 1fr;

    margin-top: 40px;

    gap: 36px;

  }

}

@media (max-width:700px) {

  .contacts-section .contacts-functional__inner {

    width: calc(100% - 36px) !important;

    margin-inline: auto;

    padding: 52px 0 28px !important;

  }

  .contacts-functional__title {

    font-size: clamp(32px,8.8vw,50px);

  }

  .contacts-functional__main-contact {

    grid-template-columns: 40px minmax(0,1fr);

    padding-left: 8px;

  }

  .contacts-functional__contact-hint {

    display: none;

  }

  .contacts-functional__contact-copy strong {

    font-size: 23px;

  }

  .contacts-functional__messengers, .contacts-functional__details, .contacts-functional__actions {

    grid-template-columns: 1fr;

  }

  .contacts-functional__channel + .contacts-functional__channel, .contacts-functional__detail + .contacts-functional__detail {

    border-left: 0;

    border-top: 1px solid var(--ui-line);

  }
}

@media (prefers-reduced-motion:reduce) {

  *, *::before, *::after {

    scroll-behavior: auto !important;

    animation: none !important;

    transition: none !important;

  }

}

:root {

  --canvas: #080a0c;

}

html, body, .hero, .workflow, .services-showcase, .about-section, .contacts-section.contacts-functional {

  background: var(--canvas) !important;

}

.hero, .workflow, .services-showcase, .about-section, .contacts-functional {

  border-block: 0 !important;

  box-shadow: none;

  isolation: isolate;

}

.workflow::after, .services-showcase::before, .services-showcase::after, .about-section::after, .contacts-functional::after {

  content: none !important;

}

.hero::after {

  content: "";

  position: absolute;

  z-index: -1;

  inset: auto 0 0;

  height: 210px;

  pointer-events: none;

  background: linear-gradient(180deg,transparent,var(--canvas) 94%);

}

.section-atmosphere {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background: radial-gradient(ellipse at 30% 66%,rgba(242,142,45,.27),transparent 49%),
    radial-gradient(ellipse at 78% 37%,rgba(211,98,29,.22),transparent 43%),
    radial-gradient(ellipse at 17% 43%,rgba(175,41,30,.12),transparent 33%);

  -webkit-mask-image: linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);

  mask-image: linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);

}

.about-section > .section-atmosphere {

  background: radial-gradient(ellipse at 26% 68%,rgba(244,151,51,.29),transparent 48%),
    radial-gradient(ellipse at 76% 40%,rgba(225,113,36,.21),transparent 43%),
    radial-gradient(ellipse at 85% 70%,rgba(182,40,28,.12),transparent 35%);

}

.services-showcase > .section-atmosphere {

  opacity: .65;

}

.contacts-functional > .section-atmosphere {

  opacity: .4;

}

.workflow::before, .about-section::before, .contacts-functional::before {

  pointer-events: none;

  -webkit-mask-image: radial-gradient(ellipse at center,#000 12%,transparent 69%) !important;

  mask-image: radial-gradient(ellipse at center,#000 12%,transparent 69%) !important;

}

.workflow__object-scene, .about-scene {

  -webkit-mask-image: radial-gradient(ellipse at center,#000 24%,rgba(0,0,0,.9) 45%,transparent 72%);

  mask-image: radial-gradient(ellipse at center,#000 24%,rgba(0,0,0,.9) 45%,transparent 72%);

  mix-blend-mode: screen;

}

.workflow__object-scene {

  bottom: 70px !important;

}

.about-scene {

  display: block;

  position: absolute;

  z-index: 0;

  left: max(20px,calc(50% - 860px));

  bottom: 55px;

  width: 760px;

  height: auto;

  opacity: .43;

  transform: rotate(-2.5deg);

  pointer-events: none;

  filter: saturate(.92) drop-shadow(0 0 34px rgba(224,124,38,.12));

}

.about-scene img {

  display: block;

  width: 100%;

  height: auto;

}

.about-principles {

  gap: 22px !important;

  padding: 0 0 49px;

}

.about-principles::before, .about-principles::after {

  content: none;

}

.about-principles .workflow-card__number::before {

  content: "принцип";

}

.workflow-card {

  transform: translateY(0);

}

.workflow-card:nth-child(even) {

  transform: translateY(0);

}

.workflow-card:nth-of-type(even) {

  transform: translateY(49px);

}

.workflow-card:hover, .workflow-card:nth-child(even):hover {

  transform: translateY(-4px);

}

.workflow-card:nth-of-type(even):hover {

  transform: translateY(45px);

}

.workflow-card .workflow-card__graphic {

  transform: rotate(-6deg);

}

.workflow-card:nth-of-type(even) .workflow-card__graphic {

  transform: rotate(6deg);

}

.workflow-card:hover .workflow-card__graphic {

  transform: rotate(-2deg) scale(1.035);

}

.workflow-card:nth-of-type(even):hover .workflow-card__graphic {

  transform: rotate(2deg) scale(1.035);

}

.about-quote {

  padding: 0 0 0 27px !important;

  min-height: 0;

  border: 0 !important;

  border-left: 1px solid rgba(255,23,56,.72) !important;

  border-radius: 0;

  background: none;

  box-shadow: none;

  backdrop-filter: none;

}

.about-quote::before, .about-quote::after {

  content: none;

}

@media (max-width:1180px) {

  .about-scene {

    left: auto;

    right: -110px;

    bottom: 90px;

    width: 660px;

    opacity: .25;

  }

  .workflow__object-scene {

    bottom: 100px !important;

  }

}

@media (max-width:700px) {

  .workflow-card, .workflow-card:nth-child(even), .workflow-card:nth-of-type(even), .workflow-card:hover, .workflow-card:nth-child(even):hover, .workflow-card:nth-of-type(even):hover {

    transform: none;

  }

  .about-principles {

    padding-bottom: 0;

  }

  .about-scene {

    width: 510px;

    right: -150px;

    bottom: 30px;

    opacity: .19;

  }

  .workflow__object-scene {

    bottom: 30% !important;

  }

  .hero::after {

    height: 120px;

  }

}

.workflow-card__icon svg {

  stroke-width: 1.4;

}

.workflow-card__graphic .semantic-symbol {

  stroke-width: .26136;

}

.contacts-functional > .section-atmosphere {

  opacity: 1;

  background: radial-gradient(ellipse at 76% 43%,rgba(241,156,66,.32),transparent 43%),
    radial-gradient(ellipse at 56% 69%,rgba(213,100,35,.20),transparent 48%),
    radial-gradient(ellipse at 91% 65%,rgba(172,48,29,.15),transparent 35%);

}

.contacts-functional::before {

  opacity: .045 !important;

}

.contacts-functional__stage {

  align-items: start;

}

.contact-portrait {

  position: relative;

  isolation: isolate;

  align-self: stretch;

  justify-self: stretch;

  width: 100%;

  min-height: 600px;

  margin: 0;

  pointer-events: none;

}

.contact-portrait::before {

  content: "";

  position: absolute;

  inset: -100px -70px -20px;

  z-index: -1;

  background: radial-gradient(ellipse at 52% 45%,rgba(239,164,78,.22),rgba(192,91,36,.09) 42%,transparent 70%);

}

.contact-portrait__image {

  position: absolute;

  left: 50%;

  top: -155px;

  transform: translateX(-50%);

  display: block;

  width: 640px;

  max-width: none;

  height: 800px;

  object-fit: contain;

  margin-left: -20px;

  -webkit-mask-image: linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 69%,transparent 99%);

  -webkit-mask-composite: source-in;

  mask-image: linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 69%,transparent 99%);

  mask-composite: intersect;

}

@media (min-width:1650px) {

  .contact-portrait__image {

    width: 700px;

    height: 875px;

    top: -200px;

  }

  .contact-portrait {

    min-height: 625px;

  }

  .contacts-functional__stage {

    margin-bottom: 64px;

  }

}

@media (min-width:1181px) and (max-width:1649px) {

  .contacts-functional__stage {

    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);

    gap: 48px;

  }

  .contact-portrait__image {

    width: calc(100% + 40px);

    height: auto;

    aspect-ratio: 4 / 5;

    top: -85px;

  }

}

@media (max-width:1180px) {

  .contact-portrait {

    min-height: 0;

    width: min(100%,520px);

    aspect-ratio: 4 / 5;

    justify-self: center;

    margin-top: 0;

  }

  .contact-portrait__image {

    position: relative;

    top: auto;

    left: auto;

    transform: none;

    width: 100%;

    height: 100%;

  }

}

@media (max-width:700px) {

  .contact-portrait {

    width: min(100%,430px);

  }

}

.contact-signature {

  position: absolute;

  z-index: 2;

  right: -8px;

  top: -135px;

  width: 280px;

  text-align: center;

  mix-blend-mode: screen;

}

.contact-signature img {

  display: block;

  width: 90%;

  height: auto;

  margin: 0 auto;

}

.contact-signature .experience-accent__copy {

  display: block;

  margin-top: -20px;

}

@media (min-width:1181px) and (max-width:1649px) {

  .contact-signature {

    width: 210px;

    top: -140px;

    right: -12px;

  }

  .contact-signature .experience-accent__copy {

    margin-top: -12px;

    font-size: 11px;

  }

}

@media (max-width:1180px) {

  .contact-portrait {

    margin-top: 90px;

  }

  .contact-signature {

    width: 230px;

    top: -100px;

    right: 0;

  }

  .contact-signature .experience-accent__copy {

    font-size: 12px;

    margin-top: -16px;

  }

}

@media (max-width:700px) {

  .contact-portrait {

    margin-top: 130px;

  }

  .contact-signature {

    top: -140px;

    width: 220px;

    right: 0;

  }

}

@media (min-width: 1400px) {

  .contacts-section.contacts-functional, .contacts-section .contacts-functional__inner {

    min-height: 941px !important;

  }

}

@media (min-width: 1650px) {

  .contacts-functional__stage {

    margin-bottom: 28px;

  }

}


/* ============================================================
   Contacts interaction
   ============================================================ */
.contacts-functional__save:hover { transform: none !important; }


/* ============================================================
   Shared motion
   ============================================================ */
/* Base motion system — restrained entrance and scroll reveals. */
:root {
  --motion-ease: cubic-bezier(.22,.72,.2,1);
  --motion-duration: 875ms;
}

/* Hero opening sequence. Child transforms already used by the layout stay intact. */
html.motion-ready .hero .topbar {
  opacity: 0;
  animation: hero-topbar-in 735ms var(--motion-ease) 70ms both;
}
html.motion-ready .hero .hero-copy {
  animation: hero-copy-lift 1010ms var(--motion-ease) 150ms both;
}
html.motion-ready .hero .hero-copy h1,
html.motion-ready .hero .hero-subtitle,
html.motion-ready .hero .actions {
  opacity: 0;
  animation: hero-fade-in 780ms ease-out both;
}
html.motion-ready .hero .hero-copy h1 { animation-delay: 180ms; }
html.motion-ready .hero .hero-subtitle { animation-delay: 340ms; }
html.motion-ready .hero .actions { animation-delay: 500ms; }

html.motion-ready .hero .experience-accent {
  opacity: 0;
  animation: hero-accent-in 875ms var(--motion-ease) 410ms both;
}

html.motion-ready .hero .card-row .insurance-card {
  opacity: 0;
  animation: hero-card-in 780ms ease-out both;
}
html.motion-ready .hero .card-row .insurance-card:nth-child(1) { animation-delay: 650ms; }
html.motion-ready .hero .card-row .insurance-card:nth-child(2) { animation-delay: 735ms; }
html.motion-ready .hero .card-row .insurance-card:nth-child(3) { animation-delay: 820ms; }
html.motion-ready .hero .card-row .insurance-card:nth-child(4) { animation-delay: 905ms; }

html.motion-ready .hero .benefits {
  opacity: 0;
  animation: hero-benefits-in 830ms var(--motion-ease) 980ms both;
}

@keyframes hero-topbar-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-copy-lift {
  from { transform: translateY(18px); }
  to   { transform: translateY(0); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-accent-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hero-card-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-benefits-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shared scroll reveal. Only elements without layout transforms receive this class. */
html.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance, 22px));
  transition:
    opacity var(--motion-duration) ease-out var(--motion-delay, 0ms),
    transform var(--motion-duration) var(--motion-ease) var(--motion-delay, 0ms);
  will-change: opacity, transform;
}
html.motion-ready .motion-reveal.motion-reveal--soft {
  --motion-distance: 14px;
}
html.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cards that already own transforms only fade, so their geometry never changes. */
html.motion-ready .motion-fade {
  opacity: 0;
  transition: opacity 715ms ease-out var(--motion-delay, 0ms);
}
html.motion-ready .motion-fade.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .hero .topbar,
  html.motion-ready .hero .hero-copy,
  html.motion-ready .hero .hero-copy h1,
  html.motion-ready .hero .hero-subtitle,
  html.motion-ready .hero .actions,
  html.motion-ready .hero .experience-accent,
  html.motion-ready .hero .benefits {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html.motion-ready .hero .card-row .insurance-card {
    animation: none !important;
    opacity: 1 !important;
  }
  html.motion-ready .motion-reveal,
  html.motion-ready .motion-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ============================================================
   Workflow motion
   ============================================================ */
/* Workflow motion — the section is revealed as one continuous route. */
html.motion-ready #workflow .workflow__route-draw {
  fill: none;
  stroke: rgba(255,23,56,.58);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,23,56,.28));
  pointer-events: none;
}

html.motion-ready #workflow .workflow__route-accent {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

/* Workflow cards already have their own layout transforms, so phase 2 only controls opacity. */
html.motion-ready #workflow .workflow-card {
  opacity: 0;
  transition:
    opacity 820ms ease-out var(--workflow-card-delay, 0ms),
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}
html.motion-ready #workflow .workflow-card:nth-of-type(1) { --workflow-card-delay: 330ms; }
html.motion-ready #workflow .workflow-card:nth-of-type(2) { --workflow-card-delay: 690ms; }
html.motion-ready #workflow .workflow-card:nth-of-type(3) { --workflow-card-delay: 1050ms; }
html.motion-ready #workflow .workflow-card:nth-of-type(4) { --workflow-card-delay: 1410ms; }

html.motion-ready #workflow.motion-inview .workflow__route-draw {
  animation: workflow-route-draw 2350ms var(--motion-ease) 150ms both;
}
html.motion-ready #workflow.motion-inview .workflow__route-accent {
  animation: workflow-accent-draw 920ms var(--motion-ease) 260ms both;
}
html.motion-ready #workflow.motion-inview .workflow-card { opacity: 1; }

/* The icon rings receive one quiet pulse when their step enters the route. */
html.motion-ready #workflow.motion-inview .workflow-card:nth-of-type(1) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 420ms both;
}
html.motion-ready #workflow.motion-inview .workflow-card:nth-of-type(2) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 780ms both;
}
html.motion-ready #workflow.motion-inview .workflow-card:nth-of-type(3) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 1140ms both;
}
html.motion-ready #workflow.motion-inview .workflow-card:nth-of-type(4) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 1500ms both;
}

@keyframes workflow-route-draw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  8%   { opacity: .68; }
  78%  { opacity: .55; }
  100% { stroke-dashoffset: 0; opacity: .14; }
}
@keyframes workflow-accent-draw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  20%  { opacity: .75; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes workflow-icon-arrive {
  0%, 100% { box-shadow: none; }
  48% { box-shadow: 0 0 0 4px rgba(255,23,56,.055), 0 0 25px rgba(255,23,56,.22); }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready #workflow .workflow__route-draw { display: none !important; }
  html.motion-ready #workflow .workflow__route-accent {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }
html.motion-ready #workflow .workflow-card {
    opacity: 1 !important;
    animation: none !important;
  }
  html.motion-ready #workflow .workflow-card__icon {
    animation: none !important;
  }
}


/* ============================================================
   Workflow presentation
   ============================================================ */
/* Section 02 — final cleanup: no central divider and no route node circles. */
#workflow .workflow__steps::before {
  display: none !important;
}
/* ============================================================
   Services motion
   ============================================================ */
/* Services motion — one coordinated transition across tabs, visual and detail panel. */
#services .services-tab {
  transition: color 420ms ease, padding-left 460ms var(--motion-ease), transform 360ms var(--motion-ease), background-color 420ms ease;
}
#services .services-tab::before {
  transform: scaleY(.18);
  transform-origin: center;
  transition: opacity 360ms ease, transform 520ms var(--motion-ease), box-shadow 420ms ease;
}
#services .services-tab[aria-selected="true"]::before {
  opacity: 1;
  transform: scaleY(1);
  box-shadow: 0 0 14px rgba(255,23,56,.28);
}
#services .services-tab[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(255,23,56,.042), transparent 76%);
}
#services .services-tab__number,
#services .services-tab__label {
  transition: color 420ms ease, opacity 420ms ease, font-weight 420ms ease;
}

/* The visual changes direction according to the selected tab. */
#services .services-visual__item {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(26px,0,0) scale(.988);
  transition:
    opacity 620ms ease,
    transform 900ms var(--motion-ease),
    visibility 0s linear 900ms;
  will-change: opacity, transform;
}
#services .services-visual__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0) scale(1);
  transition-delay: 90ms, 90ms, 0s;
}
#services .services-visual__item.service-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition-delay: 0s;
}
#services.services-forward .services-visual__item.service-leaving {
  transform: translate3d(-22px,0,0) scale(.994);
}
#services.services-backward .services-visual__item.service-leaving {
  transform: translate3d(22px,0,0) scale(.994);
}
#services.services-forward .services-visual__item.service-entering:not(.is-active) {
  transform: translate3d(28px,0,0) scale(.988);
}
#services.services-backward .services-visual__item.service-entering:not(.is-active) {
  transform: translate3d(-28px,0,0) scale(.988);
}
#services .services-visual__item img {
  transform: scale(1.012);
  transition: transform 1050ms var(--motion-ease), filter 700ms ease;
  will-change: transform;
}
#services .services-visual__item.is-active img {
  transform: scale(1);
}

/* Detail card: leave first, then the new content settles in. */
#services .services-panel {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(18px,0,0);
  transition:
    opacity 380ms ease,
    transform 620ms var(--motion-ease),
    visibility 0s linear 620ms;
  will-change: opacity, transform;
}
#services .services-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
  transition-delay: 150ms, 150ms, 0s;
}
#services .services-panel.service-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition-delay: 0s;
}
#services.services-forward .services-panel.service-leaving { transform: translate3d(-12px,0,0); }
#services.services-backward .services-panel.service-leaving { transform: translate3d(12px,0,0); }
#services.services-forward .services-panel.service-entering:not(.is-active) { transform: translate3d(18px,0,0); }
#services.services-backward .services-panel.service-entering:not(.is-active) { transform: translate3d(-18px,0,0); }

/* Content inside the newly selected panel follows in a restrained cascade. */
#services .services-panel > .services-panel__count,
#services .services-panel > h3,
#services .services-panel > .services-panel__description,
#services .services-panel > .services-products,
#services .services-panel > .services-panel__hint,
#services .services-panel > .services-online-cta {
  opacity: 0;
  transform: translate3d(0,10px,0);
  transition: opacity 560ms ease, transform 700ms var(--motion-ease);
}
#services .services-panel.is-active > .services-panel__count { opacity:1; transform:none; transition-delay:230ms; }
#services .services-panel.is-active > h3 { opacity:1; transform:none; transition-delay:280ms; }
#services .services-panel.is-active > .services-panel__description { opacity:1; transform:none; transition-delay:335ms; }
#services .services-panel.is-active > .services-products { opacity:1; transform:none; transition-delay:390ms; }
#services .services-panel.is-active > .services-panel__hint { opacity:1; transform:none; transition-delay:455ms; }
#services .services-panel.is-active > .services-online-cta { opacity:1; transform:none; transition-delay:610ms; }

/* Product rows themselves get a very small sequential settle, without changing layout. */
#services .services-panel .service-product {
  opacity: .72;
  transform: translate3d(0,5px,0);
  transition:
    opacity 480ms ease,
    transform 560ms var(--motion-ease),
    color .22s ease,
    padding-left .22s ease;
}
#services .services-panel.is-active .service-product { opacity:1; transform:none; }
#services .services-panel.is-active .service-product:nth-child(1) { transition-delay:430ms,430ms,0s,0s; }
#services .services-panel.is-active .service-product:nth-child(2) { transition-delay:475ms,475ms,0s,0s; }
#services .services-panel.is-active .service-product:nth-child(3) { transition-delay:520ms,520ms,0s,0s; }
#services .services-panel.is-active .service-product:nth-child(4) { transition-delay:565ms,565ms,0s,0s; }

@media (prefers-reduced-motion: reduce) {
  #services .services-tab,
  #services .services-tab::before,
  #services .services-visual__item,
  #services .services-visual__item img,
  #services .services-panel,
  #services .services-panel > *,
  #services .services-panel .service-product,
  #services .services-online-cta,
  #services .services-online-cta__arrow {
    transition: none !important;
    animation: none !important;
  }
  #services .services-panel.is-active > *,
  #services .services-panel.is-active .service-product {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   Anchor navigation
   ============================================================ */
html { scroll-behavior: smooth; }


/* ============================================================
   Feedback drawer layering
   ============================================================ */
/* Feedback UI must always sit above the fixed glass header. */
.lead-drawer {
  z-index: 10000 !important;
}
.lead-drawer__backdrop {
  z-index: 0 !important;
}
.lead-drawer__panel {
  z-index: 1 !important;
}
.lead-field--contact-method {
  z-index: 20 !important;
}
.lead-field--contact-method .contact-method-menu,
.lead-field--contact-method [class*="contact-method"] {
  position: relative;
}

/* The full-screen backdrop is a button only for click-to-close semantics.
   Remove all native button chrome so the viewport never gets a light frame. */
.lead-drawer__backdrop {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.lead-drawer__backdrop:focus,
.lead-drawer__backdrop:focus-visible,
.lead-drawer__backdrop:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* ============================================================
   Section labels
   ============================================================ */
/* Unified section eyebrow color */
.workflow__eyebrow,
.services-showcase__eyebrow,
.tail-kicker,
.contacts-functional .tail-kicker {
  color: rgba(255, 255, 255, .56) !important;
}


/* ============================================================
   Contacts typography
   ============================================================ */
/* Contacts typography — one deliberate color hierarchy. */
#contacts {
  --contacts-text-primary: #fff;
  --contacts-text-secondary: rgba(255,255,255,.62);
  --contacts-text-tertiary: rgba(255,255,255,.42);
}

/* Primary information: genuinely white. */
#contacts .contacts-functional__title,
#contacts .contacts-functional__title em,
#contacts .contacts-functional__contact-copy strong,
#contacts .contacts-functional__channel strong,
#contacts .contacts-functional__detail strong,
#contacts .contacts-functional__detail a strong,
#contacts .contacts-functional__save {
  color: var(--contacts-text-primary) !important;
}

/* One secondary grey for all explanatory/contact labels. */
#contacts .contacts-functional__lead,
#contacts .contacts-functional__contact-copy span,
#contacts .contacts-functional__contact-hint,
#contacts .contacts-functional__channel small,
#contacts .contacts-functional__detail span,
#contacts .contact-signature .experience-accent__copy {
  color: var(--contacts-text-secondary) !important;
}

/* Footer is intentionally one step quieter. */
/* Keep links from inheriting browser-specific colors. */
#contacts .contacts-functional__contact-copy a,
#contacts .contacts-functional__detail a {
  color: inherit !important;
}

/* Contact phone uses the same typeface and weight as messenger names. */
#contacts .contacts-functional__contact-copy strong[data-contact-phone] {
  font-family: "Geologica", Arial, "Helvetica Neue", sans-serif !important;
  font-weight: 500 !important;
}

/* Final vertical position of the contact action row. */
#contacts .contacts-functional__actions {
  margin-top: 40px !important;
}


/* ============================================================
   Privacy modal
   ============================================================ */
/* Shared privacy link reset: prevents native button styling from leaking into the design. */
.privacy-link {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

/* Footer: quiet branded legal action rather than a browser-looking button. */
.site-footer .privacy-link[data-privacy-open] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: inherit;
  font-family: "Geologica", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .055em;
  white-space: nowrap;
  transition: color .24s ease;
}
.site-footer .privacy-link[data-privacy-open]::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #ff1738;
  box-shadow: 0 0 10px rgba(255,23,56,.42);
  opacity: .72;
  transition: opacity .24s ease, box-shadow .24s ease;
}
.site-footer .privacy-link[data-privacy-open]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,23,56,.82), rgba(255,23,56,.18));
  transform: scaleX(.22);
  transform-origin: left center;
  opacity: .55;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
}
.site-footer .privacy-link[data-privacy-open]:hover,
.site-footer .privacy-link[data-privacy-open]:focus-visible {
  color: rgba(255,255,255,.82);
}
.site-footer .privacy-link[data-privacy-open]:hover::before,
.site-footer .privacy-link[data-privacy-open]:focus-visible::before {
  opacity: 1;
  box-shadow: 0 0 14px rgba(255,23,56,.62);
}
.site-footer .privacy-link[data-privacy-open]:hover::after,
.site-footer .privacy-link[data-privacy-open]:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Legal copy inside the lead form remains an inline text link. */
.lead-form__legal .privacy-link[data-privacy-open],
.privacy-policy__section .privacy-link {
  display: inline;
  color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color .2s ease, border-color .2s ease;
}
.lead-form__legal .privacy-link[data-privacy-open]:hover,
.lead-form__legal .privacy-link[data-privacy-open]:focus-visible,
.privacy-policy__section .privacy-link:hover,
.privacy-policy__section .privacy-link:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255,23,56,.75);
}
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 18px;
}
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s ease, visibility .26s;
}
.privacy-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.privacy-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  outline: 0;
  background: rgba(4,5,7,.82);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  cursor: default;
}
.privacy-modal__panel {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: min(860px, calc(100vh - 56px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255,23,56,.14), transparent 28%),
    linear-gradient(180deg, rgba(20,22,25,.98), rgba(10,11,13,.99));
  box-shadow: 0 38px 100px rgba(0,0,0,.5);
  transform: translateY(14px);
  transition: transform .38s cubic-bezier(.2,.75,.2,1);
}
.privacy-modal.is-open .privacy-modal__panel { transform: translateY(0); }
.privacy-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 34px 42px 26px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(14,15,18,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.privacy-modal__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #ff1738;
  font: 500 10px/1 "Geologica", Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.privacy-modal h2 {
  margin: 0;
  font-family: "Prata", Georgia, serif;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.12;
  font-weight: 300;
}
.privacy-modal__date {
  margin: 10px 0 0;
  color: rgba(255,255,255,.48);
  font-size: 11px;
}
.privacy-modal__close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.03);
  font: 300 24px/1 "Geologica", sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.privacy-modal__close:hover { border-color: rgba(255,23,56,.65); background: rgba(255,23,56,.08); }
.privacy-modal__content {
  max-height: calc(min(860px, 100vh - 56px) - 130px);
  overflow-y: auto;
  padding: 34px 42px 46px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.privacy-modal__intro {
  max-width: 780px;
  margin: 0 0 32px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.7;
}
.privacy-policy__section {
  padding: 25px 0;
  border-top: 1px solid rgba(255,255,255,.075);
}
.privacy-policy__section h3 {
  margin: 0 0 14px;
  color: #fff;
  font: 500 14px/1.35 "Geologica", Arial, sans-serif;
}
.privacy-policy__section p,
.privacy-policy__section li {
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  line-height: 1.72;
}
.privacy-policy__section p { margin: 0 0 10px; }
.privacy-policy__section ul { margin: 10px 0 0; padding-left: 19px; }
.privacy-policy__section li + li { margin-top: 6px; }
.privacy-policy__contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 17px;
}
.privacy-policy__contact {
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.privacy-policy__contact span { display:block; color:rgba(255,255,255,.42); font-size:9px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.privacy-policy__contact strong,
.privacy-policy__contact a { color:#fff; font: 400 12px/1.45 "Geologica",Arial,sans-serif; text-decoration:none; }
@media (max-width: 720px) {
  .privacy-modal { padding: 0; }
  .privacy-modal__panel { width:100%; max-height:100vh; height:100%; border-radius:0; border:0; }
  .privacy-modal__header { padding: 26px 22px 20px; }
  .privacy-modal__content { max-height: calc(100vh - 112px); padding: 26px 22px 36px; }
  .privacy-policy__contacts { grid-template-columns:1fr; }
  .site-footer__legal { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .privacy-modal, .privacy-modal__panel { transition: none !important; }
}


/* ============================================================
   Dialog close controls
   ============================================================ */
/* Final close-button interaction: white glyph, red ring accent only. */
.lead-drawer__close,
.privacy-modal__close {
  color: #fff !important;
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.lead-drawer__close:hover,
.lead-drawer__close:focus-visible,
.lead-drawer__close:active,
.privacy-modal__close:hover,
.privacy-modal__close:focus-visible,
.privacy-modal__close:active {
  color: #fff !important;
  border-color: rgba(255,23,56,.82) !important;
  background: rgba(255,23,56,.075) !important;
  box-shadow: 0 0 0 1px rgba(255,23,56,.05), 0 0 18px rgba(255,23,56,.10);
  outline: none;
}

.lead-drawer__close:active,
.privacy-modal__close:active {
  border-color: rgba(255,23,56,.92) !important;
  background: rgba(255,23,56,.11) !important;
}

.lead-drawer__close svg,
.lead-drawer__close svg *,
.privacy-modal__close svg,
.privacy-modal__close svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

@media (prefers-reduced-motion: reduce) {
  .lead-drawer__close,
  .privacy-modal__close { transition: none !important; }
}


/* ============================================================
   Primary CTA
   ============================================================ */
/* Keep all hero primary button styling, remove only vertical motion. */
.hero .action--primary:hover,
.hero .action--primary:active {
  transform: none !important;
}

/* Unified filled red CTA treatment. Keep each button's existing geometry. */
.contacts-primary,
.lead-form__submit {
  border: 2px solid rgba(255,72,79,.66);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #ff2028 0%, #f51520 52%, #cf0b16 100%);
  box-shadow:
    0 2.7px 0 #9f1020,
    0 9px 19.8px rgba(156,5,14,.26),
    0 0 25.2px rgba(255,18,34,.88),
    0 0 57.6px rgba(255,18,34,.66),
    0 0 99px rgba(255,18,34,.38),
    inset 0 .9px 0 rgba(255,255,255,.10),
    inset 0 -7.2px 12.6px rgba(126,8,22,.24);
  transition: filter .2s ease, box-shadow .2s ease;
}
.contacts-primary:hover,
.lead-form__submit:hover {
  transform: none !important;
  filter: brightness(1.03);
  box-shadow:
    0 3.6px 0 #a91324,
    0 10.8px 23.4px rgba(156,5,14,.30),
    0 0 30.6px rgba(255,18,34,.96),
    0 0 68.4px rgba(255,18,34,.76),
    0 0 115.2px rgba(255,18,34,.44),
    inset 0 .9px 0 rgba(255,255,255,.12),
    inset 0 -7.2px 12.6px rgba(126,8,22,.24);
}
.contacts-primary:active,
.lead-form__submit:active {
  transform: none !important;
  filter: brightness(.99);
  box-shadow:
    0 .9px 0 #86101d,
    0 4.5px 10.8px rgba(156,5,14,.20),
    0 0 16.2px rgba(255,18,34,.32),
    0 0 34.2px rgba(255,18,34,.17),
    inset 0 .9px 0 rgba(255,255,255,.08),
    inset 0 -5.4px 10.8px rgba(112,7,19,.30);
}


/* ============================================================
   Contact method select
   ============================================================ */
/* Custom contact-method control: matches the site's dark glass + red accent language. */
.lead-field--contact-method { position:relative; z-index:8; }
.lead-contact-select { position:relative; width:100%; }
.lead-contact-select__native {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.lead-contact-select__trigger {
  position:relative;
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 10px 0 16px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:13px;
  color:#fff;
  background:
    radial-gradient(circle at 96% 50%,rgba(255,23,56,.055),transparent 22%),
    rgba(255,255,255,.045);
  font:300 14px "Geologica",Arial,sans-serif;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.lead-contact-select__trigger:hover {
  border-color:rgba(255,255,255,.27);
  background:
    radial-gradient(circle at 96% 50%,rgba(255,23,56,.08),transparent 24%),
    rgba(255,255,255,.058);
}
.lead-contact-select.is-open .lead-contact-select__trigger,
.lead-contact-select__trigger:focus-visible {
  outline:0;
  border-color:rgba(255,23,56,.90);
  box-shadow:0 0 0 3px rgba(255,23,56,.09),0 0 24px rgba(255,23,56,.06);
}
.lead-contact-select__chevron {
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,23,56,.56);
  border-radius:50%;
  color:var(--red);
  background:rgba(255,23,56,.025);
  transition:transform .24s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.lead-contact-select__chevron svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lead-contact-select.is-open .lead-contact-select__chevron {
  transform:rotate(180deg);
  color:#fff;
  border-color:var(--red);
  background:var(--red);
  box-shadow:0 0 18px rgba(255,23,56,.20);
}
.lead-contact-select__menu {
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:calc(100% + 9px);
  padding:7px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:
    radial-gradient(circle at 96% 0,rgba(255,23,56,.10),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 48%),
    rgba(12,15,18,.98);
  box-shadow:0 20px 46px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px);
  transition:opacity .2s ease,visibility .2s ease,transform .24s ease;
}
.lead-contact-select.is-open .lead-contact-select__menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.lead-contact-select__option {
  position:relative;
  width:100%;
  min-height:47px;
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  align-items:center;
  padding:0 12px;
  border:0;
  border-radius:10px;
  color:rgba(255,255,255,.68);
  background:transparent;
  font:300 13px "Geologica",Arial,sans-serif;
  text-align:left;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,padding-left .18s ease;
}
.lead-contact-select__option + .lead-contact-select__option {
  border-top:1px solid rgba(255,255,255,.075);
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.lead-contact-select__option:hover,
.lead-contact-select__option:focus-visible {
  outline:0;
  color:#fff;
  background:rgba(255,255,255,.045);
  padding-left:15px;
}
.lead-contact-select__option-mark {
  width:7px;
  height:7px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.lead-contact-select__option.is-selected { color:#fff; }
.lead-contact-select__option.is-selected .lead-contact-select__option-mark {
  border-color:var(--red);
  background:var(--red);
  box-shadow:0 0 0 4px rgba(255,23,56,.08),0 0 12px rgba(255,23,56,.24);
}
@media(max-width:700px){
  .lead-contact-select__trigger{min-height:52px;}
  .lead-contact-select__menu{top:calc(100% + 7px);}
}


/* ============================================================
   CTA typography
   ============================================================ */
.contacts-functional__save span {
  font-family: "Geologica", Arial, "Helvetica Neue", sans-serif;
  font-size: 12.78px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Final CTA typography: one identical text system across primary actions. */
.hero .action--primary,
.contacts-functional__actions .contacts-primary,
.lead-form__submit,
.contacts-functional__save {
  font-family: "Geologica", Arial, "Helvetica Neue", sans-serif !important;
  font-size: 12.78px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.hero .action--primary span,
.contacts-functional__actions .contacts-primary span,
.lead-form__submit span,
.contacts-functional__save span {
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}


/* ============================================================
   About route
   ============================================================ */
/* Section 04: route should match section 02 conceptually — one thin wave behind the cards. */
#about .about-principles {
  isolation: isolate;
}
#about .about-principles__route {
  position: absolute;
  z-index: 0;
  inset: 14px -24px -34px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  overflow: visible;
  pointer-events: none;
}
#about .about-principles__route-path,
#about .about-principles__route-draw,
#about .about-principles__route-accent {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#about .about-principles__route-path {
  stroke: rgba(255,255,255,.09);
  stroke-width: 1;
  stroke-dasharray: 4 8;
}
html.motion-ready #about .about-principles__route-draw {
  stroke: rgba(255,23,56,.56);
  stroke-width: 1.45;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,23,56,.28));
}
html.motion-ready #about .about-principles__route-accent {
  stroke: rgba(255,23,56,.74);
  stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,23,56,.34));
}
html.motion-ready #about .about-principles.route-inview .about-principles__route-draw {
  animation: about-workflow-route-draw 2350ms var(--motion-ease) 150ms both;
}
html.motion-ready #about .about-principles.route-inview .about-principles__route-accent {
  animation: about-workflow-accent-draw 920ms var(--motion-ease) 260ms both;
}
@keyframes about-workflow-route-draw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  8%   { opacity: .68; }
  78%  { opacity: .55; }
  100% { stroke-dashoffset: 0; opacity: .14; }
}
@keyframes about-workflow-accent-draw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  20%  { opacity: .75; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
/* Kill experimental variants from previous attempts. */
#about .about-principles__route-trace,
#about .about-principles__route-glow,
#about .about-principles__connector-line,
#about .about-principles__connector::before,
#about .about-principles__connector::after {
  display: none !important;
}
@media (max-width: 700px) {
  #about .about-principles__route { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #about .about-principles__route-draw,
  #about .about-principles__route-accent { display: none !important; }
}


/* ============================================================
   About cards motion
   ============================================================ */
/* Section 04: cards should follow the route timing, not the generic reveal timing. */
html.motion-ready #about .about-principles > .workflow-card {
  opacity: 0;
  transition:
    opacity 820ms ease-out var(--about-card-delay, 0ms),
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}
html.motion-ready #about .about-principles > .workflow-card:nth-of-type(1) { --about-card-delay: 330ms; }
html.motion-ready #about .about-principles > .workflow-card:nth-of-type(2) { --about-card-delay: 690ms; }
html.motion-ready #about .about-principles > .workflow-card:nth-of-type(3) { --about-card-delay: 1050ms; }
html.motion-ready #about .about-principles > .workflow-card:nth-of-type(4) { --about-card-delay: 1410ms; }

/* Even if the generic phase-1 observer already marked them visible, keep them hidden until the route starts. */
html.motion-ready #about .about-principles > .workflow-card.motion-fade,
html.motion-ready #about .about-principles > .workflow-card.motion-fade.is-visible {
  opacity: 0;
}

/* Reveal cards only when the route animation is triggered for the principles grid. */
html.motion-ready #about .about-principles.route-inview > .workflow-card,
html.motion-ready #about .about-principles.route-inview > .workflow-card.motion-fade,
html.motion-ready #about .about-principles.route-inview > .workflow-card.motion-fade.is-visible {
  opacity: 1;
}

/* Match the calm icon-arrival accent from section 02. */
html.motion-ready #about .about-principles.route-inview .workflow-card:nth-of-type(1) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 420ms both;
}
html.motion-ready #about .about-principles.route-inview .workflow-card:nth-of-type(2) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 780ms both;
}
html.motion-ready #about .about-principles.route-inview .workflow-card:nth-of-type(3) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 1140ms both;
}
html.motion-ready #about .about-principles.route-inview .workflow-card:nth-of-type(4) .workflow-card__icon {
  animation: workflow-icon-arrive 820ms var(--motion-ease) 1500ms both;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready #about .about-principles > .workflow-card,
  html.motion-ready #about .about-principles > .workflow-card.motion-fade,
  html.motion-ready #about .about-principles > .workflow-card.motion-fade.is-visible {
    opacity: 1 !important;
    transition: none !important;
  }
  html.motion-ready #about .about-principles .workflow-card__icon {
    animation: none !important;
  }
}


/* ============================================================
   Contacts motion
   ============================================================ */
/* Contacts motion — cohesive scene: frame first, content follows in one short wave. */
html.motion-ready #contacts .contacts-functional__content.motion-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 1) The contact grid is one frame. All separators appear together. */
html.motion-ready #contacts .contacts-functional__main-contact,
html.motion-ready #contacts .contacts-functional__messengers,
html.motion-ready #contacts .contacts-functional__details,
html.motion-ready #contacts .contacts-functional__channel + .contacts-functional__channel,
html.motion-ready #contacts .contacts-functional__detail + .contacts-functional__detail {
  border-color: transparent !important;
  transition-property: border-color, background, box-shadow, color, filter;
  transition-duration: 520ms, .22s, .22s, .22s, .22s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-delay: 90ms, 0ms, 0ms, 0ms, 0ms;
}
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__main-contact,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__messengers,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__details,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__channel + .contacts-functional__channel,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__detail + .contacts-functional__detail {
  border-color: rgba(255,255,255,.17) !important;
}

/* 2) Content follows the already forming frame. Short, grouped cascade. */
html.motion-ready #contacts .contacts-functional__lead,
html.motion-ready #contacts .contacts-functional__main-contact > *,
html.motion-ready #contacts .contacts-functional__channel > *,
html.motion-ready #contacts .contacts-functional__detail > *,
html.motion-ready #contacts .contacts-functional__actions > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 560ms ease-out var(--contact-delay, 0ms),
    transform 680ms var(--motion-ease) var(--contact-delay, 0ms),
    background .22s ease,
    box-shadow .22s ease,
    color .22s ease,
    filter .22s ease;
}
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__lead,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__main-contact > *,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__channel > *,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__detail > *,
html.motion-ready #contacts.contacts-motion-inview .contacts-functional__actions > * {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* The wave stays compact: lead → phone → messengers → details → actions. */
html.motion-ready #contacts .contacts-functional__lead { --contact-delay: 150ms; }
html.motion-ready #contacts .contacts-functional__main-contact > * { --contact-delay: 290ms; }
html.motion-ready #contacts .contacts-functional__channel:nth-child(1) > * { --contact-delay: 430ms; }
html.motion-ready #contacts .contacts-functional__channel:nth-child(2) > * { --contact-delay: 490ms; }
html.motion-ready #contacts .contacts-functional__detail:nth-child(1) > * { --contact-delay: 600ms; }
html.motion-ready #contacts .contacts-functional__detail:nth-child(2) > * { --contact-delay: 660ms; }
html.motion-ready #contacts .contacts-functional__actions > :nth-child(1) { --contact-delay: 785ms; }
html.motion-ready #contacts .contacts-functional__actions > :nth-child(2) { --contact-delay: 845ms; }

/* Portrait keeps its exact geometry: opacity only. */
html.motion-ready #contacts .contact-portrait.motion-reveal,
html.motion-ready #contacts .contact-portrait.motion-reveal.is-visible {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 980ms ease-out 220ms !important;
}
html.motion-ready #contacts.contacts-motion-inview .contact-portrait.motion-reveal,
html.motion-ready #contacts.contacts-motion-inview .contact-portrait.motion-reveal.is-visible {
  opacity: 1 !important;
}

/* Signature reveals in parallel with the contact wave. */
html.motion-ready #contacts .contact-signature img {
  clip-path: inset(0 100% 0 0);
  opacity: .7;
  transition:
    clip-path 1050ms cubic-bezier(.2,.72,.2,1) 470ms,
    opacity 700ms ease-out 470ms;
}
html.motion-ready #contacts.contacts-motion-inview .contact-signature img {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
html.motion-ready #contacts .contact-signature .experience-accent__copy {
  opacity: 0;
  transform: translate3d(0,4px,0);
  transition:
    opacity 520ms ease-out 880ms,
    transform 620ms var(--motion-ease) 880ms;
}
html.motion-ready #contacts.contacts-motion-inview .contact-signature .experience-accent__copy {
  opacity: 1;
  transform: none;
}

/* Quiet feedback for the save-contact icon; button itself never lifts. */
#contacts .contacts-functional__save svg {
  transition: filter .3s ease, opacity .3s ease, stroke .3s ease;
}
#contacts .contacts-functional__save:hover svg {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255,23,56,.5));
}
#contacts .contacts-functional__save:hover,
#contacts .contacts-functional__save:active { transform:none !important; }

@media (prefers-reduced-motion: reduce) {
  html.motion-ready #contacts .contacts-functional__main-contact,
  html.motion-ready #contacts .contacts-functional__messengers,
  html.motion-ready #contacts .contacts-functional__details,
  html.motion-ready #contacts .contacts-functional__channel + .contacts-functional__channel,
  html.motion-ready #contacts .contacts-functional__detail + .contacts-functional__detail {
    border-color: rgba(255,255,255,.17) !important;
    transition: none !important;
  }
  html.motion-ready #contacts .contacts-functional__lead,
  html.motion-ready #contacts .contacts-functional__main-contact > *,
  html.motion-ready #contacts .contacts-functional__channel > *,
  html.motion-ready #contacts .contacts-functional__detail > *,
  html.motion-ready #contacts .contacts-functional__actions > *,
  html.motion-ready #contacts .contact-portrait.motion-reveal,
  html.motion-ready #contacts .contact-portrait.motion-reveal.is-visible,
  html.motion-ready #contacts .contact-signature .experience-accent__copy {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  html.motion-ready #contacts .contact-signature img {
    clip-path:none !important;
    opacity:1 !important;
    transition:none !important;
  }
}


/* ============================================================
   CTA light motion
   ============================================================ */
/* CTA light motion — one contour sweep + one inner pulse. */
.hero .action--primary,
.contacts-functional__actions .contacts-primary,
.lead-form__submit,
.contacts-functional__save {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero .action--primary > *,
.contacts-functional__actions .contacts-primary > *,
.lead-form__submit > *,
.contacts-functional__save > * {
  position: relative;
  z-index: 3;
}

/* Inner pulse. It runs once on hover and dies away instead of looping. */
.hero .action--primary::before,
.contacts-functional__actions .contacts-primary::before,
.lead-form__submit::before,
.contacts-functional__save::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.34);
  background: radial-gradient(circle,
    rgba(255,255,255,.20) 0%,
    rgba(255,80,92,.16) 26%,
    rgba(255,23,56,.08) 48%,
    rgba(255,23,56,0) 72%);
  filter: blur(2px);
}

/* A narrow highlight only in the border area. */
.hero .action--primary::after,
.contacts-functional__actions .contacts-primary::after,
.lead-form__submit::after,
.contacts-functional__save::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 36%,
      rgba(255,69,83,.22) 43%,
      rgba(255,184,190,.82) 49%,
      rgba(255,255,255,.98) 50%,
      rgba(255,68,83,.78) 53%,
      transparent 62%,
      transparent 100%)
    -170% 0 / 235% 100% no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hero .action--primary:hover::before,
.contacts-functional__actions .contacts-primary:hover::before,
.lead-form__submit:hover::before {
  animation: cta-inner-pulse 1180ms cubic-bezier(.22,.68,.22,1) both;
}
.hero .action--primary:hover::after,
.contacts-functional__actions .contacts-primary:hover::after,
.lead-form__submit:hover::after {
  animation: cta-border-sweep 1280ms cubic-bezier(.2,.72,.2,1) both;
}

/* The outline save button uses the same language, but much quieter. */
.contacts-functional__save::before {
  background: radial-gradient(circle,
    rgba(255,23,56,.13) 0%,
    rgba(255,23,56,.07) 34%,
    rgba(255,23,56,0) 72%);
  filter: blur(3px);
}
.contacts-functional__save::after {
  padding: 1px;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 38%,
      rgba(255,23,56,.20) 44%,
      rgba(255,92,108,.74) 49%,
      rgba(255,180,187,.92) 51%,
      rgba(255,23,56,.52) 55%,
      transparent 63%,
      transparent 100%)
    -170% 0 / 235% 100% no-repeat;
}
.contacts-functional__save:hover::before {
  animation: cta-inner-pulse-subtle 1180ms cubic-bezier(.22,.68,.22,1) both;
}
.contacts-functional__save:hover::after {
  animation: cta-border-sweep-subtle 1280ms cubic-bezier(.2,.72,.2,1) both;
}

/* Keep all CTA geometry completely still. */
.hero .action--primary:hover,
.hero .action--primary:active,
.contacts-functional__actions .contacts-primary:hover,
.contacts-functional__actions .contacts-primary:active,
.lead-form__submit:hover,
.lead-form__submit:active,
.contacts-functional__save:hover,
.contacts-functional__save:active {
  transform: none !important;
}

@keyframes cta-inner-pulse {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.28); }
  18%  { opacity: .88; }
  58%  { opacity: .44; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(4.9); }
}
@keyframes cta-inner-pulse-subtle {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.28); }
  20%  { opacity: .62; }
  60%  { opacity: .25; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(4.6); }
}
@keyframes cta-border-sweep {
  0%   { opacity: 0; background-position: -170% 0; }
  12%  { opacity: 1; }
  76%  { opacity: .94; }
  100% { opacity: 0; background-position: 170% 0; }
}
@keyframes cta-border-sweep-subtle {
  0%   { opacity: 0; background-position: -170% 0; }
  14%  { opacity: .85; }
  76%  { opacity: .74; }
  100% { opacity: 0; background-position: 170% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .action--primary::before,
  .hero .action--primary::after,
  .contacts-functional__actions .contacts-primary::before,
  .contacts-functional__actions .contacts-primary::after,
  .lead-form__submit::before,
  .lead-form__submit::after,
  .contacts-functional__save::before,
  .contacts-functional__save::after {
    animation: none !important;
    display: none !important;
  }
}


/* ============================================================
   Header call button motion
   ============================================================ */
/* Header contact trigger: subtle one-second attention pulse. */
.call-btn {
  overflow: visible;
}
.call-btn > .call-btn__icon {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,23,56,.72);
  border-radius: 50%;
  color: var(--red);
  background: rgba(255,23,56,.018);
  box-shadow: 0 0 0 rgba(255,23,56,0);
  animation: call-icon-breathe 1000ms cubic-bezier(.22,.68,.22,1) infinite;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.call-btn > .call-btn__icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255,23,56,.68);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: call-ring-wave 1000ms cubic-bezier(.18,.7,.24,1) infinite;
}
.call-btn > .call-btn__icon::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,23,56,.16), transparent 72%);
  opacity: 0;
  pointer-events: none;
  animation: call-core-glow 1000ms ease-out infinite;
}
.call-btn > .call-btn__icon svg {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  fill: none;
  filter: drop-shadow(0 0 0 rgba(255,23,56,0));
  transform: none;
  animation: call-handset-accent 1000ms ease-in-out infinite;
  transition: filter .22s ease;
}
.call-btn:hover > .call-btn__icon {
  border-color: var(--red);
  background: rgba(255,23,56,.035);
  box-shadow: 0 0 18px rgba(255,23,56,.18);
}
.call-btn:hover > .call-btn__icon svg {
  transform: none;
  filter: drop-shadow(0 0 5px rgba(255,23,56,.42));
}
.call-btn:active > .call-btn__icon svg { transform: none; }

/* Neutralize the old direct-SVG circle styling now that the circle lives on the wrapper. */
.call-btn > svg { display: none; }

@keyframes call-icon-breathe {
  0%,100% {
    border-color: rgba(255,23,56,.62);
    box-shadow: 0 0 0 rgba(255,23,56,0), inset 0 0 0 rgba(255,23,56,0);
  }
  38% {
    border-color: rgba(255,58,82,.98);
    box-shadow: 0 0 12px rgba(255,23,56,.20), inset 0 0 10px rgba(255,23,56,.045);
  }
  62% {
    border-color: rgba(255,23,56,.82);
    box-shadow: 0 0 7px rgba(255,23,56,.10), inset 0 0 6px rgba(255,23,56,.025);
  }
}
@keyframes call-ring-wave {
  0%   { opacity: 0; transform: scale(.92); }
  16%  { opacity: .52; }
  72%  { opacity: 0; transform: scale(1.34); }
  100% { opacity: 0; transform: scale(1.34); }
}
@keyframes call-core-glow {
  0%,8%   { opacity: 0; transform: scale(.72); }
  34%     { opacity: .72; transform: scale(1.08); }
  68%,100%{ opacity: 0; transform: scale(1.18); }
}
@keyframes call-handset-accent {
  0%,100% { color: var(--red); filter: drop-shadow(0 0 0 rgba(255,23,56,0)); }
  32%     { color: #ff5369; filter: drop-shadow(0 0 5px rgba(255,23,56,.44)); }
  58%     { color: var(--red); filter: drop-shadow(0 0 2px rgba(255,23,56,.20)); }
}
@media (prefers-reduced-motion: reduce) {
  .call-btn > .call-btn__icon,
  .call-btn > .call-btn__icon::before,
  .call-btn > .call-btn__icon::after,
  .call-btn > .call-btn__icon svg {
    animation: none !important;
  }
}

/* Keep the legacy underline rule on the label only; it must not affect the pulse core. */
.call-btn > .call-btn__icon::after {
  top: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  left: 6px !important;
  width: auto !important;
  height: auto !important;
}
.call-btn:hover > .call-btn__icon::after { right: 6px !important; }
.call-btn > .call-btn__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: rgba(255,255,255,.48);
  transition: right .22s ease;
}
.call-btn:hover > .call-btn__label::after { right: 0; }


/* ============================================================
   Sticky header glass
   ============================================================ */
/* Fixed glass header: initial hero state is intentionally untouched. */
.topbar.header-float-active {
  position: fixed !important;
  top: 0 !important;
  z-index: 1000 !important;
  transform: none !important;
  isolation: isolate;
}

.topbar.header-float-active::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18px;
  right: -18px;
  top: 10px;
  bottom: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16,18,21,.88), rgba(8,10,12,.76));
  border: 1px solid rgba(255,255,255,.105);
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 28px rgba(255,23,56,.025);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
  opacity: 0;
  transform: translateY(-8px) scaleY(.94);
  transform-origin: 50% 0;
  animation: header-glass-enter 520ms cubic-bezier(.22,.72,.2,1) forwards;
  pointer-events: none;
}

/*
  Navigation underline is shared by the hero header and the floating header.
  Hover behavior is limited to devices with a real pointing-device hover,
  while the floating header keeps its active-section indicator everywhere.
*/
.topbar .nav a {
  position: relative;
}

.topbar.header-float-active .nav a.is-active {
  color: #fff;
  opacity: 1;
}

.topbar.header-float-active .nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -10px;
  height: 1px;
  background: rgba(255,23,56,.95);
  box-shadow: 0 0 8px rgba(255,23,56,.32);
  transition: left .28s ease, right .28s ease, opacity .28s ease;
  opacity: 0;
}

.topbar.header-float-active .nav a.is-active::after {
  left: 12%;
  right: 12%;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .topbar:not(.header-float-active) .nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -10px;
    height: 1px;
    background: rgba(255,23,56,.95);
    box-shadow: 0 0 8px rgba(255,23,56,.32);
    transition: left .28s ease, right .28s ease, opacity .28s ease;
    opacity: 0;
  }

  .topbar .nav a:hover::after {
    left: 12%;
    right: 12%;
    opacity: 1;
  }
}

@keyframes header-glass-enter {
  from { opacity: 0; transform: translateY(-8px) scaleY(.94); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar.header-float-active::before {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   Sticky header phone
   ============================================================ */
/*
  Header phone is part of .topbar__menu-panel.
  Desktop >=1201 follows the exact 1920px header scene and scales with
  --hero-scene-scale. Tablet keeps the number in the sticky bar in a compact
  form. Mobile places the number inside the opened menu panel.
*/
.topbar__phone {
  position: absolute;
  right: 226px;
  top: 25px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0;
  color: rgba(255,255,255,.95);
  font-family: "Geologica", Arial, "Helvetica Neue", sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .025em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 340ms ease 150ms,
    transform 420ms cubic-bezier(.22,.72,.2,1) 120ms,
    color 220ms ease;
}

.topbar__phone-accent {
  display: none;
}

.topbar__phone-label {
  display: none;
}

.topbar__phone-number {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px 0 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.065),
    0 0 0 rgba(255,23,56,0);
  transition:
    background 240ms ease,
    box-shadow 280ms ease,
    color 220ms ease;
}

.topbar__phone-number::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff1738;
  box-shadow: 0 0 10px rgba(255,23,56,.6);
  transform: translateY(-50%);
}

.topbar__phone-number::after {
  content: none;
}

.topbar.header-float-active .topbar__phone {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.topbar.header-float-active .topbar__phone:hover {
  color: #fff;
}

.topbar.header-float-active .topbar__phone:hover .topbar__phone-number {
  color: #fff;
  background: rgba(255,255,255,.055);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 18px rgba(255,23,56,.10);
}

/* Exact 1920 composition, scaled as one header scene. */
@media (min-width: 1201px) {
  .topbar__phone {
    right: calc(226px * var(--hero-scene-scale, 1));
    top: calc(25px * var(--hero-scene-scale, 1));
    height: calc(44px * var(--hero-scene-scale, 1));
    font-size: calc(15.5px * var(--hero-scene-scale, 1));
  }

  .topbar__phone-number {
    min-height: calc(34px * var(--hero-scene-scale, 1));
    padding:
      0
      calc(13px * var(--hero-scene-scale, 1))
      0
      calc(28px * var(--hero-scene-scale, 1));
    border-radius: calc(999px * var(--hero-scene-scale, 1));
  }

  .topbar__phone-number::before {
    left: calc(13px * var(--hero-scene-scale, 1));
    width: calc(6px * var(--hero-scene-scale, 1));
    height: calc(6px * var(--hero-scene-scale, 1));
    box-shadow: 0 0 calc(10px * var(--hero-scene-scale, 1)) rgba(255,23,56,.6);
  }
}

/*
  Tablet sticky header: keep the number visible, but the contact CTA becomes
  icon-only so navigation, phone and actions share the available width cleanly.
*/
@media (min-width: 901px) and (max-width: 1200px) {
  .topbar.header-float-active .call-btn {
    right: var(--header-inner-pad) !important;
    gap: 0 !important;
  }

  .topbar.header-float-active .call-btn__label {
    display: none !important;
  }

  .topbar.header-float-active .topbar__phone {
    right: calc(var(--header-inner-pad) + 38px + var(--header-action-gap));
    top: 25px;
    height: 40px;
    font-size: 14px;
  }

  .topbar.header-float-active .topbar__phone-number {
    min-height: 34px;
    padding: 0 12px 0 26px;
  }

  .topbar.header-float-active .topbar__phone-number::before {
    left: 11px;
    width: 6px;
    height: 6px;
  }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .topbar.header-float-active .topbar__phone {
    font-size: 13.2px;
  }

  .topbar.header-float-active .topbar__phone-number {
    min-height: 32px;
    padding: 0 10px 0 24px;
  }

  .topbar.header-float-active .topbar__phone-number::before {
    left: 10px;
    width: 5px;
    height: 5px;
  }
}

/* Mobile phone CTA lives as a full contact block inside the burger menu. */
@media (max-width: 900px) {
  .topbar__menu-panel .topbar__phone,
  .topbar.header-float-active .topbar__menu-panel .topbar__phone {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 10px 0 0;
    padding: 14px 16px 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    justify-items: start;
    align-items: center;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background:
      linear-gradient(90deg, rgba(255,23,56,.075), rgba(255,23,56,.018) 42%, rgba(255,255,255,.018) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 8px 24px rgba(0,0,0,.12);
    opacity: 1;
    visibility: inherit;
    pointer-events: auto;
    transform: none;
    box-sizing: border-box;
  }

  .topbar__menu-panel .topbar__phone-label {
    display: block;
    color: rgba(255,23,56,.92);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .topbar__menu-panel .topbar__phone-number {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
  }

  .topbar__menu-panel .topbar__phone-number::before {
    content: none;
  }

  .topbar__menu-panel .topbar__phone:hover,
  .topbar__menu-panel .topbar__phone:focus-visible {
    border-color: rgba(255,23,56,.24);
    background:
      linear-gradient(90deg, rgba(255,23,56,.11), rgba(255,23,56,.025) 46%, rgba(255,255,255,.022) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 0 22px rgba(255,23,56,.08);
  }

  .topbar__menu-panel .topbar__phone:hover .topbar__phone-number,
  .topbar__menu-panel .topbar__phone:focus-visible .topbar__phone-number {
    background: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__phone,
  .topbar__phone-number {
    transition: none !important;
  }
}


/* ============================================================
   Cursor microinteractions
   ============================================================ */
/* Cursor microinteractions: restrained, desktop/fine-pointer only. */
@media (hover:hover) and (pointer:fine) {
  #workflow .workflow-card,
  #about .about-principles > .workflow-card {
    --cursor-x: 50%;
    --cursor-y: 50%;
    --parallax-x: 0px;
    --parallax-y: 0px;
  }

  .cursor-card-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      210px circle at var(--cursor-x) var(--cursor-y),
      rgba(255,23,56,.105),
      rgba(241,119,43,.035) 36%,
      transparent 70%
    );
    transition: opacity 260ms ease;
  }
  .workflow-card.is-cursor-active .cursor-card-glow { opacity: 1; }

  /* Section 02 — the card reacts locally, while the route gets a short luminous segment. */
  #workflow .workflow-card.is-cursor-active .workflow-card__icon {
    border-color: rgba(255,23,56,.82);
    box-shadow: 0 0 0 4px rgba(255,23,56,.035), 0 0 22px rgba(255,23,56,.20);
    transition: border-color 220ms ease, box-shadow 260ms ease;
  }
  #workflow .workflow__route-hover {
    fill: none;
    stroke: rgba(255,23,56,.92);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-dasharray: 9 91;
    stroke-dashoffset: var(--route-hover-offset, 0);
    opacity: 0;
    filter: drop-shadow(0 0 7px rgba(255,23,56,.58));
    transition: opacity 220ms ease, stroke-dashoffset 520ms cubic-bezier(.22,.72,.2,1);
    pointer-events: none;
  }
  #workflow.cursor-route-active .workflow__route-hover { opacity: .9; }

  /* Section 04 — depth without moving the actual card geometry. */
  #about .about-principles > .workflow-card .workflow-card__top,
  #about .about-principles > .workflow-card h3,
  #about .about-principles > .workflow-card p {
    transition: transform 220ms cubic-bezier(.22,.72,.2,1);
  }
  #about .about-principles > .workflow-card.is-cursor-active .workflow-card__top,
  #about .about-principles > .workflow-card.is-cursor-active h3,
  #about .about-principles > .workflow-card.is-cursor-active p {
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  }
  #about .about-principles > .workflow-card.is-cursor-active .workflow-card__icon {
    box-shadow: 0 0 0 4px rgba(255,23,56,.03), 0 0 20px rgba(255,23,56,.16);
  }
  .cursor-card-edge {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      145px circle at var(--cursor-x) var(--cursor-y),
      rgba(255,255,255,.72),
      rgba(255,23,56,.48) 28%,
      transparent 64%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 240ms ease;
  }
  #workflow .workflow__steps > .workflow-card.is-cursor-active .cursor-card-edge,
  #about .about-principles > .workflow-card.is-cursor-active .cursor-card-edge {
    opacity: .72;
  }
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce) {
  .cursor-card-glow,
  .cursor-card-edge,
  #workflow .workflow__route-hover { display:none !important; }
}


/* ============================================================
   Responsive header and hero
   ============================================================ */
/* The script creates this button at every width. Hide it by default;
   the mobile breakpoint below enables and positions it with display: grid. */
.mobile-nav-toggle { display: none; }

/* Responsive phase 1: header + hero. Wide desktop remains untouched; intermediate desktop begins at 1399px. */
@media (max-width: 1399px) {
  body { min-width: 0 !important; }
  .hero {
    height: 900px !important;
    min-height: 900px !important;
  }
  .artboard {
    width: auto !important;
    height: 900px !important;
    margin-inline: 40px !important;
    transform: none !important;
  }
  .topbar { width: 100% !important; height: 90px; }
  .brand { left: 0; top: 23px; }
  .brand__mark { width: 44px; height: auto; }
  .brand__dash { width: 24px; margin-inline: 17px; }
  .brand__text strong { font-size: 16px; }
  .nav {
    left: 360px !important;
    top: 34px !important;
    gap: 30px !important;
    font-size: 14px !important;
  }
  .call-btn { right: 0; top: 21px; }

  .hero-copy {
    left: 0 !important;
    top: 158px !important;
    width: min(650px, 64vw) !important;
  }
  .hero-copy h1 { font-size: 58px !important; line-height: 1 !important; }
  .hero-subtitle { width: min(570px, 58vw) !important; font-size: 16px !important; }
  .action--primary { min-width: 320px; }

  .hero__portrait-scene img {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: 6% 50% !important;
    transform: none !important;
  }
  .hero__left-vignette {
    background: linear-gradient(90deg,#0a0c0e 0%,rgba(10,12,14,.98) 24%,rgba(10,12,14,.86) 43%,rgba(10,12,14,.34) 61%,transparent 77%) !important;
  }
  .experience-accent { right: 0 !important; top: 145px !important; width: 232px !important; transform: none !important; }
  .experience-accent__art { width: 222px !important; }
  .experience-accent__copy { font-size: 12.8px !important; }

  .card-row {
    left: 0 !important;
    top: 515px !important;
    width: min(100%, 960px) !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  .insurance-card { width: 100% !important; height: 230px !important; border-radius: 18px; }
  .insurance-card__icon,
  .insurance-card:nth-child(1) .insurance-card__icon,
  .insurance-card:nth-child(4) .insurance-card__icon { top: 108px !important; }
  .insurance-card h2 { top: 149px !important; right: 52px; font-size: 15px; }
  .insurance-card p { top: 188px !important; right: 54px; font-size: 10.5px; }
  .insurance-card__cta { right: 14px; bottom: 14px; width: 40px; height: 40px; }

  .benefits { left: 0 !important; top: 780px !important; width: 100%; }
  .benefit { flex: 1 1 0; min-width: 0; padding-inline: 22px; font-size: 13px; white-space: normal; }
}

@media (max-width: 1080px) {
  .artboard { margin-inline: 32px !important; }
  .nav { left: 330px !important; gap: 22px !important; font-size: 13px !important; }
  .call-btn { font-size: 13px; gap: 9px; }
  .call-btn > .call-btn__icon { transform: scale(.94); }
  .experience-accent { width: 205px !important; }
  .experience-accent__art { width: 196px !important; }
  .experience-accent__copy { font-size: 11.8px !important; }
  .hero-copy { width: 610px !important; }
  .hero-copy h1 { font-size: 54px !important; }
  .card-row { width: 100% !important; }
}

@media (max-width: 900px) {
  .hero {
    height: 1120px !important;
    min-height: 1120px !important;
  }
  .artboard {
    height: 1120px !important;
    margin-inline: 28px !important;
  }
  .topbar { height: 84px; }
  .brand {
    left: var(--header-inner-pad);
    top: 20px;
  }
  .brand__mark { width: 41px; height: auto; }
  .brand__dash { width: 21px; margin-left: 15px; margin-right: 15px; }
  .brand__text strong { font-size: 15px; }
  .brand__text small { font-size: 10px; }

  .topbar__menu-panel {
    position: fixed !important;
    z-index: 1002;
    left: var(--header-gutter) !important;
    right: var(--header-gutter) !important;
    top: 88px !important;
    width: auto !important;
    display: block !important;
    max-height: calc(100dvh - 104px);
    overflow: auto;
    padding: 8px !important;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: linear-gradient(180deg,rgba(16,18,21,.97),rgba(8,10,12,.95));
    box-shadow: 0 20px 48px rgba(0,0,0,.42);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    backdrop-filter: blur(18px) saturate(118%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .24s ease, transform .28s cubic-bezier(.22,.72,.2,1), visibility .24s ease;
  }

  .topbar.mobile-nav-open .topbar__menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .topbar .nav {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .topbar .nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14px;
  }

  .topbar .nav a:hover { background: rgba(255,255,255,.035); }
  .topbar.header-float-active .nav a::after { bottom: 5px; }

  .mobile-nav-toggle {
    position: absolute;
    right: var(--header-inner-pad);
    top: 22px;
    z-index: 1003;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    background: rgba(9,11,13,.34);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-toggle__lines,
  .mobile-nav-toggle__lines::before,
  .mobile-nav-toggle__lines::after {
    width: 16px;
    height: 1px;
    display: block;
    background: currentColor;
    transition: transform .24s ease, opacity .2s ease;
  }
  .mobile-nav-toggle__lines { position: relative; }
  .mobile-nav-toggle__lines::before,
  .mobile-nav-toggle__lines::after { content: ""; position: absolute; left: 0; }
  .mobile-nav-toggle__lines::before { top: -5px; }
  .mobile-nav-toggle__lines::after { top: 5px; }
  .topbar.mobile-nav-open .mobile-nav-toggle__lines { background: transparent; }
  .topbar.mobile-nav-open .mobile-nav-toggle__lines::before { top: 0; transform: rotate(45deg); }
  .topbar.mobile-nav-open .mobile-nav-toggle__lines::after { top: 0; transform: rotate(-45deg); }

  .call-btn {
    right: calc(var(--header-inner-pad) + 42px + var(--header-action-gap)) !important;
    top: 20px !important;
  }
  .call-btn__label { display: inline !important; }
  .call-btn > .call-btn__icon { margin: 0 !important; }

  .hero-copy {
    top: 142px !important;
    width: min(650px, calc(100vw - 56px)) !important;
  }
  .hero-copy h1 { font-size: clamp(46px, 6.5vw, 56px) !important; }
  .hero-subtitle { width: min(560px, 78vw) !important; font-size: 15.5px !important; }
  .actions { margin-top: 30px; }

  .hero__portrait-scene img {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 760px !important;
    object-fit: cover !important;
    object-position: 20% 0 !important;
    opacity: .88;
  }
  .hero__left-vignette {
    background: linear-gradient(90deg,#0a0c0e 0%,rgba(10,12,14,.93) 24%,rgba(10,12,14,.56) 48%,rgba(10,12,14,.16) 68%,transparent 84%) !important;
  }
  .experience-accent {
    display: block !important;
    right: 0 !important;
    top: 438px !important;
    width: 150px !important;
  }
  .experience-accent__art { width: 144px !important; }
  .experience-accent__copy { margin-top: 4px !important; font-size: 10.5px !important; letter-spacing: .13em !important; }

  .card-row {
    top: 525px !important;
    width: 100% !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
  }
  .insurance-card { height: 225px !important; }
  .insurance-card__icon,
  .insurance-card:nth-child(1) .insurance-card__icon,
  .insurance-card:nth-child(4) .insurance-card__icon { top: 106px !important; }
  .insurance-card h2 { top: 148px !important; font-size: 16px; }
  .insurance-card p { top: 188px !important; font-size: 11px; }
  .benefits { top: 1010px !important; }
  .benefit { padding-inline: 15px; font-size: 12px; gap: 10px; }
  .benefit svg { width: 34px; height: 34px; }

  .topbar.header-float-active {
    height: 82px !important;
    transform: none !important;
  }
  .topbar.header-float-active::before {
    left: 0;
    right: 0;
    top: 8px;
    bottom: 8px;
  }
  .topbar.header-float-active .brand {
    left: var(--header-inner-pad);
  }
  .topbar.header-float-active .mobile-nav-toggle {
    right: var(--header-inner-pad);
  }
  .topbar.header-float-active .call-btn {
    right: calc(var(--header-inner-pad) + 42px + var(--header-action-gap)) !important;
  }
}

@media (max-width: 600px) {
  .hero {
    height: 1390px !important;
    min-height: 1390px !important;
  }
  .artboard {
    height: 1390px !important;
    margin-inline: 18px !important;
  }
  .brand__dash { width: 16px; margin-inline: 11px; }
  .brand__text strong { font-size: 13.5px; }
  .brand__text small { font-size: 9px; }
  .mobile-nav-toggle { top: 20px; }
  .call-btn { top: 18px !important; }

  .hero-copy {
    top: 126px !important;
    width: calc(100vw - 36px) !important;
  }
  .hero-copy h1 {
    font-size: clamp(38px, 10.6vw, 48px) !important;
    line-height: 1.02 !important;
    transform: none;
  }
  .hero-subtitle {
    width: 100% !important;
    margin-top: 20px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    transform: none;
  }
  .actions {
    width: 100%;
    margin-top: 27px !important;
    display: block !important;
    transform: none;
  }
  /* Mobile hero: keep the primary CTA in flow, while the consultation action
     forms a second visual row aligned with the 10+ years accent. */
  .hero-copy .action--ghost {
    position: absolute !important;
    left: 3px !important;
    /* Exact vertical centering against the visible 10+ SVG artwork.
       SVG aspect ratio: 759.6×225; at 122px wide its rendered height is ~36.1px.
       Artboard center: 472 + 18.05 = 490.05px.
       hero-copy starts at 126px; ghost action is 24px tall from its SVG icon. */
    top: 352px !important;
    margin: 0 !important;
    z-index: 24 !important;
  }
  .action--primary {
    width: min(100%, 340px) !important;
    min-width: 0 !important;
    height: 68px !important;
    padding-inline: 24px !important;
    font-size: 11.7px !important;
  }
  .action--ghost { padding-left: 3px !important; font-size: 14px !important; }

  .hero__portrait-scene img {
    left: 0 !important;
    top: 55px !important;
    width: 100% !important;
    height: 680px !important;
    object-fit: cover !important;
    object-position: 25% 0 !important;
    opacity: .68;
  }
  .experience-accent {
    right: -2px !important;
    top: 472px !important;
    width: 128px !important;
  }
  .experience-accent__art { width: 122px !important; }
  .experience-accent__copy { font-size: 9.5px !important; }
  .hero__left-vignette {
    background:
      linear-gradient(180deg,rgba(9,11,13,.10) 0%,rgba(9,11,13,.16) 34%,rgba(9,11,13,.78) 57%,#090b0d 100%),
      linear-gradient(90deg,rgba(9,11,13,.82) 0%,rgba(9,11,13,.42) 46%,rgba(9,11,13,.10) 72%,transparent 92%) !important;
  }

  .card-row {
    top: 565px !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .insurance-card { height: 235px !important; border-radius: 16px; }
  .insurance-card__icon,
  .insurance-card:nth-child(1) .insurance-card__icon,
  .insurance-card:nth-child(4) .insurance-card__icon {
    left: 14px !important;
    top: 115px !important;
    height: 29px !important;
    max-width: 34px;
  }
  .insurance-card h2 {
    left: 14px !important;
    right: 44px !important;
    top: 151px !important;
    font-size: 14px !important;
  }
  .insurance-card p {
    left: 14px !important;
    right: 14px !important;
    top: 189px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  .insurance-card__cta { right: 12px; bottom: 12px; width: 36px; height: 36px; }
  .insurance-card__cta img { width: 15px; height: 15px; }

  .benefits {
    top: 1062px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .benefit {
    min-height: 76px;
    padding: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
    font-size: 13px;
  }
  .benefit--last { border-bottom: 0; }
  .benefit svg { width: 36px; height: 36px; }

}

@media (max-width: 520px) {
  .call-btn__label { display: none !important; }
}

@media (max-width: 390px) {
  .brand__mark { width: 38px; height: auto; }
  .brand__dash { display: none; }
  .brand__text { margin-left: 10px; }
  .brand__text strong { font-size: 12.5px; }
  .brand__text small { font-size: 8.5px; }
  .hero-copy h1 { font-size: 37px !important; }
  .insurance-card h2 { font-size: 13px !important; }
}

@media (hover: none), (pointer: coarse) {
  .insurance-card:hover .insurance-card__media { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .nav,
  .mobile-nav-toggle__lines,
  .mobile-nav-toggle__lines::before,
  .mobile-nav-toggle__lines::after { transition: none !important; }
}


/* ============================================================
   Canonical responsive header geometry
   ============================================================ */
/*
  Canonical header geometry.

  <=1200px:
  - horizontal position is owned by equal left/right gutters;
  - width is AUTO, never calculated from 100vw;
  - the sticky glass stays inside the same box;
  - header controls share one internal inset.

  This prevents scrollbar-width drift and keeps the visible left/right
  margins identical at tablet and mobile widths.

  >=1201px remains owned by the approved 1920px desktop composition.
*/
:root {
  --header-gutter: 40px;
  --header-inner-pad: 12px;
  --header-action-gap: 12px;
}

@media (max-width: 1200px) {
  .hero > .topbar,
  .topbar.header-float-active {
    left: var(--header-gutter) !important;
    right: var(--header-gutter) !important;
    width: auto !important;
    transform: none !important;
  }

  .topbar.header-float-active::before {
    left: 0 !important;
    right: 0 !important;
  }

  .topbar .brand,
  .topbar.header-float-active .brand {
    left: var(--header-inner-pad) !important;
  }
}

.brand__mark,
.brand__mark svg {
  transform: none !important;
  backface-visibility: visible;
}

@media (max-width: 1080px) {
  :root { --header-gutter: 32px; }
}

/*
  At the narrow end of the tablet layout, bring navigation slightly left.
  This preserves breathing room between nav and the phone after the header
  receives its correct symmetric inner padding.
*/
@media (min-width: 901px) and (max-width: 960px) {
  .topbar .nav {
    left: 300px !important;
    gap: 18px !important;
  }
}

@media (max-width: 900px) {
  :root {
    --header-gutter: 28px;
    --header-inner-pad: 10px;
  }
}

@media (max-width: 600px) {
  :root { --header-gutter: 18px; }
}

@media (max-width: 390px) {
  :root { --header-gutter: 14px; }
}


/* ============================================================
   Desktop hero composition
   ============================================================ */
/* Desktop uses the approved 1920px composition. The mobile scene stays in flow
   through display: contents, so its existing breakpoints keep ownership. */
.hero__desktop-scene { display: contents; }
@media (min-width: 1201px) {
  .hero {
    height: calc(941px * var(--hero-scene-scale, 1)) !important;
    min-height: 0 !important;
  }
  .hero__desktop-scene {
    display: block; position: relative; isolation: isolate;
    width: 1920px; height: 941px;
    zoom: var(--hero-scene-scale, 1);
  }
  /* Keep the fade inside the isolated scene: above its background layers,
     below the content, and scaled together with the approved composition. */
  .hero::after { content: none; }
  .hero__desktop-scene::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 210px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--canvas) 94%);
  }
  .hero .artboard {
    width: 1672px !important; height: 941px !important; min-height: 0 !important;
    margin: 0 auto !important; transform: none !important;
  }
  .hero .hero__portrait-scene img {
    left: 660px !important; right: auto !important; top: 0 !important;
    width: auto !important; height: 941px !important; min-height: 0 !important;
    object-fit: cover !important; transform: none !important; opacity: 1;
  }
  .hero .hero-copy { left: 0 !important; top: 158px !important; width: 850px !important; }
  .hero .hero-copy h1 { font-size: 70px !important; line-height: .98 !important; }
  .hero .hero-subtitle { width: 650px !important; margin-top: 24px; font-size: 17px !important; line-height: 1.45; }
  .hero .actions { margin-top: 34px; }
  .hero .experience-accent { right: 0 !important; top: 137px !important; width: 264.5px !important; transform: none !important; }
  .hero .experience-accent__art { width: 253px !important; }
  .hero .experience-accent__copy { font-size: 13.8px !important; }
  .hero .card-row { left: 0 !important; top: 527px !important; width: 1044px !important; grid-template-columns: repeat(4,246px) !important; gap: 20px !important; }
  .hero .insurance-card { width: 289px !important; height: 289px !important; border-radius: 20px; transform: scale(.85); transform-origin: top left; justify-self: start; }
  .hero .insurance-card__icon { top: 146px !important; }
  .hero .insurance-card:nth-child(1) .insurance-card__icon,
  .hero .insurance-card:nth-child(4) .insurance-card__icon { top: 147px !important; }
  .hero .insurance-card h2 { top: 191px !important; right: 61px; font-size: 17px; }
  .hero .insurance-card p { top: 237px !important; right: 65px; font-size: 12px; }
  .hero .insurance-card__cta { right: 18px; bottom: 18px; width: 46px; height: 46px; }
  .hero .benefits { left: 0 !important; top: 823px !important; bottom: auto !important; width: max-content; }
  .hero .benefit { flex: initial; padding-inline: 30px; font-size: 15px; white-space: nowrap; }
  .hero .benefit:first-child { padding-left: 0; }
  .hero .benefit--last { padding-right: 0; }
  .hero > .topbar, .topbar.header-float-active {
    left: calc(124px * var(--hero-scene-scale, 1)) !important;
    width: calc(1672px * var(--hero-scene-scale, 1)) !important;
    height: calc(92px * var(--hero-scene-scale, 1)) !important;
  }
  .topbar .brand { top: calc(24px * var(--hero-scene-scale, 1)); height: calc(44px * var(--hero-scene-scale, 1)); }
  .topbar .brand__mark { width: calc(47px * var(--hero-scene-scale, 1)); }
  .topbar .brand__dash { width: calc(28px * var(--hero-scene-scale, 1)); margin: 0 calc(20px * var(--hero-scene-scale, 1)) 0 calc(22px * var(--hero-scene-scale, 1)); }
  .topbar .brand__text strong { font-size: calc(17px * var(--hero-scene-scale, 1)); }
  .topbar .brand__text small { font-size: calc(11px * var(--hero-scene-scale, 1)); }
  .topbar .nav { left: 25.718% !important; top: calc(35px * var(--hero-scene-scale, 1)) !important; gap: calc(46px * var(--hero-scene-scale, 1)) !important; font-size: calc(15px * var(--hero-scene-scale, 1)) !important; }
  .topbar .call-btn { right: 0; top: calc(23px * var(--hero-scene-scale, 1)); height: calc(46px * var(--hero-scene-scale, 1)); font-size: calc(14px * var(--hero-scene-scale, 1)); gap: calc(13px * var(--hero-scene-scale, 1)); }
  .topbar .call-btn > .call-btn__icon { width: calc(38px * var(--hero-scene-scale, 1)); height: calc(38px * var(--hero-scene-scale, 1)); flex-basis: calc(38px * var(--hero-scene-scale, 1)); }
}
/* Recover the desktop background treatment below the old 1400px boundary. */
@media (min-width: 1201px) and (max-width: 1399px) {
  .hero .hero__left-vignette {
    background: linear-gradient(90deg, #0a0c0e 0%, rgba(10,12,14,.97) 25%, rgba(10,12,14,.79) 42%, rgba(10,12,14,.18) 58%, transparent 69%);
  }
}


/* ============================================================
   Responsive workflow
   ============================================================ */
/* Responsive phase 2 — Workflow.
   Desktop follows the approved Hero model: a 1920×941 composition scales as one scene.
   At 1200px and below the section owns a separate reflow instead of shrinking the desktop layout. */
.workflow__desktop-scene { display: contents; }

@media (min-width: 1201px) {
  #workflow {
    height: calc(941px * var(--hero-scene-scale, 1)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #workflow .workflow__desktop-scene {
    display: block;
    position: relative;
    width: 1920px;
    height: 941px;
    margin: 0;
    zoom: var(--hero-scene-scale, 1);
  }

  #workflow .workflow__inner {
    width: 1672px !important;
    height: 941px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 48px 0 54px !important;
  }

  #workflow .workflow__head { margin-bottom: 38px !important; }
  #workflow .workflow__layout {
    grid-template-columns: 545px minmax(0, 1fr) !important;
    gap: 118px !important;
  }
  #workflow .workflow__intro h2 {
    max-width: 535px !important;
    font-size: 68px !important;
    line-height: .98 !important;
  }
  #workflow .workflow__lead {
    max-width: 500px !important;
    margin-top: 25px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
  #workflow .workflow__promise {
    max-width: 500px !important;
    margin-top: 42px !important;
    padding: 20px 0 20px 27px !important;
  }
  #workflow .workflow__action { margin-top: 28px !important; }
  #workflow .workflow__steps {
    gap: 18px !important;
    margin-top: 232px !important;
  }
  #workflow .workflow-card {
    min-height: 238px !important;
    padding: 28px 30px 26px !important;
    border-radius: 20px !important;
  }
  #workflow .workflow-card__top { margin-bottom: 26px !important; }
  #workflow .workflow-card h3 { font-size: 20px !important; }
  #workflow .workflow-card p { font-size: 13px !important; line-height: 1.5 !important; }
  #workflow .workflow-card:nth-of-type(even) { transform: translateY(42px); }
  #workflow .workflow-card:nth-of-type(even):hover { transform: translateY(38px); }

  #workflow .workflow__object-scene {
    left: 50% !important;
    right: auto !important;
    top: 350px !important;
    bottom: auto !important;
    width: 760px !important;
    margin-left: -745px !important;
    opacity: .36 !important;
  }
}

@media (max-width: 1200px) {
  #workflow {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #workflow .workflow__desktop-scene { display: contents; }
  #workflow .workflow__inner {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 68px clamp(32px, 4.7vw, 56px) 112px !important;
  }
  #workflow .workflow__head { margin-bottom: 40px !important; }
  #workflow .workflow__layout {
    display: block !important;
  }
  #workflow .workflow__intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    column-gap: clamp(42px, 6vw, 72px) !important;
    row-gap: 28px !important;
    align-items: start !important;
  }
  #workflow .workflow__intro h2 {
    grid-column: 1;
    grid-row: 1;
    max-width: 570px !important;
    font-size: clamp(52px, 5.2vw, 62px) !important;
    line-height: 1.02 !important;
  }
  #workflow .workflow__lead {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    max-width: 470px !important;
    margin: 0 0 3px !important;
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
  #workflow .workflow__promise {
    grid-column: 1;
    grid-row: 2;
    max-width: 500px !important;
    margin: 4px 0 0 !important;
  }
  #workflow .workflow__action {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin: 4px 0 0 !important;
  }
  #workflow .workflow__steps {
    margin-top: 58px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  #workflow .workflow-card {
    min-height: 222px !important;
    padding: 27px 28px 25px !important;
    border-radius: 22px !important;
  }
  #workflow .workflow-card:nth-of-type(even) { transform: translateY(32px); }
  #workflow .workflow-card:nth-of-type(even):hover { transform: translateY(28px); }
  #workflow .workflow-card__top { margin-bottom: 25px !important; }
  #workflow .workflow-card h3 { font-size: 18px !important; }
  #workflow .workflow-card p { max-width: 92% !important; font-size: 12.5px !important; }
  #workflow .workflow__object-scene {
    left: auto !important;
    right: -95px !important;
    top: auto !important;
    bottom: 105px !important;
    width: 620px !important;
    margin-left: 0 !important;
    opacity: .18 !important;
  }
}

@media (max-width: 900px) {
  #workflow .workflow__inner {
    padding: 62px 28px 104px !important;
  }
  #workflow .workflow__head { margin-bottom: 32px !important; }
  #workflow .workflow__intro { display: block !important; }
  #workflow .workflow__intro h2 {
    max-width: 650px !important;
    font-size: clamp(48px, 7.3vw, 58px) !important;
  }
  #workflow .workflow__lead {
    max-width: 610px !important;
    margin-top: 26px !important;
    font-size: 15px !important;
  }
  #workflow .workflow__lead br { display: none; }
  #workflow .workflow__promise {
    max-width: 560px !important;
    margin-top: 34px !important;
  }
  #workflow .workflow__action { margin-top: 28px !important; }
  #workflow .workflow__steps {
    margin-top: 48px !important;
    gap: 14px !important;
  }
  #workflow .workflow-card {
    min-height: 218px !important;
    padding: 25px 25px 23px !important;
  }
  #workflow .workflow-card:nth-of-type(even) { transform: translateY(24px); }
  #workflow .workflow-card:nth-of-type(even):hover { transform: translateY(20px); }
  #workflow .workflow__route { inset: 18px -12px -30px !important; width: calc(100% + 24px) !important; height: calc(100% + 48px) !important; }
  #workflow .workflow__object-scene {
    right: -180px !important;
    bottom: 80px !important;
    width: 570px !important;
    opacity: .13 !important;
  }
}

@media (max-width: 700px) {
  #workflow .workflow__inner {
    padding: 56px 18px 86px !important;
  }
  #workflow .workflow__eyebrow { gap: 12px !important; font-size: 10px !important; }
  #workflow .workflow__eyebrow::before { width: 32px !important; }
  #workflow .workflow__head { margin-bottom: 28px !important; }
  #workflow .workflow__intro h2 {
    max-width: 520px !important;
    font-size: clamp(39px, 10.8vw, 50px) !important;
    line-height: 1.04 !important;
  }
  #workflow .workflow__lead {
    margin-top: 24px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  #workflow .workflow__promise {
    margin-top: 32px !important;
    padding: 20px 0 20px 20px !important;
  }
  #workflow .workflow__action { margin-top: 25px !important; }
  #workflow .workflow__steps {
    margin-top: 40px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #workflow .workflow__route { display: none !important; }
  #workflow .workflow-card,
  #workflow .workflow-card:nth-of-type(even),
  #workflow .workflow-card:hover,
  #workflow .workflow-card:nth-of-type(even):hover {
    min-height: 202px !important;
    padding: 25px 24px 23px !important;
    border-radius: 18px !important;
    transform: none !important;
  }
  #workflow .workflow-card__top { margin-bottom: 23px !important; }
  #workflow .workflow-card h3 { font-size: 18px !important; }
  #workflow .workflow-card p { max-width: 80% !important; font-size: 12.5px !important; line-height: 1.5 !important; }
  #workflow .workflow-card__graphic { width: 138px !important; height: 138px !important; }
  #workflow .workflow__object-scene {
    right: -205px !important;
    bottom: 26% !important;
    width: 520px !important;
    opacity: .1 !important;
  }

  html.motion-ready #workflow .workflow-card:nth-of-type(1) { --workflow-card-delay: 150ms; }
  html.motion-ready #workflow .workflow-card:nth-of-type(2) { --workflow-card-delay: 320ms; }
  html.motion-ready #workflow .workflow-card:nth-of-type(3) { --workflow-card-delay: 490ms; }
  html.motion-ready #workflow .workflow-card:nth-of-type(4) { --workflow-card-delay: 660ms; }
}

@media (max-width: 420px) {
  #workflow .workflow__inner { padding-inline: 16px !important; }
  #workflow .workflow__intro h2 { font-size: clamp(37px, 10.5vw, 43px) !important; }
  #workflow .workflow__promise strong { font-size: 14px; }
  #workflow .workflow__promise span { font-size: 12.5px; }
  #workflow .workflow__action { font-size: 14px; gap: 11px; }
  #workflow .workflow__action-icon { width: 42px; height: 42px; }
  #workflow .workflow-card p { max-width: 86% !important; }
}


/* ============================================================
   Responsive services
   ============================================================ */
/* Responsive phase 3 — Services.
   1201px+ follows the approved Hero/Workflow model: a fixed 1920×941 scene scales as one composition.
   1200px and below switches to purpose-built tablet/mobile reflow. */
.services__desktop-scene { display: contents; }

@media (min-width: 1201px) {
  #services {
    height: calc(941px * var(--hero-scene-scale, 1)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #services::before {
    width: calc(760px * var(--hero-scene-scale, 1));
    height: calc(760px * var(--hero-scene-scale, 1));
    top: calc(155px * var(--hero-scene-scale, 1));
    filter: blur(calc(10px * var(--hero-scene-scale, 1)));
  }
  #services .services__desktop-scene {
    display: block;
    position: relative;
    width: 1920px;
    height: 941px;
    margin: 0;
    zoom: var(--hero-scene-scale, 1);
  }
  #services .services-showcase__inner {
    width: 1672px !important;
    height: 941px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 48px 0 54px !important;
  }
  #services .services-showcase__title {
    top: 96px !important;
    font-size: 68px !important;
    line-height: .98 !important;
  }
  #services .services-showcase__main {
    top: 220px !important;
    bottom: 72px !important;
  }
  #services .services-tabs { width: 300px !important; }
  #services .services-tab { min-height: 74px !important; }
  #services .services-visual {
    left: 205px !important;
    right: 90px !important;
    top: -78px !important;
    bottom: -64px !important;
  }
  #services .services-detail {
    right: 0 !important;
    bottom: 22px !important;
    width: 460px !important;
    min-height: 522px !important;
    border-radius: 18px !important;
  }
  #services .services-panel { padding: 30px 34px 28px !important; }
  #services .services-panel h3 { font-size: 39px !important; }
  #services .service-product { min-height: 53px !important; }
}

@media (max-width: 1200px) {
  #services {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #services .services__desktop-scene { display: contents; }
  #services .services-showcase__inner {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 68px clamp(32px, 4.7vw, 56px) 106px !important;
  }
  #services .services-showcase__top {
    gap: 28px;
  }
  #services .services-showcase__title {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 31px 0 0 !important;
    font-size: clamp(52px, 5.2vw, 62px) !important;
    line-height: 1.02 !important;
  }
  #services .services-showcase__main {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr) !important;
    grid-template-areas:
      "tabs tabs"
      "visual detail" !important;
    column-gap: clamp(26px, 4vw, 46px) !important;
    row-gap: 34px !important;
    margin-top: 46px !important;
  }
  #services .services-tabs {
    grid-area: tabs;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    transform: none !important;
    border-top: 0 !important;
    background: none !important;
  }
  #services .services-tab {
    min-height: 64px !important;
    grid-template-columns: 31px 1fr !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.018) !important;
  }
  #services .services-tab::before {
    left: -1px !important;
    top: 14px !important;
    bottom: 14px !important;
    border-radius: 999px;
  }
  #services .services-tab:hover { transform: none !important; }
  #services .services-tab[aria-selected="true"] {
    padding-left: 18px !important;
    border-color: rgba(255,23,56,.42) !important;
    background: linear-gradient(90deg, rgba(255,23,56,.105), rgba(255,23,56,.025) 68%, rgba(255,255,255,.016)) !important;
  }
  #services .services-visual {
    grid-area: visual;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    min-width: 0 !important;
    min-height: 510px !important;
    height: 510px !important;
    margin: 0 !important;
    overflow: hidden !important;
    align-self: stretch;
  }
  #services .services-visual__item { justify-content: center !important; }
  #services .services-visual__item img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
  }
  #services .services-detail {
    grid-area: detail;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 510px !important;
    margin: 0 !important;
    align-self: stretch;
  }
  #services .services-panel {
    padding: 30px clamp(26px, 3vw, 34px) 27px !important;
  }
  #services .services-panel h3 {
    font-size: clamp(34px, 3.5vw, 39px) !important;
  }
  #services .services-panel__description {
    min-height: 0 !important;
  }
}

@media (max-width: 900px) {
  #services .services-showcase__inner {
    padding: 62px 28px 100px !important;
  }
  #services .services-showcase__brand-note {
    max-width: 250px;
    text-align: right;
    line-height: 1.35;
  }
  #services .services-showcase__title {
    font-size: clamp(48px, 7.3vw, 58px) !important;
  }
  #services .services-showcase__main {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "tabs"
      "visual"
      "detail" !important;
    gap: 0 !important;
    margin-top: 42px !important;
  }
  #services .services-tabs {
    margin-bottom: 30px;
  }
  #services .services-tab {
    min-height: 60px !important;
    padding-inline: 12px !important;
  }
  #services .services-tab[aria-selected="true"] { padding-left: 16px !important; }
  #services .services-tab__label { font-size: 14px; }
  #services .services-visual {
    width: 100% !important;
    max-width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    margin: 0 0 16px !important;
  }
  #services .services-detail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 510px !important;
    margin-top: 0 !important;
    justify-self: stretch !important;
    z-index: 8;
  }
  #services .services-panel { padding: 30px 30px 28px !important; }
}

@media (max-width: 700px) {
  #services .services-showcase__inner {
    padding: 56px 18px 88px !important;
  }
  #services .services-showcase__top { display: block !important; }
  #services .services-showcase__eyebrow {
    gap: 12px !important;
    font-size: 10px !important;
  }
  #services .services-showcase__eyebrow::before { width: 32px !important; }
  #services .services-showcase__brand-note { display: none !important; }
  #services .services-showcase__title {
    margin-top: 28px !important;
    font-size: clamp(39px, 10.8vw, 50px) !important;
    line-height: 1.04 !important;
  }
  #services .services-showcase__main { margin-top: 34px !important; }
  #services .services-tabs {
    width: calc(100vw - 18px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 -18px 24px 0 !important;
    padding: 0 18px 5px 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  #services .services-tabs::-webkit-scrollbar { display: none; }
  #services .services-tab {
    flex: 0 0 auto !important;
    min-width: 168px !important;
    min-height: 56px !important;
    grid-template-columns: 26px 1fr !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    scroll-snap-align: start;
  }
  #services .services-tab + .services-tab { margin-left: 7px !important; }
  #services .services-tab::before { display: none !important; }
  #services .services-tab[aria-selected="true"] {
    padding-left: 12px !important;
    border-color: rgba(255,23,56,.62) !important;
    background: rgba(255,23,56,.13) !important;
  }
  #services .services-tab__number { font-size: 11px; }
  #services .services-tab__label { font-size: 13.5px; }
  #services .services-visual {
    height: 350px !important;
    min-height: 350px !important;
    margin-bottom: 16px !important;
  }
  #services .services-detail {
    min-height: 552px !important;
    margin-top: 0 !important;
    border-radius: 18px !important;
  }
  #services .services-panel {
    padding: 28px 23px 26px !important;
  }
  #services .services-panel__count { margin-bottom: 20px !important; }
  #services .services-panel h3 {
    max-width: 100% !important;
    font-size: clamp(30px, 8vw, 35px) !important;
  }
  #services .services-panel__description {
    max-width: 100% !important;
    margin: 14px 0 20px !important;
    font-size: 12.5px !important;
  }
  #services .service-product { min-height: 50px !important; }
  #services .service-product span:first-child { font-size: 12.5px !important; }
}

@media (max-width: 420px) {
  #services .services-showcase__inner { padding-inline: 16px !important; }
  #services .services-showcase__title { font-size: clamp(37px, 10.5vw, 43px) !important; }
  #services .services-tabs {
    width: calc(100vw - 16px) !important;
    margin-right: -16px !important;
    padding-right: 16px !important;
  }
  #services .services-tab { min-width: 158px !important; }
  #services .services-visual {
    height: 305px !important;
    min-height: 305px !important;
  }
  #services .services-detail { min-height: 560px !important; }
  #services .services-panel { padding: 26px 20px 24px !important; }
  #services .services-panel h3 { font-size: 29px !important; }
  #services .services-panel__hint { font-size: 9.5px !important; }
  #services .services-online-cta {
    min-height: 54px;
    padding-inline: 13px 11px;
  }
  #services .services-online-cta strong { font-size: 11.75px; }
}

@media (hover: none), (pointer: coarse) {
  #services .services-tab:hover { transform: none !important; }
  #services .service-product:hover { padding-left: 0; }
  #services .service-product:hover span:last-child { transform: none; }
}


/* ============================================================
   Responsive about
   ============================================================ */
/* Responsive phase 4 — About.
   1201px+ preserves the approved desktop composition as a 1920×941 scene.
   1200px and below switches to a purpose-built tablet/mobile reflow, matching Workflow. */
.about__desktop-scene { display: contents; }

@media (min-width: 1201px) {
  #about {
    height: calc(941px * var(--hero-scene-scale, 1)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #about .about__desktop-scene {
    display: block;
    position: relative;
    width: 1920px;
    height: 941px;
    margin: 0;
    zoom: var(--hero-scene-scale, 1);
  }
  #about .tail-section__inner {
    width: 1672px !important;
    height: 941px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 70px 0 64px !important;
  }
  #about .tail-title {
    font-size: 58px !important;
    line-height: 1.08 !important;
  }
  #about .about-layout {
    grid-template-columns: 600px minmax(0, 1fr) !important;
    gap: 108px !important;
    margin-top: 72px !important;
  }
  #about .about-copy { max-width: 600px !important; }
  #about .about-copy__lead { max-width: 590px !important; font-size: 31px !important; }
  #about .about-copy__text { max-width: 560px !important; }
  #about .about-quote { max-width: 555px !important; margin-top: 32px !important; }
  #about .about-principles { gap: 22px !important; padding: 0 0 49px !important; }
  #about .workflow-card { min-height: 232px !important; }
  #about .workflow-card:nth-of-type(even) { transform: translateY(49px); }
  #about .workflow-card:nth-of-type(even):hover { transform: translateY(45px); }
  #about .about-scene {
    left: 100px !important;
    right: auto !important;
    bottom: 55px !important;
    width: 760px !important;
    opacity: .43 !important;
  }
}

@media (max-width: 1200px) {
  #about {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #about .about__desktop-scene { display: contents; }
  #about .tail-section__inner {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 68px clamp(32px, 4.7vw, 56px) 112px !important;
  }
  #about .tail-title {
    font-size: clamp(52px, 5.2vw, 62px) !important;
    line-height: 1.02 !important;
  }
  #about .about-layout {
    display: block !important;
    margin-top: 52px !important;
  }
  #about .about-copy {
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    column-gap: clamp(42px, 6vw, 72px) !important;
    row-gap: 24px !important;
    align-items: start;
  }
  #about .about-copy__lead {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: 530px !important;
    font-size: clamp(27px, 2.8vw, 31px) !important;
    line-height: 1.38 !important;
  }
  #about .about-copy__text {
    grid-column: 2;
    grid-row: 1;
    max-width: 490px !important;
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.68 !important;
  }
  #about .about-quote {
    grid-column: 2;
    grid-row: 2;
    max-width: 490px !important;
    margin: 2px 0 0 !important;
    padding: 0 0 0 23px !important;
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }
  #about .about-principles {
    margin-top: 56px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 0 34px !important;
  }
  #about .workflow-card {
    min-height: 222px !important;
    padding: 27px 28px 25px !important;
    border-radius: 22px !important;
  }
  #about .workflow-card:nth-of-type(even) { transform: translateY(32px); }
  #about .workflow-card:nth-of-type(even):hover { transform: translateY(28px); }
  #about .workflow-card__top { margin-bottom: 25px !important; }
  #about .workflow-card h3 { font-size: 18px !important; }
  #about .workflow-card p { max-width: 92% !important; font-size: 12.5px !important; }
  #about .about-principles__route {
    inset: 18px -12px -30px !important;
    width: calc(100% + 24px) !important;
    height: calc(100% + 48px) !important;
  }
  #about .about-scene {
    left: auto !important;
    right: -95px !important;
    bottom: 88px !important;
    width: 620px !important;
    opacity: .16 !important;
  }
}

@media (max-width: 900px) {
  #about .tail-section__inner {
    padding: 62px 28px 104px !important;
  }
  #about .tail-title {
    max-width: 700px;
    font-size: clamp(48px, 7.3vw, 58px) !important;
  }
  #about .about-layout { margin-top: 44px !important; }
  #about .about-copy { display: block !important; }
  #about .about-copy__lead {
    max-width: 650px !important;
    font-size: 29px !important;
  }
  #about .about-copy__text {
    max-width: 620px !important;
    margin-top: 25px !important;
    font-size: 14.5px !important;
  }
  #about .about-quote {
    max-width: 590px !important;
    margin-top: 30px !important;
    padding-left: 22px !important;
  }
  #about .about-principles {
    margin-top: 48px !important;
    gap: 14px !important;
  }
  #about .workflow-card {
    min-height: 218px !important;
    padding: 25px 25px 23px !important;
  }
  #about .workflow-card:nth-of-type(even) { transform: translateY(24px); }
  #about .workflow-card:nth-of-type(even):hover { transform: translateY(20px); }
  #about .about-scene {
    right: -180px !important;
    bottom: 84px !important;
    width: 570px !important;
    opacity: .12 !important;
  }
}

@media (max-width: 700px) {
  #about .tail-section__inner {
    padding: 56px 18px 86px !important;
  }
  #about .tail-kicker { gap: 12px !important; font-size: 10px !important; }
  #about .tail-kicker::before { width: 32px !important; }
  #about .tail-title {
    font-size: clamp(39px, 10.8vw, 50px) !important;
    line-height: 1.04 !important;
  }
  #about .about-layout { margin-top: 38px !important; }
  #about .about-copy__lead {
    max-width: 520px !important;
    font-size: clamp(24px, 7vw, 28px) !important;
    line-height: 1.42 !important;
  }
  #about .about-copy__text {
    margin-top: 23px !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }
  #about .about-quote {
    margin-top: 28px !important;
    padding-left: 20px !important;
    font-size: 13px !important;
  }
  #about .about-principles {
    margin-top: 38px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-bottom: 0 !important;
  }
  #about .about-principles__route { display: none !important; }
  #about .workflow-card,
  #about .workflow-card:nth-of-type(even),
  #about .workflow-card:hover,
  #about .workflow-card:nth-of-type(even):hover {
    min-height: 202px !important;
    padding: 25px 24px 23px !important;
    border-radius: 18px !important;
    transform: none !important;
  }
  #about .workflow-card__top { margin-bottom: 23px !important; }
  #about .workflow-card h3 { font-size: 18px !important; }
  #about .workflow-card p { max-width: 80% !important; font-size: 12.5px !important; line-height: 1.5 !important; }
  #about .workflow-card__graphic { width: 138px !important; height: 138px !important; }
  #about .about-scene {
    right: -205px !important;
    bottom: 24% !important;
    width: 520px !important;
    opacity: .09 !important;
  }

  html.motion-ready #about .about-principles > .workflow-card:nth-of-type(1) { --about-card-delay: 150ms; }
  html.motion-ready #about .about-principles > .workflow-card:nth-of-type(2) { --about-card-delay: 320ms; }
  html.motion-ready #about .about-principles > .workflow-card:nth-of-type(3) { --about-card-delay: 490ms; }
  html.motion-ready #about .about-principles > .workflow-card:nth-of-type(4) { --about-card-delay: 660ms; }
}

@media (max-width: 420px) {
  #about .tail-section__inner { padding-inline: 16px !important; }
  #about .tail-title { font-size: clamp(37px, 10.5vw, 43px) !important; }
  #about .about-copy__lead { font-size: clamp(23px, 6.6vw, 26px) !important; }
  #about .about-copy__text { font-size: 13.5px !important; }
  #about .about-quote { font-size: 12.5px !important; }
  #about .workflow-card p { max-width: 86% !important; }
}


/* ============================================================
   Footer structure
   ============================================================ */
/*
  Footer was separated from Contacts.
  It is no longer inside a positioned scene, so restore the original
  visual placement through normal document flow.
*/
.site-footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(1672px, calc(100% - 96px));
  margin: 0 auto;
  padding: 24px 0 32px;
  box-sizing: border-box;
}

@media (max-width:1180px) {
  .site-footer {
    width: calc(100% - 56px);
    padding: 32px 0 42px;
  }
}

@media (max-width:700px) {
  .site-footer {
    width: auto;
    margin: 0 18px;
    padding: 28px 0 32px;
    display: block;
  }

  .site-footer span {
    display: block;
  }
}


/* ============================================================
   Contacts desktop scene
   ============================================================ */
/* Responsive phase 5 — Contacts architecture only.
   Desktop: 1920×941 scene with a 1672px inner artboard, matching Workflow/Services/About.
   The existing Contacts composition is intentionally left unchanged. Footer stays outside #contacts. */
.contacts__desktop-scene { display: contents; }

@media (min-width: 1201px) {
  #contacts {
    height: calc(941px * var(--hero-scene-scale, 1)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #contacts .contacts__desktop-scene {
    display: block;
    position: relative;
    width: 1920px;
    height: 941px;
    margin: 0;
    zoom: var(--hero-scene-scale, 1);
  }

  #contacts .contacts-functional__inner {
    width: 1672px !important;
    height: 941px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 1200px) {
  #contacts {
    height: auto !important;
    min-height: 0 !important;
  }

  #contacts .contacts__desktop-scene {
    display: contents;
  }
}


/* ============================================================
   Contacts desktop composition
   ============================================================ */
/* Phase 6 — lock Contacts to one approved desktop composition.
   The scene is always 1920px wide on desktop, so its internal geometry must
   not switch according to the physical viewport width. Mobile/tablet remain untouched. */
@media (min-width: 1201px) {
  #contacts .contacts-functional__stage {
    max-width: 1672px !important;
    grid-template-columns: 720px minmax(0, 1fr) !important;
    gap: 96px !important;
    margin: 48px 0 28px !important;
    align-items: start !important;
  }

  #contacts .contact-portrait {
    min-height: 625px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #contacts .contact-portrait__image {
    position: absolute !important;
    left: 50% !important;
    top: -200px !important;
    transform: translateX(-50%) !important;
    width: 700px !important;
    max-width: none !important;
    height: 875px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin-left: -20px !important;
  }

  #contacts .contact-signature {
    width: 280px !important;
    top: -135px !important;
    right: -8px !important;
  }

  #contacts .contact-signature .experience-accent__copy {
    margin-top: -20px !important;
  }
}


/* ============================================================
   Tablet and mobile contacts/footer
   ============================================================ */
/*
  Tablet/mobile audit — phase 2.
  Canonical scene boundary: 1200px.
  Desktop >=1201px is untouched.
  Tablet/mobile gutters follow the same rhythm across Workflow/Services/About/Contacts/Footer.
*/
@media (max-width: 1200px) {
  html { scroll-padding-top: 112px; }
  #workflow, #services, #about, #contacts { scroll-margin-top: 112px; }

  #contacts {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #contacts .contacts__desktop-scene { display: contents !important; }

  #contacts .contacts-functional__inner {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 68px clamp(32px, 4.7vw, 56px) 32px !important;
  }

  #contacts .contacts-functional__stage {
    position: relative !important;
    inset: auto !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    margin: 40px 0 44px !important;
    align-items: start !important;
  }

  #contacts .contact-portrait {
    min-height: 0 !important;
    width: min(100%, 520px) !important;
    aspect-ratio: 4 / 5 !important;
    justify-self: center !important;
    margin-top: 90px !important;
  }

  #contacts .contact-portrait__image {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin-left: 0 !important;
  }

  #contacts .contact-signature {
    width: 230px !important;
    top: -100px !important;
    right: 0 !important;
  }

  #contacts .contact-signature .experience-accent__copy {
    margin-top: -16px !important;
    font-size: 12px !important;
  }

  .site-footer {
    width: auto !important;
    margin-inline: clamp(32px, 4.7vw, 56px) !important;
    padding: 32px 0 42px !important;
  }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 102px; }
  #workflow, #services, #about, #contacts { scroll-margin-top: 102px; }

  #contacts .contacts-functional__inner {
    padding: 62px 28px 32px !important;
  }

  .site-footer { margin-inline: 28px !important; }
}

@media (max-width: 700px) {
  #contacts .contacts-functional__inner {
    padding: 56px 18px 28px !important;
  }

  #contacts .contact-portrait {
    width: min(100%, 430px) !important;
    margin-top: 130px !important;
  }

  #contacts .contact-signature {
    top: -140px !important;
    width: 220px !important;
    right: 0 !important;
  }

  .site-footer {
    width: auto !important;
    margin-inline: 18px !important;
    padding: 28px 0 32px !important;
  }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 96px; }
  #workflow, #services, #about, #contacts { scroll-margin-top: 96px; }
}

@media (max-width: 420px) {
  #contacts .contacts-functional__inner { padding-inline: 16px !important; }
  .site-footer { margin-inline: 16px !important; }
}


/* ============================================================
   Contacts portrait glow and fade
   ============================================================ */
/*
  Contacts glow — refined atmosphere with restored footer fade.
  Transparent portrait stays above the glow.
  A separate dark overlay restores the soft dissolve into the footer.
*/

#contacts > .section-atmosphere {
  opacity: 0 !important;
}

/* We reuse ::after as the bottom fade layer over the portrait. */
#contacts .contact-portrait {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Disable legacy before-atmosphere. */
#contacts .contact-portrait::before {
  content: none !important;
}

/*
  Bottom dissolve overlay:
  sits ABOVE the portrait, but only softens the lower part and edges,
  so the transition into the dark section/footer becomes smooth again.
*/
#contacts .contact-portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -200px;
  width: 700px;
  height: 875px;
  margin-left: -20px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 78% 34% at 50% 101%,
      rgba(2, 4, 8, .92) 0%,
      rgba(2, 4, 8, .66) 30%,
      rgba(2, 4, 8, .28) 55%,
      rgba(2, 4, 8, .08) 72%,
      transparent 88%
    ),
    linear-gradient(
      180deg,
      rgba(2, 4, 8, 0) 56%,
      rgba(2, 4, 8, .05) 67%,
      rgba(2, 4, 8, .16) 75%,
      rgba(2, 4, 8, .42) 84%,
      rgba(2, 4, 8, .78) 93%,
      rgba(2, 4, 8, .98) 100%
    );
}

#contacts .contact-portrait__image {
  -webkit-mask-image: none !important;
  -webkit-mask-composite: initial !important;
  mask-image: none !important;
  mask-composite: initial !important;
  z-index: 1 !important;
}

#contacts .contact-portrait__glow {
  display: block;
  position: absolute;
  left: 50%;
  top: -218px;
  width: 820px;
  height: 930px;
  margin-left: -20px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;

  background:
    radial-gradient(
      ellipse 68% 50% at 50% 50%,
      rgba(221,118,42,.10) 0%,
      rgba(184,72,31,.055) 44%,
      rgba(148,51,27,.022) 62%,
      transparent 84%
    ),
    radial-gradient(
      ellipse 55% 53% at 25% 48%,
      rgba(248,177,78,.40) 0%,
      rgba(237,145,54,.28) 26%,
      rgba(215,101,36,.16) 46%,
      rgba(176,67,30,.085) 61%,
      rgba(138,44,24,.032) 74%,
      transparent 88%
    ),
    radial-gradient(
      ellipse 55% 53% at 75% 48%,
      rgba(248,177,78,.40) 0%,
      rgba(237,145,54,.28) 26%,
      rgba(215,101,36,.16) 46%,
      rgba(176,67,30,.085) 61%,
      rgba(138,44,24,.032) 74%,
      transparent 88%
    );

  filter: blur(15px);
}

#contacts .contact-signature,
#contacts .experience-accent {
  z-index: 3 !important;
}

@media (max-width: 1200px) {
  #contacts .contact-portrait::after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    transform: none;

    background:
      radial-gradient(
        ellipse 80% 34% at 50% 101%,
        rgba(2, 4, 8, .92) 0%,
        rgba(2, 4, 8, .66) 30%,
        rgba(2, 4, 8, .28) 55%,
        rgba(2, 4, 8, .08) 72%,
        transparent 88%
      ),
      linear-gradient(
        180deg,
        rgba(2, 4, 8, 0) 56%,
        rgba(2, 4, 8, .05) 67%,
        rgba(2, 4, 8, .16) 75%,
        rgba(2, 4, 8, .42) 84%,
        rgba(2, 4, 8, .78) 93%,
        rgba(2, 4, 8, .98) 100%
      );
  }

  #contacts .contact-portrait__glow {
    left: -9%;
    top: -4%;
    width: 118%;
    height: 108%;
    margin-left: 0;
    transform: none;

    background:
      radial-gradient(
        ellipse 68% 50% at 50% 50%,
        rgba(221,118,42,.10) 0%,
        rgba(184,72,31,.055) 44%,
        rgba(148,51,27,.022) 62%,
        transparent 84%
      ),
      radial-gradient(
        ellipse 55% 53% at 25% 48%,
        rgba(248,177,78,.41) 0%,
        rgba(237,145,54,.29) 26%,
        rgba(215,101,36,.16) 46%,
        rgba(176,67,30,.085) 61%,
        rgba(138,44,24,.032) 74%,
        transparent 88%
      ),
      radial-gradient(
        ellipse 55% 53% at 75% 48%,
        rgba(248,177,78,.41) 0%,
        rgba(237,145,54,.29) 26%,
        rgba(215,101,36,.16) 46%,
        rgba(176,67,30,.085) 61%,
        rgba(138,44,24,.032) 74%,
        transparent 88%
      );

    filter: blur(13px);
  }
}

@media (max-width: 700px) {
  #contacts .contact-portrait::after {
    background:
      radial-gradient(
        ellipse 82% 34% at 50% 101%,
        rgba(2, 4, 8, .93) 0%,
        rgba(2, 4, 8, .69) 30%,
        rgba(2, 4, 8, .31) 55%,
        rgba(2, 4, 8, .09) 72%,
        transparent 88%
      ),
      linear-gradient(
        180deg,
        rgba(2, 4, 8, 0) 54%,
        rgba(2, 4, 8, .05) 66%,
        rgba(2, 4, 8, .17) 74%,
        rgba(2, 4, 8, .44) 83%,
        rgba(2, 4, 8, .80) 92%,
        rgba(2, 4, 8, .99) 100%
      );
  }

  #contacts .contact-portrait__glow {
    left: -6%;
    top: -4%;
    width: 112%;
    height: 108%;

    background:
      radial-gradient(
        ellipse 70% 50% at 50% 50%,
        rgba(221,118,42,.105) 0%,
        rgba(184,72,31,.058) 44%,
        rgba(148,51,27,.024) 62%,
        transparent 85%
      ),
      radial-gradient(
        ellipse 56% 54% at 25% 48%,
        rgba(250,181,82,.43) 0%,
        rgba(239,148,56,.30) 26%,
        rgba(216,102,36,.17) 46%,
        rgba(177,68,30,.088) 61%,
        rgba(139,45,24,.034) 74%,
        transparent 89%
      ),
      radial-gradient(
        ellipse 56% 54% at 75% 48%,
        rgba(250,181,82,.43) 0%,
        rgba(239,148,56,.30) 26%,
        rgba(216,102,36,.17) 46%,
        rgba(177,68,30,.088) 61%,
        rgba(139,45,24,.034) 74%,
        transparent 89%
      );

    filter: blur(11px);
  }
}


/* ============================================================
   Canonical section heading scale
   ============================================================ */
/*
  Canonical section-heading scale.
  Hero H1 remains independent.
  Workflow / Services / About / Contacts share one responsive H2 scale.
*/

@media (min-width: 1201px) {
  #workflow .workflow__intro h2,
  #services .services-showcase__title,
  #about .tail-title,
  #contacts .contacts-functional__title {
    font-size: 68px !important;
  }
}

@media (max-width: 1200px) {
  #workflow .workflow__intro h2,
  #services .services-showcase__title,
  #about .tail-title,
  #contacts .contacts-functional__title {
    font-size: clamp(52px, 5.2vw, 62px) !important;
  }
}

@media (max-width: 900px) {
  #workflow .workflow__intro h2,
  #services .services-showcase__title,
  #about .tail-title,
  #contacts .contacts-functional__title {
    font-size: clamp(48px, 7.3vw, 58px) !important;
  }
}

@media (max-width: 700px) {
  #workflow .workflow__intro h2,
  #services .services-showcase__title,
  #about .tail-title,
  #contacts .contacts-functional__title {
    font-size: clamp(39px, 10.8vw, 50px) !important;
  }
}

@media (max-width: 420px) {
  #workflow .workflow__intro h2,
  #services .services-showcase__title,
  #about .tail-title,
  #contacts .contacts-functional__title {
    font-size: clamp(37px, 10.5vw, 43px) !important;
  }
}


/* ============================================================
   Mobile burger active state
   ============================================================ */
/*
  Mobile burger active state.
  Desktop/sticky underline remains unchanged.
  In the opened mobile panel the active item uses a site-native red edge accent
  instead of the centered desktop underline.
*/
@media (max-width: 900px) {
  .topbar__menu-panel .nav a {
    position: relative;
    overflow: hidden;
  }

  .topbar__menu-panel .nav a::after,
  .topbar.header-float-active .topbar__menu-panel .nav a::after {
    content: none !important;
  }

  .topbar__menu-panel .nav a.is-active {
    color: #fff;
    background:
      linear-gradient(90deg, rgba(255,23,56,.085), rgba(255,23,56,0) 58%),
      rgba(255,255,255,.018);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.035);
  }

  .topbar__menu-panel .nav a.is-active::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 2px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      rgba(255,23,56,0),
      rgba(255,23,56,.98) 24%,
      rgba(255,23,56,.98) 76%,
      rgba(255,23,56,0)
    );
    box-shadow:
      0 0 8px rgba(255,23,56,.42),
      0 0 16px rgba(255,23,56,.16);
    transform: translateY(-50%);
  }

  .topbar__menu-panel .nav a.is-active {
    padding-left: 22px;
  }
}


/* ============================================================
   Lead delivery states — server-backed form
   ============================================================ */
.lead-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.lead-form__status {
  min-height: 0;
  margin: 0;
  color: rgba(255,255,255,.56);
  font-size: 10.5px;
  line-height: 1.5;
}

.lead-form__status:empty {
  display: none;
}

.lead-form__status.is-error {
  display: block;
  color: rgba(255,132,142,.96);
}

.lead-form__submit:disabled,
.lead-form.is-submitting .lead-form__submit {
  cursor: wait;
  filter: saturate(.72) brightness(.88);
  opacity: .82;
  box-shadow:
    0 2px 0 #86101d,
    0 6px 14px rgba(156,5,14,.16),
    0 0 24px rgba(255,18,34,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
}