* {
box-sizing: border-box
}

body {
margin: 0;
font-family: 'Inconsolata', monospace;
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
background: #fff
}

@keyframes dash_rotate {
0% {
outline-offset: 2px
}

50% {
outline-offset: 4px
}

100% {
outline-offset: 2px
}
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: 2px dashed #68300F;
outline-offset: 2px;
animation: dash_rotate 1.8s ease-in-out infinite
}

.top_bar {
background: linear-gradient(135deg, #a5adbf14 0%, #ffe8e61f 100%);
backdrop-filter: blur(16px);
border-bottom: 1px solid #a5adbf2e;
padding: 20px 40px 16px;
position: relative;
z-index: 800
}

.top_bar::before {
content: '';
position: absolute;
top: 0;
right: 8%;
width: 140px;
height: 140px;
background: radial-gradient(circle at 30% 40%, #68300f0f, transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1
}

.brand_lock {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 8px
}

.logo_card {
background: linear-gradient(145deg, #68300F, #8a4318);
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 20px -2px #68300f17 0 2px 3px -2px #68300f0f;
border: 1px solid #ffe8e633
}

.logo_card img {
width: 68px;
height: 68px;
object-fit: contain
}

.tagline_small {
font-size: 15px;
color: #68300F;
font-weight: 700;
letter-spacing: -.01em;
margin: 0
}

.nav_row {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #a5adbf24
}

.primary_links {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
list-style: none;
margin: 0;
padding: 0
}

.primary_links li {
margin: 0
}

.primary_links a {
display: inline-block;
padding: 8px 16px;
font-size: 15px;
font-weight: 700;
color: #68300F;
text-decoration: none;
background: #ffe8e680;
border: 1px solid #a5adbf33;
border-radius: 22px;
transition: background .22s ease-out, border-color .18s ease-out, transform .15s ease-out;
position: relative;
overflow: hidden
}

.primary_links a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #a5adbf26, transparent);
transition: left .35s ease-out
}

.primary_links a:hover::before {
left: 100%
}

.primary_links a:hover {
background: #ffe8e6cc;
border-color: #68300f4d;
transform: translateY(-1px)
}

.primary_links a:active {
transform: translateY(0)
}

@media (max-width: 767px) {
.top_bar {
padding: 16px 20px
}

.logo_card {
width: 65px;
height: 65px
}

.logo_card img {
width: 61px;
height: 61px
}

.nav_row {
margin-top: 16px;
padding-top: 16px
}

.primary_links {
gap: 8px
}

.primary_links a {
padding: 8px 16px;
font-size: 15px
}
}

@media (max-width: 389px) {
.top_bar {
padding: 16px
}

.primary_links a {
padding: 8px 16px
}
}

.base_floor {
background: linear-gradient(165deg, #68300F 0%, #4a2109 100%);
color: #fff;
padding: 80px 40px 40px;
position: relative;
overflow: hidden
}

.base_floor::before {
content: '';
position: absolute;
bottom: -60px;
left: -80px;
width: 280px;
height: 280px;
background: radial-gradient(circle at 50% 50%, #a5adbf14, transparent 60%);
border-radius: 50%;
pointer-events: none
}

.base_floor::after {
content: '';
position: absolute;
top: 40px;
right: 10%;
width: 2px;
height: 120px;
background: linear-gradient(to bottom, transparent, #ffe8e64d, transparent);
pointer-events: none
}

.floor_grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: start
}

.contact_block {
display: flex;
flex-direction: column;
gap: 20px
}

.brand_lock_footer {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start
}

.logo_card_footer {
background: linear-gradient(145deg, #ffe8e626, #a5adbf1a);
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 4px 20px -2px #a5adbf17 inset 0 1px 2px #ffffff1a;
border: 1px solid #ffe8e640
}

.logo_card_footer img {
width: 66px;
height: 66px;
object-fit: contain
}

.company_label {
font-size: 19px;
font-weight: 700;
color: #FFE8E6;
margin: 0;
letter-spacing: -.01em
}

.contact_list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px
}

.contact_list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 15px;
line-height: 1.8;
color: #ffffffe6
}

.contact_list li::before {
content: '';
width: 4px;
height: 4px;
background: #A5ADBF;
border-radius: 50%;
margin-top: 8px;
flex-shrink: 0
}

.contact_list a {
color: #FFE8E6;
text-decoration: none;
transition: color .18s ease-out;
border-bottom: 1px solid #ffe8e64d
}

.contact_list a:hover {
color: #A5ADBF;
border-bottom-color: #A5ADBF
}

.nav_block {
display: flex;
flex-direction: column;
gap: 40px
}

.footer_nav_group {
display: flex;
flex-direction: column;
gap: 16px
}

.nav_heading {
font-size: 19px;
font-weight: 700;
color: #FFE8E6;
margin: 0;
letter-spacing: -.01em
}

.footer_links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px
}

.footer_links a {
display: inline-block;
font-size: 15px;
color: #ffffffd9;
text-decoration: none;
transition: color .2s ease-out, transform .15s ease-out;
position: relative;
padding-left: 16px
}

.footer_links a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #A5ADBF;
border-radius: 50%;
transition: width .25s ease-out, background .2s ease-out
}

.footer_links a:hover {
color: #FFE8E6;
transform: translateX(4px)
}

.footer_links a:hover::before {
width: 10px;
background: #FFE8E6
}

.bottom_strip {
max-width: 1200px;
margin: 80px auto 0;
padding-top: 40px;
border-top: 1px solid #ffe8e633;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px
}

.copyright_text {
font-size: 15px;
color: #ffffffb3;
margin: 0
}

.year_range {
color: #A5ADBF;
font-weight: 700
}

@media (max-width: 1279px) {
.floor_grid {
grid-template-columns: 1fr;
gap: 40px
}

.base_floor {
padding: 40px
}

.bottom_strip {
margin-top: 40px;
padding-top: 40px
}
}

@media (max-width: 767px) {
.base_floor {
padding: 40px 20px
}

.floor_grid {
gap: 40px
}

.nav_block {
gap: 40px
}

.bottom_strip {
flex-direction: column;
align-items: flex-start;
margin-top: 40px;
padding-top: 20px
}
}

@media (max-width: 389px) {
.base_floor {
padding: 40px 16px
}

.logo_card_footer {
width: 65px;
height: 65px
}

.logo_card_footer img {
width: 61px;
height: 61px
}
}

.consent_banner {
position: fixed;
top: 20px;
left: 20px;
max-width: 420px;
background: #fff;
border: 2px solid #A5ADBF;
border-radius: 4px;
padding: 20px;
box-shadow: 0 10px 60px -2px #68300f21 0 4px 20px -2px #68300f17;
z-index: 1200;
display: none;
opacity: 0;
transform: translateY(-10px);
transition: opacity .28s ease-out, transform .28s ease-out
}

.consent_banner.visible {
opacity: 1;
transform: translateY(0)
}

.consent_text {
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
margin: 0 0 16px
}

.consent_actions {
display: flex;
gap: 8px
}

.consent_btn {
flex: 1;
padding: 8px 16px;
font-family: 'Inconsolata', monospace;
font-size: 15px;
font-weight: 700;
border: 2px solid #68300F;
border-radius: 38px;
cursor: pointer;
transition: background .2s ease-out, color .2s ease-out, transform .15s ease-out;
position: relative;
overflow: hidden
}

.consent_accept {
background: #68300F;
color: #fff
}

.consent_accept:hover {
background: #8a4318;
transform: translateY(-1px)
}

.consent_accept:active {
transform: translateY(0)
}

.consent_decline {
background: transparent;
color: #68300F
}

.consent_decline:hover {
background: #68300f14;
transform: translateY(-1px)
}

.consent_decline:active {
transform: translateY(0)
}

.consent_btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #fff3;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width .4s ease-out, height .4s ease-out
}

.consent_btn:active::after {
width: 200px;
height: 200px
}

@media (max-width: 767px) {
.consent_banner {
left: 16px;
right: 16px;
max-width: calc(100% - 32px)
}
}

@media (max-width: 389px) {
.consent_banner {
top: 16px;
left: 16px;
right: 16px;
max-width: calc(100% - 32px);
padding: 16px
}

.consent_actions {
flex-direction: column
}
}

.policy-details {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
background: #fff
}

.policy-details h1 {
font-size: 70px;
line-height: 1.2;
color: #68300F;
margin: 0 0 40px;
letter-spacing: -.02em
}

.policy-details h2 {
font-size: 41px;
line-height: 1.2;
color: #68300F;
margin: 80px 0 20px;
letter-spacing: -.01em
}

.policy-details h3 {
font-size: 24px;
line-height: 1.2;
color: #68300F;
margin: 40px 0 16px
}

.policy-details h4 {
font-size: 19px;
line-height: 1.2;
color: #68300F;
margin: 40px 0 16px
}

.policy-details h5 {
font-size: 19px;
line-height: 1.2;
color: #68300F;
margin: 40px 0 16px
}

.policy-details h6 {
font-size: 15px;
line-height: 1.2;
color: #68300F;
margin: 40px 0 16px;
text-transform: uppercase;
letter-spacing: .05em
}

.policy-details p {
font-size: 19px;
line-height: 1.8;
color: #1a0a05;
margin: 0 0 20px
}

.policy-details ul {
margin: 0 0 20px;
padding: 0 0 0 40px;
list-style-type: disc
}

.policy-details ol {
margin: 0 0 20px;
padding: 0 0 0 40px;
list-style-type: decimal
}

.policy-details li {
font-size: 19px;
line-height: 1.8;
color: #1a0a05;
margin: 0 0 8px
}

.policy-details li ul {
margin: 8px 0 0
}

.policy-details li ol {
margin: 8px 0 0
}

.policy-details em {
font-style: italic;
color: #68300F
}

.policy-details i {
font-style: italic;
color: #68300F
}

.policy-details strong {
font-weight: 600;
color: #68300F
}

.policy-details a {
color: #68300F;
text-decoration: underline;
text-decoration-color: #68300f4d;
text-underline-offset: 4px;
transition: text-decoration-color .25s ease-out
}

.policy-details a:hover {
text-decoration-color: #68300fff
}

.policy-details table {
width: 100%;
border-collapse: collapse;
margin: 40px 0;
font-size: 15px;
line-height: 1.8;
box-shadow: 0 2px 3px -2px #68300f0f 0 4px 20px -2px #68300f17;
border-radius: 10px;
overflow: hidden
}

.policy-details thead {
background: #FFE8E6
}

.policy-details th {
padding: 16px 20px;
text-align: left;
font-weight: 600;
color: #68300F;
border-bottom: 2px solid #A5ADBF
}

.policy-details td {
padding: 16px 20px;
color: #1a0a05;
border-bottom: 1px solid #a5adbf33
}

.policy-details tbody tr:last-child td {
border-bottom: none
}

.policy-details tbody tr:hover {
background: #ffe8e64d
}

.policy-details hr {
border: none;
height: 2px;
background: linear-gradient(to right, #A5ADBF, #FFE8E6, #A5ADBF);
margin: 80px 0;
border-radius: 4px
}

@media (max-width: 1280px) {
.policy-details {
padding: 80px 40px
}
}

@media (max-width: 768px) {
.policy-details {
padding: 40px 20px
}

.policy-details h1 {
font-size: 41px;
margin: 0 0 20px
}

.policy-details h2 {
font-size: 24px;
margin: 40px 0 16px
}

.policy-details h3 {
font-size: 19px;
margin: 20px 0 16px
}

.policy-details h4 {
font-size: 19px;
margin: 20px 0 16px
}

.policy-details h5 {
font-size: 19px;
margin: 20px 0 16px
}

.policy-details h6 {
font-size: 15px;
margin: 20px 0 16px
}

.policy-details p {
font-size: 15px;
margin: 0 0 16px
}

.policy-details ul {
padding: 0 0 0 20px;
margin: 0 0 16px
}

.policy-details ol {
padding: 0 0 0 20px;
margin: 0 0 16px
}

.policy-details li {
font-size: 15px
}

.policy-details table {
font-size: 15px;
margin: 20px 0
}

.policy-details th {
padding: 8px 16px
}

.policy-details td {
padding: 8px 16px
}

.policy-details hr {
margin: 40px 0
}
}

@media (max-width: 390px) {
.policy-details {
padding: 40px 16px
}

.policy-details table {
display: block;
overflow-x: auto
}

.policy-details th {
padding: 8px
}

.policy-details td {
padding: 8px
}
}

.infograph {
background: #fff;
color: #1d1d1d;
min-height: 100vh
}

.infograph .dark-intro {
background: linear-gradient(135deg, #68300F 0%, #4a2109 100%);
color: #FFE8E6;
padding: 80px 20px 80px 40px;
position: relative;
overflow: hidden
}

.infograph .dark-intro::before {
content: '';
position: absolute;
top: 20%;
right: -80px;
width: 400px;
height: 400px;
border: 2px solid #ffe8e626;
border-radius: 38px;
transform: rotate(25deg)
}

.infograph .dark-intro::after {
content: '';
position: absolute;
bottom: 10%;
left: -100px;
width: 350px;
height: 350px;
border: 2px solid #a5adbf1f;
border-radius: 50%
}

.infograph .intro-content {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
padding-left: 60px
}

.infograph .intro-heading {
font-size: 70px;
line-height: 1.2;
margin: 0 0 40px;
letter-spacing: -.02em
}

.infograph .intro-statements {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 680px
}

.infograph .statement-item {
font-size: 19px;
line-height: 1.8;
opacity: .95;
padding-left: 40px;
position: relative
}

.infograph .statement-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 24px;
height: 2px;
background: #A5ADBF
}

.infograph .curve-decoration {
position: absolute;
top: 50%;
right: 10%;
width: 200px;
height: 200px;
pointer-events: none
}

.infograph .curve-decoration svg {
width: 100%;
height: 100%;
opacity: .2
}

.infograph .data-metrics {
background: #fafcfd;
padding: 80px 20px;
position: relative
}

.infograph .data-metrics::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 8px;
background: linear-gradient(180deg, #A5ADBF 0%, #68300F 100%)
}

.infograph .metrics-container {
max-width: 1200px;
margin: 0 auto;
padding-left: 40px
}

.infograph .metrics-header {
margin-bottom: 80px
}

.infograph .metrics-title {
font-size: 41px;
line-height: 1.2;
margin: 0 0 20px;
color: #68300F;
text-transform: uppercase;
letter-spacing: .03em;
font-weight: 300
}

.infograph .metrics-description {
font-size: 19px;
line-height: 1.8;
max-width: 720px;
color: #2d2d2d
}

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

.infograph .metric-card {
background: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 2px 3px -2px #68300f0f 0 4px 20px -2px #68300f17;
transition: transform .28s ease-out, box-shadow .28s ease-out;
position: relative;
overflow: hidden
}

.infograph .metric-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 60px -2px #68300f21
}

.infograph .metric-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #A5ADBF 0%, #68300F 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease-out
}

.infograph .metric-card:hover::before {
transform: scaleX(1)
}

.infograph .metric-number {
font-size: 70px;
line-height: 1.2;
color: #68300F;
margin: 0 0 16px;
font-weight: 700;
opacity: 0;
animation: countReveal .42s ease-out forwards
}

.infograph .metric-card:nth-child(1) .metric-number {
animation-delay: .15s
}

.infograph .metric-card:nth-child(2) .metric-number {
animation-delay: .3s
}

.infograph .metric-card:nth-child(3) .metric-number {
animation-delay: .45s
}

@keyframes countReveal {
from {
opacity: 0;
transform: translateY(20px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

.infograph .metric-label {
font-size: 19px;
line-height: 1.8;
color: #2d2d2d;
margin: 0 0 16px;
font-weight: 600
}

.infograph .metric-detail {
font-size: 15px;
line-height: 1.8;
color: #5d5d5d;
margin: 0
}

.infograph .cross-divider {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
padding: 40px 0;
background: #fff
}

.infograph .cross-shape {
width: 12px;
height: 12px;
position: relative
}

.infograph .cross-shape::before,
.infograph .cross-shape::after {
content: '';
position: absolute;
background: #A5ADBF
}

.infograph .cross-shape::before {
left: 50%;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-50%)
}

.infograph .cross-shape::after {
top: 50%;
left: 0;
right: 0;
height: 2px;
transform: translateY(-50%)
}

.infograph .approach-visual {
background: #ffe8e64d;
padding: 80px 20px;
position: relative
}

.infograph .approach-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start
}

.infograph .approach-intro {
position: sticky;
top: 40px
}

.infograph .approach-label {
font-size: 15px;
line-height: 1.8;
color: #68300F;
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600
}

.infograph .approach-heading {
font-size: 41px;
line-height: 1.2;
margin: 0 0 20px;
color: #68300F
}

.infograph .approach-summary {
font-size: 19px;
line-height: 1.8;
color: #2d2d2d;
margin: 0
}

.infograph .approach-details {
display: flex;
flex-direction: column;
gap: 40px
}

.infograph .detail-block {
background: #fff;
padding: 40px;
border-radius: 22px;
box-shadow: 0 2px 3px -2px #a5adbf0f 0 4px 20px -2px #a5adbf17;
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
align-items: start;
transition: box-shadow .32s ease-out
}

.infograph .detail-block:hover {
box-shadow: 0 10px 60px -2px #a5adbf21
}

.infograph .detail-image-wrapper {
width: 100%;
height: 210px;
border-radius: 10px;
overflow: hidden;
position: relative
}

.infograph .detail-image-wrapper::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #a5adbf00 0%, #68300f00 100%);
transition: background .38s ease-out;
pointer-events: none
}

.infograph .detail-block:hover .detail-image-wrapper::after {
background: linear-gradient(135deg, #a5adbf66 0%, #68300f4d 100%)
}

.infograph .detail-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}

.infograph .detail-text {
padding-top: 8px
}

.infograph .detail-heading {
font-size: 24px;
line-height: 1.2;
margin: 0 0 20px;
color: #68300F;
text-transform: uppercase;
letter-spacing: .02em;
font-weight: 300
}

.infograph .detail-paragraph {
font-size: 19px;
line-height: 1.8;
color: #2d2d2d;
margin: 0 0 16px
}

.infograph .detail-paragraph:last-child {
margin-bottom: 0
}

.infograph .corner-frame {
position: absolute;
pointer-events: none
}

.infograph .corner-frame.top-left {
top: 20px;
left: 20px;
width: 60px;
height: 60px;
border-top: 2px solid #A5ADBF;
border-left: 2px solid #A5ADBF
}

.infograph .corner-frame.top-left::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: 12px;
height: 2px;
background: #fff
}

.infograph .corner-frame.top-left::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: 2px;
height: 12px;
background: #fff
}

.infograph .corner-frame.bottom-right {
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-bottom: 2px solid #68300F;
border-right: 2px solid #68300F
}

.infograph .corner-frame.bottom-right::before {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 12px;
height: 2px;
background: #fff
}

.infograph .corner-frame.bottom-right::after {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 2px;
height: 12px;
background: #fff
}

@media (max-width: 1280px) {
.infograph .intro-heading {
font-size: 41px
}

.infograph .metrics-grid {
grid-template-columns: repeat(2, 1fr)
}

.infograph .approach-container {
grid-template-columns: 1fr;
gap: 40px
}

.infograph .approach-intro {
position: static
}

.infograph .detail-block {
grid-template-columns: 1fr
}

.infograph .detail-image-wrapper {
height: 280px
}
}

@media (max-width: 768px) {
.infograph .dark-intro {
padding: 40px 20px
}

.infograph .intro-content {
padding-left: 0
}

.infograph .intro-heading {
font-size: 41px
}

.infograph .statement-item {
font-size: 15px;
padding-left: 20px
}

.infograph .data-metrics {
padding: 40px 20px
}

.infograph .metrics-container {
padding-left: 20px
}

.infograph .metrics-header {
margin-bottom: 40px
}

.infograph .metrics-title {
font-size: 24px
}

.infograph .metrics-description {
font-size: 15px
}

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

.infograph .metric-card {
padding: 20px
}

.infograph .metric-number {
font-size: 41px
}

.infograph .metric-label {
font-size: 15px
}

.infograph .approach-visual {
padding: 40px 20px
}

.infograph .approach-container {
gap: 20px
}

.infograph .approach-heading {
font-size: 24px
}

.infograph .approach-summary {
font-size: 15px
}

.infograph .approach-details {
gap: 20px
}

.infograph .detail-block {
padding: 20px;
gap: 20px
}

.infograph .detail-heading {
font-size: 19px
}

.infograph .detail-paragraph {
font-size: 15px
}

.infograph .corner-frame.top-left,
.infograph .corner-frame.bottom-right {
width: 40px;
height: 40px
}
}

@media (max-width: 390px) {
.infograph .dark-intro {
padding: 40px 16px
}

.infograph .intro-heading {
font-size: 24px
}

.infograph .statement-item {
font-size: 15px
}

.infograph .data-metrics {
padding: 40px 16px
}

.infograph .metrics-container {
padding-left: 16px
}

.infograph .approach-visual {
padding: 40px 16px
}

.infograph .detail-image-wrapper {
height: 200px
}
}

.abt-pg {
background: #fff;
position: relative;
overflow-x: clip
}

.abt-pg::before {
content: '';
position: absolute;
top: 120px;
right: -80px;
width: 340px;
height: 340px;
border-radius: 50%;
background: radial-gradient(ellipse at center, #a5adbf14, transparent 70%);
pointer-events: none;
z-index: 0
}

.abt-pg::after {
content: '';
position: absolute;
bottom: 280px;
left: -120px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(ellipse at center, #68300f0f, transparent 70%);
pointer-events: none;
z-index: 0
}

.abt-pg .top-banner {
position: relative;
background: linear-gradient(135deg, #FFE8E6 0%, #A5ADBF 100%);
padding: 80px 20px;
overflow: hidden
}

.top-banner::before {
content: '';
position: absolute;
top: -60px;
left: 15%;
width: 180px;
height: 180px;
border: 2px solid #68300f1f;
border-radius: 50%;
pointer-events: none
}

.top-banner::after {
content: '';
position: absolute;
bottom: -40px;
right: 20%;
width: 140px;
height: 140px;
border: 2px solid #ffffff40;
border-radius: 50%;
pointer-events: none
}

.abt-pg .top-banner .bnr-ctr {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1
}

.abt-pg .top-banner .main-hdg {
font-size: 70px;
line-height: 1.2;
color: #68300F;
margin: 0 0 20px;
letter-spacing: -.02em
}

.abt-pg .top-banner .main-hdg .highlight-word {
position: relative;
display: inline-block
}

.abt-pg .top-banner .main-hdg .highlight-word::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
height: 12px;
background: #ffffff80;
z-index: -1
}

.abt-pg .top-banner .sub-text {
font-size: 19px;
line-height: 1.8;
color: #68300F;
max-width: 680px;
margin: 0
}

.abt-pg .story-wrap {
padding: 80px 20px;
position: relative;
background: #fff;
z-index: 1
}

.abt-pg .story-wrap .story-ctr {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start
}

.abt-pg .story-wrap .txt-col {
display: flex;
flex-direction: column;
gap: 40px
}

.abt-pg .story-wrap .sec-hdg {
font-size: 41px;
line-height: 1.2;
color: #68300F;
margin: 0 0 16px;
letter-spacing: -.01em
}

.abt-pg .story-wrap .txt-blk {
position: relative
}

.abt-pg .story-wrap .txt-blk::before {
content: '';
position: absolute;
left: -20px;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #A5ADBF
}

.abt-pg .story-wrap .body-txt {
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
margin: 0
}

.abt-pg .story-wrap .img-col {
position: relative
}

.abt-pg .story-wrap .img-holder {
position: relative;
width: 100%;
height: 520px;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 4px 20px -2px #a5adbf17 0 10px 60px -2px #a5adbf21
}

.abt-pg .story-wrap .img-holder img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease-out
}

.abt-pg .story-wrap .img-holder:hover img {
transform: scale(1.06)
}

.abt-pg .story-wrap .stat-card {
position: absolute;
bottom: -40px;
right: 40px;
background: #68300F;
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 10px 60px -2px #68300f21;
z-index: 2
}

.abt-pg .story-wrap .stat-num {
font-size: 41px;
line-height: 1.2;
color: #FFE8E6;
margin: 0 0 4px;
font-weight: 700
}

.abt-pg .story-wrap .stat-lbl {
font-size: 15px;
line-height: 1.8;
color: #FFE8E6;
margin: 0;
opacity: .9
}

.abt-pg .team-sec {
padding: 80px 20px;
background: #FFE8E6;
position: relative;
z-index: 1
}

.abt-pg .team-sec .team-ctr {
max-width: 1200px;
margin: 0 auto
}

.abt-pg .team-sec .sec-hdg {
font-size: 41px;
line-height: 1.2;
color: #68300F;
margin: 0 0 16px;
text-align: center;
letter-spacing: -.01em
}

.abt-pg .team-sec .sec-intro {
font-size: 19px;
line-height: 1.8;
color: #68300F;
text-align: center;
max-width: 720px;
margin: 0 auto 80px
}

.abt-pg .team-sec .team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px
}

.abt-pg .team-sec .member-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 3px -2px #68300f0f;
transition: box-shadow .28s ease-out, transform .28s ease-out;
position: relative
}

.abt-pg .team-sec .member-card:hover {
box-shadow: 0 4px 20px -2px #68300f17 0 10px 60px -2px #68300f21;
transform: translateY(-4px)
}

.abt-pg .team-sec .member-img {
width: 100%;
height: 320px;
overflow: hidden;
position: relative
}

.abt-pg .team-sec .member-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .42s ease-out
}

.abt-pg .team-sec .member-card:hover .member-img img {
transform: scale(1.08)
}

.abt-pg .team-sec .member-info {
padding: 20px
}

.abt-pg .team-sec .member-name {
font-size: 19px;
line-height: 1.2;
color: #68300F;
margin: 0 0 8px;
font-weight: 600
}

.abt-pg .team-sec .member-role {
font-size: 15px;
line-height: 1.8;
color: #A5ADBF;
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 300
}

.abt-pg .team-sec .member-bio {
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
margin: 0
}

.abt-pg .values-sec {
padding: 80px 20px;
background: #fff;
position: relative;
z-index: 1
}

.abt-pg .values-sec .vals-ctr {
max-width: 1200px;
margin: 0 auto
}

.abt-pg .values-sec .sec-hdg {
font-size: 41px;
line-height: 1.2;
color: #68300F;
margin: 0 0 80px;
letter-spacing: -.01em
}

.abt-pg .values-sec .vals-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
position: relative
}

.abt-pg .values-sec .vals-grid::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 0;
background: linear-gradient(180deg, #A5ADBF, #FFE8E6);
transform: translateX(-50%);
animation: line-draw 1.8s ease-out forwards
}

@keyframes line-draw {
to {
height: 100%
}
}

.abt-pg .values-sec .val-item {
position: relative;
padding: 40px;
background: #fff;
border: 2px solid #FFE8E6;
border-radius: 22px;
transition: border-color .25s ease-out, transform .25s ease-out
}

.abt-pg .values-sec .val-item:hover {
border-color: #A5ADBF;
transform: translateX(8px)
}

.abt-pg .values-sec .val-item::before {
content: '';
position: absolute;
top: 40px;
left: -20px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #68300F;
border: 4px solid #fff;
box-shadow: 0 2px 3px -2px #68300f0f;
z-index: 2
}

.abt-pg .values-sec .val-icon {
width: 48px;
height: 48px;
margin: 0 0 20px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #FFE8E6, #A5ADBF);
border-radius: 50%
}

.abt-pg .values-sec .val-icon svg {
width: 24px;
height: 24px;
fill: #68300F
}

.abt-pg .values-sec .val-hdg {
font-size: 24px;
line-height: 1.2;
color: #68300F;
margin: 0 0 16px;
letter-spacing: -.01em
}

.abt-pg .values-sec .val-txt {
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
margin: 0
}

.abt-pg .approach-wrap {
padding: 80px 20px;
background: #A5ADBF;
position: relative;
z-index: 1;
overflow: hidden
}

.abt-pg .approach-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(45deg, transparent, transparent 40px, #ffffff05 40px, #ffffff05 80px);
pointer-events: none;
animation: pattern-shift 60s linear infinite
}

@keyframes pattern-shift {
0% {
transform: translate(0, 0)
}

100% {
transform: translate(113px, 113px)
}
}

.abt-pg .approach-wrap .appr-ctr {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1
}

.abt-pg .approach-wrap .sec-hdg {
font-size: 41px;
line-height: 1.2;
color: #fff;
margin: 0 0 40px;
letter-spacing: -.01em
}

.abt-pg .approach-wrap .appr-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center
}

.abt-pg .approach-wrap .appr-txt-col {
display: flex;
flex-direction: column;
gap: 20px
}

.abt-pg .approach-wrap .appr-para {
font-size: 15px;
line-height: 1.8;
color: #fff;
margin: 0;
opacity: .95
}

.abt-pg .approach-wrap .appr-img-col {
position: relative
}

.abt-pg .approach-wrap .appr-img-holder {
position: relative;
width: 100%;
height: 440px;
border-radius: 38px;
overflow: hidden;
box-shadow: 0 10px 60px -2px #68300f21;
border: 4px solid #ffffff26
}

.abt-pg .approach-wrap .appr-img-holder img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .38s ease-out
}

.abt-pg .approach-wrap .appr-img-holder:hover img {
transform: scale(1.05)
}

.abt-pg .approach-wrap .nested-card {
position: absolute;
bottom: -30px;
left: -40px;
background: #FFE8E6;
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 10px 60px -2px #68300f21;
border: 2px solid #68300F;
max-width: 240px
}

.abt-pg .approach-wrap .nested-card-hdg {
font-size: 19px;
line-height: 1.2;
color: #68300F;
margin: 0 0 8px;
font-weight: 600
}

.abt-pg .approach-wrap .nested-card-txt {
font-size: 15px;
line-height: 1.8;
color: #68300F;
margin: 0
}

@media (max-width: 1280px) {
.abt-pg .top-banner .main-hdg {
font-size: 41px
}

.abt-pg .story-wrap .story-ctr {
gap: 40px
}

.abt-pg .story-wrap .img-holder {
height: 440px
}

.abt-pg .approach-wrap .appr-layout {
gap: 40px
}

.abt-pg .approach-wrap .appr-img-holder {
height: 380px
}
}

@media (max-width: 768px) {
.abt-pg .top-banner {
padding: 40px 16px
}

.abt-pg .top-banner .main-hdg {
font-size: 24px
}

.abt-pg .top-banner .sub-text {
font-size: 15px
}

.abt-pg .story-wrap {
padding: 40px 16px
}

.abt-pg .story-wrap .story-ctr {
grid-template-columns: 1fr;
gap: 40px
}

.abt-pg .story-wrap .txt-col {
gap: 20px
}

.abt-pg .story-wrap .sec-hdg {
font-size: 24px
}

.abt-pg .story-wrap .img-holder {
height: 320px
}

.abt-pg .story-wrap .stat-card {
right: 16px;
bottom: -30px;
padding: 16px 20px
}

.abt-pg .story-wrap .stat-num {
font-size: 24px
}

.abt-pg .team-sec {
padding: 40px 16px
}

.abt-pg .team-sec .sec-hdg {
font-size: 24px;
margin-bottom: 8px
}

.abt-pg .team-sec .sec-intro {
font-size: 15px;
margin-bottom: 40px
}

.abt-pg .team-sec .team-grid {
grid-template-columns: 1fr;
gap: 20px
}

.abt-pg .team-sec .member-img {
height: 280px
}

.abt-pg .team-sec .member-info {
padding: 16px
}

.abt-pg .values-sec {
padding: 40px 16px
}

.abt-pg .values-sec .sec-hdg {
font-size: 24px;
margin-bottom: 40px
}

.abt-pg .values-sec .vals-grid {
grid-template-columns: 1fr;
gap: 20px
}

.abt-pg .values-sec .vals-grid::before {
display: none
}

.abt-pg .values-sec .val-item {
padding: 20px
}

.abt-pg .values-sec .val-item::before {
display: none
}

.abt-pg .values-sec .val-hdg {
font-size: 19px
}

.abt-pg .approach-wrap {
padding: 40px 16px
}

.abt-pg .approach-wrap .sec-hdg {
font-size: 24px;
margin-bottom: 20px
}

.abt-pg .approach-wrap .appr-layout {
grid-template-columns: 1fr;
gap: 40px
}

.abt-pg .approach-wrap .appr-txt-col {
gap: 16px
}

.abt-pg .approach-wrap .appr-img-holder {
height: 280px;
border-radius: 22px
}

.abt-pg .approach-wrap .nested-card {
left: 16px;
bottom: -20px;
padding: 16px 20px;
max-width: 200px
}

.abt-pg .approach-wrap .nested-card-hdg {
font-size: 15px
}
}

@media (max-width: 390px) {
.abt-pg .top-banner {
padding: 20px 8px
}

.abt-pg .story-wrap {
padding: 20px 8px
}

.abt-pg .team-sec {
padding: 20px 8px
}

.abt-pg .values-sec {
padding: 20px 8px
}

.abt-pg .approach-wrap {
padding: 20px 8px
}

.abt-pg .story-wrap .stat-card {
right: 8px;
padding: 8px 16px
}

.abt-pg .approach-wrap .nested-card {
left: 8px;
padding: 8px 16px
}
}

.reach-out {
background: #fff;
color: #2a2a2a;
max-width: 100%;
overflow-x: clip
}

.reach-out .radial-spotlight {
position: relative;
background: radial-gradient(ellipse at 85% 20%, #a5adbf2e, #ffe8e61f 45%, #fff 78%);
padding: 80px 20px;
overflow: hidden
}

.reach-out .radial-spotlight::before {
content: '';
position: absolute;
top: 40px;
right: 8%;
width: 180px;
height: 180px;
background: #68300f0a;
border-radius: 50%;
z-index: 1
}

.reach-out .radial-spotlight::after {
content: '';
position: absolute;
top: 80px;
right: 12%;
width: 140px;
height: 140px;
background: #a5adbf0d;
border-radius: 50%;
z-index: 1
}

.reach-out .radial-spotlight .pattern-dots {
position: absolute;
bottom: 60px;
left: 10%;
width: 100px;
height: 100px;
opacity: .08;
z-index: 1
}

.reach-out .radial-spotlight .pattern-dots span {
position: absolute;
width: 8px;
height: 8px;
background: #68300F;
border-radius: 50%
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(1) {
top: 0;
left: 0
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(2) {
top: 0;
left: 30px
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(3) {
top: 0;
left: 60px
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(4) {
top: 30px;
left: 0
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(5) {
top: 30px;
left: 30px
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(6) {
top: 30px;
left: 60px
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(7) {
top: 60px;
left: 0
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(8) {
top: 60px;
left: 30px
}

.reach-out .radial-spotlight .pattern-dots span:nth-child(9) {
top: 60px;
left: 60px
}

.reach-out .radial-spotlight .constrain {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2
}

.reach-out .radial-spotlight .opening-text {
max-width: 840px
}

.reach-out .radial-spotlight h1 {
font-size: 70px;
line-height: 1.2;
color: #68300F;
margin: 0 0 20px;
letter-spacing: -.02em
}

.reach-out .radial-spotlight .subline {
font-size: 24px;
line-height: 1.8;
color: #4a4a4a;
margin: 0;
max-width: 680px;
opacity: .4
}

.reach-out .radial-spotlight img {
position: absolute;
top: 50%;
right: 40px;
transform: translateY(-50%);
width: 280px;
height: 210px;
object-fit: cover;
border-radius: 10px;
opacity: .25;
box-shadow: 0 10px 60px -2px #a5adbf21
}

@media (max-width: 1280px) {
.reach-out .radial-spotlight {
padding: 60px 20px
}

.reach-out .radial-spotlight h1 {
font-size: 41px
}

.reach-out .radial-spotlight .subline {
font-size: 19px
}

.reach-out .radial-spotlight img {
width: 220px;
height: 165px;
right: 20px
}
}

@media (max-width: 768px) {
.reach-out .radial-spotlight {
padding: 40px 16px
}

.reach-out .radial-spotlight h1 {
font-size: 24px
}

.reach-out .radial-spotlight .subline {
font-size: 15px
}

.reach-out .radial-spotlight img {
display: none
}

.reach-out .radial-spotlight::before,
.reach-out .radial-spotlight::after {
width: 100px;
height: 100px
}
}

.reach-out .split-zone {
background: #fafcfd;
padding: 0;
position: relative
}

.reach-out .split-zone::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(180deg, #a5adbf26, #68300f1f 50%, #a5adbf26);
z-index: 2
}

.reach-out .split-zone .constrain {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0
}

.reach-out .split-zone .info-side {
padding: 80px 60px 80px 40px;
background: #fff;
display: flex;
flex-direction: column;
gap: 40px;
animation: delayedAppear .35s ease-out
}

@keyframes delayedAppear {
from {
opacity: 0;
transform: translateY(20px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

.reach-out .split-zone .form-side {
padding: 80px 40px 80px 60px;
background: #fafcfd;
animation: delayedAppear .45s ease-out
}

.reach-out .split-zone h2 {
font-size: 41px;
line-height: 1.2;
color: #68300F;
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: .03em;
font-weight: 300
}

.reach-out .split-zone .detail-block {
display: flex;
flex-direction: column;
gap: 8px
}

.reach-out .split-zone .detail-block h3 {
font-size: 15px;
line-height: 1.2;
color: #A5ADBF;
margin: 0;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 400
}

.reach-out .split-zone .detail-block p {
font-size: 19px;
line-height: 1.8;
color: #2a2a2a;
margin: 0
}

.reach-out .split-zone .detail-block a {
font-size: 19px;
line-height: 1.8;
color: #68300F;
text-decoration: none;
transition: color .25s ease-out
}

.reach-out .split-zone .detail-block a:hover {
color: #A5ADBF
}

.reach-out .split-zone .availability-note {
background: #ffe8e666;
border: 1px solid #68300f26;
border-radius: 10px;
padding: 20px;
margin-top: 20px
}

.reach-out .split-zone .availability-note p {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
margin: 0
}

.reach-out .split-zone .contact-form h2 {
margin-bottom: 40px
}

.reach-out .split-zone .contact-form .name-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px
}

.reach-out .split-zone .contact-form .field-wrap {
display: flex;
flex-direction: column;
gap: 8px
}

.reach-out .split-zone .contact-form label {
font-size: 15px;
line-height: 1.2;
color: #68300F;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 400
}

.reach-out .split-zone .contact-form input[type="text"],
.reach-out .split-zone .contact-form input[type="tel"] {
width: 100%;
padding: 16px;
font-size: 19px;
line-height: 1.8;
color: #2a2a2a;
background: #fff;
border: 2px solid #a5adbf40;
border-radius: 4px;
transition: border-color .22s ease-out, box-shadow .22s ease-out;
box-sizing: border-box
}

.reach-out .split-zone .contact-form input[type="text"]::placeholder,
.reach-out .split-zone .contact-form input[type="tel"]::placeholder {
font-style: italic;
opacity: .5;
color: #6a6a6a
}

.reach-out .split-zone .contact-form input[type="text"]:focus,
.reach-out .split-zone .contact-form input[type="tel"]:focus {
outline: none;
border-color: #68300F;
box-shadow: 0 4px 20px -2px #68300f17
}

.reach-out .split-zone .contact-form .checkbox-group {
margin: 20px 0 0
}

.reach-out .split-zone .contact-form .checkbox-group h3 {
font-size: 15px;
line-height: 1.2;
color: #68300F;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 400;
margin: 0 0 16px
}

.reach-out .split-zone .contact-form .checkbox-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin-bottom: 8px;
position: relative
}

.reach-out .split-zone .contact-form .checkbox-item input[type="checkbox"] {
appearance: none;
width: 24px;
height: 24px;
border: 2px solid #a5adbf66;
border-radius: 4px;
background: #fff;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color .18s ease-out, background-color .18s ease-out
}

.reach-out .split-zone .contact-form .checkbox-item input[type="checkbox"]:checked {
background: #68300F;
border-color: #68300F
}

.reach-out .split-zone .contact-form .checkbox-item input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translate(-50%, -60%) rotate(-45deg);
animation: checkAppear .28s ease-out
}

@keyframes checkAppear {
from {
opacity: 0;
transform: translate(-50%, -60%) rotate(-45deg) scale(0.5)
}

to {
opacity: 1;
transform: translate(-50%, -60%) rotate(-45deg) scale(1)
}
}

.reach-out .split-zone .contact-form .checkbox-item label {
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
font-weight: 400
}

.reach-out .split-zone .contact-form .privacy-consent {
margin: 40px 0 0;
padding: 20px;
background: #a5adbf14;
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px
}

.reach-out .split-zone .contact-form .privacy-consent input[type="checkbox"] {
appearance: none;
width: 24px;
height: 24px;
border: 2px solid #a5adbf66;
border-radius: 4px;
background: #fff;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color .18s ease-out, background-color .18s ease-out
}

.reach-out .split-zone .contact-form .privacy-consent input[type="checkbox"]:checked {
background: #68300F;
border-color: #68300F
}

.reach-out .split-zone .contact-form .privacy-consent input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translate(-50%, -60%) rotate(-45deg)
}

.reach-out .split-zone .contact-form .privacy-consent label {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
font-weight: 400
}

.reach-out .split-zone .contact-form .privacy-consent label a {
color: #68300F;
text-decoration: underline;
transition: color .2s ease-out
}

.reach-out .split-zone .contact-form .privacy-consent label a:hover {
color: #A5ADBF
}

.reach-out .split-zone .contact-form button[type="submit"] {
margin-top: 20px;
padding: 16px 40px;
font-size: 19px;
line-height: 1.2;
color: #fff;
background: #68300F;
border: none;
border-radius: 38px;
cursor: pointer;
transition: background-color .24s ease-out, box-shadow .24s ease-out, transform .24s ease-out;
box-shadow: 0 4px 20px -2px #68300f17;
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 500
}

.reach-out .split-zone .contact-form button[type="submit"]:hover {
background: #8a4013;
box-shadow: 0 10px 60px -2px #68300f21;
transform: translateY(-2px)
}

.reach-out .split-zone .contact-form button[type="submit"]:active {
transform: translateY(0)
}

@media (max-width: 1280px) {

.reach-out .split-zone .info-side,
.reach-out .split-zone .form-side {
padding: 60px 40px
}

.reach-out .split-zone h2 {
font-size: 24px
}

.reach-out .split-zone .detail-block p,
.reach-out .split-zone .detail-block a {
font-size: 15px
}

.reach-out .split-zone .contact-form input[type="text"],
.reach-out .split-zone .contact-form input[type="tel"] {
font-size: 15px
}

.reach-out .split-zone .contact-form button[type="submit"] {
font-size: 15px
}
}

@media (max-width: 768px) {
.reach-out .split-zone::before {
display: none
}

.reach-out .split-zone .constrain {
grid-template-columns: 1fr
}

.reach-out .split-zone .info-side,
.reach-out .split-zone .form-side {
padding: 40px 16px
}

.reach-out .split-zone .contact-form .name-row {
grid-template-columns: 1fr
}
}

.reach-out .comparison-strip {
background: linear-gradient(90deg, #fff 0%, #ffe8e64d 100%);
padding: 80px 20px;
position: relative;
overflow: hidden
}

.reach-out .comparison-strip::before {
content: '';
position: absolute;
top: 50%;
right: -80px;
width: 240px;
height: 240px;
background: #a5adbf0f;
border-radius: 50%;
transform: translateY(-50%)
}

.reach-out .comparison-strip::after {
content: '';
position: absolute;
top: 50%;
right: -40px;
width: 180px;
height: 180px;
background: #68300f0a;
border-radius: 50%;
transform: translateY(-50%)
}

.reach-out .comparison-strip .constrain {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2
}

.reach-out .comparison-strip h2 {
font-size: 41px;
line-height: 1.2;
color: #68300F;
margin: 0 0 40px;
text-align: left
}

.reach-out .comparison-strip .options-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}

.reach-out .comparison-strip .option-card {
background: #fff;
border: 2px solid #a5adbf33;
border-radius: 10px;
padding: 40px;
position: relative;
transition: border-color .3s ease-out, box-shadow .3s ease-out, transform .3s ease-out;
animation: delayedAppear .25s ease-out
}

.reach-out .comparison-strip .option-card:nth-child(1) {
animation-delay: .1s;
opacity: 0;
animation-fill-mode: forwards
}

.reach-out .comparison-strip .option-card:nth-child(2) {
animation-delay: .2s;
opacity: 0;
animation-fill-mode: forwards
}

.reach-out .comparison-strip .option-card:nth-child(3) {
animation-delay: .3s;
opacity: 0;
animation-fill-mode: forwards
}

.reach-out .comparison-strip .option-card.recommended {
border-color: #68300F;
box-shadow: 0 10px 60px -2px #68300f21
}

.reach-out .comparison-strip .option-card.recommended::before {
content: 'Recommended';
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background: #68300F;
color: #fff;
font-size: 15px;
line-height: 1.2;
padding: 8px 20px;
border-radius: 22px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 500;
box-shadow: 0 4px 20px -2px #68300f17
}

.reach-out .comparison-strip .option-card:hover {
border-color: #A5ADBF;
box-shadow: 0 4px 20px -2px #a5adbf17;
transform: translateY(-4px)
}

.reach-out .comparison-strip .option-card h3 {
font-size: 24px;
line-height: 1.2;
color: #68300F;
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: .03em;
font-weight: 400
}

.reach-out .comparison-strip .option-card p {
font-size: 15px;
line-height: 1.8;
color: #4a4a4a;
margin: 0 0 20px
}

.reach-out .comparison-strip .option-card .feature-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px
}

.reach-out .comparison-strip .option-card .feature-list li {
font-size: 15px;
line-height: 1.8;
color: #2a2a2a;
padding-left: 24px;
position: relative
}

.reach-out .comparison-strip .option-card .feature-list li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 12px;
height: 8px;
border-left: 2px solid #68300F;
border-bottom: 2px solid #68300F;
transform: rotate(-45deg)
}

.reach-out .comparison-strip .option-card .price-tag {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #a5adbf33;
font-size: 24px;
line-height: 1.2;
color: #68300F;
font-weight: 500
}

@media (max-width: 1280px) {
.reach-out .comparison-strip {
padding: 60px 20px
}

.reach-out .comparison-strip h2 {
font-size: 24px
}

.reach-out .comparison-strip .options-grid {
gap: 16px
}

.reach-out .comparison-strip .option-card {
padding: 20px
}

.reach-out .comparison-strip .option-card h3 {
font-size: 19px
}
}

@media (max-width: 768px) {
.reach-out .comparison-strip {
padding: 40px 16px
}

.reach-out .comparison-strip .options-grid {
grid-template-columns: 1fr;
gap: 20px
}

.reach-out .comparison-strip .option-card {
padding: 40px 20px
}
}

.reach-out .divider-band {
background: #fff;
padding: 40px 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
}

.reach-out .divider-band .band-element {
width: 100%;
max-width: 600px;
height: 4px;
background: linear-gradient(90deg, #a5adbf26, #68300f40 50%, #a5adbf26);
border-radius: 22px
}

@media (max-width: 768px) {
.reach-out .divider-band {
padding: 20px 16px
}
}

.opening {
background: #FFF;
color: #2B2B2B;
max-width: 100%;
overflow-x: clip
}

.opening * {
box-sizing: border-box
}

.opening .lead-stage {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
position: relative
}

.opening .lead-stage::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #A5ADBF;
border-radius: 50%;
top: 100px;
left: 40px;
animation: pulse-dot 2.8s ease-out infinite
}

.opening .lead-stage::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #68300F;
border-radius: 50%;
top: 140px;
left: 60px;
animation: pulse-dot 3.2s ease-out infinite .4s
}

@keyframes pulse-dot {

0%,
100% {
opacity: .3;
transform: scale(1)
}

50% {
opacity: 1;
transform: scale(1.4)
}
}

.opening .lead-img-col {
position: relative
}

.opening .lead-img-col img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 10px;
display: block;
position: relative
}

.opening .lead-img-col::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 180px;
background: linear-gradient(to bottom, #2b2b2b99, transparent);
border-radius: 10px 10px 0 0;
pointer-events: none
}

.opening .lead-txt-col {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px
}

.opening .lead-txt-col h1 {
font-size: 70px;
line-height: 1.2;
letter-spacing: -.02em;
margin: 0;
color: #2B2B2B
}

.opening .lead-txt-col .subline {
font-size: 24px;
line-height: 1.8;
color: #4A4A4A;
margin: 0
}

.opening .lead-txt-col .action-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 19px;
color: #68300F;
text-decoration: none;
font-weight: 600;
transition: transform .28s ease-out;
width: fit-content
}

.opening .action-link::before {
content: '';
width: 6px;
height: 6px;
background: #A5ADBF;
border-radius: 50%;
transition: background .22s ease-out
}

.opening .action-link:hover {
transform: translateX(4px)
}

.opening .action-link:hover::before {
background: #68300F
}

.opening .environment-stage {
background: linear-gradient(135deg, #FFE8E6 0%, #FFF 100%);
padding: 80px 20px;
position: relative;
overflow: hidden
}

.opening .environment-stage::before {
content: '';
position: absolute;
top: 0;
left: 15%;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, #A5ADBF 20%, #A5ADBF 80%, transparent);
opacity: .3;
transform: rotate(-15deg);
animation: diagonal-shift 18s linear infinite
}

@keyframes diagonal-shift {
0% {
transform: translateY(-10%) rotate(-15deg)
}

100% {
transform: translateY(10%) rotate(-15deg)
}
}

.opening .environment-inner {
max-width: 1200px;
margin: 0 auto
}

.opening .environment-inner h2 {
font-size: 41px;
line-height: 1.2;
margin: 0 0 40px;
color: #2B2B2B;
text-transform: uppercase;
letter-spacing: .02em;
font-weight: 300
}

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

.opening .environment-card {
background: #FFF;
border-radius: 22px;
padding: 40px;
box-shadow: 0 4px 20px -2px #a5adbf17 0 10px 60px -2px #a5adbf21;
position: relative;
transition: transform .32s ease-out, box-shadow .32s ease-out
}

.opening .environment-card::before {
content: '';
position: absolute;
left: 0;
top: 40px;
width: 4px;
height: 60px;
background: #68300F;
border-radius: 0 4px 4px 0
}

.opening .environment-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 60px -2px #a5adbf21 0 20px 80px -2px #68300f14
}

.opening .environment-card h3 {
font-size: 24px;
line-height: 1.2;
margin: 0 0 16px;
color: #2B2B2B
}

.opening .environment-card p {
font-size: 15px;
line-height: 1.8;
margin: 0;
color: #4A4A4A
}

.opening .voices-stage {
padding: 80px 20px;
background: #FFF;
position: relative
}

.opening .voices-inner {
max-width: 1200px;
margin: 0 auto
}

.opening .voices-inner h2 {
font-size: 41px;
line-height: 1.2;
margin: 0 0 40px;
color: #2B2B2B
}

.opening .voices-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px
}

.opening .voice-box {
background: #FFE8E6;
border-radius: 10px;
padding: 40px;
position: relative;
overflow: hidden
}

.opening .voice-box::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: repeating-linear-gradient(45deg, transparent, transparent 40px, #a5adbf08 40px, #a5adbf08 80px);
animation: pattern-drift 25s linear infinite;
pointer-events: none
}

@keyframes pattern-drift {
0% {
transform: translate(0, 0)
}

100% {
transform: translate(40px, 40px)
}
}

.opening .voice-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
position: relative;
z-index: 1
}

.opening .voice-avatar {
width: 60px;
height: 60px;
border-radius: 38px;
background: linear-gradient(135deg, #A5ADBF, #68300F);
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-size: 24px;
font-weight: 600;
flex-shrink: 0
}

.opening .voice-meta h4 {
font-size: 19px;
line-height: 1.2;
margin: 0 0 4px;
color: #2B2B2B
}

.opening .voice-meta .role-label {
font-size: 15px;
line-height: 1.2;
color: #68300F;
margin: 0
}

.opening .voice-text {
font-size: 15px;
line-height: 1.8;
color: #2B2B2B;
margin: 0;
position: relative;
z-index: 1
}

.opening .distinction-stage {
background: #FFF;
padding: 80px 20px;
position: relative
}

.opening .distinction-stage::before {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 100%;
height: 100%;
background-image: url(./infographic_assets/post--thumbnail-7.jpg);
background-size: cover;
background-position: center;
opacity: .08;
border-radius: 22px;
pointer-events: none;
z-index: 0
}

.opening .distinction-stage::after {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #68300fd9, #a5adbfbf);
border-radius: 22px;
pointer-events: none;
z-index: 0
}

.opening .distinction-inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1
}

.opening .distinction-inner h2 {
font-size: 41px;
line-height: 1.2;
margin: 0 0 40px;
color: #2B2B2B
}

.opening .distinction-features {
display: grid;
grid-template-columns: 120px 1fr 120px 1fr;
gap: 40px 20px;
align-items: start
}

.opening .feature-label {
font-size: 15px;
line-height: 1.2;
color: #68300F;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
display: flex;
align-items: center;
gap: 8px
}

.opening .feature-label::before {
content: '';
width: 8px;
height: 8px;
background: #A5ADBF;
border-radius: 50%;
flex-shrink: 0
}

.opening .feature-content {
font-size: 15px;
line-height: 1.8;
color: #2B2B2B
}

.opening .feature-content p {
margin: 0
}

.opening .creators-stage {
background: #FFF;
padding: 80px 20px;
position: relative
}

.opening .creators-inner {
max-width: 1200px;
margin: 0 auto
}

.opening .creators-inner h2 {
font-size: 41px;
line-height: 1.2;
margin: 0 0 40px;
color: #2B2B2B;
text-transform: uppercase;
letter-spacing: .02em;
font-weight: 300
}

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

.opening .creator-card {
background: #FFF;
border: 2px solid #FFE8E6;
border-radius: 10px;
overflow: hidden;
transition: border-color .25s ease-out, transform .25s ease-out;
position: relative
}

.opening .creator-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #a5adbf0d, transparent);
opacity: 0;
transition: opacity .35s ease-out;
pointer-events: none
}

.opening .creator-card:hover {
border-color: #A5ADBF;
transform: translateY(-6px)
}

.opening .creator-card:hover::before {
opacity: 1
}

.opening .creator-img {
width: 100%;
height: 280px;
object-fit: cover;
display: block
}

.opening .creator-info {
padding: 20px
}

.opening .creator-info h3 {
font-size: 24px;
line-height: 1.2;
margin: 0 0 8px;
color: #2B2B2B
}

.opening .creator-info .specialty {
font-size: 15px;
line-height: 1.8;
color: #68300F;
margin: 0 0 16px;
font-weight: 600
}

.opening .creator-info .bio {
font-size: 15px;
line-height: 1.8;
color: #4A4A4A;
margin: 0
}

.opening .code-demo-wrapper {
background: #2B2B2B;
border-radius: 10px;
padding: 40px;
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
position: relative;
overflow: hidden
}

.opening .code-demo-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: #a5adbf33
}

.opening .code-side h4 {
font-size: 19px;
line-height: 1.2;
color: #A5ADBF;
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 300
}

.opening .code-block {
background: #1A1A1A;
border-radius: 4px;
padding: 20px;
font-family: 'Courier New', monospace;
font-size: 15px;
line-height: 1.8;
color: #FFE8E6;
overflow-x: auto;
box-shadow: inset 0 2px 4px #0000004d
}

.opening .output-side h4 {
font-size: 19px;
line-height: 1.2;
color: #A5ADBF;
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 300
}

.opening .output-display {
background: #FFF;
border-radius: 4px;
padding: 20px;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
color: #2B2B2B;
border: 2px solid #FFE8E6;
box-shadow: 0 2px 3px -2px #68300f0f
}

@media (max-width: 1280px) {
.opening .lead-stage {
grid-template-columns: 240px 1fr;
gap: 20px;
padding: 40px 20px
}

.opening .lead-img-col img {
height: 400px
}

.opening .lead-txt-col h1 {
font-size: 41px
}

.opening .environment-grid {
grid-template-columns: repeat(2, 1fr)
}

.opening .distinction-features {
grid-template-columns: 100px 1fr;
gap: 20px 16px
}

.opening .creators-grid {
grid-template-columns: repeat(2, 1fr)
}

.opening .code-demo-wrapper {
grid-template-columns: 1fr;
gap: 40px
}

.opening .code-demo-wrapper::before {
left: 0;
top: 50%;
width: 100%;
height: 1px
}
}

@media (max-width: 768px) {
.opening .lead-stage {
grid-template-columns: 1fr;
gap: 20px;
padding: 40px 16px
}

.opening .lead-img-col img {
height: 320px
}

.opening .lead-txt-col h1 {
font-size: 41px
}

.opening .lead-txt-col .subline {
font-size: 19px
}

.opening .environment-stage {
padding: 40px 16px
}

.opening .environment-inner h2 {
font-size: 24px;
margin-bottom: 20px
}

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

.opening .environment-card {
padding: 20px
}

.opening .voices-stage {
padding: 40px 16px
}

.opening .voices-inner h2 {
font-size: 24px;
margin-bottom: 20px
}

.opening .voices-layout {
grid-template-columns: 1fr;
gap: 20px
}

.opening .voice-box {
padding: 20px
}

.opening .distinction-stage {
padding: 40px 16px
}

.opening .distinction-inner h2 {
font-size: 24px;
margin-bottom: 20px
}

.opening .distinction-features {
grid-template-columns: 1fr;
gap: 16px
}

.opening .creators-stage {
padding: 40px 16px
}

.opening .creators-inner h2 {
font-size: 24px;
margin-bottom: 20px
}

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

.opening .creator-img {
height: 240px
}

.opening .code-demo-wrapper {
padding: 20px;
margin-top: 20px
}
}

@media (max-width: 390px) {
.opening .lead-txt-col h1 {
font-size: 24px
}

.opening .lead-txt-col .subline {
font-size: 15px
}

.opening .environment-inner h2,
.opening .voices-inner h2,
.opening .distinction-inner h2,
.opening .creators-inner h2 {
font-size: 19px
}

.opening .environment-card h3,
.opening .voice-meta h4,
.opening .creator-info h3 {
font-size: 19px
}

.opening .code-demo-wrapper {
padding: 16px
}
}

.success-confirmation-page {
background: linear-gradient(radial-gradient(ellipse at center, #FFE8E6, #fff));
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px
}

.success-confirmation-page .confirmation-container {
max-width: 1200px;
width: 100%;
text-align: center
}

.success-confirmation-page .check-animation {
width: 120px;
height: 120px;
margin: 0 auto 40px;
position: relative
}

.success-confirmation-page .check-circle {
width: 120px;
height: 120px;
border: 4px solid #68300F;
border-radius: 50%;
position: relative;
animation: scaleIn .35s ease-out
}

.success-confirmation-page .check-mark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 30px;
height: 55px;
border-bottom: 5px solid #68300F;
border-right: 5px solid #68300F;
animation: drawCheck .4s .2s ease-out forwards;
opacity: 0
}

@keyframes scaleIn {
0% {
transform: scale(0);
opacity: 0
}

100% {
transform: scale(1);
opacity: 1
}
}

@keyframes drawCheck {
0% {
opacity: 1;
height: 0;
width: 0
}

50% {
height: 55px;
width: 0
}

100% {
height: 55px;
width: 30px;
opacity: 1
}
}

.success-confirmation-page .main-message {
font-size: 41px;
line-height: 1.2;
color: #68300F;
margin: 0 0 20px
}

.success-confirmation-page .detail-message {
font-size: 19px;
line-height: 1.8;
color: #68300F;
margin: 0 0 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
opacity: .85
}

.success-confirmation-page .info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0 0 40px;
max-width: 900px;
margin-left: auto;
margin-right: auto
}

.success-confirmation-page .info-item {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 3px -2px #a5adbf0f 0 4px 20px -2px #a5adbf17
}

.success-confirmation-page .info-label {
font-size: 15px;
line-height: 1.2;
color: #A5ADBF;
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .03em
}

.success-confirmation-page .info-value {
font-size: 19px;
line-height: 1.2;
color: #68300F;
margin: 0;
font-weight: 600
}

.success-confirmation-page .action-section {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center
}

.success-confirmation-page .primary-action {
background: #68300F;
color: #fff;
border: none;
padding: 16px 40px;
font-size: 19px;
line-height: 1.2;
border-radius: 38px;
cursor: pointer;
transition: background .25s ease-out, transform .2s ease-out;
text-decoration: none;
display: inline-block
}

.success-confirmation-page .primary-action:hover {
background: #4a2109;
transform: translateY(-2px)
}

.success-confirmation-page .secondary-action {
background: transparent;
color: #68300F;
border: 2px solid #A5ADBF;
padding: 14px 40px;
font-size: 19px;
line-height: 1.2;
border-radius: 38px;
cursor: pointer;
transition: border-color .3s ease-out, color .3s ease-out;
text-decoration: none;
display: inline-block
}

.success-confirmation-page .secondary-action:hover {
border-color: #68300F;
color: #68300F
}

.success-confirmation-page .additional-note {
margin: 40px 0 0;
padding: 20px;
background: #fff;
border-radius: 10px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 2px 3px -2px #68300f0f
}

.success-confirmation-page .note-text {
font-size: 15px;
line-height: 1.8;
color: #68300F;
margin: 0;
opacity: .75
}

@media (max-width: 768px) {
.success-confirmation-page {
padding: 20px 16px
}

.success-confirmation-page .check-animation {
width: 90px;
height: 90px;
margin-bottom: 20px
}

.success-confirmation-page .check-circle {
width: 90px;
height: 90px
}

.success-confirmation-page .check-mark {
width: 22px;
height: 40px;
border-bottom-width: 4px;
border-right-width: 4px
}

@keyframes drawCheck {
0% {
opacity: 1;
height: 0;
width: 0
}

50% {
height: 40px;
width: 0
}

100% {
height: 40px;
width: 22px;
opacity: 1
}
}

.success-confirmation-page .main-message {
font-size: 24px;
margin-bottom: 16px
}

.success-confirmation-page .detail-message {
font-size: 15px;
margin-bottom: 20px
}

.success-confirmation-page .info-grid {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 20px
}

.success-confirmation-page .info-item {
padding: 16px
}

.success-confirmation-page .primary-action,
.success-confirmation-page .secondary-action {
width: 100%;
padding: 14px 20px;
font-size: 15px
}

.success-confirmation-page .additional-note {
margin-top: 20px;
padding: 16px
}
}

@media (max-width: 390px) {
.success-confirmation-page .main-message {
font-size: 19px
}

.success-confirmation-page .check-animation {
width: 70px;
height: 70px
}

.success-confirmation-page .check-circle {
width: 70px;
height: 70px;
border-width: 3px
}

.success-confirmation-page .check-mark {
width: 18px;
height: 32px;
border-bottom-width: 3px;
border-right-width: 3px
}

@keyframes drawCheck {
0% {
opacity: 1;
height: 0;
width: 0
}

50% {
height: 32px;
width: 0
}

100% {
height: 32px;
width: 18px;
opacity: 1
}
}
}