/* ==========================================================================
   What I Do Page Sections - 2026-07-06
   Editor-managed service content with reusable homepage icons and anchor targets.
   ========================================================================== */
.cm-what-intro {
	width: min(900px, calc(100% - 2rem));
	margin: 0 auto clamp(2rem, 5vw, 4rem);
	color: var(--cm-text);
	font-size: clamp(1.08rem, 1.5vw, 1.28rem);
	line-height: 1.65;
}

.cm-what-services {
	width: min(1180px, calc(100% - 2rem));
	margin: 0 auto;
}

.cm-what-service {
	position: relative;
	box-sizing: border-box;
	margin-block: clamp(2.25rem, 5vw, 4.5rem);
	padding: clamp(2rem, 4.8vw, 4rem);
	border: 1px solid rgba(7, 50, 54, 0.08);
	border-radius: 8px;
	box-shadow: var(--cm-shadow);
	overflow: hidden;
	transition: box-shadow 180ms ease;
}

.cm-what-service:hover {
	box-shadow: var(--cm-strong-shadow);
}

.cm-what-service::before {
	content: "";
	position: absolute;
	inset: auto -4rem -5rem auto;
	width: clamp(170px, 24vw, 310px);
	aspect-ratio: 1;
	border-radius: 44% 56% 52% 48%;
	background: rgba(251, 250, 247, 0.34);
	pointer-events: none;
	z-index: 0;
}

.cm-what-service::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.cm-what-service:nth-of-type(1)::before {
    inset: auto 23rem -4.5rem auto;
    width: clamp(190px, 80vw, 600px);
    border-radius: 62% 65% 48% 52%;
    background: rgba(7, 50, 54, 0.04);
}

.cm-what-service:nth-of-type(2)::before {
	inset: -4rem auto auto -5rem;
	width: clamp(150px, 82vw, 800px);
	border-radius: 38% 62% 54% 46%;
	background: rgba(251, 250, 247, 0.18);
}

.cm-what-service:nth-of-type(3)::before {
	inset: auto -7rem -7rem auto;
	width: clamp(240px, 30vw, 430px);
	border-radius: 50% 50% 42% 58%;
	background: rgba(186, 212, 207, 0.13);
}

.cm-what-service:nth-of-type(3)::after {
	right: clamp(1rem, 5vw, 4rem);
	top: clamp(1rem, 4vw, 3rem);
	width: clamp(90px, 14vw, 170px);
	aspect-ratio: 1 / 1.7;
	background: var(--cm-soft-white);
	opacity: 0.08;
	mask: url("../../images/branding/seahorse.svg") center / contain no-repeat;
	-webkit-mask: url("../../images/branding/seahorse.svg") center / contain no-repeat;
}

.cm-what-service:nth-of-type(4)::before {
    inset: -7rem 22rem auto auto;
    width: clamp(169px, 68vw, 600px);
    border-radius: 46% 54% 65% 35%;
    background: rgba(7, 50, 54, 0.04);
}

.cm-what-service:nth-of-type(5)::before {
	inset: auto auto -6rem -4rem;
	width: clamp(210px, 28vw, 380px);
	border-radius: 57% 43% 36% 64%;
	background: rgba(251, 250, 247, 0.44);
}

.cm-what-service:nth-of-type(5)::after {
	right: clamp(0.5rem, 4vw, 3rem);
	bottom: clamp(1rem, 5vw, 3.5rem);
	width: clamp(70px, 10vw, 130px);
	aspect-ratio: 1 / 1.7;
	background: var(--cm-dark-teal);
	opacity: 0.08;
	transform: rotate(-10deg);
	mask: url("../../images/branding/seahorse.svg") center / contain no-repeat;
	-webkit-mask: url("../../images/branding/seahorse.svg") center / contain no-repeat;
}

.cm-what-service:nth-of-type(6)::before {
	inset: -3rem auto auto 42%;
	width: clamp(130px, 16vw, 230px);
	border-radius: 40% 60% 44% 56%;
	background: rgba(7, 50, 54, 0.06);
}

.cm-what-service:nth-of-type(7)::before {
	inset: auto auto 33rem -5rem;
	width: clamp(250px, 64vw, 920px);
	border-radius: 44% 56% 62% 38%;
	background: rgba(206, 179, 171, 0.16);
}

.cm-what-service:nth-of-type(7)::after {
	right: clamp(1rem, 6vw, 5rem);
	bottom: clamp(1rem, 4vw, 3rem);
	width: clamp(110px, 16vw, 190px);
	aspect-ratio: 1 / 1.7;
	background: var(--cm-soft-white);
	opacity: 0.07;
	transform: rotate(8deg);
	mask: url("../../images/branding/seahorse.svg") center / contain no-repeat;
	-webkit-mask: url("../../images/branding/seahorse.svg") center / contain no-repeat;
}

.cm-what-service:nth-child(odd) {
	background: var(--cm-soft-white);
}

.cm-what-service:nth-child(even) {
	background: var(--cm-off-white);
}

.cm-what-service.is-style-teal {
	background: linear-gradient(135deg, var(--cm-dark-teal), var(--cm-teal));
	color: var(--cm-soft-white);
}

.cm-what-service.is-style-teal h2,
.cm-what-service.is-style-teal p,
.cm-what-service.is-style-teal li {
	color: var(--cm-soft-white);
}

.cm-what-service.is-style-ash {
	background: linear-gradient(135deg, rgba(186, 212, 207, 0.95), var(--cm-soft-white));
}

.cm-what-service.is-style-almond {
	background: linear-gradient(135deg, rgba(206, 179, 171, 0.9), var(--cm-off-white));
}

.cm-what-service.is-style-silver {
	background: linear-gradient(135deg, rgba(196, 194, 193, 0.9), var(--cm-soft-white));
}

.cm-what-service .wp-block-columns {
	position: relative;
	z-index: 1;
	align-items: stretch !important;
	gap: clamp(2rem, 5vw, 4.75rem);
	margin-bottom: 0;
}

.cm-what-service > * {
	position: relative;
	z-index: 1;
}

.cm-what-heading {
	position: static;
	display: block;
	margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
	font-size: clamp(2.15rem, 4vw, 4.35rem);
	line-height: 1.05;
}

.cm-what-heading .cm-help-icon {
	position: absolute;
	display: block;
	width: clamp(13rem, 26vw, 24rem);
	aspect-ratio: 1;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}

.cm-what-heading .cm-help-icon::before {
	position: absolute;
	inset: auto;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	font-family: "Material Symbols Rounded";
	font-size: clamp(11rem, 36vw, 36rem);
	font-style: normal;
	font-weight: 200;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "liga";
	font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
	color: var(--cm-dark-teal);
	opacity: 0.055;
}

.cm-what-service.is-style-teal .cm-help-icon::before {
	color: var(--cm-soft-white);
	opacity: 0.07;
}

.cm-what-service:nth-of-type(1) .cm-help-icon {
	right: clamp(1rem, 6vw, 5rem);
	top: clamp(0.5rem, 3vw, 2.5rem);
}

.cm-what-service:nth-of-type(2) .cm-help-icon {
	left: clamp(1rem, 5vw, 4rem);
	bottom: clamp(0.75rem, 3vw, 2rem);
	transform: rotate(-8deg);
}

.cm-what-service:nth-of-type(3) .cm-help-icon {
    right: clamp(1.5rem, 75vw, 45rem);
    top: 73%;
}

.cm-what-service:nth-of-type(4) .cm-help-icon {
	right: clamp(1rem, 5vw, 4rem);
	bottom: clamp(0.5rem, 3vw, 2rem);
}

.cm-what-service:nth-of-type(5) .cm-help-icon {
	left: clamp(0.5rem, 4vw, 3rem);
	top: clamp(0.75rem, 3vw, 2.5rem);
	transform: rotate(10deg);
}

.cm-what-service:nth-of-type(6) .cm-help-icon {
	right: clamp(1rem, 5vw, 4rem);
	top: clamp(0.5rem, 2vw, 1.5rem);
	transform: rotate(-5deg);
}

.cm-what-service:nth-of-type(7) .cm-help-icon {
	left: clamp(1rem, 5vw, 4rem);
	bottom: clamp(0.75rem, 4vw, 3rem);
	transform: rotate(8deg);
}

.cm-what-service p {
	max-width: 66ch;
	line-height: 1.65;
}

.cm-what-service .cm-what-lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.cm-what-service ul {
	margin: 2rem 0 0 0;
	padding: clamp(1.35rem, 2.5vw, 2rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.35rem, 2.5vw, 2rem) clamp(2rem, 3.6vw, 3.1rem);
	background: rgba(251, 250, 247, 0.62);
	border: 1px solid rgba(7, 50, 54, 0.08);
	border-radius: 8px;
}

.cm-what-service.is-style-teal ul {
	background: rgba(251, 250, 247, 0.11);
	border-color: rgba(251, 250, 247, 0.22);
}

.cm-what-service li {
	margin: 0.68rem 0;
	line-height: 1.52;
}

.cm-work-together-block {
	width: min(1180px, calc(100% - 2rem));
	margin: clamp(2rem, 6vw, 5rem) auto;
}

.cm-work-together-block .cm-cta-strip {
	width: 100%;
	margin: 0;
}