:root {
	--anim-duration: 150ms;
}

.Button {transition: background-color var(--anim-duration) ease;}
.Button:hover {background-color: #009583;}

#Head nav a {transition-property: background-color, color; transition-duration: var(--anim-duration); transition-timing-function: ease;}
#Head nav a:hover {background: var(--green); color: var(--sand);}
@media (max-width: 768px) {
	#Head nav a:hover {background: transparent; color: var(--dark-blue);}
	#Head nav a:active {background: rgba(0, 174, 154, 0.1);}
}

@media (max-width: 768px) {
	#Foot {padding-top: 60px; padding-bottom: 40px; flex-direction: column; gap: 24px; text-align: center;}
	#Foot > * {flex: none; margin-left: auto; margin-right: auto;}
	#Foot div:nth-of-type(2) {text-align: center;}
	#Foot div:nth-of-type(3) {text-align: center;}
	#Foot img {max-width: 100%;}
}.NewsletterModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.NewsletterModal.Hidden { display: none; }
.NewsletterModal .ModalOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }
.NewsletterModal .ModalDialog { position: relative; z-index: 10000; background: var(--sand); border-radius: 8px; padding: 40px; max-width: 500px; width: 90%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: modalSlideIn 0.3s ease-out; }
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

.NewsletterModal .ModalClose { position: absolute; top: 15px; right: 15px; background: none; border: none; cursor: pointer; padding: 8px; color: var(--dark-blue); transition: color 0.2s, transform 0.2s; }
.NewsletterModal .ModalClose:hover { color: #000; transform: scale(1.1); }
.NewsletterModal .ModalContent { text-align: center; }
.NewsletterModal .ModalMessage { font-size: 18px; line-height: 1.6; color: var(--white-ish); margin: 0 0 30px; }

.NewsletterModal.ModalSuccess .ModalMessage { color: var(--green); }
.NewsletterModal.ModalError .ModalMessage { color: #c53030; }


.Area {position: relative; padding-top: 66px; padding-bottom: 134px;}
.Area, .Area .Heading {color: var(--white-ish);}
.Area .Heading::before {background: var(--white-ish);}
.Area .Heading {margin-bottom: 33px;}
.Area::before {position: absolute; content: ''; top: 0; left: -100vw; right: -100vw; height: 100%; background: var(--dark-blue); z-index: -1;}
.Area .Text.MainText {max-width: 965px; margin-bottom: 64px;}
.Area .Blocks {display: grid; grid-template-columns: repeat(2, 1fr); gap: 68px;}
.Area .Text {
	--text-line-height: 130%;
}
.Area .Text {max-width: 381px;}
.Area .Image {
	--oversize: 100px;
}
.Area .Image {margin-bottom: 41px; display: flex; justify-content: right; position: relative; text-align: right; width: calc(100% + var(--oversize)); transform: translateX(calc(-1 * var(--oversize)));}
.Area .Image img {width: 100%; height: auto; right: 0; top: 0;}
@media (max-width: 1457px) {
	.Area .Image {--oversize: 50px;}
}
@media (max-width: 1352px) {
	.Area .Image {--oversize: 0px;}
}
.Area .Left .Heading {margin-bottom: 17px;}
.Area .Legend .Text + .Text {margin-top: 91px;}
.Area .Legend h3 {font-size: var(--font-bit-bigger); font-weight: bold; margin-bottom: 32px; display: flex; align-items: center; gap: 20px;}
.Area .Legend .Text:first-child h3::after {display: block; content: ''; width: 72px; height: 4px; background-color: var(--yellow);}

.History {padding-top: 52px; padding-bottom: 53px; color: var(--green);}
.History .Heading {margin-bottom: 33px;}
.History .MainText {max-width: 965px; margin-bottom: 64px;}
.History .Text {line-height: 130%;}
.History .List {display: flex; gap: 50px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory;}
.History .List::-webkit-scrollbar {display: none;}
.History .Image {aspect-ratio: 1 / 1; display: flex; max-width: 270px; margin-bottom: 41px;}
.History img {width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 9999px;}
.History article {flex: 0 0 calc((100% - 50px * 3) / 4); scroll-snap-align: start;}
.History h3 {font-size: var(--heading-font-size); font-weight: normal; font-family: var(--font-oswald); letter-spacing: -0.02em; line-height: var(--heading-line-height); margin-bottom: 16px;}
.History h4 {font-size: var(--font-bit-bigger); font-weight: bold; margin-bottom: 4px;}
.History .Arrows {display: flex; justify-content: space-between;}
.History .Arrow {padding: 18px 25px; border-radius: 8px; display: flex; border: none; background-color: transparent; cursor: pointer;}
.History .Arrow.Left {transform: translateX(-25px);}
.History .Arrow.Right {transform: translateX(25px);}
.History .Arrow path {fill: var(--green);}
.History .Arrow {transition-property: opacity, background-color; transition-duration: var(--anim-duration); opacity: 1;}
.History .Arrow path {transition: fill var(--anim-duration);}
.History .Arrow:hover {background-color: var(--green);}
.History .Arrow:hover path {fill: var(--white-ish);}
.History .Arrow.Hidden {opacity: 0; pointer-events: none;}

.Public {
	--text-line-height: 130%;
}
.Public {padding-top: 66px; padding-bottom: 248px; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 60px; align-items: start;}
.Public, .Public .Heading {color: var(--white-ish);}
.Public .Heading::before {background: var(--white-ish);}
.Public .Heading {margin-bottom: 67px; grid-column: span 2;}
.Public::before {position: absolute; content: ''; top: 0; left: -100vw; right: -100vw; height: 100%; background: var(--green); z-index: -1;}
.Public .No {font-size: 30px; font-weight: 600; width: 50px; height: 50px; border-radius: 999px; margin-bottom: 7px; display: grid; place-content: center; color: var(--green);}
.Public h3 {font-weight: 900; font-size: var(--text-size);}
.Public p {font-weight: 500;}

.Public > div:is(:nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6)) {position: relative;}
.Public > div:is(:nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6)) img {position: absolute; left: 50%; top: 50%; transform: translate(var(--img-x, -50%), var(--img-y, -50%)); max-width: min(120vw, var(--img-w, 727px)); height: auto; pointer-events: none;}
.Public > div:is(:nth-of-type(1), :nth-of-type(2)) {margin-bottom: 92px;}
.Public > div:nth-of-type(1) {padding-top: 26px;}
.Public > div:nth-of-type(1) p:last-child {margin-top: 132px;}
.Public > div:nth-of-type(2) {background-color: var(--white-ish); color: var(--green); border-radius: 8px; padding: 22px;}
.Public > div:nth-of-type(2) > * {padding-left: 14px; padding-right: 14px;}
.Public > div:nth-of-type(2) div {background-color: var(--green); color: var(--white-ish); border-radius: 8px; margin-bottom: 16px; width: max-content;}
.Public > div:nth-of-type(2) p:not(:last-child) {margin-bottom: 45px;}
.Public > div:nth-of-type(2) p:last-child {margin-bottom: 11px;}
.Public > div:is(:nth-of-type(3), :nth-of-type(4)) {margin-bottom: 191px;}
.Public > div:nth-of-type(3) {color: var(--white-ish); max-width: 318px; margin-left: auto; margin-top: 94px;}
.Public > div:nth-of-type(3) img {--img-x: -56%; --img-y: -49%;}
.Public > div:nth-of-type(3) .No {background-color: var(--white-ish);}
.Public > div:nth-of-type(4) {color: var(--yellow); max-width: 348px; margin-right: auto; margin-left: auto;}
.Public > div:nth-of-type(4) img {--img-y: -30%; --img-x: -48%;}
.Public > div:nth-of-type(4) .No {background-color: var(--yellow);}
.Public > div:nth-of-type(5) {color: var(--dark-blue); margin-top: 24px; max-width: 318px; margin-right: auto; margin-left: auto; margin-bottom: 154px;}
.Public > div:nth-of-type(5) img {--img-x: -54%; --img-w: 634px;}
.Public > div:nth-of-type(5) .No {background-color: var(--dark-blue);}
.Public > div:nth-of-type(6) {color: var(--orange-blah); max-width: 383px; margin-right: auto; margin-left: 60px; margin-bottom: 154px;}
.Public > div:nth-of-type(6) img {--img-x: -52%; --img-w: 670px;}
.Public > div:nth-of-type(6) .No {background-color: var(--orange-blah);}
.Public > div:nth-of-type(6) a {color: inherit;}
.Public form {border-radius: 8px; background: transparent; border: 2px solid var(--orange-blah); display: flex; overflow: hidden; max-width: 296px;}
.Public input {border: none; background: transparent; padding: 0 7px; font-size: var(--text-size); flex: 1; font-weight: 500; color: var(--orange-blah); width: 100%;}
.Public input::placeholder {color: var(--orange-blah);}
.Public button {display: grid; place-content: center; padding: 0 13px 0 14px; border-radius: 8px 0 0 8px; color: var(--green); background-color: var(--orange-blah); border: none; font-size: var(--text-size); cursor: pointer; transition: background-color 100ms; font-weight: 500; line-height: 30px;}
html:not(.AppleThing) .Public button span {transform: translateY(-2px);}
.Public > div:nth-of-type(7) {max-width: 524px;}
.Public > div:nth-of-type(8) {position: relative;}
.Public > div:nth-of-type(8) img {position: absolute; left: 0; top: 0; max-width: min(932px, 120vw); height: auto; width: auto; z-index: -1; transform: translateX(-10%) translateY(-25%);}

.News {
	--cols: 3;
}
.News {padding-top: 66px; padding-bottom: 174px; color: var(--green); display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 37px; position: relative;}
.News::before {position: absolute; content: ''; top: 0; left: -100vw; right: -100vw; height: 100%; background: var(--white-ish); z-index: -1;}
.News .Heading {margin-bottom: 37px; grid-column: span var(--cols);}
.News article {flex: 0 0 min(394px, 100%);}
.News .Image {aspect-ratio: 4 / 3;}
.News img {object-fit: cover; object-position: center; width: 100%; height: 100%;}
.News .Date {height: 76px; display: flex; align-items: center; font-size: 18px; font-weight: 500;}

.News h3 {margin-bottom: 4px;}
.News .BtnBox {margin-top: 64px; grid-column: span var(--cols); text-align: center;}
.News .Button {color: var(--white-ish);}
.News article:nth-child(n+5) {display: none;}
.News.ShowAll article:nth-child(n+5) {display: block; animation: slideDown 0.4s ease-out;}
@keyframes slideDown {from {opacity: 0; transform: translateY(-20px);} to {opacity: 1; transform: translateY(0);}}

@media (max-width: 1200px) {
	.History .List {gap: 30px;}
	.History article {flex: 0 0 calc((100% - 30px * 3) / 4);}
	.History h3 {font-size: 32px;}
	.History h4 {font-size: 18px;}
	.History .Text {--text-size: 18px;}
}

@media (max-width: 1024px) {
	.History .List {gap: 15px;}
	.History article {flex: 0 0 calc((100% - 15px * 2) / 3);}
}

@media (max-width: 768px) {
	.Area {padding-top: 40px; padding-bottom: 60px;}
	.Area .Blocks {grid-template-columns: 1fr; gap: 40px;}
	.Area .Process {margin-top: 45px;}
	.Area .Image {height: auto; margin-bottom: 32px; display: block;}
	.Area .Image img {width: 100%; height: auto; position: static;}
	.Area .Text {max-width: 100%;}
	.Area .Left .Heading {margin-bottom: 16px;}
	.Area .Legend .Text + .Text {margin-top: 40px;}
	.Area .Legend h3 {font-size: 18px; margin-bottom: 20px; flex-wrap: wrap;}
	.History {padding-top: 40px; padding-bottom: 40px;}
	.History .Heading {margin-bottom: 24px;}
	.History .MainText {margin-bottom: 40px;}
	.History .List {gap: 30px;}
	.History .Image {max-width: 200px; margin-bottom: 24px;}
	.History article {flex: 0 0 calc((100% - 30px * 1) / 2);}
	.History h3 {font-size: 32px; margin-bottom: 12px;}
	.History h4 {font-size: 18px;}
	.History .Arrow {padding: 12px 20px;}
	.History .Arrow.Left {transform: translateX(-20px);}
	.History .Arrow.Right {transform: translateX(20px);}
	.History .Arrow svg {width: 40px; height: auto;}
	.Public {padding-top: 40px; padding-bottom: 40px; grid-template-columns: 1fr; gap: 24px;}
	.Public .Heading {margin-bottom: 40px; grid-column: span 1;}
	.Public .No {font-size: 24px; width: 40px; height: 40px; margin-bottom: 12px;}
	.Public h3 {font-size: 16px;}
	.Public p {font-size: 16px;}
	.Public > div:is(:nth-of-type(1), :nth-of-type(2)) {margin-bottom: 32px;}
	.Public > div:nth-of-type(1) {padding-top: 0;}
	.Public > div:nth-of-type(1) p:last-child {margin-top: 60px;}
	.Public > div:nth-of-type(2) p:not(:last-child) {margin-bottom: 24px;}
	.Public > div:is(:nth-of-type(3), :nth-of-type(4)) {margin-bottom: 60px;}
	.Public > div:not(:nth-of-type(8)) img {display: none;}
	.Public > div:nth-of-type(3) {max-width: 100%; margin-left: 0; margin-top: 40px;}
	.Public > div:nth-of-type(4) {max-width: 100%; margin-right: 0; margin-left: 0;}
	.Public > div:nth-of-type(5) {max-width: 100%; margin-top: 24px; margin-right: 0; margin-left: 0; margin-bottom: 60px;}
	.Public > div:nth-of-type(6) {max-width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 60px;}
	.Public > div:nth-of-type(7) {max-width: 100%;}
	.Public > div:nth-of-type(8) {padding-top: 20px;}
	.Public > div:nth-of-type(8) img {position: static; transform: none; width: 100%; height: auto;}
	.Public input {font-size: 16px;}
	.Public button {font-size: 16px; padding: 0 12px;}
	.News {
		--cols: 2;
	}
	.News {padding-top: 40px; padding-bottom: 80px; gap: 30px 15px;}
	.News .Heading {margin-bottom: 24px;}
	.News .Date {height: 60px; font-size: 14px;}
	.News h3 {font-size: 18px;}
	.News .BtnBox {margin-top: 40px;}
}
@media (max-width: 520px) {
	.News {
		--cols: 1;
	}
}

@media (max-width: 480px) {
	.Intro {padding-top: 40px; padding-bottom: 80px;}
	.Intro h1 {font-size: 28px; line-height: 34px; margin-bottom: 32px;}
	.Intro .Text {--text-size: 15px; --text-line-height: 22px;}
	.Topics {gap: 32px;}
	.Topics .Icon {height: 50px; margin-bottom: 20px;}
	.PList .Logo {height: 60px; margin-bottom: 24px;}
	.Area .Image {margin-bottom: 24px;}
	.History .Image {max-width: 150px;}
	.History article {flex: 0 0 calc(100% - 30px);}
	.History h3 {font-size: 28px;}
	.Public .No {font-size: 20px; width: 36px; height: 36px;}
	.Public h3 {font-size: 15px;}
	.Public p {font-size: 15px;}
	.Public input {font-size: 15px;}
	.Public button {font-size: 15px;}
}