: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;
}
}.corporate-page {
overflow: clip;
background: var(--cream);
}
.corporate-page h1,
.corporate-page h2,
.corporate-page h3,
.corporate-page p,
.corporate-page li,
.corporate-page summary {
word-break: auto-phrase;
}
.corporate-shell {
width: min(1320px, 100%);
margin-inline: auto;
}
.corporate-hero {
position: relative;
display: grid;
grid-template-columns: minmax(480px, .82fr) minmax(580px, 1.18fr);
gap: clamp(50px, 7vw, 118px);
align-items: center;
min-height: 910px;
padding: 150px max(36px, 6vw) 106px;
overflow: hidden;
background: var(--green-dark);
color: var(--white);
}
.corporate-hero:before {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 68px 68px;
content: "";
mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.corporate-hero-orb {
position: absolute;
border: 1px solid rgba(190, 232, 202, .2);
border-radius: 50%;
pointer-events: none;
animation: corporate-orbit 13s ease-in-out infinite alternate;
}
.corporate-hero-orb:after {
position: absolute;
top: 12%;
left: 12%;
width: 14px;
aspect-ratio: 1;
border-radius: 50%;
background: #d5ef72;
box-shadow: 0 0 0 9px rgba(213,239,114,.1);
content: "";
}
.corporate-hero-orb-a { width: 460px; height: 460px; right: -180px; top: -155px; }
.corporate-hero-orb-b { width: 230px; height: 230px; left: 42%; bottom: -105px; animation-delay: -4s; }
.corporate-hero-copy,
.corporate-hero-visual {
position: relative;
z-index: 2;
}
.corporate-eyebrow {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 31px;
color: rgba(255,255,255,.72);
font-size: 12px;
font-weight: 800;
}
.corporate-eyebrow span {
padding: 6px 10px;
border: 1px solid rgba(255,255,255,.23);
color: #bce2c7;
font-size: 9px;
letter-spacing: .12em;
}
.corporate-hero h1 {
margin: 0;
color: var(--white);
font-size: clamp(49px, 4.3vw, 64px);
letter-spacing: -.055em;
line-height: 1.22;
}
.corporate-hero h1 span { display: block; white-space: nowrap; }
.corporate-hero h1 span:nth-child(2) { color: #d7f183; }
.corporate-hero-lead {
max-width: 650px;
margin: 33px 0 0;
color: rgba(255,255,255,.75);
font-size: 15px;
line-height: 2.05;
}
.corporate-hero-actions {
display: flex;
gap: 27px;
align-items: center;
margin-top: 38px;
}
.corporate-text-link {
display: flex;
gap: 18px;
align-items: center;
padding: 11px 0;
border-bottom: 1px solid rgba(255,255,255,.42);
color: var(--white);
font-size: 12px;
font-weight: 800;
}
.corporate-hero-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 45px 0 0;
padding: 29px 0 0;
border-top: 1px solid rgba(255,255,255,.13);
list-style: none;
}
.corporate-hero-facts li {
display: grid;
grid-template-columns: 31px 1fr;
gap: 11px;
align-items: center;
min-height: 55px;
padding: 0 18px;
border-left: 1px solid rgba(255,255,255,.13);
}
.corporate-hero-facts li:first-child { padding-left: 0; border-left: 0; }
.corporate-hero-facts .icon { width: 27px; color: #a8dab8; }
.corporate-hero-facts strong,
.corporate-hero-facts small { display: block; }
.corporate-hero-facts strong { font-size: 11px; line-height: 1.55; }
.corporate-hero-facts small { margin-top: 3px; color: rgba(255,255,255,.5); font-size: 8px; }
.corporate-hero-visual {
min-width: 0;
transform: rotate(1.5deg);
}
.corporate-browser {
position: relative;
z-index: 2;
overflow: hidden;
background: var(--paper);
box-shadow: 0 50px 90px rgba(0,0,0,.36);
}
.corporate-browser:after {
position: absolute;
inset: 0;
border: 1px solid rgba(255,255,255,.18);
content: "";
pointer-events: none;
}
.corporate-browser-bar {
display: flex;
gap: 7px;
align-items: center;
height: 42px;
padding: 0 16px;
background: #efede6;
}
.corporate-browser-bar > span {
width: 7px;
aspect-ratio: 1;
border-radius: 50%;
background: #c7c2b7;
}
.corporate-browser-bar small {
margin-left: auto;
color: #77736b;
font-size: 8px;
font-weight: 800;
letter-spacing: .08em;
}
.corporate-browser img { width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; }
.corporate-phone {
position: absolute;
z-index: 3;
right: -32px;
bottom: -48px;
width: 175px;
height: 350px;
padding: 9px;
overflow: hidden;
border: 5px solid #121914;
border-radius: 32px;
background: #121914;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
transform: rotate(-5deg);
animation: corporate-float 5.6s ease-in-out infinite;
}
.corporate-phone > span {
position: absolute;
z-index: 2;
top: 9px;
left: 50%;
width: 58px;
height: 15px;
border-radius: 0 0 9px 9px;
background: #121914;
transform: translateX(-50%);
}
.corporate-phone img { width: 100%; height: 100%; border-radius: 21px; object-fit: cover; object-position: 45% center; }
.corporate-work-note {
position: absolute;
z-index: 4;
bottom: 24px;
left: -46px;
display: flex;
gap: 27px;
align-items: center;
min-width: 310px;
padding: 18px 21px;
background: var(--paper);
color: var(--ink);
box-shadow: 0 20px 44px rgba(0,0,0,.2);
transform: rotate(-1.5deg);
}
.corporate-work-note small,
.corporate-work-note strong { display: block; }
.corporate-work-note small { color: var(--green); font-size: 8px; font-weight: 900; }
.corporate-work-note strong { margin-top: 4px; font-size: 12px; }
.corporate-work-note .icon { width: 31px; margin-left: auto; color: var(--green); }
.corporate-visual-stamp {
position: absolute;
top: -38px;
right: 45px;
z-index: 4;
display: grid;
place-items: center;
width: 122px;
aspect-ratio: 1;
border: 1px solid rgba(255,255,255,.28);
border-radius: 50%;
background: rgba(3,46,32,.78);
color: var(--white);
text-align: center;
backdrop-filter: blur(8px);
animation: corporate-spin 20s linear infinite;
}
.corporate-visual-stamp strong { font-size: 10px; letter-spacing: .11em; }
.corporate-visual-stamp small { font-size: 6px; letter-spacing: .09em; }
.corporate-ticker {
--ticker-gap: 48px;
overflow: hidden;
background: #d7f183;
color: var(--green-deep);
}
.corporate-ticker > div {
display: flex;
gap: var(--ticker-gap);
align-items: center;
width: max-content;
padding: 16px 0;
animation: corporate-marquee 30s linear infinite;
}
.corporate-ticker span { font-size: 12px; font-weight: 900; white-space: nowrap; }
.corporate-ticker i { color: var(--green); font-size: 7px; font-style: normal; }
.corporate-section { padding: clamp(102px, 10vw, 154px) max(28px, 5vw); }
.corporate-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .58fr); gap: 80px; align-items: end; margin-bottom: 68px; }
.corporate-heading h2,
.corporate-faq-title h2,
.corporate-contact h2 { margin: 18px 0 0; font-size: clamp(42px, 4.5vw, 66px); letter-spacing: -.05em; line-height: 1.28; }
.corporate-heading > p { max-width: 570px; margin: 0; color: var(--muted); font-size: 14px; line-height: 2; }
.corporate-heading-light h2 { color: var(--white); }
.corporate-heading-light > p { color: rgba(255,255,255,.67); }
.corporate-heading-light .section-label { color: #a8dab8; }
.corporate-concerns { background: var(--cream); }
.corporate-concern-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); }
.corporate-concern-grid article { position: relative; min-height: 330px; padding: 34px 29px 31px; overflow: hidden; background: var(--paper); transition: transform .35s var(--ease-out), background .35s; }
.corporate-concern-grid article:after { position: absolute; right: -40px; bottom: -45px; width: 130px; aspect-ratio: 1; border: 1px solid rgba(8,102,64,.12); border-radius: 50%; content: ""; transition: transform .5s var(--ease-out); }
.corporate-concern-grid article:hover { z-index: 2; background: #fff; transform: translateY(-8px); }
.corporate-concern-grid article:hover:after { transform: scale(1.25); }
.corporate-card-icon { display: grid; place-items: center; width: 58px; aspect-ratio: 1; border-radius: 50%; background: var(--mint); color: var(--green); }
.corporate-card-icon .icon { width: 28px; }
.corporate-concern-grid article > small { position: absolute; top: 30px; right: 29px; color: var(--green); font-size: 9px; font-weight: 900; }
.corporate-concern-grid h3 { margin: 38px 0 0; font-size: 20px; }
.corporate-concern-grid p { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.corporate-concern-note { display: grid; grid-template-columns: 46px 1fr auto; gap: 23px; align-items: center; margin-top: 25px; padding: 25px 29px; border: 1px solid rgba(8,102,64,.19); background: rgba(220,236,223,.48); }
.corporate-concern-note > .icon { width: 37px; color: var(--green); }
.corporate-concern-note p { margin: 0; }
.corporate-concern-note strong,
.corporate-concern-note span { display: block; }
.corporate-concern-note strong { color: var(--ink); font-size: 13px; }
.corporate-concern-note span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.corporate-concern-note a { display: flex; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--green); color: var(--green); font-size: 11px; font-weight: 900; }
.corporate-approach { position: relative; overflow: hidden; background: var(--green-deep); color: var(--white); }
.corporate-approach:before { position: absolute; inset: 0; background: radial-gradient(circle at 10% 20%, rgba(213,239,114,.09), transparent 25%), radial-gradient(circle at 90% 80%, rgba(167,223,188,.1), transparent 28%); content: ""; }
.corporate-approach .corporate-shell { position: relative; }
.corporate-approach-track { position: absolute; top: 55%; right: 5%; left: 5%; height: 1px; overflow: hidden; background: rgba(255,255,255,.14); }
.corporate-approach-track span { display: block; width: 18%; height: 100%; background: linear-gradient(90deg, transparent, #d7f183, transparent); animation: corporate-scan 4.8s ease-in-out infinite; }
.corporate-approach-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.corporate-approach-list li { position: relative; min-height: 335px; padding: 31px 27px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.035); backdrop-filter: blur(8px); transition: background .3s, transform .3s var(--ease-out); }
.corporate-approach-list li:hover { background: rgba(255,255,255,.09); transform: translateY(-7px); }
.corporate-approach-top { display: flex; justify-content: space-between; align-items: center; }
.corporate-approach-top > span { display: grid; place-items: center; width: 55px; aspect-ratio: 1; border-radius: 50%; background: #d7f183; color: var(--green-deep); }
.corporate-approach-top .icon { width: 27px; }
.corporate-approach-top small { color: #a8dab8; font-size: 10px; font-weight: 900; }
.corporate-approach-list h3 { margin: 49px 0 0; color: var(--white); font-size: 23px; }
.corporate-approach-list p { margin: 18px 0 0; color: rgba(255,255,255,.64); font-size: 12px; line-height: 1.9; }
.corporate-approach-close { margin: 66px 0 0; color: var(--white); font-size: clamp(28px, 3.5vw, 49px); font-weight: 800; letter-spacing: -.04em; text-align: center; }
.corporate-approach-close span { color: #d7f183; }
.corporate-roles { background: var(--mint); }
.corporate-role-board { position: relative; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr); overflow: hidden; background: var(--paper); box-shadow: 0 30px 80px rgba(5,61,41,.12); }
.corporate-role-board:after { position: absolute; z-index: 3; top: 50%; left: 56%; display: grid; place-items: center; width: 52px; aspect-ratio: 1; border: 7px solid var(--mint); border-radius: 50%; background: #d7f183; color: var(--green-deep); content: "→"; font-size: 17px; font-weight: 900; transform: translate(-50%,-50%); }
.corporate-role-main,
.corporate-role-client { padding: clamp(36px,4.5vw,64px); }
.corporate-role-main header,
.corporate-role-client header { display: flex; gap: 18px; align-items: center; margin-bottom: 35px; }
.corporate-role-main header > span,
.corporate-role-client header > span { display: grid; flex: none; place-items: center; width: 62px; aspect-ratio: 1; border-radius: 50%; }
.corporate-role-main header > span { background: var(--mint); color: var(--green); }
.corporate-role-client header > span { background: rgba(255,255,255,.1); color: #a7dfbc; }
.corporate-role-main header .icon,
.corporate-role-client header .icon { width: 30px; }
.corporate-role-main header small,
.corporate-role-client header small { display: block; margin-bottom: 4px; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.corporate-role-main header small { color: var(--green); }
.corporate-role-client header small { color: #a7dfbc; }
.corporate-role-main h3,
.corporate-role-client h3 { margin: 0; font-size: clamp(24px,2.4vw,34px); letter-spacing: -.045em; }
.corporate-role-client { background: var(--green-deep); color: var(--white); }
.corporate-role-client h3 { color: var(--white); }
.corporate-role-main > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.corporate-role-main article { display: grid; grid-template-columns: 39px 1fr; gap: 15px; min-height: 180px; padding: 27px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.corporate-role-main article > .icon { width: 29px; color: var(--green); }
.corporate-role-main h4,
.corporate-role-client h4 { margin: 0; font-size: 16px; line-height: 1.55; }
.corporate-role-main article p,
.corporate-role-client li p { margin: 10px 0 0; font-size: 11px; line-height: 1.85; }
.corporate-role-main article p { color: var(--muted); }
.corporate-role-client ol { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.15); list-style: none; }
.corporate-role-client li { display: grid; grid-template-columns: 45px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.corporate-role-client li > span { display: grid; place-items: center; width: 39px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); color: #d7f183; font-size: 9px; font-weight: 900; }
.corporate-role-client li p { color: rgba(255,255,255,.62); }
.corporate-role-note { display: flex; gap: 20px; align-items: center; margin-top: 23px; padding: 24px 30px; background: var(--paper); border: 1px solid rgba(8,102,64,.15); }
.corporate-role-note > .icon { flex: none; width: 34px; color: var(--green); }
.corporate-role-note p { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1fr); gap: 28px; align-items: center; margin: 0; }
.corporate-role-note strong { color: var(--ink); font-size: 14px; }
.corporate-role-note span { color: var(--muted); font-size: 12px; line-height: 1.8; }
.corporate-outcomes {
position: relative;
isolation: isolate;
background: #f4f1e8;
}
.corporate-outcomes::before {
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(circle at 8% 12%, rgba(142, 202, 164, .2), transparent 25%),
linear-gradient(rgba(8, 102, 64, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 102, 64, .035) 1px, transparent 1px);
background-size: auto, 64px 64px, 64px 64px;
content: "";
mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.corporate-outcomes-board {
display: grid;
grid-template-columns: minmax(330px, .72fr) minmax(0, 1.68fr);
overflow: hidden;
border: 1px solid rgba(8, 102, 64, .16);
background: var(--paper);
box-shadow: 0 35px 90px rgba(20, 55, 35, .13);
}
.corporate-outcomes-plan {
position: relative;
display: flex;
flex-direction: column;
min-height: 740px;
padding: clamp(38px, 4.4vw, 64px);
overflow: hidden;
background: var(--green-deep);
color: var(--white);
}
.corporate-outcomes-plan::before,
.corporate-outcomes-plan::after {
position: absolute;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 50%;
content: "";
pointer-events: none;
}
.corporate-outcomes-plan::before { top: -130px; right: -170px; width: 390px; aspect-ratio: 1; }
.corporate-outcomes-plan::after { right: -30px; bottom: -120px; width: 250px; aspect-ratio: 1; }
.corporate-outcomes-kicker {
position: relative;
z-index: 1;
margin: 0;
color: #a7dfbc;
font-size: 11px;
font-weight: 900;
letter-spacing: .14em;
}
.corporate-outcomes-plan h3 {
position: relative;
z-index: 1;
margin: 22px 0 0;
color: var(--white);
font-size: clamp(32px, 3vw, 44px);
line-height: 1.42;
letter-spacing: -.045em;
}
.corporate-outcomes-plan-lead {
position: relative;
z-index: 1;
margin: 22px 0 0;
color: rgba(255, 255, 255, .72);
font-size: 14px;
line-height: 1.95;
}
.corporate-outcomes-audiences {
position: relative;
z-index: 1;
margin-top: 35px;
padding: 22px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .055);
}
.corporate-outcomes-audiences > small {
display: block;
color: #a7dfbc;
font-size: 12px;
font-weight: 900;
}
.corporate-outcomes-audiences ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin: 15px 0 0;
padding: 0;
list-style: none;
}
.corporate-outcomes-audiences li {
display: flex;
gap: 8px;
align-items: center;
color: var(--white);
font-size: 13px;
font-weight: 800;
}
.corporate-outcomes-audiences li::before {
width: 7px;
aspect-ratio: 1;
border-radius: 50%;
background: #d7f183;
content: "";
}
.corporate-outcomes-route {
position: relative;
z-index: 1;
display: grid;
gap: 0;
margin: auto 0 0;
padding: 31px 0 0;
list-style: none;
}
.corporate-outcomes-route::before {
position: absolute;
top: 48px;
bottom: 34px;
left: 20px;
width: 1px;
background: rgba(255, 255, 255, .2);
content: "";
}
.corporate-outcomes-route li {
position: relative;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 12px 0;
}
.corporate-outcomes-route li > span {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 42px;
aspect-ratio: 1;
border: 1px solid rgba(255, 255, 255, .26);
border-radius: 50%;
background: var(--green-deep);
color: #d7f183;
font-size: 11px;
font-weight: 900;
}
.corporate-outcomes-route li:first-child > span { animation: corporate-route-pulse 3.2s ease-out infinite; }
.corporate-outcomes-route strong,
.corporate-outcomes-route small { display: block; }
.corporate-outcomes-route strong { color: var(--white); font-size: 14px; line-height: 1.6; }
.corporate-outcomes-route small { margin-top: 3px; color: rgba(255, 255, 255, .57); font-size: 12px; line-height: 1.6; }
.corporate-outcome-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: rgba(8, 102, 64, .16);
}
.corporate-outcome-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 370px;
padding: clamp(30px, 3vw, 42px);
overflow: hidden;
border: 0;
background: var(--paper);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background .35s ease;
}
.corporate-outcome-card::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--green);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform .45s var(--ease-out);
}
.corporate-outcome-card:hover { background: #fbfaf4; }
.corporate-outcome-card:hover::before { transform: scaleX(1); }
.corporate-outcome-trigger {
position: absolute;
z-index: 3;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.corporate-outcome-trigger:focus-visible { outline: 0; }
.corporate-outcome-card:has(.corporate-outcome-trigger:focus-visible) { z-index: 2; outline: 3px solid #d7f183; outline-offset: -5px; }
.corporate-outcome-card header {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
}
.corporate-outcome-icon {
display: grid;
place-items: center;
width: 58px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--mint);
color: var(--green);
}
.corporate-outcome-icon .icon { width: 28px; }
.corporate-outcome-card header small { color: var(--green); font-size: 12px; font-weight: 900; line-height: 1.5; }
.corporate-outcome-card h3 { margin: 5px 0 0; font-size: clamp(21px, 2vw, 27px); line-height: 1.45; }
.corporate-outcome-card header em { align-self: start; color: rgba(8, 102, 64, .26); font-size: 12px; font-style: normal; font-weight: 900; }
.corporate-outcome-card > p {
margin: 26px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.9;
}
.corporate-outcome-card > ul {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.corporate-outcome-card > ul li {
padding: 7px 10px;
border: 1px solid rgba(8, 102, 64, .14);
background: var(--cream);
color: var(--green-deep);
font-size: 12px;
font-weight: 800;
line-height: 1.45;
}
.corporate-outcome-card footer {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 36px;
gap: 15px;
align-items: baseline;
margin-top: auto;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.corporate-outcome-card footer span { color: var(--green); font-size: 11px; font-weight: 900; }
.corporate-outcome-card footer strong { color: var(--ink); font-size: 14px; line-height: 1.7; }
.corporate-outcome-card footer i {
display: grid;
place-items: center;
width: 36px;
aspect-ratio: 1;
margin-top: -7px;
border: 1px solid rgba(8, 102, 64, .2);
border-radius: 50%;
color: var(--green);
font-size: 19px;
font-style: normal;
transition: background .3s ease, color .3s ease, transform .35s var(--ease-out);
}
.corporate-outcome-card:hover footer i { background: var(--green); color: var(--white); transform: rotate(90deg); }
.corporate-outcome-dialog .strength-dialog-visual.is-trust img { object-position: 54% center; }
.corporate-outcome-dialog .strength-dialog-visual.is-sales img { object-position: center; }
.corporate-outcome-dialog .strength-dialog-visual.is-recruit img { object-position: 57% center; }
.corporate-outcome-dialog .strength-dialog-visual.is-update img { object-position: 58% center; }
.corporate-outcome-dialog .strength-dialog-copy h2 { font-size: clamp(34px, 3.65vw, 50px); }
.corporate-outcome-dialog .strength-dialog-copy .section-label { color: var(--green); }
.corporate-outcomes-note {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
margin-top: 20px;
padding: 23px 26px;
border: 1px solid rgba(8, 102, 64, .16);
background: rgba(255, 253, 248, .88);
}
.corporate-outcomes-note > span {
display: grid;
place-items: center;
width: 58px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--mint);
color: var(--green);
}
.corporate-outcomes-note .icon { width: 28px; }
.corporate-outcomes-note p { margin: 0; }
.corporate-outcomes-note strong,
.corporate-outcomes-note small { display: block; }
.corporate-outcomes-note strong { color: var(--ink); font-size: 16px; line-height: 1.6; }
.corporate-outcomes-note small { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.corporate-outcomes-note a { display: flex; gap: 22px; align-items: center; min-height: 48px; padding: 0 4px 0 18px; border-bottom: 1px solid var(--green); color: var(--green); font-size: 13px; font-weight: 900; }
@keyframes corporate-route-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(215, 241, 131, 0); }
35% { box-shadow: 0 0 0 8px rgba(215, 241, 131, .12); }
}
.corporate-sitemap-section {
position: relative;
isolation: isolate;
overflow: hidden;
background: #dcece1;
}
.corporate-sitemap-section::before {
position: absolute;
z-index: -2;
inset: 0;
background:
radial-gradient(circle at 88% 12%, rgba(215, 241, 131, .35), transparent 22%),
radial-gradient(circle at 10% 58%, rgba(255, 253, 248, .75), transparent 27%),
linear-gradient(rgba(8, 102, 64, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 102, 64, .045) 1px, transparent 1px);
background-size: auto, auto, 72px 72px, 72px 72px;
content: "";
}
.corporate-sitemap-section::after {
position: absolute;
z-index: -1;
top: 290px;
right: -170px;
width: 470px;
aspect-ratio: 1;
border: 1px solid rgba(8, 102, 64, .12);
border-radius: 50%;
content: "";
}
.corporate-sitemap-decor i {
position: absolute;
z-index: -1;
border-radius: 50%;
background: rgba(255, 253, 248, .52);
pointer-events: none;
}
.corporate-sitemap-decor i:nth-child(1) { top: 14%; left: 3%; width: 92px; aspect-ratio: 1; }
.corporate-sitemap-decor i:nth-child(2) { top: 49%; right: 6%; width: 19px; aspect-ratio: 1; background: #d7f183; }
.corporate-sitemap-decor i:nth-child(3) { bottom: 9%; left: 8%; width: 42px; aspect-ratio: 1; border: 1px solid rgba(8,102,64,.18); background: transparent; }
.corporate-sitemap {
position: relative;
padding: clamp(30px, 4.5vw, 58px);
overflow: hidden;
border: 1px solid rgba(8, 102, 64, .15);
background:
linear-gradient(rgba(8, 102, 64, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 102, 64, .035) 1px, transparent 1px),
rgba(255, 253, 248, .94);
background-size: 38px 38px, 38px 38px, auto;
box-shadow: 0 30px 85px rgba(27, 72, 45, .14);
}
.corporate-sitemap-home,
.corporate-sitemap-exit {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
gap: 19px;
align-items: center;
width: min(680px, 100%);
margin-inline: auto;
padding: 25px 27px;
}
.corporate-sitemap-home { background: var(--green-deep); color: var(--white); box-shadow: 0 22px 45px rgba(6, 61, 40, .2); }
.corporate-sitemap-exit { margin-top: 52px; border: 1px solid var(--green); background: var(--paper); color: var(--ink); }
.corporate-sitemap-home > span,
.corporate-sitemap-exit > span,
.corporate-sitemap-group header > span {
display: grid;
place-items: center;
width: 58px;
aspect-ratio: 1;
border-radius: 50%;
}
.corporate-sitemap-home > span { background: #d7f183; color: var(--green-deep); }
.corporate-sitemap-exit > span,
.corporate-sitemap-group header > span { background: var(--mint); color: var(--green); }
.corporate-sitemap-home .icon,
.corporate-sitemap-exit .icon,
.corporate-sitemap-group .icon { width: 28px; }
.corporate-sitemap-home small,
.corporate-sitemap-exit small,
.corporate-sitemap-group small {
display: block;
color: #9fd5af;
font-size: 11px;
font-weight: 900;
letter-spacing: .06em;
}
.corporate-sitemap-exit small,
.corporate-sitemap-group small { color: var(--green); }
.corporate-sitemap-home h3,
.corporate-sitemap-exit h3 { margin: 4px 0 0; font-size: 23px; line-height: 1.45; }
.corporate-sitemap-home h3 { color: var(--white); }
.corporate-sitemap-home p,
.corporate-sitemap-exit p { margin: 5px 0 0; font-size: 13px; line-height: 1.7; }
.corporate-sitemap-home p { color: rgba(255,255,255,.68); }
.corporate-sitemap-exit p { color: var(--muted); }
.corporate-sitemap-home > strong,
.corporate-sitemap-exit > strong { padding: 9px 12px; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.corporate-sitemap-home > strong { border: 1px solid rgba(255,255,255,.18); color: #d7f183; }
.corporate-sitemap-exit > strong { background: var(--mint); color: var(--green); }
.corporate-sitemap-flow {
position: relative;
width: 70%;
height: 66px;
margin-inline: auto;
}
.corporate-sitemap-flow::before {
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 34px;
background: rgba(8, 102, 64, .33);
content: "";
}
.corporate-sitemap-flow::after {
position: absolute;
top: 33px;
right: 16.66%;
left: 16.66%;
height: 1px;
background: rgba(8, 102, 64, .33);
content: "";
}
.corporate-sitemap-flow > span {
position: absolute;
z-index: 1;
top: 29px;
left: 16.66%;
width: 9px;
aspect-ratio: 1;
border: 2px solid var(--paper);
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(8,102,64,.1);
animation: corporate-sitemap-flow 6s ease-in-out infinite;
}
.corporate-sitemap-groups {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 15px;
}
.corporate-sitemap-group {
position: relative;
z-index: 1;
border: 1px solid rgba(8, 102, 64, .16);
background: rgba(255, 253, 248, .96);
transition: border-color .3s ease, box-shadow .3s ease;
}
.corporate-sitemap-group::before {
position: absolute;
bottom: 100%;
left: 50%;
width: 1px;
height: 33px;
background: rgba(8, 102, 64, .33);
content: "";
}
.corporate-sitemap-group:hover { border-color: rgba(8,102,64,.42); box-shadow: 0 18px 36px rgba(20,55,35,.09); }
.corporate-sitemap-group header {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 14px;
align-items: center;
min-height: 135px;
padding: 22px;
border-bottom: 1px solid var(--line);
}
.corporate-sitemap-group header > span { width: 54px; }
.corporate-sitemap-group h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.5; }
.corporate-sitemap-group header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.corporate-sitemap-group > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.corporate-sitemap-group article {
min-height: 155px;
padding: 22px 19px;
background: var(--cream);
}
.corporate-sitemap-group article + article { border-left: 1px solid var(--line); }
.corporate-sitemap-group article h4 { margin: 8px 0 0; font-size: 16px; line-height: 1.55; }
.corporate-sitemap-group article p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.corporate-sitemap-exit::before {
position: absolute;
bottom: 100%;
left: 50%;
width: 1px;
height: 53px;
background: rgba(8, 102, 64, .33);
content: "";
}
.corporate-sitemap-guide {
display: grid;
grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
margin-top: 25px;
overflow: hidden;
box-shadow: 0 26px 70px rgba(23, 63, 40, .13);
}
.corporate-sitemap-guide > header {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 390px;
padding: clamp(33px, 4vw, 52px);
overflow: hidden;
background: var(--green-deep);
color: var(--white);
}
.corporate-sitemap-guide > header::after {
position: absolute;
right: -85px;
bottom: -100px;
width: 260px;
aspect-ratio: 1;
border: 1px solid rgba(255,255,255,.14);
border-radius: 50%;
content: "";
}
.corporate-sitemap-guide > header > small { color: #a7dfbc; font-size: 12px; font-weight: 900; }
.corporate-sitemap-guide > header p { display: flex; gap: 10px; align-items: baseline; margin: 18px 0 0; }
.corporate-sitemap-guide > header strong { color: #d7f183; font-size: clamp(66px, 6vw, 86px); line-height: .95; letter-spacing: -.06em; }
.corporate-sitemap-guide > header span { font-size: 18px; font-weight: 900; }
.corporate-sitemap-guide > header em { margin-top: 18px; color: rgba(255,255,255,.67); font-size: 13px; font-style: normal; line-height: 1.7; }
.corporate-sitemap-guide-copy { padding: clamp(36px, 5vw, 62px); background: var(--paper); }
.corporate-sitemap-guide-copy h3 { margin: 0; font-size: clamp(29px, 3vw, 40px); line-height: 1.45; letter-spacing: -.04em; }
.corporate-sitemap-guide-copy > p { max-width: 680px; margin: 19px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.corporate-sitemap-guide-copy > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 29px 0 0; padding: 0; list-style: none; }
.corporate-sitemap-guide-copy > ul li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; align-items: center; min-height: 86px; padding: 14px; border: 1px solid var(--line); background: var(--cream); }
.corporate-sitemap-guide-copy > ul li > span { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 50%; background: var(--mint); color: var(--green); }
.corporate-sitemap-guide-copy > ul .icon { width: 21px; }
.corporate-sitemap-guide-copy > ul strong,
.corporate-sitemap-guide-copy > ul small { display: block; }
.corporate-sitemap-guide-copy > ul strong { font-size: 13px; line-height: 1.5; }
.corporate-sitemap-guide-copy > ul small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.corporate-sitemap-guide-copy footer {
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
gap: 16px;
align-items: center;
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.corporate-sitemap-guide-copy footer > span { display: grid; place-items: center; width: 50px; aspect-ratio: 1; border-radius: 50%; background: var(--green); color: var(--white); }
.corporate-sitemap-guide-copy footer .icon { width: 24px; }
.corporate-sitemap-guide-copy footer p { margin: 0; }
.corporate-sitemap-guide-copy footer strong,
.corporate-sitemap-guide-copy footer small { display: block; }
.corporate-sitemap-guide-copy footer strong { font-size: 14px; line-height: 1.6; }
.corporate-sitemap-guide-copy footer small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.6; }
@keyframes corporate-sitemap-flow {
0% { left: 16.66%; opacity: 0; }
12%, 88% { opacity: 1; }
100% { left: calc(83.33% - 9px); opacity: 0; }
}
.corporate-work { background: var(--green-dark); color: var(--white); }
.corporate-work-card { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(390px,.72fr); min-height: 600px; background: var(--paper); color: var(--body); box-shadow: 0 35px 90px rgba(0,0,0,.22); }
.corporate-work-image { position: relative; min-height: 600px; overflow: hidden; background: var(--cream); }
.corporate-work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.corporate-work-card:hover .corporate-work-image img { transform: scale(1.025); }
.corporate-work-image span { position: absolute; right: 21px; bottom: 21px; padding: 10px 14px; background: var(--green); color: var(--white); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.corporate-work-copy { display: flex; flex-direction: column; justify-content:center; padding: clamp(42px,5vw,76px); }
.corporate-work-company { margin: 0; color: var(--green); font-size: 10px; font-weight: 900; }
.corporate-work-copy h3 { margin: 20px 0 0; font-size: clamp(32px,3.3vw,48px); line-height: 1.42; }
.corporate-work-copy > p:not(.corporate-work-company) { margin: 25px 0 0; color: var(--muted); font-size: 13px; line-height: 2; }
.corporate-work-copy ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 27px 0 0; padding: 0; list-style: none; }
.corporate-work-copy li { padding: 7px 10px; background: var(--mint); color: var(--green); font-size: 8px; font-weight: 800; }
.corporate-work-copy a { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 39px; padding: 15px 0; border-bottom: 1px solid var(--green); color: var(--green); font-size: 12px; font-weight: 900; }
.corporate-price {
position: relative;
isolation: isolate;
overflow: hidden;
background: #f3efe5;
}
.corporate-price::before {
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(circle at 90% 8%, rgba(139,205,166,.24), transparent 24%),
linear-gradient(rgba(8,102,64,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,102,64,.045) 1px, transparent 1px);
background-size: auto, 64px 64px, 64px 64px;
content: "";
mask-image: linear-gradient(to bottom, #000 0, transparent 58%);
}
.corporate-price-heading { margin-bottom: 42px; }
.corporate-price-heading > p { max-width: 610px; font-size: 16px; }
.corporate-price-guide {
display: grid;
grid-template-columns: 54px minmax(0,1fr) auto;
gap: 20px;
align-items: center;
margin-bottom: 18px;
padding: 19px 24px;
background: var(--green-deep);
color: var(--white);
}
.corporate-price-guide > span {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--mint);
color: var(--green-deep);
}
.corporate-price-guide > span .icon { width: 27px; }
.corporate-price-guide strong { display: block; font-size: 15px; line-height: 1.55; }
.corporate-price-guide p { margin: 4px 0 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.7; }
.corporate-price-guide > small { padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #bce2c7; font-size: 11px; font-weight: 900; white-space: nowrap; }
.corporate-price-examples {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 18px;
}
.corporate-price-example {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(8,102,64,.16);
background: var(--paper);
box-shadow: 0 22px 55px rgba(24,58,37,.075);
}
.corporate-price-example > header {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
min-height: 70px;
padding: 15px clamp(24px,2.5vw,38px);
border-bottom: 1px solid var(--line);
background: #fbfaf5;
}
.corporate-price-example.is-common { border-color: var(--green); }
.corporate-price-example.is-common > header { border-color: rgba(255,255,255,.16); background: var(--green); color: var(--white); }
.corporate-price-example > header > small { padding: 6px 10px; border-radius: 999px; background: var(--mint); color: var(--green-deep); font-size: 10px; font-weight: 900; white-space: nowrap; }
.corporate-price-example-label {
display: flex;
gap: 12px;
align-items: center;
margin: 0;
color: var(--green-deep);
font-size: 13px;
font-weight: 900;
}
.is-common .corporate-price-example-label { color: var(--white); }
.corporate-price-example-label span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(8,102,64,.25);
border-radius: 50%;
color: var(--green);
font-size: 10px;
}
.is-common .corporate-price-example-label span { border-color: rgba(255,255,255,.28); color: #bce2c7; }
.corporate-price-example-copy {
display: flex;
flex: 1;
flex-direction: column;
padding: clamp(30px,3.4vw,48px);
}
.corporate-price-amount {
display: flex;
gap: 11px;
align-items: flex-end;
margin: 0 0 28px;
white-space: nowrap;
}
.corporate-price-amount strong {
color: var(--green-deep);
font-size: clamp(66px,6vw,92px);
letter-spacing: -.065em;
line-height: .92;
}
.is-common .corporate-price-amount strong { color: var(--green); font-size: clamp(51px,4.8vw,73px); }
.corporate-price-amount > span { padding-bottom: 7px; font-size: 18px; font-weight: 900; }
.corporate-price-amount span small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.corporate-price-example-copy h3 {
margin: 0;
color: var(--ink);
font-size: clamp(25px,2.1vw,31px);
line-height: 1.5;
}
.corporate-price-example-copy > p {
margin: 17px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.9;
}
.corporate-price-example-copy dl {
display: grid;
gap: 0;
margin: 27px 0 0;
border-top: 1px solid var(--line);
}
.corporate-price-example-copy dl > div { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.corporate-price-example-copy dt { color: var(--green); font-size: 11px; font-weight: 900; }
.corporate-price-example-copy dd { margin: 0; color: var(--body); font-size: 13px; font-weight: 700; line-height: 1.75; }
.corporate-price-example-copy ul {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: auto 0 0;
padding: 25px 0 0;
list-style: none;
}
.corporate-price-example-copy li {
display: flex;
gap: 6px;
align-items: center;
min-height: 32px;
padding: 6px 10px;
background: var(--mint);
color: var(--green-deep);
font-size: 11px;
font-weight: 800;
}
.corporate-price-example-copy li .icon { width: 15px; color: var(--green); }
.corporate-price-terms {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
margin: 18px 0 0;
padding: 0;
border-top: 1px solid rgba(8,102,64,.17);
border-left: 1px solid rgba(8,102,64,.17);
background: rgba(255,253,248,.58);
list-style: none;
}
.corporate-price-terms li {
display: grid;
grid-template-columns: 48px minmax(0,1fr);
gap: 15px;
min-height: 150px;
padding: 24px;
border-right: 1px solid rgba(8,102,64,.17);
border-bottom: 1px solid rgba(8,102,64,.17);
}
.corporate-price-terms li > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(8,102,64,.2); border-radius: 50%; color: var(--green); }
.corporate-price-terms .icon { width: 24px; }
.corporate-price-terms small { display: block; color: var(--muted); font-size: 11px; font-weight: 900; }
.corporate-price-terms strong { display: block; margin-top: 3px; color: var(--ink); font-size: 22px; line-height: 1.45; }
.corporate-price-terms p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.corporate-price-estimate {
position: relative;
margin-top: 28px;
padding: clamp(46px,5.2vw,72px);
overflow: hidden;
background: var(--green-dark);
color: var(--white);
}
.corporate-price-estimate::before {
position: absolute;
top: -180px;
right: -130px;
width: 430px;
height: 430px;
border: 1px solid rgba(188,226,199,.16);
border-radius: 50%;
box-shadow: 0 0 0 55px rgba(188,226,199,.035), 0 0 0 110px rgba(188,226,199,.025);
content: "";
}
.corporate-price-estimate-head {
position: relative;
display: grid;
grid-template-columns: minmax(420px,1fr) minmax(320px,.72fr);
gap: clamp(50px,7vw,100px);
align-items: end;
margin-bottom: 45px;
}
.corporate-price-estimate .section-label { color: #9bd6b2; }
.corporate-price-estimate-head h3 { margin: 19px 0 0; color: var(--white); font-size: clamp(35px,3.6vw,50px); line-height: 1.42; }
.corporate-price-estimate-head > p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.95; }
.corporate-price-formula {
position: relative;
display: grid;
grid-template-columns: minmax(0,1.35fr) 58px minmax(300px,.65fr);
gap: 15px;
align-items: center;
}
.corporate-price-base,
.corporate-price-variables { align-self: stretch; padding: 28px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.045); }
.corporate-price-base > header,
.corporate-price-variables > header { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.16); }
.corporate-price-base > header > span,
.corporate-price-variables > header > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #bce2c7; color: var(--green-deep); }
.corporate-price-base > header .icon,
.corporate-price-variables > header .icon { width: 25px; }
.corporate-price-base header small,
.corporate-price-variables header small { color: rgba(255,255,255,.52); font-size: 10px; font-weight: 900; }
.corporate-price-base h4,
.corporate-price-variables h4 { margin: 3px 0 0; color: var(--white); font-size: 21px; }
.corporate-price-base ol {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.corporate-price-base li {
display: grid;
grid-template-columns: 41px minmax(0,1fr);
gap: 12px;
min-height: 120px;
padding: 21px 15px 17px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.corporate-price-base li:nth-child(odd) { padding-right: 22px; border-right: 1px solid rgba(255,255,255,.12); }
.corporate-price-base li:nth-child(even) { padding-left: 22px; }
.corporate-price-base li > span { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid rgba(188,226,199,.28); border-radius: 50%; color: #9bd6b2; }
.corporate-price-base li .icon { width: 21px; }
.corporate-price-base li small { display: block; color: rgba(255,255,255,.36); font-size: 9px; font-weight: 900; }
.corporate-price-base li strong { display: block; margin-top: 3px; color: var(--white); font-size: 15px; line-height: 1.5; }
.corporate-price-base li p { margin: 6px 0 0; color: rgba(255,255,255,.59); font-size: 12px; line-height: 1.72; }
.corporate-price-plus { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(188,226,199,.38); border-radius: 50%; color: #bce2c7; font-size: 26px; }
.corporate-price-variables ul { margin: 0; padding: 0; list-style: none; }
.corporate-price-variables li { position: relative; display: grid; grid-template-columns: 39px minmax(0,1fr); gap: 12px; min-height: 76px; padding: 14px 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.12); }
.corporate-price-variables li > span { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(188,226,199,.28); border-radius: 50%; color: #9bd6b2; }
.corporate-price-variables li .icon { width: 20px; }
.corporate-price-variables strong { display: block; color: var(--white); font-size: 14px; }
.corporate-price-variables p { margin: 5px 0 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.65; }
.corporate-price-variables li i { position: absolute; right: 0; bottom: 0; left: 51px; height: 2px; background: #9bd6b2; opacity: calc(.9 - var(--factor-index) * .12); transform: scaleX(0); transform-origin: left; transition: transform .75s var(--ease-out); transition-delay: calc(var(--factor-index) * 90ms); }
.corporate-price-estimate.is-visible .corporate-price-variables li i { transform: scaleX(1); }
.corporate-price-result {
position: relative;
display: grid;
grid-template-columns: 58px minmax(0,1fr);
gap: 21px;
align-items: center;
margin-top: 15px;
padding: 25px 29px;
overflow: hidden;
background: var(--mint);
color: var(--ink);
}
.corporate-price-result::after { position: absolute; top: 0; bottom: 0; left: -35%; width: 25%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); content: ""; transform: skewX(-15deg); transition: left 1.1s var(--ease-out) .25s; }
.corporate-price-estimate.is-visible .corporate-price-result::after { left: 120%; }
.corporate-price-result > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--green); color: var(--white); }
.corporate-price-result > span .icon { width: 29px; }
.corporate-price-result small { display: block; color: var(--green); font-size: 10px; font-weight: 900; }
.corporate-price-result strong { display: block; margin-top: 3px; font-size: 19px; line-height: 1.55; }
.corporate-price-result p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.corporate-price-extra {
margin-top: 18px;
padding: clamp(31px,4vw,52px);
border: 1px solid rgba(8,102,64,.17);
background: rgba(255,253,248,.75);
}
.corporate-price-extra > header { display: grid; grid-template-columns: minmax(330px,.85fr) minmax(320px,1.15fr); gap: 50px; align-items: end; }
.corporate-price-extra h3 { margin: 15px 0 0; font-size: clamp(29px,2.7vw,39px); line-height: 1.5; }
.corporate-price-extra > header > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.corporate-price-extra > ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 33px 0 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); list-style: none; }
.corporate-price-extra > ul li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; min-height: 120px; padding: 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.corporate-price-extra > ul li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--green); }
.corporate-price-extra > ul li .icon { width: 22px; }
.corporate-price-extra > ul strong { display: block; color: var(--ink); font-size: 15px; }
.corporate-price-extra > ul p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.corporate-price-extra footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 35px; align-items: center; margin-top: 25px; }
.corporate-price-extra footer > p { margin: 0; }
.corporate-price-extra footer > p strong { display: block; color: var(--ink); font-size: 15px; }
.corporate-price-extra footer > p span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.corporate-price-extra footer > div { display: flex; gap: 21px; align-items: center; }
.corporate-price-detail-link { display: flex; gap: 20px; align-items: center; min-height: 48px; padding: 0 3px; border-bottom: 1px solid var(--green); color: var(--green); font-size: 13px; font-weight: 900; }
.corporate-price-extra .button { min-width: 210px; }
.corporate-process { position: relative; background: var(--paper); }
.corporate-process:before { position: absolute; top: 0; right: 0; width: 38%; height: 100%; background: linear-gradient(135deg, transparent 20%, rgba(220,236,223,.45)); content: ""; clip-path: polygon(33% 0,100% 0,100% 100%,0 100%); }
.corporate-process .corporate-shell { position: relative; }
.corporate-process-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.corporate-process-list li { display: grid; grid-template-columns: 90px minmax(0,1fr) 56px; gap: 34px; align-items: center; min-height: 135px; padding: 23px 27px; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease-out), background .3s; }
.corporate-process-list li:hover { padding-left: 39px; background: rgba(220,236,223,.38); }
.corporate-process-list li > span { color: var(--green); font-size: 12px; font-weight: 900; }
.corporate-process-list h3 { margin: 0; font-size: 22px; }
.corporate-process-list p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.corporate-process-list li > .icon { width: 34px; color: var(--green); }
.corporate-process-link { display: flex; justify-content: space-between; gap: 30px; align-items: center; width: min(360px,100%); margin: 36px 0 0 auto; padding: 15px 18px; border: 1px solid var(--green); color: var(--green); font-size: 11px; font-weight: 900; transition: background .25s,color .25s; }
.corporate-process-link:hover { background: var(--green); color: var(--white); }
.corporate-after { background: var(--green-deep); color: var(--white); }
.corporate-after-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.corporate-after-grid > a { position: relative; min-height: 480px; padding: 42px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.035); transition: transform .4s var(--ease-out),background .3s; }
.corporate-after-grid > a:after { position: absolute; right: -85px; bottom: -120px; width: 320px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; transition: transform .6s var(--ease-out); }
.corporate-after-grid > a:hover { background: rgba(255,255,255,.08); transform: translateY(-8px); }
.corporate-after-grid > a:hover:after { transform: scale(1.15); }
.corporate-after-grid > a > span { display: grid; place-items:center; width: 67px; aspect-ratio:1; border-radius:50%; background:#d7f183; color:var(--green-deep); }
.corporate-after-grid .icon { width:32px; }
.corporate-after-grid small { display:block; margin-top:39px; color:#a8dab8; font-size:8px; font-weight:900; letter-spacing:.1em; }
.corporate-after-grid h3 { margin:9px 0 0; color:var(--white); font-size:36px; }
.corporate-after-grid p { max-width:530px; margin:20px 0 0; color:rgba(255,255,255,.64); font-size:12px; line-height:1.95; }
.corporate-after-grid strong { display:block; margin-top:30px; color:#d7f183; font-size:16px; }
.corporate-after-grid em { position:absolute; z-index:2; right:35px; bottom:33px; display:flex; gap:23px; align-items:center; color:var(--white); font-size:10px; font-style:normal; font-weight:900; }
.corporate-faq { background: var(--mint); }
.corporate-faq-shell { display:grid; grid-template-columns:minmax(320px,.62fr) minmax(570px,1.18fr); gap:clamp(60px,9vw,140px); align-items:start; }
.corporate-faq-title { position:sticky; top:120px; }
.corporate-faq-title p:last-child { max-width:420px; margin:27px 0 0; color:var(--muted); font-size:13px; line-height:1.95; }
.corporate-faq-list { border-top:1px solid rgba(8,102,64,.25); }
.corporate-faq-list details { border-bottom:1px solid rgba(8,102,64,.25); }
.corporate-faq-list summary { display:grid; grid-template-columns:34px 1fr 32px; gap:16px; align-items:center; min-height:102px; padding:20px 0; cursor:pointer; list-style:none; }
.corporate-faq-list summary::-webkit-details-marker { display:none; }
.corporate-faq-list summary > span,
.corporate-faq-list details > div > span { color:var(--green); font-size:15px; font-weight:900; }
.corporate-faq-list summary strong { color:var(--ink); font-size:14px; }
.corporate-faq-list summary i { position:relative; width:30px; aspect-ratio:1; border:1px solid rgba(8,102,64,.3); border-radius:50%; }
.corporate-faq-list summary i:before,
.corporate-faq-list summary i:after { position:absolute; top:50%; left:50%; width:11px; height:1px; background:var(--green); content:""; transform:translate(-50%,-50%); }
.corporate-faq-list summary i:after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .25s; }
.corporate-faq-list details[open] summary i:after { transform:translate(-50%,-50%) rotate(0); }
.corporate-faq-list details > div { display:grid; grid-template-columns:34px 1fr; gap:16px; padding:0 0 30px; }
.corporate-faq-list details > div p { margin:0; color:var(--muted); font-size:12px; line-height:1.95; }
.corporate-contact { position:relative; min-height:610px; padding:clamp(105px,10vw,150px) max(28px,5vw); overflow:hidden; background:#0b573b; color:var(--white); }
.corporate-contact:before { position:absolute; inset:0; background:linear-gradient(120deg,rgba(3,46,32,.1),rgba(3,46,32,.58)), radial-gradient(circle at 70% 30%,rgba(213,239,114,.15),transparent 30%); content:""; }
.corporate-contact-shapes i { position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; animation:corporate-orbit 9s ease-in-out infinite alternate; }
.corporate-contact-shapes i:nth-child(1) { width:360px; height:360px; right:-100px; top:-90px; }
.corporate-contact-shapes i:nth-child(2) { width:210px; height:210px; right:29%; bottom:-100px; animation-delay:-3s; }
.corporate-contact-shapes i:nth-child(3) { width:18px; height:18px; right:19%; top:23%; border:0; background:#d7f183; box-shadow:0 0 0 14px rgba(213,239,114,.09); }
.corporate-contact-inner { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.46fr); gap:clamp(55px,9vw,140px); align-items:end; }
.corporate-contact .section-label { color:#a8dab8; }
.corporate-contact h2 { color:var(--white); }
.corporate-contact-inner > div:first-child > p:last-child { max-width:760px; margin:28px 0 0; color:rgba(255,255,255,.69); font-size:14px; line-height:2; }
.corporate-contact-inner > div:last-child { display:grid; gap:22px; }
.corporate-contact-inner .button { min-width:100%; }
.corporate-contact-inner > div:last-child > small { color:rgba(255,255,255,.55); font-size:9px; line-height:1.8; text-align:center; }
@keyframes corporate-marquee { to { transform: translateX(calc(-50% - var(--ticker-gap)/2)); } }
@keyframes corporate-float { 50% { transform:translateY(-12px) rotate(-3deg); } }
@keyframes corporate-spin { to { transform:rotate(360deg); } }
@keyframes corporate-orbit { to { transform:translate3d(18px,22px,0) scale(1.04); } }
@keyframes corporate-scan { 0% { transform:translateX(-30%); } 50%,100% { transform:translateX(560%); } }
@media (max-width: 1160px) {
.corporate-hero { grid-template-columns:1fr; min-height:0; padding-top:130px; }
.corporate-hero-copy { max-width:830px; }
.corporate-hero-visual { width:min(930px,90%); margin:15px auto 0; }
.corporate-heading { grid-template-columns:1fr; gap:25px; }
.corporate-heading > p { max-width:760px; }
.corporate-concern-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.corporate-approach-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.corporate-approach-track { display:none; }
.corporate-role-board { grid-template-columns:1fr; }
.corporate-role-board:after { top:56%; left:50%; transform:translate(-50%,-50%) rotate(90deg); }
.corporate-outcomes-board { grid-template-columns:1fr; }
.corporate-outcomes-plan { min-height:0; }
.corporate-outcomes-route { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; padding-top:0; }
.corporate-outcomes-route::before { display:none; }
.corporate-outcomes-route li { grid-template-columns:42px minmax(0,1fr); padding:14px; border:1px solid rgba(255,255,255,.13); }
.corporate-sitemap-group > div { grid-template-columns:1fr; }
.corporate-sitemap-group article + article { border-top:1px solid var(--line); border-left:0; }
.corporate-work-card { grid-template-columns:1fr; }
.corporate-work-image { min-height:520px; }
.corporate-price-estimate-head { grid-template-columns:1fr; gap:25px; }
.corporate-price-estimate-head > p { max-width:760px; }
.corporate-price-formula { grid-template-columns:1fr; }
.corporate-price-plus { margin:0 auto; }
.corporate-price-extra footer { grid-template-columns:1fr; }
.corporate-price-extra footer > div { justify-content:flex-end; }
.corporate-faq-shell { grid-template-columns:1fr; }
.corporate-faq-title { position:static; max-width:760px; }
.corporate-contact-inner { grid-template-columns:1fr; }
.corporate-contact-inner > div:last-child { max-width:420px; }
}
@media (max-width: 900px) {
.corporate-price-examples { grid-template-columns:1fr; }
.corporate-price-terms { grid-template-columns:1fr; }
.corporate-price-terms li { min-height:0; }
.corporate-price-extra > header { grid-template-columns:1fr; gap:19px; }
.corporate-price-extra > ul { grid-template-columns:1fr; }
.corporate-sitemap-guide { grid-template-columns:1fr; }
.corporate-sitemap-guide > header { min-height:260px; }
}
@media (max-width: 760px) {
.corporate-hero { gap:58px; padding:112px 20px 84px; }
.corporate-eyebrow { align-items:flex-start; margin-bottom:26px; font-size:10px; line-height:1.6; }
.corporate-eyebrow span { flex:none; }
.corporate-hero h1 { font-size:clamp(39px,11vw,50px); line-height:1.31; }
.corporate-hero-lead { margin-top:25px; font-size:14px; line-height:1.95; }
.corporate-hero-actions { display:grid; gap:17px; margin-top:31px; }
.corporate-hero-actions .button { width:100%; min-width:0; }
.corporate-text-link { justify-content:center; }
.corporate-hero-facts { grid-template-columns:1fr; gap:0; margin-top:31px; padding-top:0; border-top:0; }
.corporate-hero-facts li,
.corporate-hero-facts li:first-child { min-height:64px; padding:9px 0; border-top:1px solid rgba(255,255,255,.13); border-left:0; }
.corporate-hero-visual { width:calc(100% + 10px); margin-left:-5px; transform:rotate(.8deg); }
.corporate-browser-bar { height:31px; }
.corporate-browser img { aspect-ratio:1.15; }
.corporate-phone { right:-7px; bottom:-34px; width:104px; height:210px; padding:5px; border-width:3px; border-radius:20px; }
.corporate-phone > span { top:5px; width:35px; height:9px; }
.corporate-phone img { border-radius:13px; }
.corporate-work-note { bottom:10px; left:-8px; gap:10px; min-width:228px; padding:12px 13px; }
.corporate-work-note strong { font-size:9px; }
.corporate-work-note .icon { width:24px; }
.corporate-visual-stamp { top:-29px; right:16px; width:86px; }
.corporate-visual-stamp strong { font-size:7px; }
.corporate-ticker { --ticker-gap:28px; }
.corporate-ticker > div { padding:14px 0; }
.corporate-ticker span { font-size:10px; }
.corporate-section { padding:88px 20px; }
.corporate-heading { gap:20px; margin-bottom:45px; }
.corporate-heading h2,
.corporate-faq-title h2,
.corporate-contact h2 { font-size:clamp(34px,9.5vw,42px); line-height:1.4; }
.corporate-heading > p { font-size:13px; line-height:1.95; }
.corporate-concern-grid { grid-template-columns:1fr; gap:10px; background:transparent; }
.corporate-concern-grid article { min-height:0; padding:27px 23px; }
.corporate-concern-grid h3 { margin-top:28px; font-size:19px; }
.corporate-concern-note { grid-template-columns:38px 1fr; gap:14px; padding:22px 18px; }
.corporate-concern-note a { grid-column:1/-1; justify-content:space-between; }
.corporate-concern-note strong { font-size:12px; line-height:1.75; }
.corporate-approach-list { grid-template-columns:1fr; gap:10px; }
.corporate-approach-list li { min-height:0; padding:27px 23px; }
.corporate-approach-list h3 { margin-top:31px; font-size:21px; }
.corporate-approach-close { margin-top:45px; font-size:27px; line-height:1.55; text-align:left; }
.corporate-role-main,
.corporate-role-client { padding:31px 23px; }
.corporate-role-board:after { top:54.5%; width:44px; border-width:6px; }
.corporate-role-main header,
.corporate-role-client header { margin-bottom:28px; }
.corporate-role-main header > span,
.corporate-role-client header > span { width:54px; }
.corporate-role-main > div { grid-template-columns:1fr; border-left:0; }
.corporate-role-main article { grid-template-columns:34px 1fr; min-height:0; padding:22px 0; border-right:0; }
.corporate-role-main article > .icon { width:26px; }
.corporate-role-main h4,
.corporate-role-client h4 { font-size:15px; }
.corporate-role-main article p,
.corporate-role-client li p { font-size:11px; }
.corporate-role-client li { grid-template-columns:40px 1fr; gap:13px; padding:21px 0; }
.corporate-role-note { align-items:flex-start; padding:21px 19px; }
.corporate-role-note p { grid-template-columns:1fr; gap:8px; }
.corporate-role-note strong { font-size:12px; line-height:1.7; }
.corporate-role-note span { font-size:11px; }
.corporate-outcomes-plan { padding:31px 23px 33px; }
.corporate-outcomes-plan h3 { font-size:30px; }
.corporate-outcomes-plan-lead { font-size:14px; }
.corporate-outcomes-audiences { margin-top:27px; padding:19px; }
.corporate-outcomes-route { grid-template-columns:1fr; gap:0; margin-top:25px; }
.corporate-outcomes-route::before { display:block; top:31px; bottom:31px; left:20px; }
.corporate-outcomes-route li { padding:10px 0; border:0; }
.corporate-outcome-list { grid-template-columns:1fr; }
.corporate-outcome-card { min-height:0; padding:29px 22px; }
.corporate-outcome-card header { grid-template-columns:52px minmax(0,1fr) auto; gap:14px; }
.corporate-outcome-icon { width:52px; }
.corporate-outcome-icon .icon { width:25px; }
.corporate-outcome-card h3 { font-size:21px; }
.corporate-outcome-card > p { margin-top:22px; font-size:14px; }
.corporate-outcome-card footer { grid-template-columns:1fr; gap:5px; margin-top:26px; padding-right:50px; }
.corporate-outcome-card footer i { position:absolute; right:22px; bottom:24px; }
.corporate-outcomes-note { grid-template-columns:52px minmax(0,1fr); gap:15px; padding:20px; }
.corporate-outcomes-note > span { width:52px; }
.corporate-outcomes-note a { grid-column:1/-1; justify-content:space-between; min-height:50px; padding-left:0; }
.corporate-sitemap-section::after { top:340px; right:-150px; width:300px; }
.corporate-sitemap-decor i:nth-child(1) { width:58px; }
.corporate-sitemap { padding:18px; }
.corporate-sitemap-home,
.corporate-sitemap-exit { grid-template-columns:48px minmax(0,1fr); gap:13px; padding:19px 17px; }
.corporate-sitemap-home > span,
.corporate-sitemap-exit > span { width:48px; }
.corporate-sitemap-home .icon,
.corporate-sitemap-exit .icon { width:24px; }
.corporate-sitemap-home h3,
.corporate-sitemap-exit h3 { font-size:19px; }
.corporate-sitemap-home p,
.corporate-sitemap-exit p { font-size:12px; }
.corporate-sitemap-home > strong,
.corporate-sitemap-exit > strong { grid-column:1/-1; width:max-content; margin-left:61px; white-space:normal; }
.corporate-sitemap-flow { width:100%; height:38px; }
.corporate-sitemap-flow::before { height:38px; }
.corporate-sitemap-flow::after,
.corporate-sitemap-flow > span { display:none; }
.corporate-sitemap-groups { grid-template-columns:1fr; gap:13px; }
.corporate-sitemap-group::before { display:none; }
.corporate-sitemap-group header { grid-template-columns:48px minmax(0,1fr); min-height:0; padding:19px 17px; }
.corporate-sitemap-group header > span { width:48px; }
.corporate-sitemap-group h3 { font-size:18px; }
.corporate-sitemap-group > div { grid-template-columns:1fr; }
.corporate-sitemap-group article { min-height:0; padding:18px 17px; }
.corporate-sitemap-group article + article { border-top:1px solid var(--line); border-left:0; }
.corporate-sitemap-exit { margin-top:38px; }
.corporate-sitemap-exit::before { height:39px; }
.corporate-sitemap-guide { margin-top:16px; }
.corporate-sitemap-guide > header { min-height:225px; padding:29px 24px; }
.corporate-sitemap-guide > header strong { font-size:67px; }
.corporate-sitemap-guide-copy { padding:30px 22px; }
.corporate-sitemap-guide-copy h3 { font-size:27px; }
.corporate-sitemap-guide-copy > p { font-size:14px; }
.corporate-sitemap-guide-copy > ul { grid-template-columns:1fr; gap:8px; margin-top:24px; }
.corporate-sitemap-guide-copy > ul li { min-height:76px; }
.corporate-sitemap-guide-copy footer { grid-template-columns:46px minmax(0,1fr); gap:13px; }
.corporate-sitemap-guide-copy footer > span { width:46px; }
.corporate-work-card { min-height:0; }
.corporate-work-image { min-height:285px; }
.corporate-work-copy { padding:32px 23px 38px; }
.corporate-work-copy h3 { font-size:31px; }
.corporate-work-copy > p:not(.corporate-work-company) { font-size:12px; }
.corporate-price-heading { margin-bottom:28px; }
.corporate-price-heading > p { font-size:15px; line-height:1.9; }
.corporate-price-guide { grid-template-columns:46px minmax(0,1fr); gap:14px; margin-bottom:14px; padding:17px 18px; }
.corporate-price-guide > span { width:46px; height:46px; }
.corporate-price-guide > span .icon { width:23px; }
.corporate-price-guide strong { font-size:14px; }
.corporate-price-guide p { font-size:12px; }
.corporate-price-guide > small { grid-column:2; justify-self:start; margin-top:-6px; }
.corporate-price-example > header { min-height:64px; padding:14px 20px; }
.corporate-price-example-label { font-size:12px; }
.corporate-price-example-copy { padding:29px 22px 31px; }
.corporate-price-amount { margin-bottom:24px; }
.corporate-price-amount strong { font-size:68px; }
.is-common .corporate-price-amount strong { font-size:48px; }
.corporate-price-amount > span { font-size:16px; }
.corporate-price-example-copy h3 { font-size:24px; }
.corporate-price-example-copy > p { font-size:14px; }
.corporate-price-example-copy dl > div { grid-template-columns:108px minmax(0,1fr); gap:12px; }
.corporate-price-example-copy ul { margin-top:23px; padding-top:0; }
.corporate-price-terms li { grid-template-columns:44px minmax(0,1fr); gap:13px; padding:20px 18px; }
.corporate-price-terms li > span { width:44px; height:44px; }
.corporate-price-terms strong { font-size:20px; }
.corporate-price-terms p { font-size:13px; }
.corporate-price-estimate { margin-inline:-20px; padding:43px 20px; }
.corporate-price-estimate-head { margin-bottom:31px; }
.corporate-price-estimate-head h3 { font-size:30px; }
.corporate-price-estimate-head > p { font-size:14px; }
.corporate-price-base,
.corporate-price-variables { padding:22px 19px; }
.corporate-price-base ol { grid-template-columns:1fr; }
.corporate-price-base li,
.corporate-price-base li:nth-child(odd),
.corporate-price-base li:nth-child(even) { min-height:0; padding:18px 0; border-right:0; }
.corporate-price-base li strong { font-size:15px; }
.corporate-price-base li p,
.corporate-price-variables p { font-size:13px; }
.corporate-price-result { grid-template-columns:48px minmax(0,1fr); gap:15px; padding:20px 18px; }
.corporate-price-result > span { width:48px; height:48px; }
.corporate-price-result strong { font-size:16px; }
.corporate-price-result p { font-size:13px; line-height:1.7; }
.corporate-price-extra { padding:29px 20px; }
.corporate-price-extra h3 { font-size:27px; }
.corporate-price-extra > header > p { font-size:14px; }
.corporate-price-extra > ul { margin-top:25px; }
.corporate-price-extra > ul li { min-height:0; padding:18px 15px; }
.corporate-price-extra > ul p { font-size:13px; }
.corporate-price-extra footer { gap:24px; }
.corporate-price-extra footer > p span { font-size:13px; line-height:1.7; }
.corporate-price-extra footer > div { display:grid; justify-content:stretch; gap:14px; }
.corporate-price-detail-link { justify-content:space-between; }
.corporate-price-extra .button { width:100%; min-width:0; }
.corporate-process-list li { grid-template-columns:42px 1fr 32px; gap:12px; min-height:118px; padding:20px 8px; }
.corporate-process-list li:hover { padding-left:8px; }
.corporate-process-list h3 { font-size:17px; }
.corporate-process-list p { font-size:10px; line-height:1.8; }
.corporate-process-list li > .icon { width:29px; }
.corporate-after-grid { grid-template-columns:1fr; }
.corporate-after-grid > a { min-height:430px; padding:33px 24px; }
.corporate-after-grid h3 { font-size:31px; }
.corporate-after-grid em { right:24px; bottom:25px; }
.corporate-faq-shell { gap:42px; }
.corporate-faq-title > p:last-child { font-size:12px; }
.corporate-faq-list summary { grid-template-columns:28px 1fr 28px; gap:10px; min-height:91px; }
.corporate-faq-list summary strong { font-size:12px; line-height:1.7; }
.corporate-faq-list details > div { grid-template-columns:28px 1fr; gap:10px; }
.corporate-faq-list details > div p { font-size:11px; }
.corporate-contact { min-height:660px; padding:87px 20px 115px; }
.corporate-contact-inner { gap:38px; }
.corporate-contact-inner > div:first-child > p:last-child { font-size:13px; line-height:1.95; }
}
@media (max-width: 360px) {
.corporate-price-example > header > small { display:none; }
.corporate-price-amount strong { font-size:60px; }
.is-common .corporate-price-amount strong { font-size:42px; }
.corporate-price-example-copy dl > div { grid-template-columns:1fr; gap:4px; }
.corporate-price-result { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
.corporate-hero-orb,
.corporate-phone,
.corporate-visual-stamp,
.corporate-ticker > div,
.corporate-approach-track span,
.corporate-outcomes-route li:first-child > span,
.corporate-sitemap-flow > span,
.corporate-contact-shapes i { animation: none; }
.corporate-browser img,
.corporate-concern-grid article,
.corporate-approach-list li,
.corporate-outcome-card,
.corporate-outcome-card::before,
.corporate-outcome-card footer i,
.corporate-sitemap-group,
.corporate-work-image img,
.corporate-after-grid > a,
.corporate-price-variables li i,
.corporate-price-result::after { transition: none; }
} .corporate-ticker > .corporate-ticker-track {
gap: 0;
animation-name: corporate-marquee-refined;
will-change: transform;
}
.corporate-ticker-group {
display: flex;
flex: none;
gap: var(--ticker-gap);
align-items: center;
padding-right: var(--ticker-gap);
}
@keyframes corporate-marquee-refined {
to { transform: translateX(-25%); }
}
.corporate-page-nav {
position: relative;
z-index: 5;
border-bottom: 1px solid rgba(8, 102, 64, .15);
background: rgba(255, 253, 248, .97);
}
.corporate-page-nav .corporate-shell {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 42px;
align-items: center;
min-height: 82px;
}
.corporate-page-nav p {
margin: 0;
color: var(--muted);
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.corporate-page-nav .corporate-shell > div {
display: flex;
flex-wrap: nowrap;
}
.corporate-page-nav a {
position: relative;
display: grid;
place-items: center;
min-height: 82px;
padding: 10px 16px;
border-left: 1px solid rgba(8, 102, 64, .12);
color: var(--ink);
font-size: 13px;
font-weight: 900;
text-align: center;
transition: color .25s ease, background .25s ease;
}
.corporate-page-nav a::after {
position: absolute;
right: 18px;
bottom: 0;
left: 18px;
height: 3px;
background: var(--green);
content: "";
opacity: 0;
transform: scaleX(.35);
transition: opacity .25s ease, transform .35s var(--ease-out);
}
.corporate-page-nav a:hover,
.corporate-page-nav a[aria-current="true"] {
background: var(--mint);
color: var(--green-deep);
}
.corporate-page-nav a[aria-current="true"]::after {
opacity: 1;
transform: scaleX(1);
}
.corporate-concern-grid article:hover,
.corporate-approach-list li:hover,
.corporate-outcome-grid article:hover {
transform: none;
}
.corporate-process-list li:hover {
padding-left: 27px;
}
.corporate-process-link,
.corporate-concern-note a {
font-size: 13px;
}
.corporate-work-copy h3 {
font-size: clamp(32px, 3vw, 40px);
}
@media (max-width: 1120px) {
.corporate-page-nav .corporate-shell {
display: block;
min-height: 0;
padding-right: 0;
padding-left: 0;
}
.corporate-page-nav p {
padding: 15px 24px 10px;
}
.corporate-page-nav .corporate-shell > div {
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.corporate-page-nav .corporate-shell > div::-webkit-scrollbar { display: none; }
.corporate-page-nav a {
flex: 0 0 auto;
min-width: 154px;
min-height: 58px;
border-top: 1px solid rgba(8, 102, 64, .1);
}
}
@media (max-width: 760px) {
.corporate-page-nav p {
padding: 13px 20px 8px;
font-size: 11px;
}
.corporate-page-nav a {
min-width: 142px;
min-height: 54px;
padding: 8px 14px;
font-size: 12px;
}
.corporate-heading h2 {
font-size: 34px;
line-height: 1.43;
}
.corporate-approach .corporate-heading h2,
.corporate-roles .corporate-heading h2,
.corporate-process .corporate-heading h2,
.corporate-after .corporate-heading h2 {
font-size: 30px;
line-height: 1.5;
}
.corporate-heading > p {
font-size: 14px;
line-height: 1.9;
}
.corporate-concern-grid article:hover,
.corporate-approach-list li:hover,
.corporate-outcome-grid article:hover {
transform: none;
}
.corporate-process-list li:hover { padding-left: 8px; }
.corporate-process-list p { font-size: 13px; line-height: 1.8; }
.corporate-process-link { min-height: 50px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.corporate-ticker > .corporate-ticker-track { animation: none; }
.corporate-page-nav a,
.corporate-page-nav a::after { transition: none; }
} .corporate-hero {
grid-template-columns: minmax(470px, .88fr) minmax(600px, 1.12fr);
}
.corporate-hero::after {
position: absolute;
right: 4vw;
bottom: 74px;
width: min(44vw, 690px);
height: 18px;
background: #d7f183;
content: "";
opacity: .92;
}
.corporate-hero-lead { font-size: 16px; line-height: 1.95; }
.corporate-text-link { font-size: 14px; }
.corporate-hero-facts strong { font-size: 14px; line-height: 1.5; }
.corporate-hero-facts small { font-size: 12px; line-height: 1.55; }
.corporate-hero-visual {
min-width: 0;
padding: 0 28px 37px 0;
transform: none;
}
.corporate-hero-project {
position: relative;
z-index: 2;
margin: 0;
overflow: hidden;
background: var(--paper);
box-shadow: 0 46px 88px rgba(0, 0, 0, .34);
}
.corporate-hero-project::after {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, .18);
content: "";
pointer-events: none;
}
.corporate-hero-project img {
display: block;
width: 100%;
aspect-ratio: 1.45;
object-fit: cover;
transition: transform 1s var(--ease-out);
}
.corporate-hero-visual:hover .corporate-hero-project img { transform: scale(1.018); }
.corporate-hero-project figcaption {
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
min-width: min(360px, 58%);
padding: 18px 22px;
background: rgba(255, 253, 248, .95);
color: var(--ink);
backdrop-filter: blur(8px);
}
.corporate-hero-project figcaption small,
.corporate-hero-project figcaption strong { display: block; }
.corporate-hero-project figcaption small { color: var(--green); font-size: 12px; font-weight: 900; }
.corporate-hero-project figcaption strong { margin-top: 5px; font-size: 15px; line-height: 1.55; }
.corporate-heading > p { font-size: 16px; line-height: 1.95; }
.corporate-concern-grid p,
.corporate-approach-list p,
.corporate-role-main article p,
.corporate-role-client li p,
.corporate-outcomes-plan-lead,
.corporate-outcome-card > p,
.corporate-sitemap-guide-copy > p,
.corporate-work-copy > p:not(.corporate-work-company),
.corporate-price-example-copy > p,
.corporate-price-estimate-head > p,
.corporate-price-extra > header > p,
.corporate-process-list p,
.corporate-after-grid p { font-size: 15px; }
.corporate-concern-note strong,
.corporate-role-note strong { font-size: 15px; }
.corporate-concern-note span,
.corporate-role-note span { font-size: 14px; line-height: 1.8; }
.corporate-concern-note a { font-size: 14px; }
.corporate-role-main article { min-height: 205px; }
.corporate-role-main h4,
.corporate-role-client h4 { font-size: 18px; }
.corporate-role-client li { padding-block: 27px; }
.corporate-outcomes-kicker { font-size: 12px; }
.corporate-outcomes-audiences li,
.corporate-outcomes-route strong,
.corporate-outcome-card footer strong { font-size: 14px; }
.corporate-outcomes-route small,
.corporate-outcome-card > ul li,
.corporate-outcome-card footer span,
.corporate-outcomes-note small { font-size: 12px; }
.corporate-outcomes-note a { font-size: 14px; }
.corporate-sitemap-home p,
.corporate-sitemap-exit p,
.corporate-sitemap-group header p,
.corporate-sitemap-group article p,
.corporate-sitemap-guide-copy > ul small,
.corporate-sitemap-guide-copy footer small { font-size: 14px; }
.corporate-sitemap-guide-copy > ul strong,
.corporate-sitemap-guide-copy footer strong { font-size: 15px; }
.corporate-work-card {
grid-template-columns: minmax(0, 1.06fr) minmax(470px, .94fr);
}
.corporate-work-copy { padding: clamp(44px, 4.5vw, 68px); }
.corporate-work-company { font-size: 12px; }
.corporate-work-copy h3 { font-size: clamp(34px, 3vw, 43px); line-height: 1.42; }
.corporate-work-copy h3 span { display: block; }
.corporate-work-copy li { font-size: 12px; }
.corporate-work-copy a { font-size: 14px; }
.corporate-work-image span { font-size: 12px; letter-spacing: .06em; } .corporate-work-showcase {
--case-duration: 7s;
position: relative;
}
.corporate-work-switcher {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
border: 1px solid rgba(255, 255, 255, .17);
border-bottom: 0;
background: rgba(255, 255, 255, .055);
}
.corporate-work-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.corporate-work-tabs button {
position: relative;
min-width: 0;
min-height: 98px;
padding: 19px 25px;
border: 0;
border-right: 1px solid rgba(255, 255, 255, .14);
background: transparent;
color: rgba(255, 255, 255, .6);
font: inherit;
text-align: left;
cursor: pointer;
transition: background .35s ease, color .35s ease;
}
.corporate-work-tabs button::after {
position: absolute;
right: 25px;
bottom: 0;
left: 25px;
height: 3px;
background: #d7f183;
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform .45s var(--ease-out);
}
.corporate-work-tabs button:hover { background: rgba(255, 255, 255, .05); color: var(--white); }
.corporate-work-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .09); color: var(--white); }
.corporate-work-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.corporate-work-tabs small,
.corporate-work-tabs strong { display: block; }
.corporate-work-tabs small { color: #b5dfc0; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.corporate-work-tabs strong { margin-top: 8px; font-size: 15px; line-height: 1.45; }
.corporate-work-controls {
display: grid;
grid-template-columns: 52px 66px 52px;
align-items: center;
padding-inline: 14px;
}
.corporate-work-controls button {
display: grid;
place-items: center;
width: 42px;
aspect-ratio: 1;
margin: auto;
border: 1px solid rgba(255, 255, 255, .26);
border-radius: 50%;
background: transparent;
color: var(--white);
cursor: pointer;
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.corporate-work-controls button:hover { background: #d7f183; color: var(--green-deep); transform: translateY(-2px); }
.corporate-work-controls button:first-child .arrow { transform: rotate(180deg); }
.corporate-work-controls .arrow { width: 17px; }
.corporate-work-controls p { margin: 0; text-align: center; }
.corporate-work-controls p strong { color: #d7f183; font-size: 20px; }
.corporate-work-controls p span { margin-left: 4px; color: rgba(255, 255, 255, .52); font-size: 11px; }
.corporate-work-timer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
overflow: hidden;
background: rgba(255, 255, 255, .1);
}
.corporate-work-timer span {
display: block;
width: 100%;
height: 100%;
background: #d7f183;
transform: scaleX(0);
transform-origin: left;
}
.corporate-work-showcase.is-playing .corporate-work-timer span { animation: corporate-case-timer var(--case-duration) linear forwards; }
.corporate-work-panels { position: relative; }
.corporate-work-panels .corporate-work-card { height: 600px; animation: corporate-case-in .62s var(--ease-out) both; }
.corporate-work-panels .corporate-work-image { height: 600px; }
.corporate-work-card[hidden] { display: none; }
.corporate-work-card.is-a-world .corporate-work-image img { object-position: center; }
.corporate-work-card.is-fukui .corporate-work-image img { object-position: center 9%; }
.corporate-work-company { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.corporate-work-company span { padding: 5px 8px; background: var(--mint); font-size: 10px; line-height: 1; }
.corporate-work-copy a > span { display: flex; flex-direction: column; gap: 2px; }
.corporate-work-copy a small { color: var(--muted); font-size: 11px; font-weight: 600; }
@keyframes corporate-case-timer { to { transform: scaleX(1); } }
@keyframes corporate-case-in {
from { opacity: .2; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.corporate-price-guide p,
.corporate-price-example-copy dd,
.corporate-price-example-copy li,
.corporate-price-terms p,
.corporate-price-base li p,
.corporate-price-variables p,
.corporate-price-result p,
.corporate-price-extra > ul p,
.corporate-price-extra footer > p span { font-size: 14px; }
.corporate-price-example-copy dt,
.corporate-price-terms small,
.corporate-price-base header small,
.corporate-price-variables header small,
.corporate-price-base li small,
.corporate-price-result small { font-size: 12px; }
.corporate-process-list { counter-reset: process-step; }
.corporate-process-list li {
position: relative;
overflow: hidden;
}
.corporate-process-list li::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
background: var(--green);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform .75s var(--ease-out) calc(var(--item-index) * 70ms);
}
.corporate-process-list li.is-visible::after { transform: scaleX(1); }
.corporate-process-list h3 { font-size: 23px; }
.corporate-process-link { font-size: 14px; }
.corporate-after-grid small { font-size: 12px; }
.corporate-after-grid em { font-size: 13px; }
@media (max-width: 1160px) {
.corporate-hero { grid-template-columns: 1fr; }
.corporate-work-card { grid-template-columns: 1fr; }
.corporate-work-panels .corporate-work-card { height: auto; }
.corporate-work-panels .corporate-work-image { height: 520px; }
}
@media (max-width: 900px) {
.corporate-work-switcher { grid-template-columns: 1fr; }
.corporate-work-controls { position: absolute; right: 12px; bottom: -72px; z-index: 4; width: 188px; min-height: 60px; border-radius: 999px; background: var(--green-deep); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
}
@media (min-width: 761px) {
.corporate-work-copy h3 span { white-space: nowrap; }
}
@media (max-width: 760px) {
.corporate-hero { padding-bottom: 76px; }
.corporate-hero::after { right: 20px; bottom: 49px; width: 62vw; height: 10px; }
.corporate-hero-lead { font-size: 15px; line-height: 1.9; }
.corporate-hero-facts strong { font-size: 14px; }
.corporate-hero-facts small { font-size: 12px; }
.corporate-hero-visual { width: calc(100% + 8px); margin-left: -4px; padding: 0 8px 28px 0; transform: none; }
.corporate-hero-project img { aspect-ratio: 1.1; }
.corporate-hero-project figcaption { right: 0; min-width: 75%; padding: 13px 15px; }
.corporate-hero-project figcaption small { font-size: 11px; }
.corporate-hero-project figcaption strong { font-size: 13px; }
.corporate-heading > p,
.corporate-concern-grid p,
.corporate-approach-list p,
.corporate-role-main article p,
.corporate-role-client li p,
.corporate-outcomes-plan-lead,
.corporate-outcome-card > p,
.corporate-sitemap-guide-copy > p,
.corporate-work-copy > p:not(.corporate-work-company),
.corporate-price-example-copy > p,
.corporate-price-estimate-head > p,
.corporate-price-extra > header > p,
.corporate-process-list p,
.corporate-after-grid p { font-size: 15px; }
.corporate-concern-note strong,
.corporate-role-note strong { font-size: 15px; }
.corporate-concern-note span,
.corporate-role-note span { font-size: 14px; }
.corporate-role-main article { min-height: 0; }
.corporate-role-main h4,
.corporate-role-client h4 { font-size: 17px; }
.corporate-role-board::after { display: none; }
.corporate-role-client { position: relative; padding-top: 72px; }
.corporate-role-client::before {
position: absolute;
top: 16px;
left: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
aspect-ratio: 1;
border: 6px solid var(--mint);
border-radius: 50%;
background: #d7f183;
color: var(--green-deep);
content: "↓";
font-size: 16px;
font-weight: 900;
transform: translateX(-50%);
}
.corporate-sitemap-home p,
.corporate-sitemap-exit p,
.corporate-sitemap-group header p,
.corporate-sitemap-group article p,
.corporate-sitemap-guide-copy > ul small,
.corporate-sitemap-guide-copy footer small { font-size: 14px; }
.corporate-work-copy { padding: 32px 23px 38px; }
.corporate-work-copy h3 { font-size: 31px; }
.corporate-work-tabs button { min-height: 88px; padding: 14px 11px 17px; text-align: center; }
.corporate-work-tabs button::after { right: 11px; left: 11px; }
.corporate-work-tabs small { font-size: 9px; line-height: 1.5; }
.corporate-work-tabs strong { margin-top: 6px; font-size: 12px; }
.corporate-work-controls { right: 16px; bottom: -66px; width: 174px; grid-template-columns: 48px 62px 48px; min-height: 56px; }
.corporate-work-controls button { width: 38px; }
.corporate-work-image,
.corporate-work-panels .corporate-work-image { height: 315px; min-height: 315px; }
.corporate-work-card.is-fukui .corporate-work-image img { object-position: center top; }
.corporate-work-company { padding-right: 178px; }
.corporate-work-company span { font-size: 9px; }
.corporate-work-copy a small { font-size: 11px; }
.corporate-price-guide p,
.corporate-price-example-copy dd,
.corporate-price-example-copy li,
.corporate-price-terms p,
.corporate-price-base li p,
.corporate-price-variables p,
.corporate-price-result p,
.corporate-price-extra > ul p,
.corporate-price-extra footer > p span { font-size: 14px; }
.corporate-process-list h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
.corporate-hero-project img,
.corporate-process-list li::after { transition: none; }
.corporate-work-showcase.is-playing .corporate-work-timer span,
.corporate-work-panels .corporate-work-card { animation: none; }
}.production-page {
--production-lime: #dff47a;
--production-yellow: #e8c85a;
--green: #0c6a4b;
--green-deep: #043b2c;
--green-dark: #064832;
--mint: #e3efdf;
overflow: clip;
}
.production-page *,
.production-page *::before,
.production-page *::after { min-width: 0; }
.production-page .corporate-heading h2 span { display: block; }
.production-page .corporate-section { scroll-margin-top: 128px; }
.production-hero {
grid-template-columns: minmax(470px, .9fr) minmax(540px, 1.1fr);
background:
radial-gradient(circle at 74% 22%, rgba(223, 244, 122, .1), transparent 27%),
var(--green-dark);
}
.production-hero .corporate-hero-copy { max-width: 650px; }
.production-hero h1 { font-size: clamp(47px, 4.1vw, 62px); }
.production-hero h1 span:nth-child(2) { color: var(--production-lime); }
.production-hero .corporate-hero-project img { object-position: center top; }
.production-hero .corporate-phone img { object-position: 50% top; }
.production-service-site .production-hero .corporate-hero-project img {
height: auto;
aspect-ratio: 1.18;
object-position: center top;
}
@media (min-width: 901px) {
.production-service-site .production-hero .corporate-eyebrow { margin-bottom: 24px; }
.production-service-site .production-hero .corporate-hero-lead { margin-top: 24px; }
.production-service-site .production-hero .corporate-hero-actions { margin-top: 28px; }
.production-service-site .production-hero .corporate-hero-facts { margin-top: 32px; padding-top: 22px; }
}
.production-comparison {
position: relative;
background: #f7f5ee;
}
.production-comparison::before {
position: absolute;
top: 8%;
right: -90px;
width: 280px;
aspect-ratio: 1;
border: 1px solid rgba(12, 106, 75, .12);
border-radius: 50%;
content: "";
}
.production-comparison .corporate-shell { position: relative; }
.production-comparison-table {
overflow: hidden;
border: 1px solid rgba(12, 106, 75, .22);
background: var(--paper);
box-shadow: 0 28px 64px rgba(21, 53, 38, .09);
}
.production-comparison-head,
.production-comparison-row {
display: grid;
grid-template-columns: minmax(210px, .78fr) repeat(3, minmax(0, 1fr));
}
.production-comparison-head {
background: var(--green-deep);
color: var(--white);
}
.production-comparison-head span {
padding: 17px 22px;
border-left: 1px solid rgba(255, 255, 255, .14);
color: rgba(255, 255, 255, .7);
font-size: 12px;
font-weight: 900;
}
.production-comparison-head span:first-child { border-left: 0; }
.production-comparison-row {
position: relative;
border-top: 1px solid var(--line);
transition: background .28s ease, transform .28s var(--ease-out);
}
.production-comparison-row:first-of-type { border-top: 0; }
.production-comparison-row > strong,
.production-comparison-row > span {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 116px;
padding: 22px;
border-left: 1px solid var(--line);
font-size: 14px;
line-height: 1.8;
}
.production-comparison-row > strong {
border-left: 0;
color: var(--ink);
font-size: 16px;
}
.production-comparison-row > strong small {
align-self: flex-start;
margin-bottom: 8px;
padding: 5px 9px;
border-radius: 999px;
background: var(--production-lime);
color: var(--green-deep);
font-size: 11px;
}
.production-comparison-row > span { color: var(--muted); }
.production-comparison-row.is-featured {
z-index: 1;
background: linear-gradient(90deg, rgba(223, 244, 122, .2), rgba(227, 239, 223, .48));
box-shadow: inset 5px 0 0 var(--green);
}
.production-comparison-row:hover { background-color: #fff; }
.production-comparison-note {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 15px;
align-items: center;
max-width: 900px;
margin: 24px 0 0 auto;
padding: 18px 22px;
border: 1px solid rgba(12, 106, 75, .18);
background: var(--mint);
color: var(--green-deep);
font-size: 14px;
font-weight: 800;
line-height: 1.75;
}
.production-comparison-note > .icon {
width: 28px;
color: var(--green);
}
.production-journey { overflow: hidden; }
.production-journey::after {
position: absolute;
top: 12%;
right: -7%;
width: 370px;
aspect-ratio: 1;
border: 1px solid rgba(223, 244, 122, .14);
border-radius: 50%;
content: "";
animation: production-orbit 12s ease-in-out infinite alternate;
}
.production-journey .corporate-shell { position: relative; z-index: 1; }
.production-journey-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, .16);
list-style: none;
}
.production-journey-list li {
position: relative;
min-height: 305px;
padding: 28px 25px;
border-left: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .025);
transition: background .3s ease, transform .35s var(--ease-out);
}
.production-journey-list li:first-child { border-left: 0; }
.production-journey-list li:hover { z-index: 2; background: rgba(255, 255, 255, .08); transform: translateY(-7px); }
.production-journey-icon {
display: grid;
place-items: center;
width: 58px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--production-lime);
color: var(--green-deep);
}
.production-journey-icon .icon { width: 27px; }
.production-journey-list li > small {
position: absolute;
top: 30px;
right: 24px;
color: #a8dab8;
font-size: 12px;
font-weight: 900;
}
.production-journey-list h3 {
margin: 45px 0 0;
color: var(--white);
font-size: 21px;
line-height: 1.45;
}
.production-journey-list p {
margin: 13px 0 0;
color: rgba(255, 255, 255, .63);
font-size: 14px;
line-height: 1.75;
}
.production-journey-list li > i {
position: absolute;
z-index: 3;
top: 49px;
right: -17px;
display: grid;
place-items: center;
width: 34px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--green-deep);
color: var(--production-lime);
}
.production-journey-list li > i .arrow { width: 15px; }
.production-outcomes .corporate-outcomes-plan h3 {
max-width: 390px;
font-size: clamp(30px, 2.8vw, 39px);
}
.production-outcomes .corporate-outcomes-plan h3 span {
display: block;
white-space: nowrap;
}
.production-outcomes .corporate-outcomes-audiences ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.production-outcome-dialog .strength-dialog-visual.is-consult img { object-position: 52% center; }
.production-outcome-dialog .strength-dialog-visual.is-discover img { object-position: 50% center; }
.production-outcome-dialog .strength-dialog-visual.is-create img { object-position: 50% center; }
.production-outcome-dialog .strength-dialog-visual.is-finish img { object-position: 54% center; }
.production-sitemap .corporate-sitemap-flow > span { background: linear-gradient(90deg, transparent, var(--production-yellow), transparent); }
.production-sitemap .corporate-sitemap-group::before { background: var(--production-yellow); }
.production-sitemap .corporate-sitemap-home > span { background: var(--production-lime); }
.production-work .corporate-work-image img { object-position: center top; }
.production-work .corporate-work-card.is-wrap .corporate-work-image img { object-position: center 12%; }
.production-work .corporate-work-card.is-toypia .corporate-work-image img { object-position: center top; }
.production-work .corporate-work-card.is-propose .corporate-work-image img { object-position: center top; }
.production-work .corporate-work-tabs button[aria-selected="true"]::after,
.production-work .corporate-work-timer span { background: var(--production-yellow); }
.production-work .corporate-work-controls p strong { color: var(--production-lime); }
.production-price .corporate-heading { margin-bottom: 42px; }
.production-price .corporate-price-variables h4 {
font-size: 20px;
white-space: nowrap;
}
.production-price .corporate-price-estimate-head h3 span { display: block; }
.production-price .corporate-price-extra > ul {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.production-price .corporate-price-extra > ul li {
grid-template-columns: 42px minmax(0, 1fr);
min-height: 180px;
}
.production-price .corporate-price-extra > ul li + li { border-left: 0; }
.production-after .corporate-after-grid > a:first-child > span { background: var(--production-lime); }
.production-after .corporate-after-grid > a:last-child > span { background: #f1d577; } .production-recruit {
--production-lime: #dff47a;
--production-yellow: #9ed6d1;
--recruit-blue: #dcefed;
--recruit-blue-deep: #176e69;
}
.production-recruit .production-hero {
background:
radial-gradient(circle at 77% 18%, rgba(158, 214, 209, .19), transparent 28%),
radial-gradient(circle at 12% 84%, rgba(223, 244, 122, .08), transparent 25%),
var(--green-dark);
}
.production-recruit .production-hero h1 span:nth-child(2) { color: var(--production-lime); }
.production-recruit .production-hero .corporate-hero-project img {
height: auto;
aspect-ratio: 1.18;
object-position: center 9%;
}
.production-recruit .production-comparison-row.is-featured {
background: linear-gradient(90deg, rgba(220, 239, 237, .72), rgba(223, 244, 122, .14));
}
.production-recruit .production-journey-icon { background: var(--recruit-blue); }
.production-recruit .production-journey-list li > i { color: var(--production-yellow); }
.production-recruit .production-sitemap .corporate-sitemap-home > span { background: var(--recruit-blue); }
.production-recruit .production-outcome-dialog .strength-dialog-visual.is-recruit-work img { object-position: center 12%; }
.production-recruit .production-work .corporate-work-card.is-yagami .corporate-work-image img,
.production-recruit .production-work .corporate-work-card.is-arice .corporate-work-image img,
.production-recruit .production-work .corporate-work-card.is-k-create .corporate-work-image img { object-position: center top; }
.production-recruit .corporate-price-examples,
.production-ec .corporate-price-examples { grid-template-columns: minmax(0, 1fr); }
.production-recruit .corporate-price-example-copy,
.production-ec .corporate-price-example-copy {
display: grid;
grid-template-areas:
"price title"
"price body"
"price details"
"price facts";
grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
column-gap: clamp(38px, 5vw, 74px);
}
.production-recruit .corporate-price-amount,
.production-ec .corporate-price-amount { grid-area: price; align-self: start; margin: 0; }
.production-recruit .corporate-price-example-copy h3,
.production-ec .corporate-price-example-copy h3 { grid-area: title; }
.production-recruit .corporate-price-example-copy > p:not(.corporate-price-amount),
.production-ec .corporate-price-example-copy > p:not(.corporate-price-amount) { grid-area: body; }
.production-recruit .corporate-price-example-copy dl,
.production-ec .corporate-price-example-copy dl { grid-area: details; }
.production-recruit .corporate-price-example-copy ul,
.production-ec .corporate-price-example-copy ul { grid-area: facts; margin-top: 25px; padding-top: 0; }
.production-price-history {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 15px;
align-items: center;
margin: 18px 0 0;
padding: 18px 22px;
border: 1px solid rgba(12, 106, 75, .16);
background: #edf6f4;
color: var(--green-deep);
font-size: 14px;
font-weight: 750;
line-height: 1.75;
}
.production-price-history > .icon {
width: 27px;
color: var(--recruit-blue-deep, var(--green));
}
.production-recruit .production-after .corporate-after-grid > a:last-child > span { background: var(--recruit-blue); } .production-ec {
--production-lime: #dfe989;
--production-yellow: #d6ad69;
--ec-wine: #8d3448;
--ec-wine-soft: #ead8dc;
}
.production-ec .production-hero {
background:
radial-gradient(circle at 79% 17%, rgba(141, 52, 72, .34), transparent 29%),
radial-gradient(circle at 12% 88%, rgba(214, 173, 105, .13), transparent 28%),
var(--green-dark);
}
.production-ec .production-hero h1 span:nth-child(2) { color: var(--production-lime); }
.production-ec .production-hero .corporate-hero-project img {
height: auto;
aspect-ratio: 1.18;
object-position: center top;
}
.production-ec .production-journey-icon { background: #f1dfbd; }
.production-ec .production-journey-list li > i { color: var(--production-yellow); }
.production-ec .production-sitemap .corporate-sitemap-home > span { background: var(--ec-wine-soft); color: var(--ec-wine); }
.production-ec .production-sitemap .corporate-sitemap-group::before { background: var(--production-yellow); }
.production-ec .corporate-sitemap-decor i { border-color: rgba(141, 52, 72, .15); }
.production-ec .production-outcome-dialog .strength-dialog-visual.is-ec-work img { object-position: center top; }
.production-ec .production-work .corporate-work-card.is-asuka-wine .corporate-work-image img,
.production-ec .production-work .corporate-work-card.is-cocoara .corporate-work-image img,
.production-ec .production-work .corporate-work-card.is-encore-coffee .corporate-work-image img { object-position: center top; }
.production-ec .production-after .corporate-after-grid > a:last-child > span { background: #f1dfbd; }
.production-ec .production-price-history { background: #f8efe8; }
.production-ec .production-price-history > .icon { color: var(--ec-wine); }
.production-ec .corporate-price-example-copy li { background: #f5eedf; }
.production-after-note {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 22px 0 0;
padding: 17px 20px;
border: 1px solid rgba(12, 106, 75, .14);
background: rgba(255, 255, 255, .56);
color: var(--muted);
font-size: 14px;
line-height: 1.75;
}
.production-after-note > .icon { flex: 0 0 auto; width: 20px; margin-top: 2px; color: var(--green); }
@keyframes production-orbit {
to { transform: translate3d(-34px, 25px, 0) scale(1.08); }
}
@media (max-width: 1160px) {
.production-hero { grid-template-columns: minmax(420px, .95fr) minmax(460px, 1.05fr); }
.production-hero h1 { font-size: clamp(43px, 4.5vw, 54px); }
.production-comparison-head,
.production-comparison-row { grid-template-columns: minmax(190px, .82fr) repeat(3, minmax(0, 1fr)); }
.production-comparison-row > strong,
.production-comparison-row > span { padding: 19px 17px; }
.production-journey-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.production-journey-list li:nth-child(4) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.production-journey-list li:nth-child(5) { border-top: 1px solid rgba(255, 255, 255, .14); }
.production-journey-list li:nth-child(3) > i { display: none; }
.production-price .corporate-price-extra > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.production-hero { grid-template-columns: 1fr; }
.production-hero .corporate-hero-copy { max-width: 760px; }
.production-hero h1 { font-size: clamp(46px, 7vw, 64px); }
.production-ec.production-page .production-hero { gap: 0; }
.production-ec .production-hero .corporate-hero-copy { display: contents; }
.production-ec .production-hero .corporate-eyebrow { order: 1; }
.production-ec .production-hero h1 { order: 2; }
.production-ec .production-hero .corporate-hero-lead { order: 3; }
.production-ec .production-hero .corporate-hero-visual { order: 4; margin-top: 40px; }
.production-ec .production-hero .corporate-hero-actions { order: 5; margin-top: 30px; }
.production-ec .production-hero .corporate-hero-facts { order: 6; margin-top: 28px; }
.production-comparison-head { display: none; }
.production-comparison-table { display: grid; gap: 14px; border: 0; background: transparent; box-shadow: none; }
.production-comparison-row {
grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
overflow: hidden;
border: 1px solid var(--line);
background: var(--paper);
box-shadow: 0 14px 34px rgba(21, 53, 38, .06);
}
.production-comparison-row > strong { grid-row: 1 / 4; min-height: 100%; border-right: 1px solid var(--line); }
.production-comparison-row > span {
display: grid;
grid-template-columns: 118px minmax(0, 1fr);
align-items: center;
min-height: 74px;
padding: 15px 18px;
border-left: 0;
border-top: 1px solid var(--line);
}
.production-comparison-row > span:first-of-type { border-top: 0; }
.production-comparison-row > span::before { color: var(--green); content: attr(data-label); font-size: 11px; font-weight: 900; }
.production-journey-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.production-journey-list li:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .14); border-left: 0; }
.production-journey-list li:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, .14); }
.production-journey-list li:nth-child(2) > i,
.production-journey-list li:nth-child(4) > i { display: none; }
.production-price .corporate-price-extra > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.production-recruit .corporate-price-example-copy,
.production-ec .corporate-price-example-copy {
grid-template-areas:
"price"
"title"
"body"
"details"
"facts";
grid-template-columns: 1fr;
}
.production-recruit .corporate-price-amount,
.production-ec .corporate-price-amount { margin-bottom: 28px; }
}
@media (max-width: 760px) {
.production-page .corporate-section { scroll-margin-top: 92px; }
.production-page .corporate-heading h2 span { display: inline; }
.production-page .corporate-heading h2 span + span::before { content: ""; display: block; }
.production-hero { padding-top: 122px; }
.production-hero h1 { font-size: clamp(38px, 11.2vw, 52px); line-height: 1.28; }
.production-hero h1 span { white-space: normal; }
.production-hero .corporate-hero-lead { font-size: 16px; line-height: 1.9; }
.production-hero .corporate-hero-actions { align-items: stretch; }
.production-hero .corporate-text-link { justify-content: space-between; min-height: 52px; }
.production-comparison::before { width: 180px; }
.production-comparison-row { display: block; }
.production-comparison-row > strong { min-height: 0; padding: 22px; border-right: 0; border-bottom: 1px solid var(--line); }
.production-comparison-row > span { grid-template-columns: 104px minmax(0, 1fr); min-height: 0; padding: 15px 18px; font-size: 14px; line-height: 1.7; }
.production-comparison-note { grid-template-columns: 34px minmax(0, 1fr); padding: 17px; font-size: 13px; }
.production-comparison-note > .icon { width: 25px; }
.production-journey-list { display: block; border: 0; }
.production-journey-list li {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 0 18px;
min-height: 0;
padding: 22px;
border: 1px solid rgba(255, 255, 255, .14) !important;
}
.production-journey-list li + li { border-top: 0 !important; }
.production-journey-list li:hover { transform: none; }
.production-journey-icon { grid-row: 1 / 4; }
.production-journey-list li > small { position: static; grid-column: 2; grid-row: 1; }
.production-journey-list h3 { grid-column: 2; grid-row: 2; margin: 5px 0 0; font-size: 20px; }
.production-journey-list p { grid-column: 2; grid-row: 3; margin-top: 7px; }
.production-journey-list li > i { top: auto; right: auto; bottom: -17px; left: 34px; display: grid !important; transform: rotate(90deg); }
.production-journey-list li:last-child > i { display: none !important; }
.production-outcomes .corporate-outcomes-plan h3 { font-size: 29px; line-height: 1.5; }
.production-outcomes .corporate-outcomes-audiences ul { grid-template-columns: 1fr; }
.production-work .corporate-work-panels .corporate-work-card,
.production-work .corporate-work-panels .corporate-work-image { height: auto; }
.production-work .corporate-work-tabs {
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.production-work .corporate-work-tabs::-webkit-scrollbar { display: none; }
.production-work .corporate-work-tabs button { flex: 0 0 164px; }
.production-work .corporate-work-tabs small,
.production-work .corporate-work-tabs strong { white-space: nowrap; }
.production-work .corporate-work-image { aspect-ratio: 1.35; }
.production-work .corporate-work-copy h3 span { display: inline; }
.production-work .corporate-work-copy h3 span + span::before { content: ""; display: block; }
.production-page .corporate-work-company { padding-right: 0; }
.production-page .corporate-work-company span { flex: 0 0 auto; white-space: nowrap; }
.production-price .corporate-price-extra > ul { grid-template-columns: 1fr; }
.production-price .corporate-price-extra > ul li { min-height: 0; }
.production-price .corporate-price-variables h4 { white-space: normal; }
.production-price-history { grid-template-columns: 34px minmax(0, 1fr); padding: 17px; font-size: 13px; }
.production-price-history > .icon { width: 24px; }
.production-recruit.production-page .production-hero { gap: 0; padding-top: 108px; }
.production-recruit .production-hero .corporate-hero-copy { display: contents; }
.production-recruit .production-hero .corporate-eyebrow,
.production-recruit .production-hero h1,
.production-recruit .production-hero .corporate-hero-lead,
.production-recruit .production-hero .corporate-hero-actions,
.production-recruit .production-hero .corporate-hero-facts { position: relative; z-index: 2; }
.production-recruit .production-hero .corporate-eyebrow { order: 1; margin-bottom: 25px; }
.production-recruit .production-hero h1 { order: 2; }
.production-recruit .production-hero .corporate-hero-lead { order: 3; max-width: 34em; margin-top: 23px; }
.production-recruit .production-hero .corporate-hero-actions { order: 4; margin-top: 27px; }
.production-recruit .production-hero .corporate-hero-visual { order: 5; margin-top: 43px; }
.production-recruit .production-hero .corporate-hero-project img { aspect-ratio: 1.1; }
.production-recruit .production-hero .corporate-hero-facts { order: 6; margin-top: 27px; }
.production-recruit .production-hero .corporate-hero-facts li,
.production-recruit .production-hero .corporate-hero-facts li:first-child { min-height: 57px; padding-block: 7px; }
.production-ec.production-page .production-hero { gap: 0; padding-top: 108px; }
.production-ec .production-hero .corporate-hero-copy { display: contents; }
.production-ec .production-hero .corporate-eyebrow,
.production-ec .production-hero h1,
.production-ec .production-hero .corporate-hero-lead,
.production-ec .production-hero .corporate-hero-actions,
.production-ec .production-hero .corporate-hero-facts { position: relative; z-index: 2; }
.production-ec .production-hero .corporate-eyebrow { order: 1; margin-bottom: 25px; }
.production-ec .production-hero h1 { order: 2; }
.production-ec .production-hero .corporate-hero-lead { order: 3; max-width: 34em; margin-top: 23px; }
.production-ec .production-hero .corporate-hero-visual { order: 4; margin-top: 31px; }
.production-ec .production-hero .corporate-hero-project img { aspect-ratio: 1.2; }
.production-ec .production-hero .corporate-hero-actions { order: 5; margin-top: 27px; }
.production-ec .production-hero .corporate-hero-facts { order: 6; margin-top: 25px; }
.production-ec .production-hero .corporate-hero-facts li,
.production-ec .production-hero .corporate-hero-facts li:first-child { min-height: 57px; padding-block: 7px; }
}
@media (max-width: 390px) {
.production-hero h1 { font-size: clamp(36px, 10.7vw, 42px); }
.production-recruit .production-hero h1 { font-size: clamp(34px, 10.2vw, 40px); line-height: 1.3; }
.production-ec .production-hero h1 { font-size: clamp(29px, 8.7vw, 34px); line-height: 1.38; }
.production-comparison-row > span { grid-template-columns: 1fr; gap: 5px; }
.production-journey-list li { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding: 19px 17px; }
.production-journey-icon { width: 52px; }
.production-journey-list li > i { left: 26px; }
.production-work .corporate-work-copy h3 { font-size: 27px; }
}
@media (max-width: 340px) {
.production-hero h1 { font-size: 34px; }
.production-recruit .production-hero h1 { font-size: 32px; }
.production-ec .production-hero h1 { font-size: 29px; }
.production-hero .corporate-eyebrow { flex-direction: column; gap: 8px; align-items: flex-start; }
.production-hero .corporate-eyebrow span { padding-inline: 7px; }
.production-journey-list li { grid-template-columns: 46px minmax(0, 1fr); }
.production-journey-icon { width: 46px; }
.production-outcomes .corporate-outcomes-plan h3 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
.production-journey::after,
.production-journey-list li { animation: none !important; transition: none !important; }
}.services-hero-copy,
.services-hero-works,
.detail-hero-copy,
.detail-hero-visual {
min-width: 0;
}
.services-hero h1 {
max-width: 730px;
font-size: clamp(48px, 4.25vw, 64px);
line-height: 1.28;
text-wrap: balance;
}
.services-hero h1 span {
display: inline;
}
.detail-hero h1 {
font-size: clamp(46px, 4.3vw, 64px);
letter-spacing: -.05em;
line-height: 1.28;
}
.detail-hero h1 span {
width: max-content;
max-width: 100%;
white-space: nowrap;
}
@media (max-width: 760px) {
.services-hero h1,
.detail-hero h1,
.corporate-hero h1 {
font-size: clamp(32px, 9.2vw, 38px);
line-height: 1.34;
}
}.services-hero { grid-template-columns:minmax(500px,.93fr) minmax(570px,1.07fr); }
.services-hero h1 span { display:block; }
.services-hero-facts small { font-size:11px; line-height:1.55; }
.services-card-copy header > p { font-size:15px; }
.services-card-copy > ul li { font-size:13px; }
.services-card-copy footer > div small { font-size:11px; }
.services-included-grid p { font-size:14px; }
.services-start li p { font-size:13px; }
.services-faq-list details > div p { font-size:13px; } .corporate-hero-facts strong { font-size:13px; }
.corporate-hero-facts small { font-size:10px; }
.corporate-concern-grid p,
.corporate-approach-list p,
.corporate-role-client li p,
.corporate-outcome-grid p,
.corporate-work-copy > p:not(.corporate-work-company),
.corporate-after-grid p,
.corporate-faq-list details > div p { font-size:13px; }
.corporate-sitemap article p { font-size:11px; }
.corporate-process-list p { font-size:12px; }
.corporate-sitemap-note p { font-size:12px; }
.corporate-work-copy > ul li { font-size:10px; } .detail-heading > p { font-size:14px; line-height:1.95; }
.detail-problem-grid p,
.detail-choice-table [role="row"] > *,
.detail-choice-note,
.detail-plan-grid p,
.detail-common-range p,
.detail-extra li,
.detail-faq-list details > div p,
.detail-contact p:not(.section-label) { font-size:13px; }
.detail-choice-table strong { font-size:16px !important; }
.detail-path-list p,
.detail-sitemap p { font-size:12px; }
.detail-sitemap-note p { font-size:11px; }
.detail-work-copy > p { font-size:14px; }
.detail-price-card dt,
.detail-price-card dd,
.detail-price-card > em,
.detail-price-scope li { font-size:12px; }
.detail-faq-list summary strong,
.detail-related a { font-size:14px; } .detail-plan-layout {
grid-template-columns:minmax(400px,.82fr) minmax(0,1.18fr);
gap:72px;
align-items:start;
}
.detail-plan-layout .detail-heading {
display:block;
top:120px;
}
.detail-plan-layout .detail-heading h2 {
font-size:clamp(40px,3.4vw,48px);
line-height:1.42;
}
.detail-plan-layout .detail-heading > p {
max-width:440px;
margin-top:30px;
color:rgba(255,255,255,.78);
}
.detail-plan-layout .section-label { color:#bce2c7; }
.detail-plan-content { min-width:0; }
.detail-plan-grid {
gap:12px;
border:0;
}
.detail-plan-grid article {
min-height:252px;
padding:34px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.045);
}
.detail-plan-grid article > span {
min-height:42px;
color:#bce2c7;
}
.detail-plan-grid article > span .icon { width:34px; }
.detail-plan-grid article > span small {
color:rgba(255,255,255,.5);
font-size:10px;
}
.detail-plan-grid h3 {
margin:36px 0 14px;
font-size:23px;
}
.detail-plan-grid p {
color:rgba(255,255,255,.76);
line-height:1.9;
}
.detail-plan-flow {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
margin:18px 0 0;
padding:0;
overflow:hidden;
border:1px solid rgba(255,255,255,.18);
background:var(--detail-accent-soft);
color:var(--detail-dark);
list-style:none;
}
.detail-plan-flow li {
position:relative;
display:grid;
align-content:center;
min-height:118px;
padding:22px 26px;
}
.detail-plan-flow li + li { border-left:1px solid rgba(5,61,41,.16); }
.detail-plan-flow li:not(:last-child):after {
position:absolute;
z-index:2;
top:50%;
right:-13px;
display:grid;
place-items:center;
width:26px;
height:26px;
border-radius:50%;
background:var(--detail-dark);
color:#fff;
content:"\2192";
font-size:12px;
transform:translateY(-50%);
}
.detail-plan-flow small {
color:var(--detail-accent);
font-size:9px;
font-weight:900;
}
.detail-plan-flow strong {
margin-top:3px;
font-size:17px;
}
.detail-plan-flow span {
margin-top:5px;
color:var(--muted);
font-size:11px;
font-weight:600;
}
@media (max-width:1050px) {
.detail-heading {
grid-template-columns:1fr;
gap:22px;
align-items:start;
}
.detail-heading > p { max-width:760px; }
.detail-plan-layout { grid-template-columns:1fr; gap:44px; }
.detail-plan-layout .detail-heading {
position:static;
max-width:760px;
}
.detail-plan-layout .detail-heading > p { max-width:680px; }
.detail-contact-inner { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:1120px) {
.services-hero { grid-template-columns:1fr; }
}
@media (max-width:760px) {
.services-card-copy header > p,
.services-card-copy > ul li,
.services-included-grid p,
.corporate-concern-grid p,
.corporate-approach-list p,
.corporate-role-client li p,
.corporate-outcome-grid p,
.corporate-work-copy > p:not(.corporate-work-company),
.corporate-after-grid p,
.detail-heading > p,
.detail-problem-grid p,
.detail-plan-grid p,
.detail-work-copy > p,
.detail-faq-list details > div p,
.detail-contact p:not(.section-label) { font-size:14px; }
.detail-plan-layout .detail-heading h2 { font-size:32px; line-height:1.48; }
.detail-plan-grid { gap:10px; }
.detail-plan-grid article { min-height:0; padding:28px 24px; }
.detail-plan-grid h3 { margin-top:28px; font-size:21px; }
.detail-plan-flow li { min-height:104px; padding:17px 12px; }
.detail-plan-flow strong { font-size:15px; }
.detail-plan-flow span { font-size:10px; line-height:1.55; }
.detail-plan-flow li:not(:last-child):after { right:-11px; width:22px; height:22px; font-size:10px; }
}: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;
}
}