.cg-about-page > section {
position: relative;
isolation: isolate;
overflow: hidden;
--cg-about-bg-shift: 0px;
--cg-about-bg-rotate: 0deg;
--cg-about-bg-shift-secondary: 0px;
--cg-about-bg-rotate-secondary: 0deg;
}
.cg-about-page .cg-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
color: #9a6f5d;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
.cg-about-page .cg-section-eyebrow::before {
content: "";
display: inline-block;
width: 26px;
height: 1px;
background: currentColor;
opacity: 0.48;
}
.cg-about-page .cg-section-title {
margin: 0 0 18px;
color: var(--cg-color-text);
font-size: clamp(30px, 4vw, 50px);
line-height: 1.1;
letter-spacing: 0;
}
.cg-about-page .cg-section-text {
color: var(--cg-color-muted);
font-size: 16px;
line-height: 1.8;
}
.cg-about-page .cg-section-text p {
margin: 0 0 14px;
}
.cg-about-page .cg-section-text p:last-child {
margin-bottom: 0;
}
.cg-about-page > section > .container {
position: relative;
z-index: 2;
}
.cg-about-page > section::before,
.cg-about-page > section::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 1;
will-change: transform;
transition: transform 0.16s linear;
}
.cg-about-page > section::before {
top: 9%;
right: -120px;
width: clamp(210px, 24vw, 330px);
height: clamp(210px, 24vw, 330px);
border: 1px solid rgba(183, 141, 121, 0.14);
border-radius: 999px;
background:
radial-gradient(
circle at center,
transparent 56%,
rgba(183, 141, 121, 0.15) 57% 58%,
transparent 59% 100%
),
repeating-linear-gradient(
35deg,
rgba(183, 141, 121, 0.08) 0 1px,
transparent 1px 14px
);
transform: translate3d(0, var(--cg-about-bg-shift), 0)
rotate(var(--cg-about-bg-rotate));
}
.cg-about-page > section::after {
left: -108px;
bottom: 10%;
width: clamp(190px, 22vw, 300px);
height: clamp(190px, 22vw, 300px);
border: 1px solid rgba(127, 143, 115, 0.13);
border-radius: 28px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.2),
rgba(226, 233, 215, 0.12)
),
repeating-linear-gradient(
-30deg,
rgba(29, 29, 29, 0.04) 0 1px,
transparent 1px 12px
);
transform: translate3d(0, var(--cg-about-bg-shift-secondary), 0)
rotate(var(--cg-about-bg-rotate-secondary));
}
.cg-about-page > section:nth-of-type(2n)::before {
left: -120px;
right: auto;
}
.cg-about-page > section:nth-of-type(2n)::after {
right: -108px;
left: auto;
}
.cg-about-hero {
background:
radial-gradient(circle at 12% 16%, rgba(216, 168, 142, 0.2) 0%, transparent 28%),
radial-gradient(circle at 82% 18%, rgba(127, 143, 115, 0.12) 0%, transparent 26%),
linear-gradient(180deg, #fcf7f3 0%, #fffdfb 100%);
}
.cg-about-hero__grid,
.cg-about-story__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(34px, 5vw, 70px);
}
.cg-about-hero__title {
margin: 0 0 20px;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.05;
letter-spacing: 0;
color: var(--cg-color-text);
}
.cg-about-hero__text,
.cg-about-cta__text {
font-size: 17px;
line-height: 1.75;
color: var(--cg-color-muted);
}
.cg-about-hero__text p:last-child,
.cg-about-cta__text p:last-child {
margin-bottom: 0;
}
.cg-about-hero__image-wrap,
.cg-about-story__image-wrap {
position: relative;
border-radius: 30px;
overflow: hidden;
background: #f3e7df;
border: 1px solid rgba(183, 141, 121, 0.16);
box-shadow: 0 26px 70px rgba(58, 47, 41, 0.13);
}
.cg-about-hero__image-wrap::after,
.cg-about-story__image-wrap::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
pointer-events: none;
}
.cg-about-hero__img,
.cg-about-story__img {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
transition: transform 0.6s ease;
}
.cg-about-hero__image-wrap:hover .cg-about-hero__img,
.cg-about-story__image-wrap:hover .cg-about-story__img {
transform: scale(1.035);
}
.cg-about-hero__placeholder,
.cg-about-story__placeholder {
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, #ead6c9 0%, #f7ede7 100%);
}
.cg-about-values {
background:
linear-gradient(180deg, #fffdfb 0%, #fff7f1 100%);
}
.cg-about-values__header {
max-width: 760px;
margin: 0 auto 44px;
text-align: center;
}
.cg-about-values__header .cg-section-eyebrow {
justify-content: center;
}
.cg-about-values__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
counter-reset: cg-about-value;
}
.cg-about-values__card {
position: relative;
min-height: 100%;
padding: 34px 26px 30px;
border-radius: 26px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 247, 0.9));
border: 1px solid rgba(183, 141, 121, 0.14);
box-shadow: 0 18px 48px rgba(58, 47, 41, 0.06);
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}
.cg-about-values__card::before {
counter-increment: cg-about-value;
content: "0" counter(cg-about-value);
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 20px;
border-radius: 999px;
background: rgba(217, 184, 167, 0.22);
color: #8e6554;
font-size: 13px;
font-weight: 800;
}
.cg-about-values__card:hover {
transition-delay: 0s !important;
transform: translateY(-6px);
border-color: rgba(183, 141, 121, 0.26);
box-shadow: 0 26px 70px rgba(58, 47, 41, 0.1);
}
.cg-about-values__card-title {
margin: 0 0 12px;
font-size: 22px;
line-height: 1.22;
color: var(--cg-color-text);
}
.cg-about-values__card-text {
font-size: 15px;
line-height: 1.7;
color: var(--cg-color-muted);
}
.cg-about-values__card-text p:last-child {
margin-bottom: 0;
}
.cg-about-philosophy__box,
.cg-about-founder__box,
.cg-about-cta__box {
max-width: 900px;
margin: 0 auto;
padding: clamp(34px, 5vw, 58px);
border-radius: 30px;
text-align: center;
}
.cg-about-philosophy__box {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 0% 0%, rgba(216, 168, 142, 0.16) 0%, transparent 34%),
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 247, 0.92));
border: 1px solid rgba(183, 141, 121, 0.16);
box-shadow: 0 22px 60px rgba(58, 47, 41, 0.08);
}
.cg-about-philosophy__box::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: min(260px, 50%);
height: 4px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #9f735f 0%, #d8a88e 100%);
transform: translateX(-50%);
}
.cg-about-philosophy__box > * {
position: relative;
z-index: 1;
}
.cg-about-founder {
background:
linear-gradient(180deg, #fffaf7 0%, #fff 100%);
}
.cg-about-founder__box {
position: relative;
overflow: hidden;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 247, 243, 0.94) 100%);
border: 1px solid rgba(183, 141, 121, 0.18);
box-shadow:
0 22px 60px rgba(58, 47, 41, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.cg-about-founder__box::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(220px, 44%);
height: 4px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #d8a88e 0%, #9f735f 100%);
transform: translateX(-50%);
}
.cg-about-founder__box::after {
content: "";
position: absolute;
top: -90px;
right: -70px;
width: 220px;
height: 220px;
border-radius: 999px;
background: radial-gradient(circle, rgba(216, 168, 142, 0.18) 0%, transparent 68%);
pointer-events: none;
}
.cg-about-founder__title {
position: relative;
z-index: 1;
margin: 0 0 18px;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.12;
color: var(--cg-color-text);
}
.cg-about-founder__text {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
font-size: 16px;
line-height: 1.75;
color: var(--cg-color-muted);
}
.cg-about-founder__text p {
margin: 0;
}
.cg-about-founder__text p:first-child {
font-size: 17px;
color: var(--cg-color-text);
}
.cg-about-founder__text p + p {
margin-top: 22px;
padding: 22px 24px;
border: 1px solid rgba(183, 141, 121, 0.16);
border-radius: var(--cg-radius-md);
background: rgba(255, 255, 255, 0.72);
color: #4f4641;
text-align: left;
box-shadow: 0 12px 28px rgba(58, 47, 41, 0.05);
}
.cg-about-founder__text p:last-child {
margin-bottom: 0;
}
.cg-about-cta__box {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 16% 0%, rgba(217, 184, 167, 0.24) 0%, transparent 32%),
radial-gradient(circle at 84% 100%, rgba(127, 143, 115, 0.2) 0%, transparent 30%),
linear-gradient(135deg, #1f1a17 0%, #3a2f29 100%);
color: #fff;
box-shadow: 0 28px 80px rgba(31, 26, 23, 0.18);
}
.cg-about-cta__box::before {
content: "";
position: absolute;
inset: 1px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: inherit;
pointer-events: none;
}
.cg-about-cta__box > * {
position: relative;
z-index: 1;
}
.cg-about-cta__title {
margin: 0 0 18px;
font-size: clamp(28px, 4vw, 48px);
line-height: 1.1;
letter-spacing: 0;
color: #fff;
}
.cg-about-cta__text {
margin: 0 auto 24px;
max-width: 680px;
color: rgba(255, 255, 255, 0.78);
}
.cg-about-cta .cg-button {
background: #fff;
color: var(--cg-color-text);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}
.cg-about-cta .cg-button:hover {
background: #fcf7f3;
}
@media (max-width: 991px) {
.cg-about-hero__grid,
.cg-about-story__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.cg-about-values__grid {
grid-template-columns: repeat(2, 1fr);
}
.cg-about-hero__img,
.cg-about-story__img {
min-height: 360px;
}
}
@media (max-width: 767px) {
.cg-about-page .cg-section-title {
font-size: clamp(28px, 9vw, 38px);
}
.cg-about-page .cg-section-eyebrow {
font-size: 12px;
}
.cg-about-hero__title {
font-size: clamp(34px, 11vw, 46px);
}
.cg-about-hero__image-wrap,
.cg-about-story__image-wrap {
border-radius: 24px;
}
.cg-about-hero__img,
.cg-about-story__img {
min-height: 300px;
}
.cg-about-page > section::before {
right: -112px;
width: clamp(150px, 48vw, 210px);
height: clamp(150px, 48vw, 210px);
opacity: 0.58;
}
.cg-about-page > section::after {
left: -102px;
width: clamp(130px, 42vw, 188px);
height: clamp(130px, 42vw, 188px);
opacity: 0.52;
}
.cg-about-values__grid {
grid-template-columns: 1fr;
}
.cg-about-philosophy__box,
.cg-about-founder__box,
.cg-about-cta__box {
padding: 28px 20px;
}
.cg-about-founder__text p + p {
padding: 18px;
}
}