:root {
--ink: #101712;
--ink-2: #29362e;
--body: #35443a;
--muted: #68746c;
--green: #086640;
--green-2: #0d7950;
--green-deep: #053d29;
--green-dark: #032e20;
--mint: #dcecdf;
--mint-2: #cbe4d2;
--cream: #f8f5ed;
--paper: #fffdf8;
--warm: #eee9dd;
--white: #fff;
--line: rgba(16, 23, 18, 0.15);
--line-light: rgba(255, 255, 255, 0.18);
--shadow: 0 28px 70px rgba(16, 42, 27, 0.14);
--progress: 0;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 92px;
}
body {
margin: 0;
overflow-x: hidden;
background: var(--cream);
color: var(--body);
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
font-size: 17px;
line-height: 1.9;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body.menu-open {
overflow: hidden;
}
button,
a {
font: inherit;
}
button {
color: inherit;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
color: var(--ink);
line-break: strict;
text-wrap: balance;
word-break: auto-phrase;
}
.skip-link {
position: fixed;
z-index: 1000;
top: 10px;
left: 10px;
padding: 10px 16px;
background: var(--white);
color: var(--ink);
transform: translateY(-160%);
}
.skip-link:focus {
transform: translateY(0);
}
.page-progress {
position: fixed;
z-index: 600;
inset: 0 auto auto 0;
width: calc(var(--progress) * 100%);
height: 3px;
background: var(--green-2);
pointer-events: none;
}
.icon {
display: block;
flex: 0 0 auto;
width: 1.65em;
height: 1.65em;
}
[data-reveal] {
opacity: 0;
filter: blur(6px);
transform: translateY(34px);
transition:
opacity 0.85s var(--ease-out),
filter 0.85s var(--ease-out),
transform 0.85s var(--ease-out);
transition-delay: calc(var(--item-index, 0) * 80ms);
}
[data-reveal].is-visible {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
.arrow {
display: inline-block;
line-height: 1;
transition: transform 0.25s ease;
}
.arrow-down {
transform: rotate(90deg);
}
a:hover .arrow-right {
transform: translateX(5px);
}
a:hover .arrow-down {
transform: translateY(5px) rotate(90deg);
} .site-header {
position: fixed;
z-index: 300;
top: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: minmax(270px, 1fr) auto minmax(150px, 0.42fr);
align-items: center;
height: 94px;
padding: 0 clamp(24px, 3.5vw, 62px);
border-bottom: 1px solid rgba(16, 23, 18, 0.09);
background: rgba(248, 245, 237, 0.92);
transition: height 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
backdrop-filter: blur(16px);
}
.site-header.is-scrolled {
height: 80px;
background: rgba(255, 253, 248, 0.96);
box-shadow: 0 12px 38px rgba(17, 38, 25, 0.08);
}
.header-brand-group {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.brand {
display: inline-flex;
flex: 0 0 auto;
}
.brand-window {
display: block;
width: 95px;
}
.brand-window img {
width: 100%;
height: auto;
}
.header-tagline {
margin: 0;
padding-left: 20px;
border-left: 1px solid var(--line);
color: #4f5b54;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.015em;
line-height: 1.55;
white-space: nowrap;
}
.desktop-nav {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(20px, 2.15vw, 36px);
height: 100%;
}
.desktop-nav > a,
.nav-parent > a {
position: relative;
display: flex;
align-items: center;
height: 100%;
color: var(--ink-2);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
.desktop-nav > a::after,
.nav-parent > a::after {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
height: 2px;
background: var(--green);
content: "";
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s var(--ease-out);
}
.desktop-nav > a:hover::after,
.nav-parent:hover > a::after,
.nav-parent:focus-within > a::after {
transform: scaleX(1);
transform-origin: left;
}
.nav-parent {
position: relative;
align-self: stretch;
}
.nav-parent > a {
gap: 6px;
}
.nav-parent > a span {
color: var(--green);
font-size: 15px;
}
.nav-dropdown {
position: absolute;
top: calc(100% - 5px);
left: 50%;
display: grid;
grid-template-columns: 1fr 1fr;
width: 540px;
padding: 20px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--paper);
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 14px);
transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
}
.nav-parent:hover .nav-dropdown,
.nav-parent:focus-within .nav-dropdown {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.nav-dropdown > p {
grid-column: 1 / -1;
margin: 8px 4px 7px;
color: var(--green);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}
.nav-dropdown > p:first-child {
margin-top: 0;
}
.nav-dropdown a {
display: grid;
grid-template-columns: 34px 1fr 18px;
gap: 10px;
align-items: center;
min-height: 66px;
padding: 10px 12px;
border-radius: 10px;
color: var(--ink);
font-size: 13px;
font-weight: 700;
transition: background 0.2s ease, color 0.2s ease;
}
.nav-dropdown a:hover {
background: var(--mint);
color: var(--green-deep);
}
.nav-dropdown a > .icon {
width: 30px;
color: var(--green);
}
.nav-dropdown a > span:not(.arrow) {
display: grid;
line-height: 1.35;
}
.nav-dropdown small {
margin-top: 4px;
color: var(--muted);
font-size: 11px;
font-weight: 500;
}
.nav-dropdown .nav-dropdown-all {
grid-column: 1 / -1;
grid-template-columns: 1fr auto;
min-height: 52px;
margin-top: 9px;
padding: 0 18px;
border-radius: 10px;
background: var(--green-deep);
color: var(--white);
}
.nav-dropdown .nav-dropdown-all:hover {
background: var(--green);
color: var(--white);
}
.header-contact {
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 194px;
height: 54px;
padding: 0 17px;
border-radius: 99px;
background: var(--green-deep);
color: var(--white);
font-size: 14px;
font-weight: 800;
transition: background 0.25s ease, transform 0.25s ease;
}
.header-contact .icon {
width: 24px;
}
.header-contact > span:not(.arrow) {
white-space: nowrap;
}
.header-contact:hover {
background: var(--green-2);
transform: translateY(-2px);
}
.menu-button,
.mobile-menu,
.mobile-bottom-bar {
display: none;
} .section {
padding: clamp(110px, 10vw, 160px) max(28px, 5vw);
}
.section-shell {
width: min(100%, 1320px);
margin: 0 auto;
}
.section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--green);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
}
.section-label span {
display: inline-grid;
place-items: center;
min-width: 32px;
height: 23px;
padding: 0 7px;
border: 1px solid currentColor;
border-radius: 99px;
font-size: 10px;
}
.section-heading {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.62fr);
gap: clamp(45px, 7vw, 110px);
align-items: end;
margin-bottom: clamp(58px, 6vw, 88px);
}
.section-heading h2 {
margin: 0;
font-size: clamp(44px, 4.6vw, 68px);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 1.24;
}
.section-heading > p,
.section-heading > div + p {
margin: 0 0 8px;
color: var(--muted);
font-size: 16px;
line-height: 2.05;
}
.button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 64px;
padding: 0 26px;
border-radius: 99px;
font-size: 15px;
font-weight: 800;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.button:hover {
transform: translateY(-3px);
}
.button-primary {
min-width: 282px;
background: var(--green-deep);
color: var(--white);
box-shadow: 0 18px 36px rgba(5, 61, 41, 0.19);
}
.button-primary .icon {
width: 25px;
}
.button-primary:hover {
background: var(--green-2);
box-shadow: 0 22px 44px rgba(5, 61, 41, 0.24);
}
.button-light {
min-width: 276px;
background: var(--white);
color: var(--green-deep);
}
.button-light:hover {
background: var(--mint);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 14px;
padding-bottom: 5px;
border-bottom: 1px solid currentColor;
color: var(--ink);
font-size: 14px;
font-weight: 800;
}
.text-link-strong {
color: var(--green-deep);
}
.section-more {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
min-width: 250px;
padding: 0 0 10px;
border-bottom: 1px solid currentColor;
color: var(--ink);
font-size: 14px;
font-weight: 800;
} .hero {
display: grid;
grid-template-columns: minmax(430px, 0.9fr) minmax(570px, 1.1fr);
gap: clamp(45px, 5.5vw, 92px);
align-items: center;
min-height: 890px;
padding: 138px clamp(28px, 5vw, 82px) 66px;
background:
radial-gradient(circle at 15% 50%, rgba(220, 236, 223, 0.58), transparent 29%),
var(--cream);
}
.hero-copy {
position: relative;
z-index: 2;
justify-self: end;
width: min(100%, 680px);
}
.hero-kicker {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 27px;
color: var(--green);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.025em;
animation: copy-in 0.85s 0.05s both var(--ease-out);
}
.hero-kicker span {
width: 30px;
height: 2px;
background: var(--green);
}
.hero h1 {
margin-bottom: 30px;
font-size: clamp(58px, 5.55vw, 88px);
font-weight: 900;
letter-spacing: -0.075em;
line-height: 1.13;
animation: copy-in 0.9s 0.12s both var(--ease-out);
}
.hero h1 > span,
.before-copy h2 > span,
.works-heading h2 > span,
.faq-heading h2 > span {
display: block;
white-space: nowrap;
}
.hero-lead {
max-width: 620px;
margin-bottom: 34px;
color: #47554c;
font-size: 17px;
line-height: 2.05;
animation: copy-in 0.9s 0.2s both var(--ease-out);
}
.hero-actions {
display: flex;
align-items: center;
gap: 28px;
margin-bottom: 30px;
animation: copy-in 0.9s 0.28s both var(--ease-out);
}
.hero-points {
display: flex;
flex-wrap: wrap;
gap: 10px 19px;
margin: 0;
padding: 0;
list-style: none;
animation: copy-in 0.9s 0.36s both var(--ease-out);
}
.hero-points li {
display: flex;
align-items: center;
gap: 7px;
color: #56635a;
font-size: 13px;
font-weight: 700;
}
.hero-points .icon {
width: 21px;
color: var(--green);
}
.hero-gallery {
--hero-x: 0;
--hero-y: 0;
position: relative;
align-self: stretch;
min-height: 680px;
overflow: hidden;
border-radius: 34px;
background:
radial-gradient(circle at 85% 6%, rgba(255, 255, 255, 0.13), transparent 28%),
var(--green-deep);
box-shadow: 0 34px 84px rgba(5, 61, 41, 0.22);
animation: gallery-in 1s 0.12s both var(--ease-out);
}
.hero-gallery::before,
.hero-gallery::after {
position: absolute;
z-index: 4;
right: 0;
left: 0;
height: 85px;
content: "";
pointer-events: none;
}
.hero-gallery::before {
top: 0;
background: linear-gradient(var(--green-deep), transparent);
}
.hero-gallery::after {
bottom: 0;
background: linear-gradient(transparent, var(--green-deep));
}
.gallery-column {
position: absolute;
top: -6%;
bottom: -6%;
left: 4.5%;
width: 54%;
transform: translate(calc(var(--hero-x) * -8px), calc(var(--hero-y) * -8px)) rotate(-3deg);
transition: transform 0.7s var(--ease-out);
}
.gallery-column.is-reverse {
right: 3.5%;
left: auto;
width: 39%;
transform: translate(calc(var(--hero-x) * 9px), calc(var(--hero-y) * 9px)) rotate(3deg);
}
.gallery-track {
display: flex;
flex-direction: column;
animation: gallery-up 52s linear infinite;
will-change: transform;
}
.gallery-column.is-reverse .gallery-track {
animation: gallery-down 58s linear infinite;
}
.gallery-set {
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 20px;
}
.hero-work {
position: relative;
margin: 0;
overflow: hidden;
border: 7px solid rgba(255, 255, 255, 0.95);
border-radius: 18px;
background: var(--white);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.23);
}
.hero-work img {
width: 100%;
aspect-ratio: 1.12;
object-fit: cover;
object-position: top center;
}
.hero-work-small img {
aspect-ratio: 1.24;
}
.hero-work figcaption {
position: absolute;
right: 7px;
bottom: 7px;
left: 7px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 11px;
border-radius: 9px;
background: rgba(255, 253, 248, 0.92);
color: var(--ink);
backdrop-filter: blur(8px);
}
.hero-work figcaption span {
color: var(--muted);
font-size: 9px;
font-weight: 700;
}
.hero-work figcaption strong {
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.gallery-label {
position: absolute;
z-index: 6;
right: clamp(18px, 2.4vw, 34px);
bottom: clamp(18px, 2.4vw, 34px);
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
align-items: end;
width: 152px;
height: 152px;
padding: 22px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
background: rgba(5, 61, 41, 0.8);
color: var(--white);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
transition: background 0.25s ease, transform 0.25s ease;
backdrop-filter: blur(10px);
}
.gallery-label:hover {
background: var(--green-2);
transform: scale(1.04) rotate(2deg);
}
.gallery-label > span {
grid-column: 1 / -1;
font-size: 12px;
font-weight: 700;
}
.gallery-label strong {
font-size: 44px;
line-height: 1;
}
.gallery-label small {
align-self: center;
font-size: 10px;
font-weight: 600;
}
.gallery-label .arrow {
position: absolute;
top: 23px;
right: 22px;
}
.concern-marquee {
overflow: hidden;
padding: 21px 0;
background: var(--green-2);
color: var(--white);
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee-left 34s linear infinite;
will-change: transform;
}
.marquee-group {
display: flex;
flex: 0 0 auto;
}
.marquee-group span {
display: flex;
align-items: center;
gap: 32px;
padding-right: 32px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.marquee-group i {
color: rgba(255, 255, 255, 0.38);
font-size: 7px;
font-style: normal;
} .before {
background: var(--paper);
}
.before-shell {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(50px, 7vw, 108px);
align-items: center;
}
.before-visual {
position: relative;
overflow: hidden;
border-radius: 28px;
background: var(--warm);
box-shadow: var(--shadow);
}
.before-visual img {
width: 100%;
aspect-ratio: 1.23;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.before-visual.is-visible img {
transform: scale(1.025);
}
.before-visual-badge {
position: absolute;
right: 22px;
bottom: 22px;
display: flex;
align-items: center;
gap: 13px;
padding: 16px 20px;
border-radius: 14px;
background: rgba(255, 253, 248, 0.93);
color: var(--green-deep);
box-shadow: 0 14px 36px rgba(10, 39, 25, 0.16);
backdrop-filter: blur(10px);
}
.before-visual-badge .icon {
width: 34px;
}
.before-visual-badge strong {
font-size: 14px;
line-height: 1.6;
}
.before-copy h2 {
margin-bottom: 29px;
font-size: clamp(39px, 3.7vw, 55px);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 1.35;
}
.before-copy > p:not(.section-label) {
margin-bottom: 16px;
color: #4d5b51;
font-size: 16px;
line-height: 2.05;
}
.before-copy .before-lead {
margin-bottom: 8px;
color: var(--green-deep);
font-size: 17px;
font-weight: 800;
}
.before-ok {
display: grid;
gap: 8px;
margin: 28px 0 30px;
padding: 0;
list-style: none;
}
.before-ok li {
display: flex;
align-items: center;
gap: 10px;
color: #4c5a50;
font-size: 14px;
font-weight: 700;
}
.before-ok .icon {
width: 22px;
color: var(--green);
}
.organize-steps {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 22px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--cream);
list-style: none;
}
.organize-steps li {
display: grid;
grid-template-columns: 58px 1fr;
gap: 18px;
align-items: center;
min-height: 158px;
padding: 30px;
border-right: 1px solid var(--line);
transition: background 0.3s ease, transform 0.3s ease;
}
.organize-steps li:last-child {
border-right: 0;
}
.organize-steps li:hover {
background: var(--mint);
}
.organize-steps > li > .icon {
width: 52px;
color: var(--green);
}
.organize-steps small {
display: block;
margin-bottom: 2px;
color: var(--green);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
}
.organize-steps strong {
display: block;
margin-bottom: 4px;
color: var(--ink);
font-size: 23px;
}
.organize-steps p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
} .strengths {
background: var(--warm);
}
.strength-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.strength-card {
position: relative;
min-height: 310px;
padding: clamp(32px, 3.6vw, 50px);
overflow: hidden;
border: 1px solid rgba(16, 23, 18, 0.11);
border-radius: 22px;
background: var(--paper);
transition: color 0.4s ease, background 0.4s ease, transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.strength-card::after {
position: absolute;
right: -70px;
bottom: -90px;
width: 230px;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
content: "";
transform: scale(0.4);
transition: transform 0.5s var(--ease-out);
}
.strength-card:hover {
background: var(--green-deep);
color: var(--white);
box-shadow: 0 26px 55px rgba(5, 61, 41, 0.2);
transform: translateY(-7px);
}
.strength-card:hover::after {
transform: scale(2.2);
}
.icon-frame {
position: absolute;
top: 39px;
right: 39px;
display: grid;
place-items: center;
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--mint);
color: var(--green-deep);
transition: background 0.35s ease, color 0.35s ease, transform 0.35s var(--ease-out);
}
.icon-frame .icon {
width: 37px;
}
.strength-card:hover .icon-frame {
background: rgba(255, 255, 255, 0.13);
color: var(--white);
transform: rotate(-7deg) scale(1.05);
}
.strength-number {
display: block;
margin-bottom: 72px;
color: var(--green);
font-size: 12px;
font-weight: 900;
transition: color 0.35s ease;
}
.strength-card h3 {
position: relative;
z-index: 1;
max-width: 470px;
margin-bottom: 15px;
font-size: clamp(24px, 2.25vw, 32px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.45;
transition: color 0.35s ease;
}
.strength-card p {
position: relative;
z-index: 1;
max-width: 500px;
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.95;
transition: color 0.35s ease;
}
.strength-card:hover h3,
.strength-card:hover p,
.strength-card:hover .strength-number {
color: var(--white);
} .works {
background:
radial-gradient(circle at 83% 14%, rgba(23, 129, 86, 0.35), transparent 25%),
var(--green-dark);
color: var(--white);
}
.section-heading-light h2,
.section-heading-light p,
.section-heading-light .section-label {
color: var(--white);
}
.section-heading.section-heading-light > p {
color: rgba(255, 255, 255, 0.68);
}
.work-grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: 28px;
}
.work-card {
display: block;
color: var(--white);
}
.work-card:nth-child(3) {
grid-column: 1;
}
.work-card:nth-child(4) {
grid-column: 2;
}
.work-image {
overflow: hidden;
border-radius: 19px;
background: #dfe6e1;
}
.work-image img {
width: 100%;
aspect-ratio: 1.45;
object-fit: cover;
object-position: top center;
transition: transform 0.85s var(--ease-out), filter 0.35s ease;
}
.work-featured .work-image img {
aspect-ratio: 1.12;
}
.work-tall .work-image img {
aspect-ratio: 0.9;
}
.work-card:hover .work-image img {
filter: saturate(1.05);
transform: scale(1.035);
}
.work-info {
position: relative;
padding: 24px 54px 0 2px;
}
.work-info > div {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
}
.work-info span {
padding: 4px 9px;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 99px;
color: rgba(255, 255, 255, 0.84);
font-size: 11px;
font-weight: 700;
}
.work-info small {
color: rgba(255, 255, 255, 0.58);
font-size: 12px;
font-weight: 500;
}
.work-info h3 {
margin: 9px 0 8px;
color: var(--white);
font-size: 25px;
font-weight: 800;
}
.work-info p {
max-width: 580px;
margin: 0;
color: rgba(255, 255, 255, 0.66);
font-size: 14px;
line-height: 1.9;
}
.work-info i {
position: absolute;
top: 30px;
right: 4px;
display: grid;
place-items: center;
width: 39px;
height: 39px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 50%;
font-size: 17px;
font-style: normal;
transition: background 0.25s ease, transform 0.25s ease;
}
.work-card:hover .work-info i {
background: var(--white);
color: var(--green-deep);
transform: translate(3px, -3px);
}
.works-more {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 72px;
padding-top: 36px;
border-top: 1px solid var(--line-light);
}
.works-more p {
display: flex;
align-items: baseline;
gap: 16px;
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 14px;
}
.works-more strong {
color: var(--white);
font-size: 34px;
} .services {
background: var(--paper);
}
.services-heading {
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.46fr);
gap: clamp(36px, 4.2vw, 60px);
}
.services-heading h2 > span {
display: block;
}
.services-heading h2 em {
font-style: normal;
}
.services-heading > p {
max-width: 520px;
text-wrap: pretty;
}
.services-heading > p .no-break {
white-space: nowrap;
}
.services-title-mobile-break {
display: none;
}
.service-list {
border-top: 1px solid var(--line);
}
.service-row {
position: relative;
display: grid;
grid-template-columns: 40px 62px minmax(250px, 0.83fr) minmax(280px, 1fr) 190px 48px;
gap: clamp(15px, 2.4vw, 35px);
align-items: center;
min-height: 168px;
padding: 25px 10px;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.service-row::before {
position: absolute;
inset: 8px 0;
border-radius: 18px;
background: var(--mint);
content: "";
opacity: 0;
transform: scaleY(0.7);
transition: opacity 0.32s ease, transform 0.32s var(--ease-out);
}
.service-row:hover::before {
opacity: 1;
transform: scaleY(1);
}
.service-row > * {
position: relative;
z-index: 1;
}
.service-number {
color: var(--green);
font-size: 12px;
font-weight: 900;
}
.service-icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--cream);
color: var(--green);
transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}
.service-icon .icon {
width: 32px;
}
.service-row:hover .service-icon {
background: var(--green-deep);
color: var(--white);
transform: rotate(-6deg);
}
.service-name small {
display: block;
margin-bottom: 5px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
}
.service-name h3 {
margin: 0;
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 800;
letter-spacing: -0.04em;
}
.service-row > p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.9;
}
.service-preview {
aspect-ratio: 1.48 / 1;
min-width: 0;
overflow: hidden;
border-radius: 11px;
background: var(--warm);
box-shadow: 0 12px 28px rgba(25, 50, 35, 0.1);
transform: rotate(0);
transition: transform 0.35s var(--ease-out);
}
.service-preview img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.6s var(--ease-out);
}
.service-row:hover .service-preview {
transform: rotate(1.5deg) scale(1.04);
}
.service-row:hover .service-preview img {
transform: scale(1.04);
}
.service-arrow {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--green-deep);
font-size: 18px;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.service-row:hover .service-arrow {
background: var(--green-deep);
color: var(--white);
transform: translateX(4px);
}
.services-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 34px;
}
.services-footer p {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: var(--green-deep);
font-size: 14px;
font-weight: 700;
}
.services-footer .icon {
width: 27px;
} .flow {
background: var(--warm);
}
.process-list {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.process-list::before {
position: absolute;
z-index: 0;
top: 63px;
right: 9%;
left: 9%;
height: 2px;
background: var(--mint-2);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 1.5s 0.2s var(--ease-out);
}
.process-list.is-visible::before {
transform: scaleX(1);
}
.process-list li {
position: relative;
z-index: 1;
min-height: 300px;
padding: 24px 22px 26px;
border: 1px solid var(--line);
border-radius: 17px;
background: var(--paper);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.process-list li:hover {
box-shadow: 0 18px 42px rgba(24, 47, 32, 0.11);
transform: translateY(-6px);
}
.process-number {
color: var(--green);
font-size: 12px;
font-weight: 900;
}
.process-icon {
display: grid;
place-items: center;
width: 72px;
height: 72px;
margin: 20px 0 25px;
border-radius: 50%;
background: var(--mint);
color: var(--green-deep);
}
.process-icon .icon {
width: 38px;
}
.process-list h3 {
min-height: 58px;
margin-bottom: 13px;
font-size: 19px;
font-weight: 800;
line-height: 1.55;
}
.process-list p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.85;
}
.flow-footer {
display: flex;
align-items: stretch;
margin-top: 38px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 17px;
background: var(--paper);
}
.flow-footer > div {
display: grid;
min-width: 220px;
padding: 18px 28px;
border-right: 1px solid var(--line);
}
.flow-footer small {
color: var(--muted);
font-size: 11px;
font-weight: 600;
}
.flow-footer strong {
color: var(--ink);
font-size: 19px;
}
.flow-footer > a {
display: flex;
flex: 1;
align-items: center;
justify-content: flex-end;
gap: 24px;
padding: 18px 28px;
color: var(--green-deep);
font-size: 14px;
font-weight: 800;
} .aftercare {
padding: clamp(110px, 10vw, 160px) max(28px, 5vw);
background:
radial-gradient(circle at 12% 14%, rgba(29, 142, 96, 0.26), transparent 24%),
var(--green-deep);
color: var(--white);
}
.aftercare-shell {
width: min(100%, 1320px);
margin: 0 auto;
}
.aftercare-heading {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.58fr);
gap: clamp(48px, 8vw, 120px);
align-items: end;
margin-bottom: 62px;
}
.aftercare-heading .section-label {
grid-column: 1 / -1;
margin-bottom: -32px;
color: #9bd4b4;
}
.aftercare-heading h2 {
margin: 0;
color: var(--white);
font-size: clamp(44px, 4.6vw, 68px);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 1.25;
}
.aftercare-heading > p:not(.section-label) {
margin: 0 0 7px;
color: rgba(255, 255, 255, 0.68);
font-size: 15px;
line-height: 2;
}
.support-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.support-card {
position: relative;
min-height: 480px;
padding: clamp(36px, 4vw, 54px);
overflow: hidden;
border-radius: 24px;
color: var(--green-deep);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.support-card:hover {
box-shadow: 0 30px 65px rgba(0, 0, 0, 0.2);
transform: translateY(-8px);
}
.support-maintenance {
background: var(--paper);
}
.support-growth {
background: var(--mint-2);
}
.support-icon {
position: absolute;
top: 42px;
right: 42px;
display: grid;
place-items: center;
width: 82px;
height: 82px;
border: 1px solid rgba(5, 61, 41, 0.18);
border-radius: 50%;
transition: transform 0.4s var(--ease-out);
}
.support-card:hover .support-icon {
transform: rotate(8deg) scale(1.06);
}
.support-icon .icon {
width: 44px;
}
.support-card > span {
display: block;
margin: 11px 0 6px;
color: var(--green);
font-size: 13px;
font-weight: 800;
}
.support-card h3 {
margin: 0 0 24px;
font-size: clamp(35px, 3.8vw, 54px);
font-weight: 900;
letter-spacing: -0.05em;
}
.support-card > p {
max-width: 480px;
margin-bottom: 27px;
color: #4b5b50;
font-size: 15px;
line-height: 2;
}
.support-card ul {
display: grid;
gap: 10px;
margin: 0 0 34px;
padding: 0;
list-style: none;
}
.support-card li {
display: flex;
align-items: center;
gap: 9px;
color: #3c4c42;
font-size: 14px;
font-weight: 700;
}
.support-card li .icon {
width: 21px;
color: var(--green);
}
.support-card > strong {
position: absolute;
right: clamp(36px, 4vw, 54px);
bottom: 38px;
left: clamp(36px, 4vw, 54px);
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 17px;
border-top: 1px solid rgba(5, 61, 41, 0.2);
font-size: 14px;
} .faq {
background: var(--paper);
}
.faq-shell {
display: grid;
grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr);
gap: clamp(65px, 10vw, 150px);
align-items: start;
}
.faq-heading {
position: sticky;
top: 120px;
display: block;
margin-bottom: 0;
}
.faq-heading h2 {
margin-bottom: 24px;
font-size: clamp(40px, 3.5vw, 48px);
}
.faq-heading > p {
margin-bottom: 34px;
font-size: 15px;
}
.faq-heading .section-more {
width: min(100%, 270px);
} .contact {
position: relative;
min-height: 750px;
padding: clamp(90px, 8vw, 130px) max(28px, 5vw) 115px;
overflow: hidden;
background: var(--green-dark);
color: var(--white);
}
.contact-photo {
position: absolute;
inset: 0 48% 0 0;
overflow: hidden;
}
.contact-photo::after {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(3, 46, 32, 0.22), var(--green-dark) 96%);
content: "";
}
.contact-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(0.82) contrast(0.98);
opacity: 0.88;
}
.contact-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.68fr);
gap: clamp(55px, 8vw, 130px);
align-items: center;
width: min(100%, 1320px);
margin: 0 auto;
}
.contact-copy {
padding: 34px 0;
}
.contact-copy .section-label {
color: #b7dec6;
}
.contact-copy h2 {
margin-bottom: 27px;
color: var(--white);
font-size: clamp(48px, 5.2vw, 74px);
font-weight: 900;
letter-spacing: -0.06em;
line-height: 1.2;
}
.contact-copy > p:not(.section-label) {
max-width: 600px;
margin-bottom: 29px;
color: rgba(255, 255, 255, 0.75);
font-size: 16px;
line-height: 2.05;
}
.contact-copy ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.contact-copy li {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.86);
font-size: 14px;
font-weight: 700;
}
.contact-copy li .icon {
width: 22px;
color: #a9d9bb;
}
.contact-action {
display: grid;
padding: clamp(32px, 4vw, 50px);
border-radius: 27px;
background: var(--paper);
color: var(--green-deep);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}
.contact-action-icon {
display: grid;
place-items: center;
width: 68px;
height: 68px;
margin-bottom: 27px;
border-radius: 50%;
background: var(--mint);
}
.contact-action-icon .icon {
width: 37px;
}
.contact-action > small {
margin-bottom: 7px;
color: var(--green);
font-size: 12px;
font-weight: 800;
}
.contact-action > strong {
margin-bottom: 29px;
color: var(--ink);
font-size: clamp(23px, 2.5vw, 33px);
line-height: 1.55;
}
.button-contact {
background: var(--green-deep);
color: var(--white);
}
.button-contact:hover {
background: var(--green-2);
}
.contact-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
margin-top: 18px;
color: #506057;
font-size: 13px;
font-weight: 700;
}
.contact-marquee {
position: absolute;
z-index: 1;
right: 0;
bottom: -38px;
left: 0;
overflow: hidden;
color: transparent;
font-size: clamp(95px, 14vw, 220px);
font-weight: 900;
letter-spacing: -0.06em;
line-height: 1;
white-space: nowrap;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
}
.contact-marquee span {
display: block;
width: max-content;
animation: contact-word 30s linear infinite;
} .floating-consult {
position: fixed;
z-index: 250;
right: 24px;
bottom: 24px;
display: grid;
grid-template-columns: 48px 1fr 20px;
gap: 13px;
align-items: center;
min-width: 300px;
padding: 12px 16px 12px 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
background: var(--green-deep);
color: var(--white);
box-shadow: 0 16px 42px rgba(3, 46, 32, 0.29);
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition: opacity 0.35s ease, transform 0.35s var(--ease-out), background 0.25s ease;
}
.floating-consult.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.floating-consult:hover {
background: var(--green-2);
transform: translateY(-4px);
}
.floating-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.13);
}
.floating-icon .icon {
width: 27px;
}
.floating-copy {
display: grid;
line-height: 1.4;
}
.floating-copy small {
color: rgba(255, 255, 255, 0.65);
font-size: 10px;
font-weight: 600;
}
.floating-copy strong {
font-size: 14px;
} .footer {
padding: 0 max(28px, 5vw);
background: var(--cream);
}
.footer-intro,
.footer-main,
.footer-bottom {
width: min(100%, 1320px);
margin: 0 auto;
}
.footer-intro {
display: grid;
grid-template-columns: minmax(280px, 0.75fr) minmax(350px, 1fr) auto;
gap: clamp(40px, 6vw, 90px);
align-items: center;
padding: 84px 0 68px;
border-bottom: 1px solid var(--line);
}
.footer-brand .brand-window {
width: 120px;
margin-bottom: 18px;
}
.footer-brand strong {
display: block;
color: var(--ink);
font-size: 16px;
line-height: 1.8;
white-space: nowrap;
}
.footer-intro > p {
margin: 0;
color: #58645c;
font-size: 14px;
line-height: 2.05;
}
.footer-consult {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
min-width: 220px;
min-height: 62px;
padding: 0 24px;
border-radius: 99px;
background: var(--green-deep);
color: var(--white);
font-size: 14px;
font-weight: 800;
transition: background 0.25s ease, transform 0.25s ease;
}
.footer-consult .icon {
width: 25px;
}
.footer-consult:hover {
background: var(--green-2);
transform: translateY(-3px);
}
.footer-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: clamp(50px, 8vw, 110px);
padding: 68px 0;
border-bottom: 1px solid var(--line);
}
.footer-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 35px;
}
.footer-links > div {
display: grid;
align-content: start;
gap: 10px;
}
.footer-links strong {
margin-bottom: 8px;
color: var(--ink);
font-size: 13px;
}
.footer-links a {
width: max-content;
max-width: 100%;
color: #5c685f;
font-size: 13px;
transition: color 0.2s ease, transform 0.2s ease;
}
.footer-links a:hover {
color: var(--green);
transform: translateX(3px);
}
.footer-address {
padding-left: 34px;
border-left: 1px solid var(--line);
font-style: normal;
}
.footer-address small {
display: block;
margin-bottom: 5px;
color: var(--green);
font-size: 11px;
font-weight: 800;
}
.footer-address > strong {
display: block;
margin-bottom: 16px;
color: var(--ink);
font-size: 17px;
}
.footer-address p {
margin-bottom: 13px;
color: #5a675e;
font-size: 13px;
line-height: 1.85;
}
.footer-address a {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
color: var(--green-deep);
font-size: 16px;
font-weight: 800;
}
.footer-address a .icon {
width: 22px;
}
.footer-address > span {
color: var(--muted);
font-size: 11px;
}
.footer-bottom {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
min-height: 86px;
color: var(--muted);
font-size: 11px;
}
.footer-bottom p {
margin: 0;
}
.footer-bottom a {
justify-self: end;
display: flex;
align-items: center;
gap: 12px;
color: var(--green-deep);
font-weight: 700;
}
.footer-bottom a span {
display: grid;
place-items: center;
width: 33px;
height: 33px;
border: 1px solid var(--line);
border-radius: 50%;
} @keyframes copy-in {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gallery-in {
from { opacity: 0; transform: translateY(25px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gallery-up {
to { transform: translateY(-50%); }
}
@keyframes gallery-down {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
@keyframes marquee-left {
to { transform: translate3d(-25%, 0, 0); }
}
@keyframes contact-word {
to { transform: translateX(-50%); }
} @media (max-width: 1280px) {
.site-header {
grid-template-columns: 275px 1fr 160px;
padding-inline: 18px;
}
.header-tagline {
display: block;
padding-left: 14px;
font-size: 11px;
}
.desktop-nav {
gap: 18px;
}
.header-contact {
min-width: 158px;
}
.hero {
grid-template-columns: minmax(420px, 0.92fr) minmax(500px, 1.08fr);
gap: 45px;
padding-inline: 35px;
}
.hero h1 {
font-size: clamp(52px, 5.15vw, 72px);
}
.service-row {
grid-template-columns: 35px 56px minmax(220px, 0.85fr) minmax(230px, 1fr) 155px 44px;
gap: 18px;
}
}
@media (max-width: 1050px) {
body {
padding-bottom: 72px;
}
.site-header {
grid-template-columns: 1fr auto;
height: 78px;
padding-inline: 22px;
}
.site-header.is-scrolled {
height: 72px;
}
.header-brand-group {
gap: 14px;
}
.header-tagline {
display: block;
padding-left: 14px;
font-size: 11px;
}
.desktop-nav,
.header-contact {
display: none;
}
.menu-button {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 52px;
height: 52px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--green-deep);
color: var(--white);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}
.menu-button span {
display: block;
flex: 0 0 auto;
width: 22px;
height: 1px;
background: currentColor;
transition: transform 0.25s ease;
}
.menu-button small {
display: block;
margin-top: 1px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1;
}
.menu-button:hover {
transform: scale(1.04);
}
.menu-button[aria-expanded="true"] {
background: var(--paper);
color: var(--green-deep);
}
.menu-button[aria-expanded="true"] span:first-child {
transform: translateY(2.5px) rotate(45deg);
}
.menu-button[aria-expanded="true"] span:nth-child(2) {
transform: translateY(-2.5px) rotate(-45deg);
}
.mobile-menu {
position: fixed;
z-index: 400;
inset: 0;
display: block;
width: auto;
max-width: 100%;
height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: clamp(108px, 12vh, 132px) clamp(24px, 4vw, 52px) max(34px, env(safe-area-inset-bottom));
background:
radial-gradient(circle at 9% 22%, rgba(203, 228, 210, 0.16) 0 2px, transparent 3px),
radial-gradient(circle at 88% 76%, rgba(203, 228, 210, 0.11) 0 120px, transparent 121px),
linear-gradient(145deg, var(--green-deep) 0%, var(--green-dark) 100%);
opacity: 0;
pointer-events: none;
visibility: hidden;
transform: translateY(-12px) scale(0.99);
transform-origin: top center;
transition: opacity 0.3s ease, transform 0.42s var(--ease-out), visibility 0s linear 0.42s;
-webkit-overflow-scrolling: touch;
}
.mobile-menu::before {
position: fixed;
top: 23%;
right: 4%;
width: clamp(90px, 15vw, 170px);
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
content: "";
pointer-events: none;
}
.mobile-menu:focus {
outline: 0;
}
.mobile-menu-topbar {
position: fixed;
z-index: 3;
top: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 17px;
align-items: center;
height: 78px;
padding: 0 22px;
border-bottom: 1px solid rgba(16, 23, 18, 0.1);
background: rgba(248, 245, 237, 0.97);
box-shadow: 0 12px 32px rgba(3, 46, 32, 0.08);
backdrop-filter: blur(14px);
}
.mobile-menu-brand {
display: block;
width: 92px;
}
.mobile-menu-brand img {
width: 100%;
}
.mobile-menu-topbar > p {
margin: 0;
padding-left: 17px;
border-left: 1px solid var(--line);
color: #4f5b54;
font-size: 11px;
font-weight: 650;
letter-spacing: 0.01em;
line-height: 1.5;
white-space: nowrap;
}
.mobile-menu-close {
position: relative;
display: grid;
place-items: center;
width: 52px;
height: 52px;
padding: 8px 7px 5px;
border: 1px solid rgba(5, 61, 41, 0.14);
border-radius: 50%;
background: var(--paper);
color: var(--green-deep);
cursor: pointer;
box-shadow: 0 8px 22px rgba(3, 46, 32, 0.08);
}
.mobile-menu-close span::before,
.mobile-menu-close span::after {
position: absolute;
top: 20px;
left: 15px;
width: 20px;
height: 1px;
background: currentColor;
content: "";
}
.mobile-menu-close span::before {
transform: rotate(45deg);
}
.mobile-menu-close span::after {
transform: rotate(-45deg);
}
.mobile-menu-close small {
align-self: end;
font-size: 7px;
font-weight: 900;
letter-spacing: 0.08em;
}
.mobile-menu.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.mobile-menu-inner {
position: relative;
z-index: 1;
width: min(100%, 990px);
margin: 0 auto;
}
.mobile-menu-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 26px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.mobile-menu-heading,
.mobile-menu-columns,
.mobile-menu-footer {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.4s ease, transform 0.52s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu-heading,
.mobile-menu.is-open .mobile-menu-columns,
.mobile-menu.is-open .mobile-menu-footer {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.is-open .mobile-menu-heading {
transition-delay: 0.08s;
}
.mobile-menu.is-open .mobile-menu-columns {
transition-delay: 0.14s;
}
.mobile-menu.is-open .mobile-menu-footer {
transition-delay: 0.2s;
}
.mobile-menu-label {
display: flex;
gap: 12px;
align-items: center;
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
}
.mobile-menu-label span {
color: #a8d5b5;
font-size: 10px;
letter-spacing: 0.18em;
}
.mobile-menu-title {
margin: 0;
color: var(--white);
font-size: clamp(25px, 3.5vw, 36px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.42;
text-align: right;
}
.mobile-menu-columns {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: clamp(28px, 5vw, 60px);
}
.mobile-menu-category {
margin: 0 0 12px;
color: #a8d5b5;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
}
.mobile-menu-primary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.mobile-menu-primary a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 68px;
padding: 10px 13px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
background: rgba(255, 255, 255, 0.065);
color: var(--white);
font-size: 15px;
font-weight: 800;
line-height: 1.4;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.mobile-menu-primary a > span:first-child {
display: grid;
gap: 3px;
}
.mobile-menu-primary a small {
color: #8fc7a0;
font-size: 9px;
letter-spacing: 0.12em;
}
.mobile-menu-primary .arrow {
color: #a8d5b5;
}
.mobile-menu-primary a:hover,
.mobile-menu-primary a:focus-visible {
border-color: rgba(255, 255, 255, 0.34);
background: rgba(255, 255, 255, 0.14);
transform: translateY(-2px);
}
.mobile-service-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
}
.mobile-service-links > p {
grid-column: 1 / -1;
margin: 0 0 4px;
}
.mobile-service-links > .mobile-support-category {
margin-top: 12px;
}
.mobile-service-links a {
display: grid;
grid-template-columns: 30px 1fr 16px;
align-items: center;
gap: 10px;
min-height: 68px;
padding: 10px 13px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
background: var(--paper);
color: var(--green-deep);
font-size: 13px;
font-weight: 700;
line-height: 1.45;
transition: background 0.25s ease, transform 0.25s var(--ease-out);
}
.mobile-service-links .icon {
width: 28px;
color: var(--green);
}
.mobile-service-links .arrow {
color: var(--green);
}
.mobile-service-links a:hover,
.mobile-service-links a:focus-visible {
background: var(--mint);
transform: translateY(-2px);
}
.mobile-menu-footer {
display: grid;
grid-template-columns: minmax(180px, 0.55fr) minmax(320px, 1fr);
gap: clamp(18px, 4vw, 42px);
align-items: end;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.mobile-menu-utility {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
padding-bottom: 4px;
}
.mobile-menu-utility a {
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 700;
}
.mobile-menu-utility a span {
margin-left: 5px;
color: #a8d5b5;
}
.mobile-menu-contact {
display: grid;
grid-template-columns: 42px 1fr 24px;
align-items: center;
gap: 14px;
min-height: 78px;
padding: 12px 18px 12px 13px;
border-radius: 16px;
background: var(--paper);
color: var(--green-deep);
box-shadow: 0 18px 42px rgba(0, 20, 12, 0.2);
transition: background 0.25s ease, transform 0.25s var(--ease-out);
}
.mobile-menu-contact-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--mint);
color: var(--green);
}
.mobile-menu-contact-icon .icon {
width: 24px;
}
.mobile-menu-contact > span:nth-child(2) {
display: grid;
gap: 2px;
}
.mobile-menu-contact small {
color: var(--muted);
font-size: 10px;
font-weight: 600;
line-height: 1.4;
}
.mobile-menu-contact strong {
font-size: 16px;
line-height: 1.45;
}
.mobile-menu-contact > .arrow {
color: var(--green);
}
.mobile-menu-contact:hover,
.mobile-menu-contact:focus-visible {
background: var(--mint);
transform: translateY(-2px);
}
.hero {
grid-template-columns: 1fr;
gap: 54px;
min-height: 0;
padding: 130px 30px 48px;
}
.hero-copy {
justify-self: start;
}
.hero h1 {
font-size: clamp(53px, 9.2vw, 76px);
}
.hero-gallery {
width: 100%;
min-height: 620px;
}
.section-heading,
.aftercare-heading {
grid-template-columns: 1fr;
gap: 25px;
}
.aftercare-heading .section-label {
grid-column: auto;
margin-bottom: -4px;
}
.before-shell {
grid-template-columns: 1fr;
gap: 55px;
}
.organize-steps {
grid-column: auto;
}
.service-row {
grid-template-columns: 38px 58px minmax(250px, 1fr) 48px;
min-height: 148px;
}
.service-row > p {
grid-column: 3 / 4;
}
.service-preview {
display: none;
}
.service-arrow {
grid-column: 4;
grid-row: 1 / 3;
}
.process-list {
grid-template-columns: repeat(2, 1fr);
}
.process-list::before {
display: none;
}
.process-list li:last-child {
grid-column: 1 / -1;
min-height: 240px;
}
.faq-shell {
grid-template-columns: 1fr;
gap: 55px;
}
.faq-heading {
position: static;
}
.contact {
padding-top: 86px;
}
.contact-photo {
inset: 0;
opacity: 0.3;
}
.contact-photo::after {
background: rgba(3, 46, 32, 0.65);
}
.contact-inner {
grid-template-columns: 1fr 0.78fr;
gap: 45px;
}
.footer-intro {
grid-template-columns: 1fr 1.2fr;
}
.footer-consult {
grid-column: 1 / -1;
width: min(100%, 330px);
}
.footer-main {
grid-template-columns: 1fr;
}
.footer-address {
padding: 28px 0 0;
border-top: 1px solid var(--line);
border-left: 0;
}
.floating-consult {
display: none;
}
.mobile-bottom-bar {
position: fixed;
z-index: 290;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: 1fr 1fr;
height: 72px;
padding: 7px 9px;
background: rgba(255, 253, 248, 0.96);
box-shadow: 0 -8px 30px rgba(20, 39, 27, 0.12);
backdrop-filter: blur(12px);
transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
}
body.menu-open .mobile-bottom-bar {
opacity: 0;
pointer-events: none;
transform: translateY(110%);
}
.mobile-bottom-bar a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 9px;
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
}
.mobile-bottom-bar a:last-child {
background: var(--green-deep);
color: var(--white);
}
.mobile-bottom-bar .icon {
width: 24px;
}
}
@media (max-width: 720px) {
body {
font-size: 16px;
}
.site-header {
height: 72px;
padding-inline: 15px;
}
.site-header.is-scrolled {
height: 68px;
}
.brand-window {
width: 79px;
}
.header-tagline {
font-size: 11px;
line-height: 1.45;
}
.menu-button {
width: 48px;
height: 48px;
}
.mobile-menu {
padding: 94px 16px max(28px, env(safe-area-inset-bottom));
}
.mobile-menu::before {
top: 16%;
right: -34px;
width: 116px;
}
.mobile-menu-heading {
display: grid;
gap: 7px;
margin-bottom: 18px;
padding-bottom: 15px;
}
.mobile-menu-title {
font-size: clamp(25px, 7.4vw, 29px);
line-height: 1.38;
text-align: left;
}
.mobile-menu-columns {
grid-template-columns: 1fr;
gap: 22px;
}
.mobile-menu-category {
margin-bottom: 9px;
font-size: 11px;
}
.mobile-menu-primary a {
min-height: 61px;
padding: 9px 11px;
border-radius: 10px;
font-size: 14px;
}
.mobile-service-links a {
grid-template-columns: 27px 1fr 14px;
gap: 8px;
min-height: 60px;
padding: 8px 10px;
border-radius: 10px;
font-size: 12px;
}
.mobile-service-links .icon {
width: 25px;
}
.mobile-menu-footer {
grid-template-columns: 1fr;
gap: 15px;
margin-top: 22px;
padding-top: 16px;
}
.mobile-menu-utility {
gap: 8px 20px;
padding: 0;
}
.mobile-menu-contact {
grid-template-columns: 40px 1fr 20px;
min-height: 74px;
padding: 10px 15px 10px 11px;
border-radius: 14px;
}
.mobile-menu-contact-icon {
width: 40px;
height: 40px;
}
.section,
.aftercare {
padding: 92px 20px;
}
.section-label {
margin-bottom: 17px;
font-size: 11px;
}
.section-heading {
margin-bottom: 45px;
}
.section-heading h2,
.aftercare-heading h2 {
font-size: clamp(35px, 10.5vw, 47px);
letter-spacing: -0.052em;
line-height: 1.35;
}
.section-heading > p,
.section-heading > div + p,
.aftercare-heading > p:not(.section-label) {
font-size: 14px;
}
.services-heading h2 {
font-size: clamp(34px, 9.7vw, 40px);
line-height: 1.32;
}
.services-title-mobile-break {
display: initial;
}
.hero {
gap: 40px;
padding: 113px 20px 35px;
background: var(--cream);
}
.hero-kicker {
margin-bottom: 19px;
font-size: 12px;
}
.hero h1 {
margin-bottom: 24px;
font-size: clamp(40px, 10.8vw, 48px);
letter-spacing: -0.07em;
line-height: 1.25;
}
.before-copy h2 > span {
white-space: normal;
}
.hero-lead {
margin-bottom: 27px;
font-size: 15px;
line-height: 1.95;
}
.hero-actions {
display: grid;
gap: 20px;
align-items: start;
margin-bottom: 26px;
}
.button-primary {
width: 100%;
min-width: 0;
}
.text-link {
width: max-content;
font-size: 13px;
}
.hero-points {
display: grid;
gap: 7px;
}
.hero-points li {
font-size: 12px;
}
.hero-gallery {
min-height: 440px;
border-radius: 22px;
}
.gallery-column {
left: 3%;
width: 57%;
}
.gallery-column.is-reverse {
right: 2%;
width: 42%;
}
.gallery-set {
gap: 12px;
padding-bottom: 12px;
}
.hero-work {
border-width: 4px;
border-radius: 11px;
}
.hero-work figcaption {
display: none;
}
.gallery-label {
right: 14px;
bottom: 14px;
width: 112px;
height: 112px;
padding: 16px;
}
.gallery-label strong {
font-size: 33px;
}
.gallery-label small {
font-size: 8px;
}
.gallery-label .arrow {
top: 15px;
right: 15px;
}
.concern-marquee {
padding: 17px 0;
}
.marquee-group span {
gap: 24px;
padding-right: 24px;
font-size: 12px;
}
.before-shell {
gap: 43px;
}
.before-visual {
border-radius: 18px;
}
.before-visual img {
aspect-ratio: 1.05;
}
.before-visual-badge {
right: 12px;
bottom: 12px;
padding: 12px 14px;
}
.before-visual-badge .icon {
width: 28px;
}
.before-visual-badge strong {
font-size: 11px;
}
.before-copy h2 {
font-size: clamp(32px, 8.6vw, 35px);
line-height: 1.4;
}
.before-copy > p:not(.section-label) {
font-size: 14px;
}
.organize-steps {
grid-template-columns: 1fr;
border-radius: 16px;
}
.organize-steps li {
min-height: 126px;
padding: 22px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.organize-steps li:last-child {
border-bottom: 0;
}
.organize-steps > li > .icon {
width: 46px;
}
.strength-grid,
.work-grid,
.support-grid {
grid-template-columns: 1fr;
}
.strength-card {
min-height: 285px;
padding: 30px;
}
.strength-number {
margin-bottom: 58px;
}
.icon-frame {
top: 27px;
right: 27px;
width: 61px;
height: 61px;
}
.icon-frame .icon {
width: 32px;
}
.strength-card h3 {
font-size: 24px;
}
.strength-card p {
font-size: 14px;
}
.work-card,
.work-card:nth-child(3),
.work-card:nth-child(4) {
grid-column: auto;
}
.work-featured .work-image img,
.work-tall .work-image img,
.work-image img {
aspect-ratio: 1.25;
}
.work-info h3 {
font-size: 22px;
}
.work-info p {
font-size: 13px;
}
.works-more {
display: grid;
margin-top: 52px;
}
.works-more p {
display: grid;
gap: 2px;
font-size: 12px;
}
.works-more .button {
width: 100%;
min-width: 0;
}
.service-row {
grid-template-columns: 28px 46px minmax(0, 1fr) 40px;
gap: 10px 12px;
align-items: center;
min-height: 145px;
padding: 22px 4px;
}
.service-number {
grid-column: 1;
grid-row: 1;
}
.service-icon {
grid-column: 2;
grid-row: 1;
width: 46px;
height: 46px;
}
.service-icon .icon {
width: 27px;
}
.service-name small {
position: relative;
z-index: 1;
grid-column: 3;
grid-row: 1;
margin: 0;
font-size: 10px;
}
.service-name {
display: contents;
}
.service-name h3 {
position: relative;
z-index: 1;
grid-column: 1 / 5;
grid-row: 2;
font-size: 22px;
}
.service-row > p {
grid-column: 1 / 5;
grid-row: 3;
padding-left: 0;
font-size: 12px;
}
.service-arrow {
grid-column: 4;
grid-row: 1;
width: 38px;
height: 38px;
}
.services-footer {
display: grid;
}
.services-footer p {
font-size: 12px;
}
.process-list {
grid-template-columns: 1fr;
}
.process-list li,
.process-list li:last-child {
grid-column: auto;
display: grid;
grid-template-columns: 67px 1fr;
gap: 15px;
min-height: 0;
padding: 23px;
}
.process-number {
position: absolute;
top: 15px;
left: 15px;
}
.process-icon {
grid-row: 1;
width: 61px;
height: 61px;
margin: 17px 0 0;
}
.process-icon .icon {
width: 32px;
}
.process-list li > div:last-child {
align-self: center;
}
.process-list h3 {
min-height: 0;
font-size: 17px;
}
.process-list p {
font-size: 12px;
}
.flow-footer {
display: grid;
}
.flow-footer > div {
min-width: 0;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.flow-footer > a {
min-height: 62px;
justify-content: space-between;
}
.aftercare-heading {
margin-bottom: 45px;
}
.support-card {
min-height: 480px;
padding: 30px;
}
.support-icon {
top: 28px;
right: 28px;
width: 62px;
height: 62px;
}
.support-icon .icon {
width: 34px;
}
.support-card h3 {
font-size: 36px;
}
.support-card > p {
font-size: 14px;
}
.support-card > strong {
right: 30px;
bottom: 30px;
left: 30px;
}
.faq-shell {
gap: 35px;
}
.contact {
min-height: 0;
padding: 84px 20px 105px;
}
.contact-inner {
grid-template-columns: 1fr;
gap: 44px;
}
.contact-copy {
padding: 0;
}
.contact-copy h2 {
font-size: clamp(42px, 12vw, 56px);
}
.contact-copy > p:not(.section-label) {
font-size: 14px;
}
.contact-action {
padding: 28px;
border-radius: 20px;
}
.contact-action > strong {
font-size: 23px;
}
.contact-marquee {
bottom: 15px;
font-size: 72px;
}
.footer {
padding: 0 20px;
}
.footer-intro {
grid-template-columns: 1fr;
gap: 27px;
padding: 66px 0 55px;
}
.footer-intro > p {
font-size: 13px;
}
.footer-consult {
grid-column: auto;
width: 100%;
}
.footer-main {
padding: 52px 0;
}
.footer-links {
grid-template-columns: 1fr 1fr;
gap: 35px 24px;
}
.footer-links a {
font-size: 12px;
}
.footer-bottom {
grid-template-columns: 1fr auto;
gap: 12px;
min-height: 105px;
}
.footer-bottom p {
display: none;
}
}
@media (min-width: 1051px) and (max-width: 1350px) {
.before-copy h2 {
font-size: 39px;
}
}
@media (prefers-reduced-motion: reduce) {
.mobile-menu,
.mobile-menu-heading,
.mobile-menu-columns,
.mobile-menu-footer,
.mobile-bottom-bar {
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
[data-reveal] {
opacity: 1;
filter: none;
transform: none;
}
} .top-anchor {
position: absolute;
inset: 0 auto auto 0;
}
body.admin-bar .site-header {
top: 32px;
}
.subpage {
min-height: 72vh;
padding-top: var(--header-h);
background: var(--cream);
}
.subpage-hero {
padding: clamp(92px, 11vw, 170px) 0 clamp(64px, 8vw, 112px);
background:
radial-gradient(circle at 88% 16%, rgba(203, 228, 210, 0.75), transparent 34%),
var(--cream);
border-bottom: 1px solid var(--line);
}
.subpage-hero-dark {
color: var(--white);
background: var(--green-deep);
}
.subpage-hero h1 {
max-width: 980px;
margin: 24px 0 26px;
color: var(--ink);
font-size: clamp(42px, 6.1vw, 88px);
font-weight: 900;
letter-spacing: -0.055em;
line-height: 1.08;
}
.subpage-hero-dark h1 {
color: var(--white);
}
.subpage-hero h1 span {
display: block;
}
.subpage-hero > .section-shell > p:not(.section-label),
.subpage-hero > .section-shell > div {
max-width: 720px;
color: var(--body);
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.9;
}
.subpage-hero-dark > .section-shell > p:not(.section-label),
.subpage-hero-dark > .section-shell > div {
color: rgba(255, 255, 255, 0.78);
}
.subpage-content {
padding-top: clamp(64px, 8vw, 112px);
padding-bottom: clamp(92px, 11vw, 160px);
font-size: 17px;
line-height: 1.95;
}
.subpage-content > * {
max-width: 840px;
}
.subpage-content h2,
.subpage-content h3 {
margin: 2.2em 0 0.7em;
color: var(--ink);
font-weight: 800;
line-height: 1.35;
}
.subpage-content h2 {
font-size: clamp(28px, 3.2vw, 46px);
}
.subpage-content h3 {
font-size: clamp(22px, 2.2vw, 30px);
}
.subpage-content a:not(.button) {
color: var(--green);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.subpage-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
max-width: none;
margin-top: 72px;
padding: clamp(28px, 4vw, 50px);
color: var(--white);
background: var(--green-deep);
}
.subpage-next p {
max-width: 560px;
margin: 0;
font-size: clamp(17px, 1.5vw, 21px);
font-weight: 700;
}
.post-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
max-width: var(--shell);
}
.post-card {
max-width: none;
padding: clamp(28px, 4vw, 52px);
background: var(--paper);
border: 1px solid var(--line);
}
.post-card h2 {
margin-top: 14px;
font-size: clamp(24px, 2.7vw, 38px);
}
.post-card img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
@media (max-width: 782px) {
body.admin-bar .site-header {
top: 46px;
}
}
@media (max-width: 720px) {
.subpage-hero {
padding-top: 74px;
}
.subpage-hero h1 {
font-size: clamp(38px, 12vw, 58px);
}
.subpage-content {
font-size: 16px;
}
.subpage-next {
align-items: stretch;
flex-direction: column;
}
.post-list {
grid-template-columns: 1fr;
}
} body.modal-open {
overflow: hidden;
}
.hero {
position: relative;
display: grid;
grid-template-columns: minmax(470px, 0.86fr) minmax(640px, 1.14fr);
gap: clamp(28px, 4vw, 70px);
min-height: 870px;
padding: 138px 0 62px max(38px, 5vw);
overflow: hidden;
background:
radial-gradient(circle at 9% 82%, rgba(98, 193, 138, 0.15), transparent 26%),
radial-gradient(circle at 55% -15%, rgba(63, 164, 111, 0.23), transparent 32%),
var(--green-deep);
color: var(--white);
}
.hero::before {
position: absolute;
top: 25%;
left: 48%;
width: 28vw;
min-width: 360px;
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
content: "";
pointer-events: none;
transform: translate(-50%, -50%);
}
.hero::after {
position: absolute;
top: 18%;
left: 44%;
width: 160px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 99px;
content: "";
pointer-events: none;
transform: rotate(-28deg);
}
.hero-copy {
position: relative;
z-index: 8;
align-self: center;
width: min(100%, 660px);
padding: 32px 0 46px;
}
.hero-area-line {
display: inline-flex;
align-items: center;
min-height: 34px;
margin: 0 0 24px;
padding: 6px 14px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 99px;
color: rgba(255, 255, 255, 0.84);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.hero-kicker {
color: #b9ddc6;
}
.hero-kicker span {
background: #8bd0a7;
}
.hero h1 {
max-width: 700px;
margin-bottom: 31px;
color: var(--white);
font-size: clamp(58px, 5.55vw, 88px);
letter-spacing: -0.072em;
line-height: 1.15;
}
.hero h1 > span {
display: block;
white-space: nowrap;
}
.hero-lead {
max-width: 600px;
color: rgba(255, 255, 255, 0.76);
font-size: 16px;
line-height: 2.05;
}
.hero-actions {
gap: 26px;
}
.hero .button-primary {
min-width: 270px;
min-height: 66px;
border: 1px solid var(--cream);
background: var(--cream);
color: var(--green-deep);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
}
.hero .button-primary:hover {
border-color: var(--white);
background: var(--white);
transform: translateY(-4px);
}
.hero .text-link {
color: rgba(255, 255, 255, 0.91);
}
.hero .text-link::after {
background: rgba(255, 255, 255, 0.48);
}
.hero-points {
gap: 9px 22px;
}
.hero-points li {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
}
.hero-points .icon {
color: #9bd4b4;
}
.hero-gallery {
align-self: stretch;
min-height: 760px;
margin: -32px 0 -62px;
overflow: hidden;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.hero-gallery::before {
height: 120px;
background: linear-gradient(var(--green-deep), transparent);
}
.hero-gallery::after {
height: 150px;
background: linear-gradient(transparent, var(--green-deep));
}
.gallery-column {
top: -9%;
bottom: -9%;
left: 0;
width: 58%;
transform: translate(calc(var(--hero-x) * -11px), calc(var(--hero-y) * -11px)) rotate(-2.2deg) scale(1.04);
}
.gallery-column.is-reverse {
right: -2%;
width: 45%;
transform: translate(calc(var(--hero-x) * 12px), calc(var(--hero-y) * 12px)) rotate(2.5deg) scale(1.04);
}
.gallery-set {
gap: 12px;
padding-bottom: 12px;
}
.hero-work {
border: 0;
border-radius: 9px;
background: #0d4e36;
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.26);
}
.hero-work img {
transition: filter 0.35s ease, transform 0.7s var(--ease-out);
}
.hero-work:hover img {
filter: saturate(1.08);
transform: scale(1.025);
}
.hero-work figcaption {
right: 9px;
bottom: 9px;
left: 9px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(3, 46, 32, 0.78);
color: var(--white);
}
.hero-work figcaption span,
.hero-work figcaption strong {
color: rgba(255, 255, 255, 0.82);
}
.gallery-label {
right: clamp(26px, 3vw, 52px);
bottom: clamp(30px, 4vw, 58px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto 42px;
grid-template-rows: 1fr;
gap: 17px;
align-items: center;
width: min(330px, calc(100% - 54px));
height: 94px;
padding: 14px 15px 14px 24px;
border: 0;
border-radius: 99px;
background: var(--cream);
color: var(--green-deep);
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.25);
backdrop-filter: none;
}
.gallery-label:hover {
background: var(--white);
transform: translateY(-5px);
}
.gallery-label > .gallery-label-copy {
display: grid;
grid-column: 1;
grid-row: 1;
align-self: center;
line-height: 1.35;
}
.gallery-label-copy small {
color: var(--green);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
}
.gallery-label-copy strong {
color: var(--ink);
font-size: 14px;
font-weight: 850;
}
.gallery-label > .gallery-label-count {
display: flex;
grid-column: 2;
grid-row: 1;
align-items: baseline;
gap: 2px;
padding-left: 13px;
border-left: 1px solid rgba(5, 61, 41, 0.16);
}
.gallery-label-count b {
color: var(--green-deep);
font-size: 31px;
line-height: 1;
}
.gallery-label-count small {
color: var(--muted);
font-size: 10px;
}
.gallery-label > .arrow {
position: static;
grid-column: 3;
grid-row: 1;
align-self: center;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--green-deep);
color: var(--white);
} .strength-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.strength-heading > span {
display: block;
white-space: nowrap;
}
.strength-card {
display: block;
width: 100%;
min-height: 328px;
padding: 30px 27px 28px;
cursor: pointer;
text-align: left;
}
.strength-card:focus-visible {
outline: 3px solid var(--green-2);
outline-offset: 4px;
}
.strength-card .icon-frame {
top: 27px;
right: 27px;
width: 58px;
height: 58px;
}
.strength-card .icon-frame .icon {
width: 31px;
}
.strength-card .strength-number {
margin-bottom: 72px;
}
.strength-card h3 {
margin-bottom: 13px;
font-size: clamp(20px, 1.7vw, 25px);
line-height: 1.5;
}
.strength-card p {
padding-bottom: 42px;
font-size: 13px;
line-height: 1.85;
}
.strength-more {
position: absolute;
z-index: 2;
right: 27px;
bottom: 24px;
left: 27px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
transition: color 0.35s ease;
}
.strength-more i {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(5, 61, 41, 0.2);
border-radius: 50%;
font-size: 18px;
font-style: normal;
transition: transform 0.35s var(--ease-out), background 0.35s ease;
}
.strength-card:hover .strength-more {
color: var(--white);
}
.strength-card:hover .strength-more i {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.11);
transform: rotate(90deg);
} .strength-proof {
position: relative;
display: grid;
grid-template-columns: minmax(250px, 0.76fr) minmax(440px, 1.35fr) minmax(250px, 0.72fr);
gap: clamp(26px, 4vw, 58px);
align-items: stretch;
margin-top: clamp(46px, 6vw, 78px);
padding: clamp(36px, 4vw, 58px);
overflow: hidden;
border-radius: 28px;
background:
linear-gradient(115deg, rgba(255, 255, 255, 0.055), transparent 45%),
var(--green-deep);
color: var(--white);
box-shadow: 0 32px 80px rgba(3, 46, 32, 0.2);
}
.strength-proof::after {
position: absolute;
right: -80px;
bottom: -120px;
width: 290px;
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
content: "";
}
.strength-proof-copy,
.strength-proof-flow,
.strength-proof-facts {
position: relative;
z-index: 1;
}
.strength-proof-label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
color: #a8d5b5;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
}
.strength-proof-label span {
width: 22px;
height: 1px;
background: currentColor;
}
.strength-proof-copy h3 {
margin: 0 0 18px;
color: var(--white);
font-size: clamp(31px, 2.7vw, 40px);
font-weight: 850;
letter-spacing: -0.05em;
line-height: 1.3;
}
.strength-proof-copy h3 span {
display: block;
}
.strength-proof-copy > p:not(.strength-proof-label) {
margin: 0;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.9;
}
.strength-proof-copy > a {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 22px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.32);
color: var(--white);
font-size: 12px;
font-weight: 800;
}
.strength-proof-flow {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.strength-proof-flow li {
position: relative;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 16px;
align-items: start;
padding: 17px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.strength-proof-flow li:first-child {
padding-top: 0;
}
.strength-proof-flow li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.strength-proof-flow small {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(168, 213, 181, 0.35);
border-radius: 50%;
color: #a8d5b5;
font-size: 10px;
font-weight: 900;
}
.strength-proof-flow strong {
display: block;
margin-bottom: 4px;
color: var(--white);
font-size: 17px;
}
.strength-proof-flow p {
margin: 0;
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
line-height: 1.7;
}
.strength-proof-facts {
display: grid;
align-content: stretch;
margin: 0;
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.strength-proof-facts > div {
display: grid;
grid-template-columns: minmax(78px, auto) 1fr;
gap: 14px;
align-items: center;
padding: 13px 0 13px 26px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.strength-proof-facts > div:last-child {
border-bottom: 0;
}
.strength-proof-facts dt,
.strength-proof-facts dd {
margin: 0;
}
.strength-proof-facts dt {
color: #cbe4d2;
line-height: 1;
white-space: nowrap;
}
.strength-proof-facts dt strong {
color: var(--white);
font-size: clamp(25px, 2.35vw, 34px);
font-weight: 850;
letter-spacing: -0.05em;
}
.strength-proof-facts dt span {
margin-left: 3px;
font-size: 11px;
font-weight: 800;
}
.strength-proof-facts dd {
color: rgba(255, 255, 255, 0.67);
font-size: 11px;
font-weight: 700;
line-height: 1.65;
}
.strength-dialog {
width: min(1120px, calc(100% - 48px));
max-width: none;
max-height: min(88dvh, 820px);
margin: auto;
padding: 0;
overflow: visible;
border: 0;
border-radius: 30px;
background: transparent;
box-shadow: 0 46px 120px rgba(0, 0, 0, 0.34);
}
.strength-dialog::backdrop {
background: rgba(3, 28, 20, 0.76);
backdrop-filter: blur(10px);
}
.strength-dialog[open] {
animation: dialog-in 0.46s var(--ease-out) both;
}
.strength-dialog-shell {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(450px, 1.05fr);
max-height: min(88dvh, 820px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 30px;
background: var(--paper);
}
.strength-dialog-close {
position: absolute;
z-index: 4;
top: 22px;
right: 22px;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(5, 61, 41, 0.15);
border-radius: 50%;
background: rgba(255, 253, 248, 0.92);
cursor: pointer;
backdrop-filter: blur(8px);
}
.strength-dialog-close span::before,
.strength-dialog-close span::after {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
border-radius: 2px;
background: var(--green-deep);
content: "";
}
.strength-dialog-close span::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.strength-dialog-close span::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.strength-dialog-close:hover {
background: var(--mint);
}
.strength-dialog-visual {
position: relative;
min-height: 600px;
margin: 0;
overflow: hidden;
background: var(--green-deep);
}
.strength-dialog-visual::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(3, 46, 32, 0.72));
content: "";
}
.strength-dialog-visual img {
width: 100%;
height: 100%;
min-height: 600px;
object-fit: cover;
object-position: center top;
}
.strength-dialog-visual figcaption {
position: absolute;
z-index: 2;
right: 32px;
bottom: 28px;
left: 32px;
display: flex;
align-items: baseline;
justify-content: space-between;
color: rgba(255, 255, 255, 0.84);
font-size: 11px;
font-weight: 700;
}
.strength-dialog-visual figcaption span {
color: var(--white);
font-size: 38px;
font-weight: 900;
}
.strength-dialog-copy {
align-self: center;
padding: clamp(54px, 6vw, 82px) clamp(44px, 5vw, 72px);
}
.strength-dialog-copy .section-label {
margin-bottom: 20px;
}
.strength-dialog-copy h2 {
margin-bottom: 24px;
font-size: clamp(36px, 4vw, 54px);
letter-spacing: -0.055em;
line-height: 1.35;
}
.strength-dialog-copy > p:not(.section-label) {
margin-bottom: 28px;
color: var(--body);
font-size: 15px;
line-height: 2;
}
.strength-dialog-copy ul {
display: grid;
gap: 11px;
margin: 0 0 34px;
padding: 0;
list-style: none;
}
.strength-dialog-copy li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--ink-2);
font-size: 14px;
font-weight: 700;
}
.strength-dialog-copy li .icon {
width: 22px;
color: var(--green);
}
.button-dialog {
width: 100%;
background: var(--green-deep);
color: var(--white);
} .works {
background:
radial-gradient(circle at 88% 8%, rgba(48, 169, 113, 0.26), transparent 22%),
linear-gradient(135deg, #032e20, #052f23 58%, #052a1f);
}
.works-heading h2 {
font-size: clamp(48px, 5.15vw, 76px);
}
.work-grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 34px 26px;
align-items: start;
}
.work-card:nth-child(1) {
grid-column: 1 / 9;
}
.work-card:nth-child(2) {
grid-column: 9 / 13;
margin-top: 138px;
}
.work-card:nth-child(3) {
grid-column: 2 / 7;
margin-top: 42px;
}
.work-card:nth-child(4) {
grid-column: 7 / 13;
margin-top: 154px;
}
.work-image {
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 13px;
box-shadow: 0 25px 75px rgba(0, 0, 0, 0.22);
}
.work-featured .work-image img {
aspect-ratio: 1.52;
}
.work-tall .work-image img {
aspect-ratio: 0.88;
}
.work-card:nth-child(3) .work-image img {
aspect-ratio: 1.18;
}
.work-card:nth-child(4) .work-image img {
aspect-ratio: 1.36;
}
.work-info {
padding-top: 20px;
}
.work-info h3 {
font-size: clamp(22px, 2vw, 30px);
} .flow {
position: relative;
overflow: hidden;
background:
linear-gradient(125deg, rgba(255, 255, 255, 0.42), transparent 45%),
var(--warm);
}
.flow-shell {
position: relative;
z-index: 2;
}
.flow-heading h2 > span {
display: block;
}
.flow-shapes {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.flow-shapes span {
position: absolute;
display: block;
}
.flow-shapes span:nth-child(1) {
top: 7%;
left: -105px;
width: 330px;
aspect-ratio: 1;
border: 1px solid rgba(5, 61, 41, 0.14);
border-radius: 50%;
animation: flow-float 11s ease-in-out infinite alternate;
}
.flow-shapes span:nth-child(2) {
top: 12%;
right: 7%;
width: 210px;
aspect-ratio: 1;
border: 38px solid rgba(145, 193, 160, 0.18);
border-radius: 42px;
animation: flow-turn 22s linear infinite;
}
.flow-shapes span:nth-child(3) {
bottom: 9%;
left: 39%;
width: 310px;
height: 82px;
border-radius: 99px;
background: rgba(5, 61, 41, 0.055);
animation: flow-slide 13s ease-in-out infinite alternate;
}
.flow-shapes span:nth-child(4) {
right: -30px;
bottom: 3%;
width: 260px;
height: 220px;
opacity: 0.44;
background-image: radial-gradient(rgba(5, 61, 41, 0.24) 1.5px, transparent 1.5px);
background-size: 18px 18px;
animation: flow-float 9s 1.2s ease-in-out infinite alternate-reverse;
}
.process-list li {
border-color: rgba(5, 61, 41, 0.14);
background: rgba(255, 253, 248, 0.88);
backdrop-filter: blur(8px);
}
.process-list li:nth-child(even) {
transform: translateY(20px);
}
.process-list li:nth-child(even):hover {
transform: translateY(13px);
}
.flow-footer {
margin-top: 58px;
background: rgba(255, 253, 248, 0.9);
backdrop-filter: blur(8px);
} .aftercare {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 5% 12%, rgba(74, 181, 122, 0.22), transparent 24%),
radial-gradient(circle at 93% 92%, rgba(74, 181, 122, 0.14), transparent 22%),
var(--green-deep);
}
.aftercare::after {
position: absolute;
right: -11vw;
bottom: -15vw;
width: 48vw;
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
content: "";
pointer-events: none;
}
.aftercare-shell {
position: relative;
z-index: 1;
}
.support-branch {
position: relative;
display: grid;
justify-items: center;
height: 104px;
margin: -12px auto 2px;
}
.support-heading > span,
.contact-heading > span {
display: block;
}
.support-branch > span {
position: relative;
z-index: 2;
display: grid;
place-items: center;
min-width: 170px;
height: 46px;
padding: 0 20px;
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: 99px;
background: rgba(255, 255, 255, 0.08);
color: var(--white);
font-size: 12px;
font-weight: 800;
backdrop-filter: blur(8px);
}
.support-branch > div {
position: absolute;
top: 45px;
right: 25%;
left: 25%;
height: 58px;
border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.support-branch > div::before {
position: absolute;
top: -46px;
left: 50%;
width: 1px;
height: 46px;
background: rgba(255, 255, 255, 0.22);
content: "";
}
.support-branch i {
position: absolute;
top: 0;
width: 1px;
height: 58px;
background: rgba(255, 255, 255, 0.22);
}
.support-branch i:first-child {
left: 0;
}
.support-branch i:last-child {
right: 0;
}
.support-grid {
gap: 28px;
}
.support-card {
min-height: 520px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 30px;
}
.support-maintenance {
background:
radial-gradient(circle at 90% 94%, rgba(151, 202, 167, 0.28), transparent 27%),
var(--paper);
}
.support-growth {
background:
radial-gradient(circle at 90% 94%, rgba(5, 61, 41, 0.13), transparent 28%),
var(--mint-2);
}
.support-route-label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 52px;
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
}
.support-route-label b {
display: grid;
place-items: center;
width: 31px;
height: 31px;
border: 1px solid rgba(5, 61, 41, 0.2);
border-radius: 50%;
font-size: 10px;
}
.support-card > span {
margin-top: 0;
}
.support-icon {
top: 48px;
} .contact {
min-height: 780px;
background: #082f23;
}
.contact-photo {
inset: 0;
}
.contact-photo::after {
background:
linear-gradient(90deg, rgba(3, 35, 25, 0.82) 0%, rgba(3, 35, 25, 0.68) 42%, rgba(3, 35, 25, 0.5) 61%, rgba(3, 35, 25, 0.83) 100%),
linear-gradient(0deg, rgba(3, 35, 25, 0.45), transparent 35%);
}
.contact-photo img {
object-position: center;
filter: saturate(0.8) contrast(1.04);
opacity: 1;
transform: scale(1.015);
}
.contact-inner {
grid-template-columns: minmax(0, 1fr) minmax(400px, 0.7fr);
gap: clamp(60px, 9vw, 140px);
}
.contact-copy {
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.contact-action {
position: relative;
padding: clamp(36px, 4.4vw, 56px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 30px;
background: rgba(3, 46, 32, 0.68);
color: var(--white);
box-shadow: 0 36px 90px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(16px);
}
.contact-action::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, #93d1aa, rgba(147, 209, 170, 0));
content: "";
}
.contact-action-icon {
background: var(--cream);
color: var(--green-deep);
}
.contact-action > small {
color: #abd8bb;
font-size: 12px;
letter-spacing: 0.04em;
}
.contact-action > strong {
color: var(--white);
}
.button-contact {
min-height: 66px;
background: var(--cream);
color: var(--green-deep);
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
}
.button-contact:hover {
background: var(--white);
transform: translateY(-3px);
}
.contact-secondary {
min-height: 58px;
margin-top: 12px;
padding: 0 22px;
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: 99px;
color: rgba(255, 255, 255, 0.9);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.contact-secondary:hover {
border-color: rgba(255, 255, 255, 0.48);
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
} .floating-consult {
right: 30px;
bottom: 30px;
grid-template-columns: 54px minmax(0, 1fr) 44px;
gap: 13px;
min-width: 330px;
padding: 8px 10px 8px 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 99px;
background: rgba(5, 61, 41, 0.95);
box-shadow: 0 20px 54px rgba(3, 46, 32, 0.34);
backdrop-filter: blur(16px);
}
.floating-consult::after {
position: absolute;
top: -50%;
left: -35%;
width: 30%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
content: "";
pointer-events: none;
transform: rotate(18deg);
transition: left 0.7s var(--ease-out);
}
.floating-consult:hover::after {
left: 110%;
}
.floating-consult:hover {
background: #075c3e;
transform: translateY(-5px);
}
.floating-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--cream);
color: var(--green-deep);
}
.floating-icon .icon {
width: 29px;
}
.floating-copy {
gap: 1px;
}
.floating-copy small {
color: rgba(255, 255, 255, 0.66);
font-size: 10px;
}
.floating-copy strong {
font-size: 15px;
letter-spacing: 0.01em;
}
.floating-arrow {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
transition: background 0.25s ease, transform 0.25s var(--ease-out);
}
.floating-arrow .arrow {
width: 18px;
}
.floating-consult:hover .floating-arrow {
background: rgba(255, 255, 255, 0.12);
transform: translateX(3px);
}
.floating-consult.is-visible.is-occluded {
opacity: 0;
pointer-events: none;
transform: translateY(22px);
visibility: hidden;
}
@keyframes dialog-in {
from { opacity: 0; transform: translateY(24px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes flow-float {
from { transform: translate3d(0, -8px, 0); }
to { transform: translate3d(24px, 22px, 0); }
}
@keyframes flow-turn {
to { transform: rotate(360deg); }
}
@keyframes flow-slide {
from { transform: translateX(-28px) rotate(-5deg); }
to { transform: translateX(42px) rotate(5deg); }
}
@media (max-width: 1280px) {
.hero {
grid-template-columns: minmax(420px, 0.86fr) minmax(550px, 1.14fr);
gap: 26px;
padding-left: 35px;
}
.hero h1 {
font-size: clamp(54px, 5.2vw, 69px);
}
.strength-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.strength-card {
min-height: 300px;
}
.strength-proof {
grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
}
.strength-proof-facts {
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(255, 255, 255, 0.14);
border-left: 0;
}
.strength-proof-facts > div {
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-bottom: 0;
}
.strength-proof-facts > div:last-child {
border-right: 0;
}
}
@media (max-width: 1050px) {
.services-heading {
grid-template-columns: 1fr;
gap: 24px;
}
.services-heading > p {
max-width: 700px;
}
.services-heading h2 > span {
white-space: nowrap;
}
.hero {
grid-template-columns: 1fr;
gap: 24px;
min-height: 0;
padding: 122px 30px 0;
}
.hero-copy {
width: min(100%, 760px);
padding-bottom: 28px;
}
.hero h1 {
font-size: clamp(56px, 8.6vw, 78px);
}
.hero-gallery {
width: calc(100% + 60px);
min-height: 620px;
margin: 0 -30px;
}
.gallery-column {
left: 3%;
}
.gallery-column.is-reverse {
right: 2%;
}
.work-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3),
.work-card:nth-child(4) {
grid-column: auto;
margin-top: 0;
}
.work-card:nth-child(even) {
margin-top: 86px;
}
.strength-dialog-shell {
grid-template-columns: minmax(0, 0.85fr) minmax(410px, 1.15fr);
}
.contact-inner {
grid-template-columns: minmax(0, 1fr) minmax(350px, 0.78fr);
gap: 42px;
}
}
@media (max-width: 720px) {
.mobile-menu-topbar {
height: 72px;
gap: 12px;
padding: 0 15px;
}
.mobile-menu-brand {
width: 79px;
}
.mobile-menu-topbar > p {
padding-left: 12px;
font-size: 11px;
}
.mobile-menu-close {
width: 48px;
height: 48px;
}
.mobile-menu-close span::before,
.mobile-menu-close span::after {
top: 18px;
left: 14px;
width: 18px;
}
.services-heading h2 {
font-size: clamp(32px, 9.2vw, 38px);
line-height: 1.38;
}
.services-heading h2 > span {
white-space: normal;
}
.services-heading h2 em {
display: block;
white-space: nowrap;
}
.services-heading > p {
font-size: 14px;
line-height: 1.9;
}
.strength-proof {
grid-template-columns: 1fr;
gap: 30px;
margin-top: 42px;
padding: 30px 22px 24px;
border-radius: 22px;
}
.strength-proof-copy h3 {
font-size: clamp(31px, 8.7vw, 36px);
}
.strength-proof-copy > p:not(.strength-proof-label) {
font-size: 14px;
}
.strength-proof-flow li {
grid-template-columns: 38px minmax(0, 1fr);
gap: 13px;
}
.strength-proof-flow small {
width: 34px;
height: 34px;
}
.strength-proof-flow strong {
font-size: 16px;
}
.mobile-service-links {
grid-template-columns: 1fr;
}
.mobile-service-links a {
min-height: 56px;
}
.strength-proof-facts {
grid-column: auto;
grid-template-columns: 1fr;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.strength-proof-facts > div {
grid-template-columns: minmax(88px, auto) 1fr;
padding: 13px 0;
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.strength-proof-facts > div:last-child {
border-bottom: 0;
}
.hero {
gap: 24px;
padding: 108px 20px 0;
background:
radial-gradient(circle at 100% 25%, rgba(78, 179, 123, 0.18), transparent 30%),
var(--green-deep);
}
.hero::before {
top: 22%;
left: 92%;
min-width: 290px;
}
.hero::after {
display: none;
}
.hero-copy {
padding: 0 0 24px;
}
.hero-area-line {
width: max-content;
max-width: 100%;
min-height: 31px;
margin-bottom: 20px;
padding-inline: 11px;
font-size: 12px;
letter-spacing: 0.01em;
}
.hero-kicker {
font-size: 11px;
}
.hero h1 {
margin-bottom: 24px;
color: var(--white);
font-size: clamp(40px, 10.8vw, 48px);
line-height: 1.22;
}
.hero h1 > span {
white-space: nowrap;
}
.hero-lead {
color: rgba(255, 255, 255, 0.76);
font-size: 14px;
line-height: 1.95;
}
.hero-actions {
gap: 17px;
}
.hero .button-primary {
width: 100%;
min-height: 62px;
}
.hero-points {
gap: 6px;
}
.hero-points li {
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
}
.hero-gallery {
width: calc(100% + 40px);
min-height: 455px;
margin: 0 -20px;
border-radius: 0;
}
.gallery-column {
left: 1%;
width: 60%;
}
.gallery-column.is-reverse {
right: 0;
width: 44%;
}
.hero-work {
border: 0;
border-radius: 6px;
}
.gallery-label {
right: 15px;
bottom: 17px;
grid-template-columns: minmax(0, 1fr) auto 39px;
gap: 11px;
width: calc(100% - 30px);
height: 72px;
padding: 10px 10px 10px 19px;
}
.gallery-label-copy strong {
font-size: 13px;
}
.gallery-label-count b {
font-size: 27px;
}
.gallery-label > .arrow {
width: 39px;
height: 39px;
}
.strength-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.strength-heading {
font-size: clamp(31px, 8.7vw, 34px) !important;
}
.strength-mobile-break {
display: block;
}
.strength-card {
min-height: 278px;
padding: 27px 25px 24px;
}
.strength-card .strength-number {
margin-bottom: 58px;
}
.strength-card h3 {
font-size: 22px;
}
.strength-card p {
font-size: 13px;
}
.strength-dialog {
width: calc(100% - 24px);
max-height: 92dvh;
border-radius: 22px;
}
.strength-dialog-shell {
display: block;
max-height: 92dvh;
overflow-y: auto;
border-radius: 22px;
}
.strength-dialog-close {
top: 13px;
right: 13px;
width: 42px;
height: 42px;
}
.strength-dialog-visual,
.strength-dialog-visual img {
min-height: 225px;
height: 225px;
}
.strength-dialog-visual figcaption {
right: 20px;
bottom: 16px;
left: 20px;
}
.strength-dialog-visual figcaption span {
font-size: 29px;
}
.strength-dialog-copy {
padding: 32px 24px 26px;
}
.strength-dialog-copy h2 {
font-size: 31px;
}
.strength-dialog-copy > p:not(.section-label) {
font-size: 14px;
}
.button-dialog {
min-width: 0;
}
.works-heading h2 {
font-size: clamp(35px, 10.5vw, 47px);
}
.work-grid {
grid-template-columns: 1fr;
gap: 54px;
}
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3),
.work-card:nth-child(4),
.work-card:nth-child(even) {
grid-column: auto;
margin-top: 0;
}
.work-featured .work-image img,
.work-tall .work-image img,
.work-card:nth-child(3) .work-image img,
.work-card:nth-child(4) .work-image img {
aspect-ratio: 1.22;
}
.flow-shapes span:nth-child(1) {
left: -190px;
}
.flow-shapes span:nth-child(2) {
top: 3%;
right: -90px;
width: 160px;
border-width: 28px;
}
.flow-shapes span:nth-child(3) {
left: 12%;
width: 230px;
}
.process-list li:nth-child(even),
.process-list li:nth-child(even):hover {
transform: none;
}
.flow-footer {
margin-top: 36px;
}
.support-branch {
height: 88px;
margin-top: 0;
}
.support-branch > div {
right: 12%;
left: 12%;
height: 43px;
}
.support-branch i {
height: 43px;
}
.support-grid {
gap: 14px;
}
.support-card {
min-height: 470px;
border-radius: 22px;
}
.support-route-label {
margin-bottom: 42px;
}
.support-icon {
top: 32px;
}
.contact {
min-height: 0;
padding: 82px 20px 104px;
}
.contact-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 38px;
width: 100%;
max-width: 100%;
}
.contact-copy,
.contact-action {
width: 100%;
min-width: 0;
}
.contact-copy h2 {
max-width: 100%;
font-size: clamp(37px, 9.9vw, 39px);
letter-spacing: -0.06em;
line-height: 1.35;
}
.support-mobile-break,
.contact-mobile-break {
display: block;
}
.contact-photo::after {
background: rgba(3, 35, 25, 0.76);
}
.contact-photo img {
object-position: 42% center;
}
.contact-action {
padding: 28px 24px 24px;
border-radius: 22px;
}
.button-contact,
.contact-secondary {
width: 100%;
}
.mobile-bottom-bar {
gap: 7px;
height: 76px;
padding: 8px;
border-top: 1px solid rgba(5, 61, 41, 0.1);
}
.mobile-bottom-bar a {
border: 1px solid rgba(5, 61, 41, 0.12);
border-radius: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.flow-shapes span,
.strength-dialog[open] {
animation: none !important;
}
.hero-work:hover img,
.floating-consult:hover,
.process-list li:nth-child(even),
.process-list li:nth-child(even):hover {
transform: none;
}
} body.home .section,
body.home .aftercare {
padding-top: clamp(76px, 8vw, 112px);
padding-bottom: clamp(76px, 8vw, 112px);
}
body.home .section-heading {
margin-bottom: clamp(38px, 4.2vw, 58px);
}
body.home .section-heading h2,
body.home .aftercare-heading h2 {
font-size: clamp(38px, 3.75vw, 56px);
}
body.home .hero {
min-height: 800px;
padding-top: 118px;
padding-bottom: 46px;
}
body.home .hero-copy {
padding-top: 22px;
padding-bottom: 32px;
}
body.home .hero h1 {
font-size: clamp(50px, 4.8vw, 76px);
}
body.home .hero-gallery {
min-height: 690px;
margin-bottom: -46px;
}
body.home .before-visual {
aspect-ratio: 1.34 / 1;
}
body.home .before-visual img,
body.home .work-image img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
body.home .work-card:nth-child(1) .work-image {
aspect-ratio: 1.52 / 1;
}
body.home .work-card:nth-child(2) .work-image {
aspect-ratio: 0.9 / 1;
}
body.home .work-card:nth-child(3) .work-image {
aspect-ratio: 1.18 / 1;
}
body.home .work-card:nth-child(4) .work-image {
aspect-ratio: 1.36 / 1;
}
body.home .support-card {
min-height: 430px;
}
@media (min-width: 901px) and (max-width: 1050px) {
body.home .hero {
grid-template-columns: minmax(400px, 0.96fr) minmax(420px, 1.04fr);
gap: 24px;
min-height: 720px;
padding: 104px 24px 34px;
}
body.home .hero-copy {
width: auto;
padding: 18px 0 24px;
}
body.home .hero h1 {
font-size: clamp(42px, 4.55vw, 49px);
}
body.home .hero-gallery {
width: auto;
min-height: 650px;
margin: -18px -24px -34px 0;
}
}
@media (max-width: 900px) {
body.home .section,
body.home .aftercare {
padding-top: 76px;
padding-bottom: 76px;
}
body.home .hero {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
min-height: 0;
padding: 100px 24px 0;
}
body.home .hero-copy {
width: min(100%, 700px);
padding: 0 0 18px;
}
body.home .hero h1 {
font-size: clamp(40px, 6vw, 50px);
}
body.home .hero-gallery {
width: calc(100% + 48px);
min-height: 420px;
margin: 0 -24px;
}
}
@media (min-width: 561px) and (max-width: 900px) {
body.home .section-heading h2,
body.home .aftercare-heading h2,
body.home .works-heading h2,
body.home .services-heading h2 {
font-size: clamp(31px, 4.9vw, 35px);
line-height: 1.38;
}
body.home .before-shell {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 30px;
align-items: start;
}
body.home .before-visual {
height: 410px;
min-height: 0;
aspect-ratio: auto;
}
body.home .before-copy h2 {
font-size: clamp(30px, 4.75vw, 34px);
line-height: 1.38;
}
body.home .before-copy > p:not(.section-label) {
font-size: 14px;
line-height: 1.9;
}
body.home .organize-steps {
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.home .organize-steps li {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
min-height: 166px;
padding: 18px;
}
body.home .organize-steps > li > .icon {
width: 40px;
height: 40px;
}
body.home .organize-steps strong {
font-size: 17px;
}
body.home .organize-steps p {
font-size: 13px;
line-height: 1.7;
}
body.home .strength-grid,
body.home .work-grid,
body.home .process-list,
body.home .support-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home .strength-card {
min-height: 246px;
padding: 24px 22px 22px;
}
body.home .strength-card .strength-number {
margin-bottom: 46px;
}
body.home .strength-proof {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}
body.home .strength-proof-facts {
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.home .strength-proof-facts > div {
display: block;
padding: 14px 10px;
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-bottom: 0;
}
body.home .strength-proof-facts > div:last-child {
border-right: 0;
}
body.home .work-grid {
gap: 44px 20px;
}
body.home .work-card:nth-child(1),
body.home .work-card:nth-child(2),
body.home .work-card:nth-child(3),
body.home .work-card:nth-child(4),
body.home .work-card:nth-child(even) {
margin-top: 0;
}
body.home .work-card .work-image {
aspect-ratio: 1.22 / 1;
}
body.home .work-info h3 {
font-size: 21px;
}
body.home .process-list li {
min-height: 170px;
padding: 22px 20px;
}
body.home .process-list li:last-child {
grid-column: 1 / -1;
}
body.home .support-card {
min-height: 390px;
padding: 27px 24px;
}
body.home .support-card h3 {
font-size: 28px;
}
}
@media (max-width: 720px) {
body.home .hero {
gap: 16px;
padding: 94px 20px 0;
}
body.home .hero-copy {
padding-bottom: 14px;
}
body.home .hero-area-line {
margin-bottom: 15px;
}
body.home .hero h1 {
margin-bottom: 19px;
font-size: clamp(38px, 6.25vw, 43px);
line-height: 1.2;
}
body.home .hero-lead {
line-height: 1.85;
}
body.home .hero-actions {
gap: 13px;
}
body.home .hero .button-primary {
min-height: 58px;
}
body.home .hero-gallery {
width: calc(100% + 40px);
min-height: 360px;
margin-inline: -20px;
}
}
@media (max-width: 560px) {
body.home .section,
body.home .aftercare {
padding-top: 68px;
padding-bottom: 68px;
}
body.home .section-heading {
margin-bottom: 32px;
}
body.home .section-heading h2,
body.home .aftercare-heading h2,
body.home .works-heading h2,
body.home .services-heading h2 {
font-size: clamp(29px, 8vw, 34px);
line-height: 1.4;
}
body.home .before-visual {
aspect-ratio: 1.18 / 1;
}
body.home .before-copy h2 {
font-size: clamp(29px, 8vw, 33px);
line-height: 1.42;
}
body.home .organize-steps {
gap: 10px;
}
body.home .organize-steps li {
min-height: 108px;
padding: 17px;
}
body.home .strength-card {
min-height: 242px;
}
body.home .work-grid {
gap: 42px;
}
body.home .work-card .work-image {
aspect-ratio: 1.22 / 1;
}
body.home .support-card {
min-height: 410px;
}
} .about-page {
padding-top: 94px;
overflow: hidden;
background: var(--cream);
}
.about-page h1 span,
.about-page h2 span {
display: block;
}
.about-mobile-break {
display: none;
}
.about-hero {
position: relative;
min-height: 790px;
overflow: hidden;
color: var(--white);
background:
radial-gradient(circle at 8% 88%, rgba(92, 181, 129, 0.17), transparent 26%),
radial-gradient(circle at 57% -12%, rgba(84, 180, 128, 0.2), transparent 32%),
var(--green-deep);
}
.about-hero::before {
position: absolute;
top: 90px;
left: -170px;
width: 440px;
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
content: "";
}
.about-hero::after {
position: absolute;
right: 47%;
bottom: 0;
width: 1px;
height: 31%;
background: rgba(255, 255, 255, 0.12);
content: "";
}
.about-hero-shell {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(525px, 0.98fr) minmax(540px, 1.02fr);
gap: clamp(34px, 4.5vw, 72px);
align-items: center;
width: min(calc(100% - 80px), 1500px);
min-height: 790px;
margin: 0 auto;
padding: 70px 0 76px;
}
.about-hero-copy {
max-width: 720px;
}
.about-hero .section-label {
color: #91d1aa;
}
.about-hero-copy h1 {
margin: 0;
color: var(--white);
font-size: clamp(50px, 4.15vw, 64px);
font-weight: 900;
letter-spacing: -0.065em;
line-height: 1.16;
}
.about-hero-lead {
max-width: 640px;
margin: 34px 0 0;
color: rgba(255, 255, 255, 0.78);
font-size: clamp(16px, 1.18vw, 18px);
line-height: 2.05;
}
.about-hero-actions {
display: flex;
gap: 28px;
align-items: center;
margin-top: 40px;
}
.about-hero-actions .button {
min-width: 260px;
}
.about-hero-link {
display: inline-flex;
gap: 18px;
align-items: center;
padding: 10px 0 7px;
border-bottom: 1px solid rgba(255, 255, 255, 0.48);
color: var(--white);
font-size: 14px;
font-weight: 800;
}
.about-hero-link span {
transition: transform 0.25s ease;
}
.about-hero-link:hover span {
transform: translateY(4px);
}
.about-hero-route {
display: flex;
gap: 14px;
align-items: center;
margin: 49px 0 0;
color: rgba(255, 255, 255, 0.64);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
}
.about-hero-route i {
width: 52px;
height: 1px;
overflow: hidden;
background: rgba(255, 255, 255, 0.24);
}
.about-hero-visual {
display: grid;
grid-template-columns: 1.18fr 0.82fr;
grid-template-rows: minmax(420px, 1fr) 176px;
gap: 10px;
height: 660px;
}
.about-hero-visual figure {
margin: 0;
}
.about-hero-main-photo {
position: relative;
grid-column: 1 / -1;
overflow: hidden;
}
.about-hero-main-photo::after {
position: absolute;
inset: 42% 0 0;
background: linear-gradient(transparent, rgba(3, 46, 32, 0.8));
content: "";
}
.about-hero-main-photo img,
.about-hero-work img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease-out);
}
.about-hero-main-photo img {
object-position: 62% 49%;
}
.about-hero-main-photo:hover img,
.about-hero-work:hover img {
transform: scale(1.025);
}
.about-hero-main-photo figcaption {
position: absolute;
z-index: 2;
right: 28px;
bottom: 24px;
left: 28px;
display: flex;
gap: 16px;
align-items: flex-end;
color: var(--white);
font-size: 18px;
font-weight: 800;
line-height: 1.55;
}
.about-hero-main-photo figcaption span {
color: #9bd6b2;
font-size: 12px;
letter-spacing: 0.12em;
}
.about-hero-work {
position: relative;
display: block;
overflow: hidden;
background: var(--mint);
}
.about-hero-work::after {
position: absolute;
right: 13px;
bottom: 13px;
display: grid;
place-items: center;
width: 36px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--paper);
color: var(--green-deep);
content: "↗";
font-size: 14px;
font-weight: 900;
}
.about-hero-work img {
object-position: top center;
}
.about-section {
padding: clamp(110px, 9vw, 154px) max(28px, 5vw);
}
.about-heading {
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.62fr);
gap: clamp(48px, 8vw, 126px);
align-items: end;
margin-bottom: clamp(62px, 7vw, 102px);
}
.about-heading h2,
.about-policy-intro h2,
.about-operator-copy h2,
.about-contact h2 {
margin: 0;
color: var(--ink);
font-size: clamp(42px, 3.75vw, 58px);
font-weight: 900;
letter-spacing: -0.06em;
line-height: 1.25;
}
.about-heading > p {
margin: 0 0 7px;
color: var(--muted);
font-size: 16px;
line-height: 2;
}
.about-worry-layout {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(430px, 0.76fr);
gap: clamp(52px, 7vw, 110px);
align-items: stretch;
}
.about-worry-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.about-worry-list li {
display: grid;
grid-template-columns: 66px 1fr;
gap: 24px;
align-items: center;
min-height: 126px;
padding: 24px 4px;
border-bottom: 1px solid var(--line);
}
.about-worry-list li > span {
color: var(--green);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
}
.about-worry-list strong {
color: var(--ink);
font-size: clamp(22px, 2.2vw, 31px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.55;
}
.about-answer {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 450px;
padding: clamp(40px, 4.5vw, 68px);
overflow: hidden;
background:
radial-gradient(circle at 92% 7%, rgba(132, 210, 164, 0.22), transparent 31%),
var(--green-deep);
color: rgba(255, 255, 255, 0.76);
}
.about-answer::before {
position: absolute;
top: -70px;
right: -70px;
width: 230px;
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 50%;
content: "";
}
.about-answer-icon {
position: absolute;
top: clamp(34px, 4vw, 56px);
left: clamp(40px, 4.5vw, 68px);
display: grid;
place-items: center;
width: 58px;
aspect-ratio: 1;
border-radius: 50%;
background: #9bd6b2;
color: var(--green-deep);
}
.about-answer-icon .icon {
width: 28px;
}
.about-answer > p:first-of-type {
margin-bottom: 12px;
color: #9bd6b2;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.06em;
}
.about-answer h3 {
margin: 0 0 24px;
color: var(--white);
font-size: clamp(29px, 2.8vw, 40px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 1.42;
}
.about-answer > p:last-child {
margin: 0;
font-size: 15px;
line-height: 2;
}
.about-features {
background: var(--green-dark);
}
.about-heading-light h2 {
color: var(--white);
}
.about-heading-light > p {
color: rgba(255, 255, 255, 0.66);
}
.about-heading-light .section-label {
color: #8bcda6;
}
.about-feature-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.about-feature {
display: grid;
grid-template-columns: minmax(420px, 0.96fr) minmax(430px, 1.04fr);
gap: clamp(58px, 8vw, 130px);
align-items: center;
padding: clamp(68px, 7vw, 110px) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.about-feature-reverse figure {
order: 2;
}
.about-feature figure {
position: relative;
height: clamp(410px, 41vw, 570px);
margin: 0;
overflow: hidden;
background: #164d37;
}
.about-feature figure::before {
position: absolute;
z-index: 1;
inset: 18px;
border: 1px solid rgba(255, 255, 255, 0.34);
content: "";
pointer-events: none;
}
.about-feature figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.9s var(--ease-out);
}
.about-feature:nth-child(1) figure img,
.about-feature:nth-child(2) figure img,
.about-feature:nth-child(4) figure img {
object-position: 58% center;
}
.about-feature:hover figure img {
transform: scale(1.025);
}
.about-feature-copy {
color: rgba(255, 255, 255, 0.7);
}
.about-feature-number {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 25px;
color: #8bcda6;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.1em;
}
.about-feature-number span {
padding-left: 16px;
border-left: 1px solid rgba(255, 255, 255, 0.25);
letter-spacing: 0.06em;
}
.about-feature-copy h3 {
margin: 0 0 27px;
color: var(--white);
font-size: clamp(36px, 3.6vw, 54px);
font-weight: 900;
letter-spacing: -0.055em;
line-height: 1.3;
}
.about-feature-copy > p:not(.about-feature-number) {
max-width: 590px;
margin-bottom: 32px;
font-size: 16px;
line-height: 2.05;
}
.about-feature-detail {
display: grid;
grid-template-columns: 130px 1fr;
gap: 24px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.about-feature-detail strong {
color: #8bcda6;
font-size: 12px;
letter-spacing: 0.05em;
}
.about-feature-detail ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
list-style: none;
}
.about-feature-detail li {
position: relative;
padding-left: 17px;
}
.about-feature-detail li::before {
position: absolute;
top: 0.82em;
left: 0;
width: 5px;
aspect-ratio: 1;
border-radius: 50%;
background: #8bcda6;
content: "";
}
.about-proof {
background: var(--paper);
}
.about-proof-panel {
overflow: hidden;
background: var(--green-deep);
color: var(--white);
}
.about-proof-numbers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-proof-numbers > div {
min-height: 260px;
padding: clamp(38px, 4.5vw, 66px);
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.about-proof-numbers > div:last-child {
border-right: 0;
}
.about-proof-numbers strong {
display: flex;
align-items: baseline;
color: #a7dfbc;
font-size: clamp(24px, 2.4vw, 36px);
font-weight: 800;
letter-spacing: -0.04em;
white-space: nowrap;
}
.about-proof-numbers strong span {
font-size: clamp(59px, 6vw, 92px);
font-weight: 900;
letter-spacing: -0.07em;
line-height: 1;
}
.about-proof-numbers p {
margin: 24px 0 0;
color: rgba(255, 255, 255, 0.74);
font-size: 14px;
font-weight: 700;
line-height: 1.75;
}
.about-proof-flow {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(48px, 8vw, 120px);
align-items: center;
padding: clamp(44px, 5vw, 72px);
border-top: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(0, 0, 0, 0.08);
}
.about-proof-flow > p {
display: flex;
gap: 13px;
align-items: center;
margin: 0;
color: var(--white);
font-size: clamp(17px, 1.5vw, 22px);
font-weight: 800;
white-space: nowrap;
}
.about-proof-flow > p i {
width: clamp(22px, 3vw, 46px);
height: 1px;
background: #8bcda6;
}
.about-proof-flow > div > p {
margin-bottom: 22px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.9;
}
.about-proof-flow nav {
display: flex;
gap: 28px;
flex-wrap: wrap;
}
.about-proof-flow .text-link {
color: var(--white);
}
.about-policy {
background:
linear-gradient(90deg, var(--cream) 0 50%, #e3eee4 50% 100%);
}
.about-policy-intro {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(52px, 9vw, 150px);
align-items: end;
margin-bottom: 82px;
}
.about-policy-intro .section-label,
.about-policy-intro h2 {
grid-column: 1;
}
.about-policy-intro h2 {
margin-top: -6px;
}
.about-policy-intro > p:last-child {
grid-column: 2;
grid-row: 1 / span 2;
align-self: end;
max-width: 620px;
margin: 0 0 8px;
font-size: 16px;
line-height: 2.1;
}
.about-policy-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-policy-compare section {
min-height: 505px;
padding: clamp(45px, 5vw, 76px);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.about-policy-compare section:first-child {
border-right: 1px solid var(--line);
background: rgba(255, 253, 248, 0.56);
}
.about-policy-compare section:last-child {
background: rgba(220, 236, 223, 0.48);
}
.about-policy-tag {
margin-bottom: 26px;
color: var(--green);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.07em;
}
.about-policy-compare h3 {
margin: 0 0 42px;
font-size: clamp(31px, 3.1vw, 45px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 1.42;
}
.about-policy-compare ul {
display: grid;
gap: 17px;
margin: 0;
padding: 0;
list-style: none;
}
.about-policy-compare li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
align-items: start;
font-size: 15px;
font-weight: 700;
line-height: 1.75;
}
.about-policy-compare li .icon {
width: 23px;
color: var(--green);
}
.about-policy-links {
display: flex;
justify-content: flex-end;
gap: 34px;
margin-top: 30px;
}
.about-operator {
background: var(--paper);
}
.about-operator-shell {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(52px, 6vw, 92px);
align-items: center;
}
.about-operator-copy h2 {
margin-bottom: 32px;
font-size: clamp(38px, 3.2vw, 49px);
}
.about-operator-story {
max-width: 610px;
margin-bottom: 37px;
}
.about-operator-story p {
margin: 0;
color: var(--muted);
font-size: 16px;
line-height: 2.05;
}
.about-operator-story p + p {
margin-top: 14px;
}
.about-operator-links {
display: flex;
gap: 28px;
align-items: center;
}
.about-operator-links .button {
min-width: 235px;
}
.about-operator-works {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
grid-template-rows: repeat(2, 245px);
gap: 10px;
}
.about-operator-works figure {
margin: 0;
overflow: hidden;
background: var(--mint);
}
.about-operator-works figure:first-child {
grid-row: 1 / -1;
}
.about-operator-works img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.8s var(--ease-out);
}
.about-operator-works figure:hover img {
transform: scale(1.025);
}
.about-contact {
position: relative;
min-height: 610px;
padding: clamp(100px, 10vw, 152px) max(28px, 5vw);
overflow: hidden;
color: var(--white);
}
.about-contact-photo,
.about-contact-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.about-contact-photo {
object-fit: cover;
object-position: center 48%;
}
.about-contact-overlay {
background:
linear-gradient(90deg, rgba(3, 46, 32, 0.94) 0%, rgba(3, 46, 32, 0.86) 50%, rgba(3, 46, 32, 0.52) 100%),
linear-gradient(0deg, rgba(3, 46, 32, 0.24), rgba(3, 46, 32, 0.24));
}
.about-contact-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.55fr);
gap: clamp(50px, 9vw, 150px);
align-items: end;
}
.about-contact .section-label {
color: #a7dfbc;
}
.about-contact h2 {
max-width: 850px;
color: var(--white);
}
.about-contact-inner > div:first-child > p:last-child {
max-width: 680px;
margin: 31px 0 0;
color: rgba(255, 255, 255, 0.76);
font-size: 16px;
line-height: 2;
}
.about-contact-actions {
display: grid;
gap: 24px;
}
.about-contact-actions .button {
min-width: 100%;
}
.about-contact-link {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 0 3px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: var(--white);
font-size: 14px;
font-weight: 800;
}
@media (max-width: 1180px) {
.about-hero-shell {
grid-template-columns: minmax(440px, 0.96fr) minmax(480px, 1.04fr);
width: min(calc(100% - 52px), 1500px);
}
.about-hero-copy h1 {
font-size: 47px;
}
.about-hero-visual {
height: 600px;
}
.about-feature {
grid-template-columns: minmax(380px, 0.95fr) minmax(390px, 1.05fr);
gap: 62px;
}
.about-operator-shell {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 62px;
}
}
@media (max-width: 1050px) {
.about-page {
padding-top: 78px;
}
.about-hero {
min-height: 0;
}
.about-hero-shell {
grid-template-columns: 1fr;
gap: 58px;
min-height: 0;
padding: 78px 0 52px;
}
.about-hero-copy {
max-width: 760px;
}
.about-hero-copy h1 {
font-size: clamp(54px, 8vw, 76px);
}
.about-hero-lead {
max-width: 700px;
}
.about-hero-route {
margin-top: 38px;
}
.about-hero-visual {
grid-template-rows: minmax(420px, 1fr) 200px;
height: 650px;
}
.about-hero::after {
display: none;
}
.about-heading,
.about-policy-intro {
grid-template-columns: 1fr;
gap: 29px;
}
.about-heading > p,
.about-policy-intro > p:last-child {
max-width: 720px;
}
.about-policy-intro .section-label,
.about-policy-intro h2,
.about-policy-intro > p:last-child {
grid-column: auto;
grid-row: auto;
}
.about-policy-intro h2 {
margin-top: -12px;
}
.about-worry-layout {
grid-template-columns: 1fr 0.92fr;
gap: 38px;
}
.about-worry-list li {
grid-template-columns: 48px 1fr;
gap: 14px;
}
.about-worry-list strong {
font-size: 23px;
}
.about-feature,
.about-feature.about-feature-reverse {
grid-template-columns: 1fr;
gap: 45px;
}
.about-feature-reverse figure {
order: 0;
}
.about-feature figure {
height: 560px;
}
.about-feature-copy {
max-width: 760px;
}
.about-proof-numbers > div {
padding: 40px 32px;
}
.about-proof-flow {
grid-template-columns: 1fr;
gap: 34px;
}
.about-operator-shell {
grid-template-columns: 1fr;
}
.about-operator-copy {
max-width: 790px;
}
.about-operator-works {
grid-template-rows: repeat(2, 290px);
}
}
@media (max-width: 720px) {
.about-page {
padding-top: 72px;
}
.about-page h1,
.about-page h2,
.about-page h3,
.about-page p,
.about-page li {
word-break: auto-phrase;
overflow-wrap: break-word;
line-break: strict;
}
.about-hero-copy,
.about-heading > *,
.about-worry-layout > *,
.about-feature > *,
.about-feature-copy,
.about-feature-detail > *,
.about-proof-flow > *,
.about-policy-intro > *,
.about-operator-shell > *,
.about-contact-inner > * {
min-width: 0;
}
.about-hero-shell {
width: calc(100% - 40px);
gap: 46px;
padding: 60px 0 28px;
}
.about-hero-copy h1 {
font-size: clamp(34px, 9vw, 39px);
letter-spacing: -0.07em;
line-height: 1.24;
}
.about-hero-lead {
margin-top: 26px;
font-size: 15px;
line-height: 1.95;
}
.about-hero-actions {
display: grid;
gap: 18px;
margin-top: 31px;
}
.about-hero-actions .button {
width: 100%;
min-width: 0;
}
.about-hero-link {
justify-content: space-between;
}
.about-hero-route {
gap: 9px;
margin-top: 32px;
font-size: 10px;
}
.about-hero-route i {
width: 24px;
}
.about-hero-visual {
grid-template-columns: 1fr 1fr;
grid-template-rows: 315px 122px;
gap: 7px;
width: calc(100% + 40px);
height: auto;
margin-left: -20px;
}
.about-hero-main-photo figcaption {
right: 20px;
bottom: 18px;
left: 20px;
font-size: 15px;
}
.about-hero-work::after {
right: 8px;
bottom: 8px;
width: 29px;
font-size: 11px;
}
.about-section {
padding: 86px 20px;
}
.about-heading {
gap: 23px;
margin-bottom: 52px;
}
.about-heading h2,
.about-policy-intro h2,
.about-operator-copy h2,
.about-contact h2 {
font-size: clamp(34px, 9.5vw, 41px);
letter-spacing: -0.06em;
line-height: 1.36;
}
.about-mobile-break {
display: block;
}
.about-heading > p {
font-size: 15px;
line-height: 1.95;
}
.about-worry-layout {
grid-template-columns: 1fr;
gap: 38px;
}
.about-worry-list li {
grid-template-columns: 34px 1fr;
min-height: 104px;
padding: 21px 0;
}
.about-worry-list strong {
font-size: 20px;
line-height: 1.55;
}
.about-answer {
min-height: 410px;
padding: 36px 27px;
}
.about-answer-icon {
top: 30px;
left: 27px;
width: 52px;
}
.about-answer h3 {
font-size: 27px;
line-height: 1.5;
}
.about-answer > p:last-child {
font-size: 14px;
}
.about-feature {
gap: 34px;
padding: 55px 0 60px;
}
.about-feature figure {
height: 330px;
}
.about-feature figure::before {
inset: 11px;
}
.about-feature-number {
margin-bottom: 18px;
}
.about-feature-copy h3 {
margin-bottom: 22px;
font-size: clamp(31px, 9vw, 37px);
line-height: 1.4;
}
.about-feature-copy > p:not(.about-feature-number) {
margin-bottom: 25px;
font-size: 15px;
line-height: 1.95;
}
.about-feature-detail {
grid-template-columns: 1fr;
gap: 13px;
}
.about-feature-detail ul {
font-size: 13px;
}
.about-proof-numbers {
grid-template-columns: 1fr;
}
.about-proof-numbers > div {
display: grid;
grid-template-columns: minmax(0, 128px) minmax(0, 1fr);
gap: 16px;
align-items: center;
min-height: 0;
padding: 30px 25px;
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.about-proof-numbers strong span {
font-size: 50px;
}
.about-proof-numbers strong {
min-width: 0;
font-size: 20px;
letter-spacing: -0.06em;
}
.about-proof-numbers > div:nth-child(3) strong {
font-size: 14px;
}
.about-proof-numbers > div:nth-child(3) strong span {
font-size: 39px;
}
.about-proof-numbers p {
margin: 0;
font-size: 12px;
}
.about-proof-flow {
padding: 34px 25px;
}
.about-proof-flow > p {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 12px;
font-size: 16px;
white-space: normal;
}
.about-proof-flow > p i {
width: 1px;
height: 16px;
margin-left: 7px;
}
.about-proof-flow > p span {
grid-column: 2;
}
.about-proof-flow > p i {
grid-column: 1;
}
.about-proof-flow nav {
display: grid;
gap: 16px;
}
.about-policy {
background: var(--cream);
}
.about-policy-intro {
gap: 24px;
margin-bottom: 48px;
}
.about-policy-intro > p:last-child {
font-size: 15px;
line-height: 1.95;
}
.about-policy-compare {
grid-template-columns: 1fr;
}
.about-policy-compare > section,
.about-policy-compare li > * {
min-width: 0;
}
.about-policy-compare section {
min-height: 0;
padding: 40px 27px;
}
.about-policy-compare section:first-child {
border-right: 0;
border-bottom: 0;
}
.about-policy-compare h3 {
margin-bottom: 30px;
font-size: 29px;
}
.about-policy-compare li {
font-size: 14px;
}
.about-policy-links {
display: grid;
gap: 18px;
justify-content: stretch;
}
.about-operator-shell {
gap: 50px;
}
.about-operator-copy h2 {
margin-bottom: 27px;
font-size: 30px;
}
.about-operator-story p {
font-size: 15px;
line-height: 1.95;
}
.about-operator-story p + p {
margin-top: 13px;
}
.about-operator-links {
display: grid;
align-items: stretch;
}
.about-operator-links .button {
width: 100%;
min-width: 0;
}
.about-operator-works {
grid-template-columns: 1.2fr 0.8fr;
grid-template-rows: repeat(2, 145px);
gap: 7px;
}
.about-contact {
min-height: 650px;
padding: 82px 20px 100px;
}
.about-contact-photo {
object-position: 62% center;
}
.about-contact-overlay {
background: rgba(3, 46, 32, 0.83);
}
.about-contact-inner {
grid-template-columns: 1fr;
gap: 38px;
}
.about-contact-inner > div:first-child > p:last-child {
margin-top: 25px;
font-size: 15px;
line-height: 1.95;
}
}
@media (max-width: 360px) {
.site-header {
padding-inline: 8px;
}
.header-brand-group {
gap: 0;
}
.brand-window {
width: 64px;
}
.header-tagline {
display: block;
padding-left: 8px;
font-size: 11px;
letter-spacing: -0.01em;
}
.menu-button {
width: 44px;
height: 44px;
}
.mobile-menu-topbar {
gap: 6px;
padding-inline: 8px;
}
.mobile-menu-brand {
width: 60px;
}
.mobile-menu-topbar > p {
padding-left: 6px;
font-size: 11px;
letter-spacing: -0.015em;
}
.mobile-menu-close {
width: 44px;
height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.about-hero-main-photo img,
.about-hero-work img,
.about-feature figure img,
.about-operator-works img,
.about-hero-link span {
transition: none !important;
transform: none !important;
}
} .about-worry-list {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.about-answer {
display: grid;
grid-template-rows: minmax(250px, 1fr) auto;
gap: 32px;
justify-content: stretch;
min-height: 660px;
padding: clamp(34px, 4vw, 58px);
}
.about-conversation-map {
position: relative;
min-height: 260px;
isolation: isolate;
}
.about-conversation-map::before {
position: absolute;
top: 50%;
left: 50%;
width: 184px;
aspect-ratio: 1;
border: 1px solid rgba(167, 223, 188, 0.28);
border-radius: 50%;
content: "";
transform: translate(-50%, -50%);
}
.about-conversation-map::after {
position: absolute;
inset: 15% 12%;
z-index: -1;
background:
linear-gradient(29deg, transparent 49.65%, rgba(167, 223, 188, 0.28) 49.8% 50.2%, transparent 50.35%),
linear-gradient(-29deg, transparent 49.65%, rgba(167, 223, 188, 0.28) 49.8% 50.2%, transparent 50.35%);
content: "";
opacity: 0.85;
}
.about-conversation-map .about-answer-icon {
position: absolute;
top: 50%;
left: 50%;
display: grid;
gap: 5px;
place-items: center;
width: 94px;
height: 94px;
padding: 0;
border: 8px solid rgba(255, 255, 255, 0.08);
background: #a7dfbc;
background-clip: padding-box;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
color: var(--green-deep);
transform: translate(-50%, -50%);
animation: about-map-pulse 3.2s ease-in-out infinite;
}
.about-conversation-map .about-answer-icon .icon {
width: 27px;
}
.about-conversation-map .about-answer-icon strong {
font-size: 11px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.04em;
}
.about-conversation-node {
position: absolute;
display: grid;
grid-template-columns: 31px auto;
gap: 9px;
align-items: center;
min-width: 122px;
padding: 11px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
animation: about-node-float 5s ease-in-out infinite;
}
.about-conversation-node .icon {
width: 25px;
color: #a7dfbc;
}
.about-conversation-node small {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
white-space: nowrap;
}
.about-conversation-node-work {
top: 3%;
left: 0;
}
.about-conversation-node-customer {
top: 4%;
right: 0;
animation-delay: -1.7s;
}
.about-conversation-node-future {
right: 50%;
bottom: 0;
transform: translateX(50%);
animation-name: about-node-float-center;
animation-delay: -3.4s;
}
.about-answer-copy {
position: relative;
z-index: 2;
}
.about-answer-copy > p:first-child {
margin: 0 0 12px;
color: #a7dfbc;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.06em;
}
.about-answer-copy h3 {
margin-bottom: 22px;
}
.about-answer-copy h3 > span {
display: block;
}
.about-answer-copy > p:last-child {
margin: 0;
font-size: 15px;
line-height: 2;
}
.about-work-map {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0 0 38px;
padding: 34px clamp(24px, 4vw, 58px) 31px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 2px;
background: rgba(255, 255, 255, 0.045);
list-style: none;
}
.about-work-map::before {
position: absolute;
top: 65px;
right: 12.5%;
left: 12.5%;
height: 1px;
background: rgba(167, 223, 188, 0.3);
content: "";
}
.about-work-map::after {
position: absolute;
top: 64px;
left: 8%;
width: 120px;
height: 3px;
background: linear-gradient(90deg, transparent, #a7dfbc, transparent);
content: "";
animation: about-line-run 5.6s ease-in-out infinite;
}
.about-work-map li {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
color: var(--white);
}
.about-work-map-link {
display: grid;
place-items: center;
width: 64px;
aspect-ratio: 1;
margin-bottom: 15px;
border: 1px solid rgba(167, 223, 188, 0.46);
border-radius: 50%;
background: var(--green-dark);
box-shadow: 0 0 0 8px rgba(3, 46, 32, 0.94);
color: #a7dfbc;
transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-out);
}
.about-work-map li:hover > .about-work-map-link {
background: #a7dfbc;
color: var(--green-deep);
transform: translateY(-5px);
}
.about-work-map-link:focus-visible {
outline: 2px solid var(--white);
outline-offset: 5px;
}
.about-work-map .icon {
width: 29px;
}
.about-work-map small {
margin-bottom: 5px;
color: #8bcda6;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.12em;
}
.about-work-map strong {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.02em;
}
.about-feature figure img {
transform: scale(1.055);
}
.about-feature {
scroll-margin-top: 112px;
}
.about-feature.is-visible figure img {
transform: scale(1);
}
.about-feature:hover figure img {
transform: scale(1.025);
}
.about-feature-photo-icon {
position: absolute;
right: 34px;
bottom: 34px;
z-index: 2;
display: grid;
place-items: center;
width: 76px;
aspect-ratio: 1;
border: 8px solid rgba(255, 253, 248, 0.26);
border-radius: 50%;
background: var(--paper);
background-clip: padding-box;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
color: var(--green);
opacity: 0;
transform: scale(0.65) rotate(-14deg);
}
.about-feature-reverse .about-feature-photo-icon {
right: auto;
left: 34px;
}
.about-feature-photo-icon .icon {
width: 32px;
}
.about-feature.is-visible .about-feature-photo-icon {
opacity: 1;
transform: scale(1) rotate(0);
transition: opacity 0.5s 0.28s ease, transform 0.75s 0.28s var(--ease-out);
}
.about-proof-numbers > div {
position: relative;
}
.about-proof-numbers > div > i {
position: absolute;
top: 34px;
right: 34px;
display: grid;
place-items: center;
width: 52px;
aspect-ratio: 1;
border: 1px solid rgba(167, 223, 188, 0.28);
border-radius: 50%;
color: #a7dfbc;
opacity: 0.86;
}
.about-proof-numbers > div > i .icon {
width: 25px;
}
.about-proof-process {
position: relative;
display: grid;
gap: 13px;
margin: 0;
padding: 0;
list-style: none;
}
.about-proof-process li {
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 16px;
align-items: center;
min-height: 62px;
}
.about-proof-process li:not(:last-child)::after {
position: absolute;
top: 54px;
bottom: -21px;
left: 23px;
width: 1px;
background: rgba(167, 223, 188, 0.32);
content: "";
}
.about-proof-process > li > .icon {
z-index: 1;
width: 48px;
padding: 11px;
border: 1px solid rgba(167, 223, 188, 0.34);
border-radius: 50%;
background: var(--green-deep);
color: #a7dfbc;
}
.about-proof-process span {
display: grid;
gap: 4px;
}
.about-proof-process strong {
color: var(--white);
font-size: 15px;
font-weight: 800;
}
.about-proof-process small {
color: rgba(255, 255, 255, 0.58);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
.about-role-table {
margin-top: 44px;
overflow: hidden;
border: 1px solid rgba(5, 61, 41, 0.18);
background: var(--paper);
box-shadow: 0 24px 65px rgba(5, 61, 41, 0.08);
}
.about-role-table-title {
display: grid;
grid-template-columns: 60px minmax(190px, 0.55fr) minmax(320px, 1fr);
gap: 22px;
align-items: center;
padding: 34px clamp(28px, 4vw, 54px);
background: var(--green-deep);
color: var(--white);
}
.about-role-table-title > span {
display: grid;
place-items: center;
width: 60px;
aspect-ratio: 1;
border-radius: 50%;
background: #a7dfbc;
color: var(--green-deep);
}
.about-role-table-title > span .icon {
width: 30px;
}
.about-role-table-title > div {
display: grid;
gap: 5px;
}
.about-role-table-title small {
color: #a7dfbc;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.14em;
}
.about-role-table-title strong {
font-size: clamp(20px, 2vw, 28px);
font-weight: 900;
letter-spacing: -0.04em;
}
.about-role-table-title p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 1.85;
}
.about-role-row {
display: grid;
grid-template-columns: minmax(145px, 0.44fr) minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
border-top: 1px solid var(--line);
transition: background 0.25s ease;
}
.about-role-row:not(.about-role-head):hover {
background: rgba(220, 236, 223, 0.44);
}
.about-role-head {
border-top: 0;
background: #e3eee4;
}
.about-role-head span {
padding: 13px 26px;
color: var(--green-deep);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.05em;
}
.about-role-head span + span,
.about-role-row > p {
border-left: 1px solid var(--line);
}
.about-role-row > strong,
.about-role-row > p {
margin: 0;
padding: 27px 26px;
}
.about-role-row > strong {
display: flex;
gap: 12px;
align-items: center;
color: var(--green-deep);
font-size: 14px;
font-weight: 900;
}
.about-role-row > strong .icon {
flex: 0 0 auto;
width: 27px;
color: var(--green);
}
.about-role-row > p {
color: var(--muted);
font-size: 13px;
font-weight: 700;
line-height: 1.75;
}
.about-role-row > p small {
display: none;
}
.about-role-table.is-visible .about-role-row:not(.about-role-head) {
animation: about-role-in 0.72s var(--ease-out) both;
}
.about-role-table.is-visible .about-role-row:nth-child(4) {
animation-delay: 0.1s;
}
.about-role-table.is-visible .about-role-row:nth-child(5) {
animation-delay: 0.2s;
}
.about-capabilities {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin: -8px 0 36px;
padding: 0;
list-style: none;
}
.about-capabilities li {
display: flex;
gap: 9px;
align-items: center;
min-width: 0;
padding: 12px 13px;
border: 1px solid rgba(5, 61, 41, 0.1);
background: rgba(220, 236, 223, 0.58);
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
transition: background 0.25s ease, transform 0.35s var(--ease-out);
}
.about-capabilities li:hover {
background: var(--mint-2);
transform: translateY(-3px);
}
.about-capabilities .icon {
flex: 0 0 auto;
width: 22px;
color: var(--green);
}
@keyframes about-map-pulse {
0%, 100% { box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24), 0 0 0 0 rgba(167, 223, 188, 0.16); }
50% { box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24), 0 0 0 18px rgba(167, 223, 188, 0); }
}
@keyframes about-node-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes about-node-float-center {
0%, 100% { transform: translate(50%, 0); }
50% { transform: translate(50%, -8px); }
}
@keyframes about-line-run {
0% { transform: translateX(-160%); }
45%, 100% { transform: translateX(690%); }
}
@keyframes about-role-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1050px) {
.about-answer {
min-height: 600px;
}
.about-role-table-title {
grid-template-columns: 60px minmax(190px, 0.55fr) minmax(260px, 1fr);
}
}
@media (min-width: 721px) and (max-width: 900px) {
.about-worry-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.about-worry-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
border-left: 1px solid var(--line);
}
.about-worry-list li {
grid-template-columns: 1fr;
gap: 14px;
align-content: start;
min-height: 190px;
padding: 28px 24px;
border-right: 1px solid var(--line);
}
.about-worry-list strong {
font-size: 19px;
line-height: 1.55;
}
.about-worry-list strong > span {
display: block;
}
.about-answer {
grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr);
grid-template-rows: 1fr;
gap: 32px;
align-items: center;
min-height: 470px;
padding: 38px 36px;
}
.about-conversation-map {
min-height: 280px;
}
.about-conversation-map::before {
width: 164px;
}
.about-conversation-node {
grid-template-columns: 25px auto;
gap: 7px;
min-width: 112px;
padding: 10px 11px;
}
.about-conversation-node .icon {
width: 21px;
}
.about-answer-copy h3 {
font-size: clamp(25px, 3.3vw, 29px);
}
}
@media (max-width: 720px) {
.about-worry-list {
display: block;
border-left: 0;
}
.about-worry-list li {
grid-template-columns: 34px 1fr;
gap: 14px;
min-height: 104px;
padding: 21px 0;
border-right: 0;
}
.about-worry-list strong {
font-size: 20px;
line-height: 1.55;
}
.about-answer {
grid-template-columns: 1fr;
grid-template-rows: 245px auto;
gap: 29px;
min-height: 0;
padding: 31px 25px 36px;
}
.about-conversation-map {
min-height: 245px;
}
.about-conversation-map::before {
width: 152px;
}
.about-conversation-map::after {
inset: 16% 8%;
}
.about-conversation-map .about-answer-icon {
width: 82px;
height: 82px;
border-width: 7px;
}
.about-conversation-node {
grid-template-columns: 25px auto;
gap: 7px;
min-width: 0;
padding: 9px 11px;
}
.about-conversation-node .icon {
width: 21px;
}
.about-conversation-node small {
font-size: 11px;
}
.about-answer-copy > p:last-child {
font-size: 14px;
}
.about-work-map {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 27px 12px;
margin-bottom: 18px;
padding: 27px 16px;
}
.about-work-map::before,
.about-work-map::after {
display: none;
}
.about-work-map-link {
width: 55px;
margin-bottom: 12px;
box-shadow: 0 0 0 6px rgba(3, 46, 32, 0.94);
}
.about-feature {
scroll-margin-top: 88px;
}
.about-work-map .icon {
width: 25px;
}
.about-feature-photo-icon {
right: 22px;
bottom: 22px;
width: 61px;
border-width: 6px;
}
.about-feature-reverse .about-feature-photo-icon {
right: 22px;
left: auto;
}
.about-feature-photo-icon .icon {
width: 26px;
}
.about-proof-numbers > div > i {
display: none;
}
.about-proof-flow {
gap: 31px;
}
.about-proof-process li {
grid-template-columns: 43px minmax(0, 1fr);
gap: 14px;
}
.about-proof-process > li > .icon {
width: 43px;
padding: 10px;
}
.about-proof-process li:not(:last-child)::after {
top: 49px;
bottom: -20px;
left: 21px;
}
.about-role-table {
margin-top: 30px;
}
.about-role-table-title {
grid-template-columns: 50px minmax(0, 1fr);
gap: 15px;
padding: 27px 22px 25px;
}
.about-role-table-title > span {
width: 50px;
}
.about-role-table-title > span .icon {
width: 25px;
}
.about-role-table-title p {
grid-column: 1 / -1;
margin-top: 4px;
font-size: 12px;
}
.about-role-head {
display: none;
}
.about-role-row {
grid-template-columns: 1fr;
gap: 17px;
padding: 24px 22px;
}
.about-role-row > strong,
.about-role-row > p {
padding: 0;
}
.about-role-row > p {
border-left: 0;
font-size: 13px;
}
.about-role-row > p small {
display: block;
margin-bottom: 5px;
color: var(--green);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.08em;
}
.about-capabilities {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: -5px;
}
.about-capabilities li {
padding: 11px 10px;
font-size: 11px;
}
}
@media (max-width: 360px) {
.about-answer {
padding-inline: 20px;
}
.about-conversation-node-work {
left: -3px;
}
.about-conversation-node-customer {
right: -3px;
}
.about-role-table-title,
.about-role-row {
padding-inline: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.about-conversation-map .about-answer-icon,
.about-conversation-node,
.about-work-map::after,
.about-role-table.is-visible .about-role-row:not(.about-role-head) {
animation: none !important;
}
.about-feature figure img,
.about-feature-photo-icon,
.about-capabilities li,
.about-work-map-link {
transition: none !important;
transform: none !important;
}
} .about-start .about-heading h2 span { display: block; }
.about-worry-layout {
display: grid;
grid-template-columns: 1fr;
gap: 26px;
}
.about-worry-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
border: 1px solid var(--line);
background: var(--paper);
}
.about-worry-list li {
position: relative;
display: grid;
grid-template-columns: 42px 58px minmax(0, 1fr);
gap: 17px;
align-items: center;
min-height: 156px;
padding: 28px 27px;
border: 0;
background: var(--paper);
transition: background .28s ease;
}
.about-worry-list li + li { border-left: 1px solid var(--line); }
.about-worry-list li:hover { background: #f6f8f1; }
.about-worry-list li > span:first-child {
align-self: start;
padding-top: 6px;
color: var(--green);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
}
.about-worry-icon {
display: grid;
place-items: center;
width: 58px;
aspect-ratio: 1;
border: 1px solid rgba(8, 102, 64, .16);
border-radius: 50%;
background: var(--mint);
color: var(--green);
}
.about-worry-icon .icon { width: 27px; }
.about-worry-list strong {
color: var(--ink);
font-size: clamp(18px, 1.55vw, 22px);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.65;
}
.about-answer {
position: relative;
display: grid;
grid-template-columns: minmax(330px, .72fr) minmax(530px, 1.28fr);
grid-template-rows: 1fr;
gap: clamp(48px, 6vw, 92px);
align-items: center;
min-height: 610px;
padding: clamp(48px, 5.2vw, 74px);
overflow: hidden;
background: var(--green-deep);
color: rgba(255, 255, 255, .76);
}
.about-answer::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 44%;
width: auto;
aspect-ratio: auto;
border: 0;
border-radius: 0;
background:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 46px 46px;
content: "";
opacity: .72;
}
.about-answer::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 8px;
background: #d7f183;
content: "";
}
.about-answer-copy {
position: relative;
z-index: 2;
}
.about-answer-copy > p:first-child {
display: flex;
gap: 10px;
align-items: center;
margin: 0 0 18px;
color: #bce2c7;
font-size: 14px;
font-weight: 900;
letter-spacing: .02em;
}
.about-answer-copy > p:first-child::before {
width: 27px;
height: 1px;
background: #d7f183;
content: "";
}
.about-answer-copy h3 {
margin: 0 0 25px;
color: var(--white);
font-size: clamp(34px, 3.25vw, 48px);
font-weight: 900;
letter-spacing: -.05em;
line-height: 1.45;
}
.about-answer-copy h3 span { display: block; }
.about-answer-copy > p:last-child {
max-width: 560px;
margin: 0;
color: rgba(255, 255, 255, .72);
font-size: 15px;
line-height: 2;
}
.about-consult-journey {
position: relative;
z-index: 2;
min-width: 0;
padding: clamp(26px, 3vw, 38px);
border-top: 5px solid #d7f183;
background: rgba(255, 253, 248, .97);
box-shadow: 0 28px 70px rgba(0, 0, 0, .25);
color: var(--ink);
}
.about-consult-journey-head {
display: flex;
justify-content: space-between;
gap: 22px;
align-items: baseline;
padding-bottom: 19px;
border-bottom: 1px solid var(--line);
}
.about-consult-journey-head small,
.about-consult-results header small {
color: var(--green);
font-size: 12px;
font-weight: 900;
}
.about-consult-journey-head strong,
.about-consult-results header strong {
color: var(--ink);
font-size: 18px;
line-height: 1.55;
}
.about-consult-topics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 20px 0 0;
list-style: none;
}
.about-consult-topics li {
min-width: 0;
padding: 0 15px;
text-align: center;
opacity: .72;
transform: translateY(8px);
transition: opacity .45s ease, transform .55s var(--ease-out);
}
.about-consult-topics li + li { border-left: 1px solid var(--line); }
.about-answer.is-visible .about-consult-topics li { opacity: 1; transform: translateY(0); }
.about-answer.is-visible .about-consult-topics li:nth-child(2) { transition-delay: 90ms; }
.about-answer.is-visible .about-consult-topics li:nth-child(3) { transition-delay: 180ms; }
.about-consult-topics li > span,
.about-consult-results li > span,
.about-consult-transform > span {
display: grid;
place-items: center;
margin-inline: auto;
border-radius: 50%;
}
.about-consult-topics li > span {
width: 48px;
aspect-ratio: 1;
background: var(--mint);
color: var(--green);
}
.about-consult-topics .icon { width: 23px; }
.about-consult-topics strong,
.about-consult-topics small { display: block; }
.about-consult-topics strong { margin-top: 10px; font-size: 15px; }
.about-consult-topics small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.about-consult-transform {
position: relative;
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
gap: 15px;
align-items: center;
margin: 22px 0;
padding: 16px 18px 19px;
overflow: hidden;
background: var(--mint);
}
.about-consult-transform > span {
width: 50px;
aspect-ratio: 1;
background: var(--green);
color: var(--white);
}
.about-consult-transform .icon { width: 25px; }
.about-consult-transform p { margin: 0; }
.about-consult-transform p small,
.about-consult-transform p strong { display: block; }
.about-consult-transform p small { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.about-consult-transform p strong { margin-top: 3px; color: var(--ink); font-size: 15px; line-height: 1.6; }
.about-consult-transform i {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
background: rgba(8, 102, 64, .12);
}
.about-consult-transform i b {
display: block;
width: 32%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--green), transparent);
animation: about-consult-flow 3.6s ease-in-out infinite;
}
.about-consult-results {
padding: 20px;
border: 1px solid rgba(8, 102, 64, .2);
background: #f6f6ef;
}
.about-consult-results > header {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: baseline;
}
.about-consult-results ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 17px 0 0;
padding: 0;
border-top: 1px solid var(--line);
list-style: none;
}
.about-consult-results li {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 18px 12px 3px 0;
}
.about-consult-results li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.about-consult-results li > span { width: 44px; aspect-ratio: 1; background: var(--green); color: var(--white); }
.about-consult-results .icon { width: 22px; }
.about-consult-results li strong,
.about-consult-results li small { display: block; }
.about-consult-results li strong { font-size: 14px; }
.about-consult-results li small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
@keyframes about-consult-flow {
0% { transform: translateX(-120%); }
52%, 100% { transform: translateX(420%); }
}
@media (max-width: 1120px) {
.about-worry-list li { grid-template-columns: 34px 50px minmax(0, 1fr); gap: 13px; padding: 25px 20px; }
.about-worry-icon { width: 50px; }
.about-worry-list strong { font-size: 18px; }
.about-answer { grid-template-columns: minmax(280px, .68fr) minmax(480px, 1.32fr); gap: 40px; padding: 48px 42px; }
}
@media (max-width: 900px) {
.about-worry-list li { grid-template-columns: 32px minmax(0, 1fr); align-content: start; min-height: 174px; padding: 24px 20px; }
.about-worry-icon { grid-row: 1; grid-column: 2; width: 48px; }
.about-worry-list strong { grid-column: 1 / -1; margin-top: 5px; }
.about-answer { grid-template-columns: 1fr; gap: 42px; min-height: 0; padding: 52px 44px; }
.about-answer::before { left: 0; opacity: .45; }
.about-answer-copy > p:last-child { max-width: 720px; }
}
@media (max-width: 720px) {
.about-start .about-heading h2 { font-size: 31px; line-height: 1.52; }
.about-worry-layout { gap: 18px; }
.about-worry-list { grid-template-columns: 1fr; }
.about-worry-list li { grid-template-columns: 34px 50px minmax(0, 1fr); align-content: center; min-height: 124px; padding: 22px 19px; }
.about-worry-list li + li { border-top: 1px solid var(--line); border-left: 0; }
.about-worry-icon { grid-row: auto; grid-column: auto; width: 50px; }
.about-worry-list strong { grid-column: auto; margin: 0; font-size: 18px; line-height: 1.65; }
.about-answer { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 33px; padding: 38px 24px 32px; }
.about-answer::after { width: 5px; }
.about-answer-copy > p:first-child { font-size: 13px; }
.about-answer-copy h3 { margin-bottom: 19px; font-size: 28px; line-height: 1.52; }
.about-answer-copy > p:last-child { font-size: 15px; line-height: 1.95; }
.about-consult-journey { padding: 21px 17px; }
.about-consult-journey-head,
.about-consult-results > header { display: block; }
.about-consult-journey-head strong,
.about-consult-results header strong { display: block; margin-top: 5px; font-size: 17px; }
.about-consult-topics { grid-template-columns: 1fr; padding-top: 8px; }
.about-consult-topics li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; align-items: center; padding: 14px 0; text-align: left; }
.about-consult-topics li + li { border-top: 1px solid var(--line); border-left: 0; }
.about-consult-topics li > span { width: 46px; margin: 0; }
.about-consult-topics strong { margin-top: 0; font-size: 15px; }
.about-consult-topics small { margin-top: 2px; font-size: 13px; }
.about-consult-transform { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; margin: 15px 0; padding: 14px 14px 17px; }
.about-consult-transform > span { width: 46px; }
.about-consult-transform p strong { font-size: 14px; }
.about-consult-results { padding: 17px 15px; }
.about-consult-results ul { grid-template-columns: 1fr; }
.about-consult-results li { padding: 15px 0; }
.about-consult-results li + li { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
.about-consult-results li strong { font-size: 15px; }
.about-consult-results li small { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.about-worry-list li,
.about-consult-topics li { transition: none; }
.about-consult-transform i b { animation: none; transform: none; }
}
@media (max-width: 350px) {
.section-heading > * {
min-width: 0;
}
.works-heading h2 {
font-size: 30px;
}
.strength-heading {
font-size: 28px !important;
}
}.price-page {
--price-line: rgba(9, 72, 48, .17);
--price-soft: #edf3e9;
overflow: clip;
background: var(--cream);
line-break: strict;
}
.price-page :where(h1, h2, h3, p, li, a, strong, dd) {
word-break: auto-phrase;
overflow-wrap: break-word;
}
.price-page :where(h1, h2, h3) {
text-wrap: balance;
}
.price-shell {
width: min(1200px, calc(100% - 80px));
margin-inline: auto;
}
.price-section {
padding: clamp(105px, 10vw, 152px) 0;
}
.price-section[id] { scroll-margin-top: 165px; }
.price-hero {
position: relative;
min-height: 780px;
overflow: hidden;
padding: 146px 0 78px;
background: var(--green-deep);
color: var(--white);
}
.price-hero::before {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 72% 20%, rgba(112, 196, 143, .12), transparent 27%),
linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, .025) 58% 59%, transparent 59%);
content: "";
pointer-events: none;
}
.price-hero-orbit {
position: absolute;
border: 1px solid rgba(181, 226, 197, .13);
border-radius: 50%;
pointer-events: none;
}
.price-hero-orbit-one {
top: -280px;
right: -210px;
width: 680px;
height: 680px;
animation: price-orbit 18s ease-in-out infinite alternate;
}
.price-hero-orbit-two {
right: 24%;
bottom: -260px;
width: 520px;
height: 520px;
animation: price-orbit 22s ease-in-out -7s infinite alternate-reverse;
}
.price-hero-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
grid-template-areas:
"copy board"
"facts board";
column-gap: clamp(58px, 7vw, 108px);
row-gap: 0;
align-items: start;
}
.price-hero-layout > * { min-width: 0; }
.price-hero-copy { grid-area: copy; }
.price-hero-board { grid-area: board; align-self: center; }
.price-hero-facts { grid-area: facts; }
.price-hero .section-label,
.price-heading-light .section-label,
.price-contact .section-label { color: #9bd6b2; }
.price-hero h1 {
margin: 25px 0 0;
color: var(--white);
font-size: clamp(53px, 4.9vw, 71px);
letter-spacing: -.055em;
line-height: 1.23;
}
.price-hero h1 span,
.price-heading h2 span,
.price-faq-title h2 span,
.price-contact h2 span {
display: block;
}
.price-hero-copy > p:not(.section-label) {
max-width: 650px;
margin: 29px 0 0;
color: rgba(255, 255, 255, .72);
font-size: 16px;
line-height: 1.9;
}
.price-hero-actions {
display: flex;
gap: 27px;
align-items: center;
margin-top: 36px;
}
.price-text-link {
display: inline-flex;
gap: 9px;
align-items: center;
min-height: 48px;
color: var(--white);
font-size: 14px;
font-weight: 900;
}
.price-text-link .icon { width: 20px; }
.price-hero-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: 44px 0 0;
padding: 23px 0 0;
border-top: 1px solid rgba(255, 255, 255, .16);
list-style: none;
}
.price-hero-facts li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: center;
padding: 0 17px;
border-right: 1px solid rgba(255, 255, 255, .13);
}
.price-hero-facts li:first-child { padding-left: 0; }
.price-hero-facts li:last-child { border-right: 0; }
.price-hero-facts .icon { width: 27px; color: #9bd6b2; }
.price-hero-facts small,
.price-hero-facts strong { display: block; }
.price-hero-facts small { color: rgba(255, 255, 255, .56); font-size: 12px; }
.price-hero-facts strong { color: var(--white); font-size: 14px; line-height: 1.45; }
.price-hero-board {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .19);
border-radius: 24px;
background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035));
box-shadow: 0 35px 80px rgba(0, 24, 15, .28);
backdrop-filter: blur(12px);
}
.price-hero-board::before {
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(#b9ef6f, #9bd6b2 55%, transparent);
content: "";
}
.price-hero-board > header {
display: flex;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, .15);
color: rgba(255, 255, 255, .65);
font-size: 13px;
font-weight: 800;
}
.price-hero-board > header small { color: rgba(255, 255, 255, .52); font-size: 12px; }
.price-hero-board a {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto 24px;
gap: 14px;
align-items: center;
min-height: 91px;
padding: 14px 22px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
color: var(--white);
transition: background .25s ease, transform .25s var(--ease-out);
}
.price-hero-board a:hover {
background: rgba(255, 255, 255, .09);
transform: translateX(4px);
}
.price-hero-type-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #9bd6b2;
color: var(--green-deep);
}
.price-hero-type-icon .icon { width: 23px; }
.price-hero-board a > strong { font-size: 15px; line-height: 1.45; }
.price-hero-amount { display: flex; align-items: baseline; color: var(--mint); font-size: 13px; font-weight: 900; white-space: nowrap; }
.price-hero-amount b { margin-right: 2px; font-size: 30px; letter-spacing: -.055em; }
.price-hero-board > p {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 0;
padding: 18px 23px;
color: rgba(255, 255, 255, .58);
font-size: 13px !important;
line-height: 1.75 !important;
}
.price-hero-board > p > span { color: #9bd6b2; font-size: 8px; }
.price-jump {
position: sticky;
z-index: 120;
top: 80px;
border-bottom: 1px solid var(--price-line);
background: rgba(255, 253, 248, .94);
box-shadow: 0 11px 25px rgba(22, 48, 31, .055);
backdrop-filter: blur(14px);
}
.price-jump::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(8, 102, 64, .18), transparent);
content: "";
pointer-events: none;
}
.price-jump .price-shell {
display: flex;
align-items: center;
min-height: 66px;
}
.price-jump span {
margin-right: auto;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.price-jump a {
position: relative;
display: grid;
place-items: center;
min-height: 66px;
padding: 0 19px;
color: var(--ink-2);
font-size: 13px;
font-weight: 800;
transition: color .2s ease, background .2s ease;
}
.price-jump a:hover { background: var(--price-soft); color: var(--green); }
.price-jump a[aria-current="true"] { background: var(--price-soft); color: var(--green); }
.price-jump a[aria-current="true"]::after { position: absolute; right: 16px; bottom: 0; left: 16px; height: 3px; border-radius: 3px 3px 0 0; background: var(--green); content: ""; }
.price-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(350px, .62fr);
gap: clamp(55px, 7vw, 100px);
align-items: end;
margin-bottom: 55px;
}
.price-heading h2 {
margin: 21px 0 0;
font-size: clamp(40px, 4vw, 56px);
letter-spacing: -.045em;
line-height: 1.42;
}
.price-heading > p {
margin: 0;
color: var(--muted);
font-size: 16px;
line-height: 2;
}
.price-heading-light h2 { color: var(--white); }
.price-heading-light > p { color: rgba(255, 255, 255, .67); }
.price-types { background: var(--paper); }
.price-types-guide {
display: flex;
gap: 15px;
align-items: flex-start;
margin: 0 0 23px;
padding: 18px 22px;
border: 1px solid var(--price-line);
border-radius: 16px;
background: linear-gradient(135deg, #f1f4ec, #f8f7f0);
color: var(--muted);
font-size: 14px !important;
}
.price-types-guide .icon { flex: none; width: 25px; color: var(--green); }
.price-types-guide strong { color: var(--ink); }
.price-type-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.price-type-card {
scroll-margin-top: 170px;
overflow: hidden;
border: 1px solid var(--price-line);
border-top: 4px solid #9bd6b2;
border-radius: 22px;
background: var(--white);
box-shadow: 0 18px 48px rgba(15, 54, 33, .07);
transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.price-type-card:nth-child(2) { border-top-color: #d8e76c; }
.price-type-card:nth-child(3) { border-top-color: #8ecfc2; }
.price-type-card:nth-child(4) { border-top-color: #d9b66d; }
.price-type-card:hover {
border-color: rgba(8, 102, 64, .34);
box-shadow: 0 28px 65px rgba(15, 54, 33, .11);
transform: translateY(-5px);
}
.price-type-card > header {
display: grid;
grid-template-columns: 33px 55px minmax(0, 1fr);
gap: 15px;
align-items: center;
min-height: 145px;
padding: 29px 31px;
border-bottom: 1px solid var(--price-line);
}
.price-type-number { align-self: start; padding-top: 7px; color: var(--green); font-size: 12px; font-weight: 900; }
.price-type-icon { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; background: var(--mint); color: var(--green); }
.price-type-icon .icon { width: 29px; }
.price-type-card h3 { margin: 0; font-size: 24px; line-height: 1.45; }
.price-type-card header p { margin: 7px 0 0; color: var(--muted); font-size: 14px !important; line-height: 1.75 !important; }
.price-type-card header p span { display: block; }
.price-type-range { display: inline-flex; width: fit-content; margin-top: 10px; padding: 6px 10px; border-radius: 999px; background: var(--price-soft); color: var(--green); font-size: 12px; font-style: normal; font-weight: 900; }
.price-type-main {
display: grid;
grid-template-columns: .87fr 1.13fr;
min-height: 245px;
}
.price-type-value,
.price-type-scope { padding: 32px 31px; }
.price-type-value { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--price-line); background: var(--green-deep); color: var(--white); }
.price-type-value > small,
.price-type-scope > small { display: block; margin-bottom: 8px; font-weight: 900; }
.price-type-value > small { color: rgba(255, 255, 255, .56); }
.price-type-value p { display: flex; align-items: end; margin: 0; color: var(--white); }
.price-type-value strong { color: var(--mint); font-size: clamp(61px, 5.7vw, 82px); letter-spacing: -.075em; line-height: 1; }
.price-type-value p span { padding-bottom: 8px; font-size: 17px; font-weight: 900; }
.price-type-scope { display: flex; flex-direction: column; justify-content: center; }
.price-type-scope > small { color: var(--green); }
.price-type-scope ul { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.price-type-scope li { display: flex; gap: 9px; align-items: center; min-height: 38px; padding: 7px 10px; border-radius: 10px; background: var(--price-soft); color: var(--ink-2); font-size: 14px; font-weight: 800; }
.price-type-scope li .icon { width: 19px; color: var(--green); }
.price-type-card > footer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 23px;
align-items: center;
min-height: 120px;
padding: 24px 31px;
border-top: 1px solid var(--price-line);
background: #f5f3eb;
}
.price-type-card > footer p { margin: 0; color: var(--muted); font-size: 14px !important; line-height: 1.75 !important; }
.price-type-card > footer p small { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 900; }
.price-type-card > footer a { display: inline-flex; gap: 14px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--green); color: var(--green); font-size: 14px; font-weight: 900; white-space: nowrap; }
.price-tax-note { margin: 18px 0 0; color: var(--muted); font-size: 14px !important; }
.price-included,
.price-contract { position: relative; overflow: hidden; background: var(--green-deep); }
.price-work-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.price-work-flow li {
position: relative;
min-height: 220px;
padding: 27px 25px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 17px;
background: rgba(255, 255, 255, .025);
transition: background .25s ease, transform .3s var(--ease-out);
}
.price-work-flow li:hover { z-index: 1; background: rgba(255, 255, 255, .075); transform: translateY(-5px); }
.price-work-flow li:not(:last-child)::after { position: absolute; z-index: 2; top: 43px; right: -10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #9bd6b2; color: var(--green-deep); content: "→"; font-size: 10px; }
.price-work-flow li:nth-child(3)::after { top: auto; right: 50%; bottom: -18px; content: "↓"; transform: translateX(50%); }
.price-work-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #9bd6b2; color: var(--green-deep); }
.price-work-icon .icon { width: 26px; }
.price-work-flow small { display: block; margin-top: 24px; color: rgba(255, 255, 255, .42); }
.price-work-flow h3 { margin: 5px 0 0; color: var(--white); font-size: 17px; line-height: 1.5; }
.price-work-flow p { margin: 11px 0 0; color: rgba(255, 255, 255, .68); font-size: 14px !important; line-height: 1.78 !important; }
.price-writing-note {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 27px;
align-items: center;
width: min(900px, 100%);
margin: 34px auto 0;
padding: 27px 32px;
border-radius: 20px;
background: linear-gradient(135deg, var(--mint), #dff2df);
color: var(--green-deep);
}
.price-writing-note > span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: var(--white); }
.price-writing-note .icon { width: 34px; }
.price-writing-note small { color: var(--green); font-weight: 900; }
.price-writing-note h3 { margin: 3px 0 0; font-size: 22px; line-height: 1.5; }
.price-writing-note p { margin: 6px 0 0; color: #476154; font-size: 14px !important; line-height: 1.8 !important; }
.price-factors { background: var(--cream); }
.price-equation {
display: grid;
grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(240px, .72fr);
align-items: stretch;
margin-bottom: 27px;
}
.price-equation > div {
display: grid;
grid-template-columns: 54px 1fr;
grid-template-rows: auto 1fr;
gap: 2px 17px;
align-items: center;
min-height: 152px;
padding: 29px;
border: 1px solid var(--price-line);
background: var(--white);
}
.price-equation > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--mint); color: var(--green); }
.price-equation .icon { width: 28px; }
.price-equation small { align-self: end; color: var(--green); font-weight: 900; }
.price-equation strong { align-self: start; color: var(--ink); font-size: 17px; line-height: 1.6; }
.price-equation > i { display: grid; place-items: center; color: var(--green); font-size: 27px; font-style: normal; font-weight: 500; }
.price-equation > .is-result { border-color: var(--green); background: var(--green); }
.price-equation > .is-result > span { background: var(--white); }
.price-equation > .is-result small { color: rgba(255, 255, 255, .65); }
.price-equation > .is-result strong { color: var(--white); font-size: 22px; }
.price-factor-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.price-factor-list article {
position: relative;
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
gap: 18px;
min-height: 218px;
padding: 27px 25px 43px;
border: 1px solid var(--price-line);
border-radius: 17px;
background: var(--paper);
transition: background .25s ease, border-color .25s ease, transform .3s var(--ease-out);
}
.price-factor-list article:hover { border-color: rgba(8, 102, 64, .36); background: var(--white); transform: translateY(-4px); }
.price-factor-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(8, 102, 64, .25); border-radius: 50%; color: var(--green); }
.price-factor-icon .icon { width: 26px; }
.price-factor-list small { color: var(--green); font-weight: 900; }
.price-factor-list h3 { margin: 2px 0 0; font-size: 19px; line-height: 1.5; }
.price-factor-list p { margin: 11px 0 0; color: var(--muted); font-size: 14px !important; line-height: 1.8 !important; }
.price-factor-lines { position: absolute; right: 25px; bottom: 24px; left: 93px; display: flex; gap: 5px; }
.price-factor-lines i { flex: 1; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.price-factor-lines i:nth-child(2) { opacity: .55; transition-delay: .12s; }
.price-factor-lines i:nth-child(3) { opacity: .25; transition-delay: .24s; }
.price-factor-list article.is-visible .price-factor-lines i { transform: scaleX(1); }
.price-separate {
margin-top: 28px;
overflow: hidden;
border: 1px solid var(--price-line);
border-radius: 20px;
background: var(--paper);
}
.price-separate > header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
gap: 70px;
align-items: end;
padding: 43px 46px;
border-bottom: 1px solid var(--price-line);
}
.price-separate h3 { margin: 18px 0 0; font-size: 31px; line-height: 1.48; }
.price-separate > header > p { margin: 0; color: var(--muted); font-size: 14px !important; line-height: 1.9 !important; }
.price-separate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-separate-grid > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 108px; padding: 20px 28px; border-right: 1px solid var(--price-line); border-bottom: 1px solid var(--price-line); }
.price-separate-grid > div:nth-child(2n) { border-right: 0; }
.price-separate-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.price-separate-grid > div > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--green); }
.price-separate-grid .icon { width: 23px; }
.price-separate-grid p { margin: 0; }
.price-separate-grid strong,
.price-separate-grid small { display: block; }
.price-separate-grid strong { font-size: 15px; line-height: 1.55; }
.price-separate-grid small { margin-top: 4px; color: var(--muted); }
.price-contract-shape {
position: absolute;
top: 7%;
right: -160px;
width: 430px;
height: 430px;
border: 1px solid rgba(173, 221, 190, .14);
border-radius: 50%;
animation: price-contract-float 15s ease-in-out infinite alternate;
}
.price-contract-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 27px;
border-top: 1px solid rgba(255, 255, 255, .15);
border-left: 1px solid rgba(255, 255, 255, .15);
}
.price-contract-facts > div { min-height: 145px; padding: 26px 29px; border-right: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15); }
.price-contract-facts small,
.price-contract-facts strong,
.price-contract-facts span { display: block; }
.price-contract-facts small { color: #9bd6b2; font-weight: 900; }
.price-contract-facts strong { margin-top: 8px; color: var(--white); font-size: 26px; line-height: 1.4; }
.price-contract-facts span { margin-top: 7px; color: rgba(255, 255, 255, .52); font-size: 12px; }
.price-estimate-flow {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin: 0;
padding: 0;
background: rgba(255, 255, 255, .045);
list-style: none;
}
.price-estimate-flow::before {
position: absolute;
top: 51px;
right: 10%;
left: 10%;
height: 2px;
background: #9bd6b2;
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 1.2s var(--ease-out) .2s;
}
.price-estimate-flow.is-visible::before { transform: scaleX(1); }
.price-estimate-flow li { position: relative; z-index: 1; min-height: 255px; padding: 28px 23px; border: 1px solid rgba(255, 255, 255, .14); border-right: 0; }
.price-estimate-flow li:last-child { border-right: 1px solid rgba(255, 255, 255, .14); }
.price-estimate-flow li > span { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 34px; border-radius: 50%; background: #9bd6b2; color: var(--green-deep); font-size: 12px; font-weight: 900; }
.price-estimate-flow h3 { margin: 0; color: var(--white); font-size: 18px; line-height: 1.5; }
.price-estimate-flow p { margin: 11px 0 0; color: rgba(255, 255, 255, .6); font-size: 13px !important; line-height: 1.78 !important; }
.price-contract-rules {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 13px;
margin-top: 25px;
}
.price-contract-rules article { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 17px; padding: 25px; background: var(--mint); }
.price-contract-rules article > .icon { width: 31px; color: var(--green); }
.price-contract-rules h3 { margin: 0; font-size: 17px; line-height: 1.5; }
.price-contract-rules p { margin: 8px 0 0; color: #4c6256; font-size: 14px !important; line-height: 1.8 !important; }
.price-after { background: var(--paper); }
.price-after-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.price-after-grid > article { display: flex; flex-direction: column; min-height: 650px; padding: clamp(32px, 4vw, 50px); border-radius: 24px; overflow: hidden; }
.price-after-grid article > header { display: flex; gap: 17px; align-items: center; padding-bottom: 27px; border-bottom: 1px solid currentColor; }
.price-after-grid article > header > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
.price-after-grid article > header .icon { width: 29px; }
.price-after-grid article > header small,
.price-after-grid article > header h3 { display: block; margin: 0; }
.price-after-grid article > header small { font-weight: 900; }
.price-after-grid article > header h3 { margin-top: 2px; font-size: 25px; }
.price-maintenance-card { background: var(--green-deep); color: var(--white); }
.price-maintenance-card > header { border-color: rgba(255, 255, 255, .17) !important; }
.price-maintenance-card > header > span { background: #9bd6b2; color: var(--green-deep); }
.price-maintenance-card > header small { color: rgba(255, 255, 255, .55); }
.price-maintenance-card > header h3 { color: var(--white); }
.price-maintenance-price { padding: 31px 0 27px; }
.price-maintenance-price > small { color: rgba(255, 255, 255, .55); }
.price-maintenance-price p { display: flex; align-items: end; margin: 5px 0 0; }
.price-maintenance-price strong { color: var(--mint); font-size: clamp(60px, 6vw, 83px); letter-spacing: -.07em; line-height: 1; }
.price-maintenance-price span { padding-bottom: 9px; font-size: 18px; font-weight: 900; }
.price-maintenance-card ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); list-style: none; }
.price-maintenance-card li { display: flex; gap: 8px; align-items: center; color: rgba(255, 255, 255, .82); font-size: 14px; }
.price-maintenance-card li .icon { width: 18px; color: #9bd6b2; }
.price-maintenance-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; }
.price-maintenance-card dl div { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .15); }
.price-maintenance-card dt { color: rgba(255, 255, 255, .48); }
.price-maintenance-card dd { margin: 4px 0 0; color: var(--white); font-size: 14px; font-weight: 900; }
.price-after-grid article > a { display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 55px; margin-top: auto; padding-top: 23px; border-top: 1px solid currentColor; font-size: 14px; font-weight: 900; }
.price-maintenance-card > a { border-color: rgba(255, 255, 255, .17) !important; color: var(--white); }
.price-seo-card { border: 1px solid var(--price-line); background: var(--mint); color: var(--green-deep); }
.price-seo-card > header { border-color: rgba(8, 102, 64, .2) !important; }
.price-seo-card > header > span { background: var(--green); color: var(--white); }
.price-seo-card > header small { color: var(--green); }
.price-seo-copy { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: end; padding: 34px 0 29px; }
.price-seo-copy strong { font-size: 27px; line-height: 1.5; }
.price-seo-copy p { margin: 0; color: #4d6257; font-size: 14px !important; line-height: 1.9 !important; }
.price-seo-card ul { margin: 0; padding: 0; border-top: 1px solid rgba(8, 102, 64, .19); list-style: none; }
.price-seo-card li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 63px; border-bottom: 1px solid rgba(8, 102, 64, .19); color: var(--ink-2); font-size: 14px; font-weight: 800; }
.price-seo-card li span { color: var(--green); font-size: 12px; }
.price-seo-card > a { border-color: rgba(8, 102, 64, .2) !important; color: var(--green); }
.price-faq { background: var(--cream); }
.price-faq-layout { display: grid; grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr); gap: clamp(60px, 8vw, 105px); align-items: start; }
.price-faq-title { position: sticky; top: 175px; }
.price-faq-title h2 { margin: 22px 0 0; font-size: clamp(35px, 3.7vw, 49px); line-height: 1.48; }
.price-faq-title > p:last-child { margin: 22px 0 0; color: var(--muted); font-size: 14px !important; line-height: 1.9 !important; }
.price-contact { position: relative; overflow: hidden; padding: 112px 0; background: var(--green); color: var(--white); }
.price-contact::before { position: absolute; top: -230px; right: -100px; width: 520px; height: 520px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; content: ""; }
.price-contact-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(65px, 8vw, 115px); align-items: end; }
.price-contact h2 { margin: 20px 0 18px; color: var(--white); font-size: clamp(39px, 4.2vw, 57px); line-height: 1.43; }
.price-contact-inner > div:first-child > p:last-child { max-width: 710px; margin: 0; color: rgba(255, 255, 255, .72); font-size: 15px !important; line-height: 1.95 !important; }
.price-contact-action { padding: 28px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 45, 29, .2); }
.price-contact-action > p { display: grid; grid-template-columns: 36px 1fr; gap: 13px; margin: 0 0 22px; }
.price-contact-action > p > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #9bd6b2; color: var(--green-deep); }
.price-contact-action .icon { width: 20px; }
.price-contact-action strong,
.price-contact-action small { display: block; }
.price-contact-action strong { align-self: end; color: var(--white); font-size: 16px; }
.price-contact-action small { color: rgba(255, 255, 255, .58); }
.price-contact-action .button { width: 100%; min-width: 0; }
@keyframes price-orbit {
from { transform: translate3d(-14px, -7px, 0) scale(.98); }
to { transform: translate3d(18px, 14px, 0) scale(1.03); }
}
@keyframes price-contract-float {
from { transform: translate3d(-12px, -9px, 0); }
to { transform: translate3d(24px, 18px, 0); }
}
@media (max-width: 1120px) {
.price-hero-layout { grid-template-columns: minmax(0, 1fr) 410px; column-gap: 50px; }
.price-hero h1 { font-size: clamp(49px, 5.2vw, 64px); }
.price-hero-facts { grid-template-columns: 1fr; gap: 10px; }
.price-hero-facts li { padding: 0; border-right: 0; }
.price-jump span { display: none; }
.price-jump .price-shell { justify-content: center; }
.price-work-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-work-flow li:nth-child(3)::after { display: grid; }
.price-estimate-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-estimate-flow::before { display: none; }
.price-estimate-flow li:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, .14); }
.price-estimate-flow li:nth-child(n+4) { border-top: 0; }
}
@media (max-width: 900px) {
.price-shell { width: min(100% - 48px, 760px); }
.price-hero { min-height: auto; padding: 132px 0 75px; }
.price-hero-layout {
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"board"
"facts";
gap: 36px;
}
.price-hero h1 { font-size: clamp(48px, 8vw, 66px); }
.price-hero-facts { grid-template-columns: repeat(3, 1fr); gap: 0; }
.price-hero-facts li { padding: 0 15px; border-right: 1px solid rgba(255, 255, 255, .13); }
.price-hero-facts li:first-child { padding-left: 0; }
.price-hero-facts li:last-child { border-right: 0; }
.price-jump { top: 72px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.price-jump::-webkit-scrollbar { display: none; }
.price-jump .price-shell { justify-content: flex-start; width: max-content; min-width: 100%; padding-inline: 22px; }
.price-jump a { flex: none; scroll-snap-align: center; }
.price-heading { grid-template-columns: 1fr; gap: 24px; }
.price-heading > p { max-width: 680px; }
.price-type-grid { grid-template-columns: 1fr; }
.price-type-card > header { min-height: 130px; }
.price-type-main { grid-template-columns: .72fr 1.28fr; }
.price-equation { grid-template-columns: 1fr; gap: 0; }
.price-equation > i { min-height: 43px; }
.price-factor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-separate > header { grid-template-columns: 1fr; gap: 24px; }
.price-contract-facts { grid-template-columns: 1fr; }
.price-contract-facts > div { min-height: 120px; }
.price-contract-rules { grid-template-columns: 1fr; }
.price-after-grid { grid-template-columns: 1fr; }
.price-after-grid > article { min-height: 610px; }
.price-page .site-faq__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.price-page .site-faq__heading { position: static; }
.price-faq-layout { grid-template-columns: 1fr; gap: 52px; }
.price-faq-title { position: static; }
.price-contact-inner { grid-template-columns: 1fr; gap: 42px; }
.price-contact-action { max-width: 520px; }
}
@media (max-width: 620px) {
.price-shell { width: calc(100% - 32px); }
.price-section { padding: 84px 0; }
.price-section[id] { scroll-margin-top: 145px; }
.price-hero { padding: 108px 0 58px; }
.price-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.price-hero h1 { font-size: clamp(34px, 9.2vw, 39px); line-height: 1.32; }
.price-hero-copy > p:not(.section-label) { margin-top: 22px; font-size: 16px; line-height: 1.85; }
.price-hero-actions { flex-direction: column; align-items: stretch; gap: 13px; margin-top: 29px; }
.price-text-link { justify-content: center; }
.price-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 0; padding-top: 21px; }
.price-hero-facts li { grid-template-columns: 1fr; gap: 7px; align-content: start; padding: 0 10px; border-right: 1px solid rgba(255, 255, 255, .13); text-align: center; }
.price-hero-facts li:first-child { padding-left: 0; }
.price-hero-facts li:last-child { padding-right: 0; border-right: 0; }
.price-hero-facts .icon { margin-inline: auto; }
.price-hero-facts small { font-size: 12px; }
.price-hero-facts strong { font-size: 13px; }
.price-hero-board { border-radius: 18px; }
.price-hero-board > header { padding: 17px 18px; font-size: 13px; }
.price-hero-board a { grid-template-columns: 39px minmax(0, 1fr) auto; min-height: 78px; padding: 12px 17px; }
.price-hero-board a > .arrow { display: none; }
.price-hero-type-icon { width: 39px; height: 39px; }
.price-hero-board a > strong { font-size: 14px; }
.price-hero-amount b { font-size: 26px; }
.price-jump a { min-height: 58px; padding: 0 15px; font-size: 13px; }
.price-heading { gap: 17px; margin-bottom: 39px; }
.price-heading h2 { margin-top: 16px; font-size: clamp(29px, 8.4vw, 33px); line-height: 1.42; }
.price-heading > p { font-size: 16px; line-height: 1.85; }
.price-types-guide { padding: 16px; }
.price-type-card { border-radius: 18px; }
.price-type-card > header { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 23px 19px; }
.price-type-number { display: none; }
.price-type-icon { width: 38px; height: 38px; }
.price-type-icon .icon { width: 23px; }
.price-type-card > header > div { display: contents; }
.price-type-card h3 { grid-column: 2; align-self: center; font-size: 20px; }
.price-type-card header p { grid-column: 1 / -1; margin-top: 9px; font-size: 14px !important; }
.price-type-range { grid-column: 1 / -1; margin-top: 0; }
.price-type-main { grid-template-columns: minmax(118px, .76fr) minmax(0, 1.24fr); min-height: 0; }
.price-type-value,
.price-type-scope { padding: 24px 16px; }
.price-type-value { min-height: 178px; border-right: 1px solid var(--price-line); }
.price-type-value strong { font-size: clamp(55px, 16vw, 68px); }
.price-type-value p span { padding-bottom: 6px; font-size: 14px; }
.price-type-scope { min-height: 178px; }
.price-type-scope li { min-height: 34px; padding: 6px 8px; font-size: 13px; }
.price-type-card > footer { grid-template-columns: 1fr; gap: 15px; padding: 21px; }
.price-type-card > footer a { justify-content: space-between; }
.price-work-flow { grid-template-columns: 1fr; border-left: 0; }
.price-work-flow li {
display: grid;
grid-template-columns: 48px 33px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 2px 12px;
min-height: 138px;
padding: 20px 18px;
border-left: 1px solid rgba(255, 255, 255, .15);
}
.price-work-flow li:not(:last-child)::after { top: auto; right: 50%; bottom: -10px; content: "↓"; transform: translateX(50%); }
.price-work-icon { grid-row: 1 / 3; width: 48px; height: 48px; }
.price-work-flow small { align-self: end; margin: 0; }
.price-work-flow h3 { align-self: end; margin: 0; font-size: 16px; }
.price-work-flow p { grid-column: 3; margin-top: 4px; font-size: 14px !important; }
.price-writing-note { grid-template-columns: 53px minmax(0, 1fr); gap: 17px; padding: 22px 18px; }
.price-writing-note > span { align-self: start; width: 53px; height: 53px; }
.price-writing-note h3 { font-size: 19px; }
.price-writing-note p { grid-column: 1 / -1; }
.price-equation > div { grid-template-columns: 46px 1fr; min-height: 132px; padding: 22px 19px; }
.price-equation > div > span { width: 46px; height: 46px; }
.price-equation strong { font-size: 16px; }
.price-factor-list { grid-template-columns: 1fr; }
.price-factor-list article { min-height: 175px; padding: 23px 20px 40px; }
.price-factor-lines { left: 88px; }
.price-separate > header { padding: 29px 21px; }
.price-separate h3 { font-size: 25px; }
.price-separate-grid { grid-template-columns: 1fr; }
.price-separate-grid > div,
.price-separate-grid > div:nth-child(2n),
.price-separate-grid > div:nth-last-child(-n+2) { min-height: 98px; padding: 18px 20px; border-right: 0; border-bottom: 1px solid var(--price-line); }
.price-separate-grid > div:last-child { border-bottom: 0; }
.price-contract-facts > div { min-height: 108px; padding: 22px; }
.price-contract-facts strong { font-size: 23px; }
.price-estimate-flow { grid-template-columns: 1fr; }
.price-estimate-flow li,
.price-estimate-flow li:nth-child(3),
.price-estimate-flow li:nth-child(n+4) { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 17px; min-height: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; }
.price-estimate-flow li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.price-estimate-flow li > span { width: 46px; height: 46px; margin: 0; }
.price-estimate-flow h3 { font-size: 16px; }
.price-estimate-flow p { margin-top: 5px; font-size: 14px !important; }
.price-contract-rules article { padding: 21px 18px; }
.price-after-grid > article { min-height: 0; padding: 29px 21px; }
.price-after-grid article > header h3 { font-size: 22px; }
.price-maintenance-price strong { font-size: clamp(49px, 16vw, 62px); }
.price-maintenance-card ul,
.price-maintenance-card dl { grid-template-columns: 1fr; }
.price-maintenance-card dl div { padding: 12px 14px; }
.price-after-grid article > a { margin-top: 28px; }
.price-seo-copy { grid-template-columns: 1fr; gap: 13px; }
.price-seo-copy strong { font-size: 24px; }
.price-faq-title h2 { font-size: 32px; }
.price-contact { padding: 84px 0; }
.price-contact h2 { font-size: 32px; }
.price-contact-action { padding: 22px 18px; }
}
@media (max-width: 350px) {
.price-type-main { grid-template-columns: 1fr; }
.price-type-value { min-height: 128px; border-right: 0; }
.price-type-scope { min-height: 158px; }
.price-type-scope li { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.price-hero-orbit,
.price-contract-shape { animation: none; }
.price-estimate-flow::before,
.price-factor-lines i { transition: none; transform: scaleX(1); }
.price-type-card,
.price-factor-list article,
.price-work-flow li,
.price-hero-board a { transition: none; }
}:is(.services-page,.corporate-page,.detail-page,.price-page) {
--commercial-copy:16px;
--commercial-list:14px;
--commercial-meta:12px;
--commercial-label:11px;
--commercial-action:14px;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) p:not(.section-label) {
font-size:var(--commercial-copy) !important;
line-height:1.9;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) li {
font-size:var(--commercial-list) !important;
line-height:1.75;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) small {
font-size:var(--commercial-label) !important;
line-height:1.55;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) dt {
font-size:var(--commercial-meta) !important;
line-height:1.6;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) dd {
font-size:var(--commercial-list) !important;
line-height:1.7;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) summary {
font-size:15px !important;
line-height:1.75;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) .section-label {
font-size:12px !important;
line-height:1.6;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) :is(.button,a) {
text-underline-offset:.2em;
}
:is(.services-page,.corporate-page,.detail-page,.price-page) .button {
font-size:var(--commercial-action) !important;
} .services-hero-work figcaption small { font-size:11px !important; }
.services-hero-work figcaption strong { font-size:14px; line-height:1.45; }
.services-hero-facts strong { font-size:15px; }
.services-hero-facts small { font-size:12px !important; }
.services-card-copy header small,
.services-card-copy footer > div small,
.services-card-result > span small { font-size:12px !important; }
.services-card-copy footer > div span { font-size:12px; line-height:1.65; }
.services-card-copy footer > a,
.services-start-link,
.services-after-link,
.services-contact-inner > div:last-child > a:last-child { font-size:14px !important; }
.services-guide-table > a > span small { font-size:11px !important; }
.services-included-note { font-size:13px; line-height:1.85; }
.services-after-grid > a > small { font-size:11px !important; }
.services-after-grid dt { font-size:12px !important; } .services-purpose-ticker {
--ticker-gap:clamp(28px,3vw,46px);
contain:paint;
}
.services-purpose-ticker > .services-purpose-ticker-track {
display:flex;
gap:0;
align-items:center;
width:max-content;
padding:0;
animation:services-purpose-loop 32s linear infinite;
will-change:transform;
}
.services-purpose-ticker-group {
display:flex;
flex:0 0 auto;
gap:var(--ticker-gap);
align-items:center;
padding:19px var(--ticker-gap) 19px 0;
}
.services-purpose-ticker-group span {
font-size:13px;
font-weight:800;
white-space:nowrap;
}
.services-purpose-ticker-group i {
flex:0 0 auto;
color:#91d3aa;
font-size:8px;
font-style:normal;
}
@keyframes services-purpose-loop {
to { transform:translate3d(-25%,0,0); }
}
@media (prefers-reduced-motion:reduce) {
.services-purpose-ticker > .services-purpose-ticker-track {
animation:none;
transform:none;
}
}
@media (min-width:761px) {
.services-hero-facts li {
grid-template-columns:28px minmax(0,1fr);
gap:9px;
padding-right:11px;
padding-left:11px;
}
.services-hero-facts li:first-child { padding-left:0; }
.services-hero-facts .icon { width:26px; }
.services-hero-facts small { white-space:nowrap; }
}
.services-start-link,
.services-contact-inner > div:last-child > a:last-child {
min-height:44px;
} .corporate-eyebrow,
.corporate-work-company { font-size:12px !important; }
.corporate-hero-facts strong { font-size:15px !important; }
.corporate-hero-facts small { font-size:12px !important; }
.corporate-sitemap article small { font-size:11px !important; }
.corporate-sitemap article h3 { font-size:18px; line-height:1.5; }
.corporate-sitemap article.is-primary h3 { font-size:22px; }
.corporate-sitemap article p { font-size:14px !important; }
.corporate-sitemap-note small { font-size:12px !important; }
.corporate-work-copy > ul li { font-size:12px !important; } .detail-hero-facts small { font-size:12px !important; }
.detail-choice-head > *,
.detail-choice-table [role="row"] > * {
font-size:14px !important;
line-height:1.7;
}
.detail-choice-head > * { font-size:12px !important; font-weight:800; }
.detail-choice-table [role="row"] > * { min-height:96px; }
.detail-choice-table strong { font-size:16px !important; }
.detail-choice-table strong small { font-size:11px !important; }
.detail-choice-note { font-size:14px !important; line-height:1.8; }
.detail-path-list small,
.detail-sitemap article small,
.detail-price-card > small,
.detail-price-scope > span { font-size:11px !important; }
.detail-sitemap article h3 { font-size:19px; line-height:1.5; }
.detail-sitemap p { font-size:14px !important; }
.detail-price-card > em { font-size:12px !important; line-height:1.7; }
.detail-price-card dt { font-size:12px !important; }
.detail-price-card dd { font-size:14px !important; }
.detail-price-scope li,
.detail-extra li { font-size:14px !important; }
.detail-price-link,
.detail-related a { font-size:14px !important; }
.detail-plan-flow small { font-size:11px !important; }
.detail-plan-flow span { font-size:12px; line-height:1.65; }
.detail-faq-list summary strong { font-size:15px; line-height:1.7; }
.detail-faq-list details > div p { font-size:14px !important; } .price-page small { font-size:12px !important; }
.price-page :is(.price-separate-grid small,.price-contract-facts span,.price-maintenance-card dt) {
font-size:13px !important;
line-height:1.7;
}
.price-hero-copy > div > a:not(.button) { font-size:14px !important; }
.price-hero-summary > p {
font-size:12px !important;
color:rgba(255,255,255,.68);
}
.price-hero-summary > a {
grid-template-columns:34px 1fr auto 20px;
min-height:92px;
}
.price-hero-summary span { font-size:14px; line-height:1.6; }
.price-hero-summary strong { font-size:20px; }
.price-hero-summary > small {
font-size:11px !important;
color:rgba(255,255,255,.62);
}
.price-heading > p { font-size:15px !important; }
.price-table-head > * {
padding:17px 18px;
font-size:12px !important;
line-height:1.55;
}
.price-table > a > * {
min-height:122px;
padding:21px 18px;
font-size:14px !important;
line-height:1.7;
}
.price-table > a strong { gap:12px; font-size:15px; line-height:1.6; }
.price-table > a b { font-size:23px; white-space:nowrap; }
.price-tax-note { font-size:13px !important; }
.price-formula-figure small,
.price-common-grid small,
.price-change-table small,
.price-payment span,
.price-maintenance-main > small,
.price-maintenance-list dt,
.price-support-split small { font-size:11px !important; }
.price-formula-figure strong { font-size:18px; line-height:1.55; }
.price-common-grid h3,
.price-rule-grid h3 { font-size:21px; line-height:1.5; }
.price-common-grid p,
.price-change-table p,
.price-options > div:first-child > p:last-child,
.price-payment p,
.price-rule-grid p,
.price-support-split p { font-size:14px !important; }
.price-change-table strong { font-size:15px; line-height:1.6; }
.price-change-table > div { min-height:150px; }
.price-options > div:last-child > div { font-size:14px; line-height:1.7; }
.price-payment strong { font-size:21px; }
.price-maintenance-main em { font-size:12px; line-height:1.7; }
.price-maintenance-list li { min-height:54px; font-size:14px !important; }
.price-maintenance-list dt { font-size:12px !important; }
.price-maintenance-list dd { font-size:14px !important; }
.price-support-split strong { font-size:19px; line-height:1.5; }
.price-faq-list summary > span,
.price-faq-list details > div > span { font-size:13px; }
.price-faq-list summary strong { font-size:15px; line-height:1.7; }
.price-faq-list details > div p { font-size:14px !important; }
.price-contact p:not(.section-label) { font-size:15px !important; }
:is(.services-page,.corporate-page,.detail-page,.price-page) .section-label > span { font-size:11px !important; }
.corporate-eyebrow span,
.detail-eyebrow span { font-size:11px !important; }
.corporate-visual-stamp strong { font-size:12px; }
.corporate-concern-note p span { font-size:14px; line-height:1.8; }
.detail-hero-facts strong { font-size:14px; line-height:1.5; }
.detail-hero-image figcaption span { font-size:11px; }
.detail-hero-note span { font-size:12px; line-height:1.55; }
.services-card-image > span { font-size:12px !important; }
.services-no-more-icon > span { font-size:11px !important; }
.corporate-work-note strong { font-size:12px !important; }
.corporate-ticker span { font-size:12px !important; }
.corporate-role-client li > span { font-size:11px !important; }
.corporate-work-image > span { font-size:11px !important; }
.corporate-after-grid em { font-size:12px !important; }
.detail-hero-image > figcaption { font-size:11px !important; line-height:1.6; }
.detail-work-copy > a { font-size:12px !important; } @media (max-width:900px) {
.price-contact-inner {
grid-template-columns:1fr;
gap:38px;
}
.price-contact-inner .button {
width:100%;
min-width:0;
max-width:100%;
}
.price-table { border:0; }
.price-table-head { display:none; }
.price-table > a {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:6px 20px;
margin-bottom:14px;
padding:24px 22px;
border:1px solid var(--line);
background:#fff;
box-shadow:0 14px 35px rgba(24,58,37,.06);
}
.price-table > a > * {
min-height:0;
padding:5px 0;
border:0;
}
.price-table > a > strong {
grid-column:1;
font-size:16px;
}
.price-table > a > b {
grid-column:2;
justify-content:flex-end;
font-size:22px;
}
.price-table > a > span:nth-of-type(1),
.price-table > a > span:nth-of-type(2) {
grid-column:1 / -1;
display:grid;
grid-template-columns:112px minmax(0,1fr);
gap:14px;
align-items:start;
padding-top:13px;
border-top:1px solid var(--line);
}
.price-table > a > span:nth-of-type(1):before {
content:"標準の目安" !important;
}
.price-table > a > span:nth-of-type(2):before {
content:"金額が変わる理由" !important;
}
.price-table > a > span:nth-of-type(1):before,
.price-table > a > span:nth-of-type(2):before {
flex:none !important;
color:var(--green);
font-size:11px !important;
font-weight:900;
line-height:1.7;
}
.price-table > a > strong:before,
.price-table > a > b:before,
.price-table > a > .arrow:before { content:none !important; }
.price-table > a > .arrow {
position:absolute;
top:18px;
right:18px;
bottom:auto;
width:32px;
min-width:32px;
height:32px;
padding:0;
border:1px solid rgba(0,76,53,.18);
border-radius:50%;
justify-content:center;
}
.detail-choice-table .detail-choice-head { display:none !important; }
.detail-choice-table [role="row"] {
display:grid;
grid-template-columns:1fr;
padding:20px 22px;
border-bottom:1px solid rgba(255,255,255,.14);
}
.detail-choice-table [role="row"] > * {
display:grid;
grid-template-columns:112px minmax(0,1fr);
gap:14px;
min-height:0;
padding:9px 0;
border:0;
border-bottom:1px solid rgba(255,255,255,.09);
}
.detail-choice-table [role="row"] > *:last-child { border-bottom:0; }
.detail-choice-table [role="row"] > *:before {
flex:none !important;
color:rgba(255,255,255,.55);
font-size:11px !important;
font-weight:800;
line-height:1.7;
}
.detail-choice-table [role="row"] > *:nth-child(1):before { content:"サイトの形"; }
.detail-choice-table [role="row"] > *:nth-child(2):before { content:"役割"; }
.detail-choice-table [role="row"] > *:nth-child(3):before { content:"向いている場合"; }
.detail-choice-table [role="row"] > *:nth-child(4):before { content:"特徴"; }
.detail-choice-table strong small { position:static; margin-left:auto; }
.corporate-sitemap { grid-template-columns:repeat(2,minmax(0,1fr)); }
.corporate-sitemap article.is-primary { grid-column:span 2; }
}
@media (max-width:600px) {
:is(.services-page,.corporate-page,.detail-page,.price-page) {
--commercial-copy:16px;
--commercial-list:14px;
--commercial-meta:12px;
--commercial-label:11px;
}
.price-table > a {
grid-template-columns:1fr;
gap:4px;
padding:22px 18px 54px;
}
.price-table > a > strong,
.price-table > a > b { grid-column:1; justify-content:flex-start; }
.price-table > a > span:nth-of-type(1),
.price-table > a > span:nth-of-type(2) {
grid-template-columns:96px minmax(0,1fr);
gap:10px;
}
.detail-choice-table [role="row"] > * {
grid-template-columns:96px minmax(0,1fr);
gap:10px;
}
.detail-plan-flow { grid-template-columns:1fr; }
.detail-plan-flow li {
min-height:88px;
padding:18px 22px;
}
.detail-plan-flow li + li {
border-top:1px solid rgba(5,61,41,.16);
border-left:0;
}
.detail-plan-flow li:not(:last-child):after {
top:auto;
right:22px;
bottom:-11px;
transform:rotate(90deg);
}
.corporate-sitemap { grid-template-columns:repeat(2,minmax(0,1fr)); }
.corporate-sitemap article.is-primary,
.corporate-sitemap article:last-child { grid-column:span 2; }
}.header-tagline {
font-size: 13px;
line-height: 1.55;
}
.menu-button small {
font-size: 9px;
line-height: 1;
}
@media (max-width: 1050px) {
.header-tagline {
font-size: 11px;
}
.mobile-menu-topbar {
grid-template-rows: minmax(0, 1fr);
overflow: hidden;
}
.mobile-menu-brand,
.mobile-menu-close {
align-self: center;
}
.mobile-menu-brand img {
width: 100%;
height: auto;
max-height: 28px;
object-fit: contain;
}
}
.floating-copy small {
font-size: 11px;
line-height: 1.5;
}
.floating-copy strong {
font-size: 15px;
line-height: 1.45;
} .services-page {
overflow: clip;
}
.service-section-nav {
position: sticky;
z-index: 90;
top: 80px;
overflow: hidden;
border-bottom: 1px solid rgba(8, 102, 64, 0.15);
background: rgba(255, 253, 248, 0.96);
box-shadow: 0 12px 30px rgba(23, 51, 34, 0.07);
backdrop-filter: blur(14px);
}
.service-section-nav .service-section-nav__inner {
display: block;
min-height: 0;
padding-right: max(20px, 4vw);
padding-left: max(20px, 4vw);
}
.service-section-nav .service-section-nav__track {
display: flex;
grid-template-columns: none;
flex-wrap: nowrap;
width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.service-section-nav__track::-webkit-scrollbar {
display: none;
}
.service-section-nav a {
position: relative;
display: grid;
flex: 1 0 142px;
place-items: center;
min-width: 0;
min-height: 68px;
padding: 10px 14px;
border-top: 0;
border-right: 1px solid rgba(8, 102, 64, 0.12);
border-left: 0;
color: var(--ink);
font-size: 13px;
font-weight: 900;
line-height: 1.45;
white-space: nowrap;
text-align: center;
transition: color 0.22s ease, background 0.22s ease;
}
.service-section-nav a:first-child {
border-left: 1px solid rgba(8, 102, 64, 0.12);
}
.service-section-nav a::after {
position: absolute;
right: 17px;
bottom: 0;
left: 17px;
height: 3px;
background: var(--green);
content: "";
opacity: 0;
transform: scaleX(0.35);
transition: opacity 0.22s ease, transform 0.32s var(--ease-out);
}
.service-section-nav a:hover,
.service-section-nav a:focus-visible,
.service-section-nav a[aria-current="true"] {
background: var(--mint);
color: var(--green-deep);
}
.service-section-nav a[aria-current="true"]::after {
opacity: 1;
transform: scaleX(1);
}
@media (max-width: 720px) {
.service-section-nav,
.maintenance-nav,
.seo-nav {
top: 72px;
}
.service-section-nav .service-section-nav__inner {
padding-right: 0;
padding-left: 0;
}
.service-section-nav a {
flex-basis: 136px;
min-height: 56px;
padding: 8px 12px;
font-size: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.service-section-nav a,
.service-section-nav a::after {
transition: none;
}
} .footer-brand strong {
font-size: 16px;
line-height: 1.8;
}
.footer-intro > p,
.footer-consult {
font-size: 14px;
}
.footer-links strong,
.footer-links a,
.footer-address p {
font-size: 13px;
}
.footer-address small,
.footer-address > span,
.footer-bottom {
font-size: 11px;
} .site-faq {
padding: clamp(104px, 9.2vw, 150px) max(28px, 5vw);
background:
radial-gradient(circle at 4% 12%, rgba(8, 102, 64, 0.08), transparent 24%),
var(--paper);
}
.site-faq__inner {
display: grid;
grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
gap: clamp(58px, 7.5vw, 116px);
align-items: start;
}
.site-faq__heading {
position: sticky;
top: 122px;
}
.site-faq__heading h2 {
margin: 0;
color: var(--ink);
font-size: clamp(38px, 3.55vw, 52px);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 1.35;
}
.site-faq__heading h2 span {
display: block;
}
.site-faq__heading > p:not(.section-label) {
max-width: 430px;
margin: 26px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 2;
}
.site-faq__more {
display: inline-flex;
align-items: center;
gap: 18px;
min-height: 44px;
margin-top: 30px;
padding-bottom: 7px;
border-bottom: 1px solid rgba(8, 102, 64, 0.4);
color: var(--green-deep);
font-size: 14px;
font-weight: 800;
transition: border-color 0.22s ease, color 0.22s ease;
}
.site-faq__more:hover {
border-color: var(--green);
color: var(--green-2);
}
.site-faq__questions {
min-width: 0;
}
.site-faq-list {
--faq-accent: var(--green);
--faq-ink: var(--ink);
--faq-copy: var(--muted);
--faq-line: rgba(8, 102, 64, 0.24);
border-top: 1px solid var(--faq-line);
}
.site-faq-list details {
position: relative;
border-bottom: 1px solid var(--faq-line);
}
.site-faq-list details.is-animating {
will-change: height;
}
.site-faq-list summary {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 32px;
gap: 16px;
align-items: center;
min-height: 102px;
padding: 21px 5px;
border-radius: 8px;
cursor: pointer;
list-style: none;
transition: background 0.22s ease, color 0.22s ease;
}
.site-faq-list summary::-webkit-details-marker {
display: none;
}
.site-faq-list summary:hover {
background: rgba(255, 255, 255, 0.42);
}
.site-faq-list summary:focus-visible {
outline: 3px solid rgba(8, 102, 64, 0.28);
outline-offset: 4px;
}
.site-faq-list summary > span,
.site-faq-list .site-faq-answer > span {
color: var(--faq-accent);
font-size: 15px;
font-weight: 900;
line-height: 1;
}
.site-faq-list summary strong {
color: var(--faq-ink);
font-size: 16px;
font-weight: 800;
line-height: 1.7;
}
.site-faq-list summary i {
position: relative;
width: 30px;
height: 30px;
border: 1px solid var(--faq-line);
border-radius: 50%;
transition: background 0.22s ease, border-color 0.22s ease;
}
.site-faq-list summary i::before,
.site-faq-list summary i::after {
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 1px;
background: var(--faq-accent);
content: "";
transform: translate(-50%, -50%);
transition: transform 0.25s var(--ease-out);
}
.site-faq-list summary i::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.site-faq-list details[open] summary i {
border-color: var(--faq-accent);
background: var(--faq-accent);
}
.site-faq-list details[open] summary i::before,
.site-faq-list details[open] summary i::after {
background: var(--white);
}
.site-faq-list details[open] summary i::after {
transform: translate(-50%, -50%) rotate(0);
}
.site-faq-list .site-faq-answer {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 16px;
padding: 0 44px 31px 5px;
transform-origin: top;
}
.site-faq-list details.is-opening .site-faq-answer {
animation: bam-faq-answer-in 0.4s var(--ease-out) both;
}
.site-faq-list details.is-closing .site-faq-answer {
animation: bam-faq-answer-out 0.24s ease both;
}
.site-faq-list .site-faq-answer p {
margin: 0;
color: var(--faq-copy);
font-size: 15px !important;
line-height: 1.95;
}
@keyframes bam-faq-answer-in {
from { opacity: 0; transform: translateY(-8px) scaleY(0.98); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bam-faq-answer-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-5px); }
} .site-contact-cta {
position: relative;
z-index: 1;
display: grid;
min-height: 760px;
padding: clamp(105px, 9vw, 145px) max(28px, 5vw) 112px;
overflow: hidden;
isolation: isolate;
background: var(--green-dark);
color: var(--white);
}
.site-contact-cta__media,
.site-contact-cta__shade {
position: absolute;
z-index: -2;
inset: 0;
}
.site-contact-cta__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(0.78) contrast(1.05);
transform: scale(1.015);
}
.site-contact-cta__shade {
z-index: -1;
background:
linear-gradient(90deg, rgba(3, 35, 25, 0.9) 0%, rgba(3, 35, 25, 0.75) 48%, rgba(3, 35, 25, 0.64) 67%, rgba(3, 35, 25, 0.88) 100%),
linear-gradient(0deg, rgba(3, 35, 25, 0.55), transparent 42%);
}
.site-contact-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(370px, 0.68fr);
gap: clamp(58px, 8.5vw, 132px);
align-items: center;
}
.site-contact-cta .section-label {
color: #b9e2c8;
font-size: 13px !important;
}
.site-contact-cta__copy {
max-width: 720px;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
}
.site-contact-cta__copy h2 {
margin: 0;
color: var(--white);
font-size: clamp(42px, 4.2vw, 56px);
font-weight: 800;
letter-spacing: -0.06em;
line-height: 1.28;
}
@media (max-width: 720px) {
.footer-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-links a {
width: auto;
overflow-wrap: anywhere;
}
}
.site-contact-cta__copy h2 span,
.site-contact-cta__action > strong span {
display: block;
}
.site-contact-cta__copy > p:not(.section-label) {
max-width: 650px;
margin: 27px 0 0;
color: rgba(255, 255, 255, 0.78);
font-size: 16px;
line-height: 2;
}
.site-contact-cta__copy ul {
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
margin: 31px 0 0;
padding: 0;
list-style: none;
}
.site-contact-cta__copy li {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.94);
font-size: 13px;
font-weight: 700;
}
.site-contact-cta__copy li .icon {
width: 18px;
height: 18px;
color: #a7d9b9;
}
.site-contact-cta__action {
position: relative;
display: grid;
padding: clamp(34px, 4vw, 52px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 30px;
background: rgba(3, 46, 32, 0.72);
color: var(--white);
box-shadow: 0 36px 90px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(16px);
}
.site-contact-cta__action::before {
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, #9bd5b0, rgba(155, 213, 176, 0));
content: "";
}
.site-contact-cta__icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--cream);
color: var(--green-deep);
}
.site-contact-cta__icon .icon {
width: 26px;
height: 26px;
}
.site-contact-cta__action > small {
margin-top: 24px;
color: #abd8bb;
font-size: 12px !important;
font-weight: 800;
letter-spacing: 0.05em;
}
.site-contact-cta__action > strong {
margin-top: 9px;
color: var(--white);
font-size: clamp(24px, 2.25vw, 32px);
line-height: 1.45;
}
.site-contact-cta__primary {
width: 100%;
min-height: 66px;
margin-top: 31px;
background: var(--cream);
color: var(--green-deep);
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
}
.site-contact-cta__primary:hover {
background: var(--white);
}
.site-contact-cta__secondary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
min-height: 58px;
margin-top: 12px;
padding: 0 22px;
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: 99px;
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 800;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.site-contact-cta__secondary:hover {
border-color: rgba(255, 255, 255, 0.48);
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
.site-contact-cta__marquee {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 48px;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.25);
font-size: 26px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 48px;
white-space: nowrap;
}
.site-contact-cta__marquee-track {
display: flex;
align-items: center;
width: max-content;
animation: bam-contact-marquee 28s linear infinite;
will-change: transform;
}
.site-contact-cta__marquee-group {
display: flex;
flex: none;
justify-content: space-around;
align-items: center;
min-width: 100vw;
}
.site-contact-cta__marquee-group span {
flex: none;
padding-inline: clamp(22px, 2.8vw, 54px);
}
@keyframes bam-contact-marquee {
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 1080px) {
.site-contact-cta__inner {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
}
.site-contact-cta__copy {
max-width: 800px;
}
.site-contact-cta__action {
width: min(100%, 520px);
}
}
@media (max-width: 760px) {
.header-tagline {
font-size: 11px;
line-height: 1.5;
}
.site-faq {
padding: 84px 20px 92px;
}
.site-faq__inner {
grid-template-columns: minmax(0, 1fr);
gap: 43px;
}
.site-faq__heading {
position: static;
}
.site-faq__heading h2 {
font-size: clamp(32px, 9vw, 39px);
line-height: 1.4;
}
.site-faq__heading > p:not(.section-label) {
margin-top: 21px;
font-size: 15px;
line-height: 1.9;
}
.site-faq__more {
margin-top: 23px;
font-size: 14px;
}
.site-faq-list summary {
grid-template-columns: 28px minmax(0, 1fr) 30px;
gap: 10px;
min-height: 91px;
padding: 18px 0;
}
.site-faq-list summary strong {
font-size: 15px;
line-height: 1.72;
word-break: auto-phrase;
overflow-wrap: normal;
}
.site-faq-list summary i {
width: 28px;
height: 28px;
}
.site-faq-list .site-faq-answer {
grid-template-columns: 28px minmax(0, 1fr);
gap: 10px;
padding: 0 0 27px;
}
.site-faq-list .site-faq-answer p {
font-size: 15px !important;
line-height: 1.9;
word-break: auto-phrase;
overflow-wrap: normal;
}
.site-contact-cta {
min-height: 0;
padding: 82px 20px 106px;
}
.site-contact-cta__shade {
background: rgba(3, 35, 25, 0.79);
}
.site-contact-cta__media img {
object-position: 42% center;
}
.site-contact-cta__inner {
grid-template-columns: minmax(0, 1fr);
gap: 38px;
}
.site-contact-cta__copy h2 {
font-size: clamp(35px, 9.6vw, 39px);
letter-spacing: -0.055em;
line-height: 1.4;
}
.site-contact-cta .section-label {
font-size: 12px !important;
}
.site-contact-cta__copy > p:not(.section-label) {
margin-top: 23px;
font-size: 15px;
line-height: 1.92;
}
.site-contact-cta__copy ul {
display: grid;
gap: 10px;
margin-top: 25px;
}
.site-contact-cta__copy li {
font-size: 13px;
}
.site-contact-cta__action {
padding: 28px 24px 24px;
border-radius: 22px;
}
.site-contact-cta__action > strong {
font-size: 25px;
}
.site-contact-cta__primary,
.site-contact-cta__secondary {
width: 100%;
}
.site-contact-cta__marquee {
height: 40px;
font-size: 20px;
line-height: 40px;
}
.footer {
padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
} @media (min-width: 640px) and (max-width: 900px) {
.site-contact-cta {
padding: 72px 28px 88px;
}
.site-contact-cta__inner {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
gap: 28px;
}
.site-contact-cta__copy h2 {
font-size: 32px;
line-height: 1.38;
}
.site-contact-cta__copy > p:not(.section-label) {
margin-top: 18px;
font-size: 14px;
}
.site-contact-cta__copy ul {
gap: 8px;
margin-top: 20px;
}
.site-contact-cta__action {
width: 100%;
padding: 25px 22px 22px;
}
.site-contact-cta__action > strong {
font-size: 22px;
}
.site-contact-cta__primary {
min-height: 60px;
margin-top: 24px;
}
}
@media (max-width: 639px) {
.site-contact-cta {
padding-top: 70px;
padding-bottom: 90px;
}
.site-contact-cta__inner {
gap: 30px;
}
.site-contact-cta__copy h2 {
font-size: clamp(30px, 8.6vw, 35px);
}
}
@media (max-width: 360px) {
.header-tagline {
font-size: 10px;
}
.site-faq-list summary strong {
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-faq-list .site-faq-answer {
animation: none;
}
.site-contact-cta__marquee-track {
animation-play-state: paused;
}
}