@font-face {
font-family: 'A2Z';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/fonts/a2z/a2z-300-light.woff2') format('woff2');
}
@font-face {
font-family: 'A2Z';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/fonts/a2z/a2z-400-regular.woff2') format('woff2');
}
@font-face {
font-family: 'A2Z';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/fonts/a2z/a2z-500-medium.woff2') format('woff2');
}
@font-face {
font-family: 'A2Z';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/fonts/a2z/a2z-600-semibold.woff2') format('woff2');
}
@font-face {
font-family: 'A2Z';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/fonts/a2z/a2z-700-bold.woff2') format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url('https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url('https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/fonts/dm-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--cc-teal: #094d5e;
--cc-teal-dark: #073e4b;
--cc-drop: #66c1c0;
--cc-mint: #66c1c0;
--cc-mist: #cfe6e6;
--cc-ink: #191c1e;
--cc-body: #3d4548;
--cc-muted: #6d777a;
--cc-line: #e4e6e7;
--cc-bg: #ffffff;
--cc-bg-alt: #f6f9f9;
--cc-glass: rgba(255, 255, 255, 0.46);
--cc-glass-solid: rgba(255, 255, 255, 0.92);
--cc-font: 'A2Z', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--cc-fs-body: 1rem;
--cc-fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
--cc-fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
--cc-fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
--cc-fs-h4: 1.25rem;
--cc-fs-h5: 1.125rem;
--cc-fs-h6: 1rem;
--cc-fs-section: clamp(2rem, 1.4rem + 2.4vw, 3rem);
--cc-fs-section-lead: 1.0625rem;
--cc-lh-body: 1.7;
--cc-lh-heading: 1.18;
--cc-lh-heading-sm: 1.4;
--cc-space-xs: 0.5rem;
--cc-space-sm: 1rem;
--cc-space-md: 2rem;
--cc-space-lg: 3rem;
--cc-space-xl: 3rem;
--cc-container: 1360px;
--cc-gutter: 1.5rem;
--cc-radius: 12px;
--cc-radius-pill: 999px;
--cc-header-h: 96px;
--cc-transition: 0.25s ease;
}
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: clip;
}
body {
background: var(--cc-bg);
color: var(--cc-body);
font-family: var(--cc-font);
font-size: var(--cc-fs-body);
line-height: var(--cc-lh-body);
-webkit-font-smoothing: antialiased;
}
img, picture, svg, video {
display: block;
max-width: 100%;
height: auto;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cc-teal); text-underline-offset: 2px; }
h1, h2, h3, h4, h5, h6 {
color: var(--cc-ink);
font-family: var(--cc-font);
font-weight: 500;
line-height: var(--cc-lh-heading);
letter-spacing: -0.01em;
text-transform: capitalize;
}
h3, h4, h5, h6 { line-height: var(--cc-lh-heading-sm); }
h1 { font-size: var(--cc-fs-h1); }
h2 { font-size: var(--cc-fs-h2); }
h3 { font-size: var(--cc-fs-h3); }
h4 { font-size: var(--cc-fs-h4); }
h5 { font-size: var(--cc-fs-h5); }
h6 { font-size: var(--cc-fs-h6); }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
.container {
width: min(100% - (var(--cc-gutter) * 2), var(--cc-container));
margin-inline: auto;
}
.site-main { min-height: 40vh; }
body:not(.has-hero) .site-main { padding-top: var(--cc-header-h); }
.layout--with-sidebar {
display: grid;
gap: var(--cc-space-lg);
padding-block: var(--cc-space-lg);
}
@media (min-width: 900px) {
.layout--with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}
.entry-content > * + * { margin-top: var(--cc-space-sm); }
.entry-content h2, .entry-content h3 { margin-top: var(--cc-space-md); }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
top: 1rem; left: 1rem;
z-index: 9999;
width: auto; height: auto;
clip: auto; margin: 0;
padding: 0.75rem 1.25rem;
background: var(--cc-teal);
color: #fff;
border-radius: var(--cc-radius);
text-decoration: none;
}
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid var(--cc-drop);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.95em 1.9em;
border: 1px solid transparent;
border-radius: var(--cc-radius-pill);
background: var(--cc-teal);
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background var(--cc-transition), transform var(--cc-transition);
}
.btn:hover,
.btn:focus-visible { background: var(--cc-teal-dark); color: #fff; }
.btn--block { width: 100%; }
.site-logo { margin: 0; font-size: inherit; line-height: 1; }
.site-logo a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--cc-ink);
}
.site-logo img { max-height: 34px; width: auto; }
.site-logo__text {
font-size: 1.35rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
}
.site-header {
position: absolute;
inset: 0 0 auto 0;
z-index: 100;
padding-top: 18px;
}
.site-header--sticky { position: fixed; }
.site-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cc-space-md);
min-height: 60px;
padding: 6px 6px 6px 30px;
border-radius: var(--cc-radius-pill);
background: #fff;
box-shadow: 0 4px 24px rgba(9, 77, 94, 0.08);
transition: box-shadow var(--cc-transition);
}
.site-header.is-stuck .site-header__bar {
box-shadow: 0 6px 30px rgba(9, 77, 94, 0.14);
}
.site-logo__img--light { display: none; }
.section--dark {
background: linear-gradient(120deg, #073e4b 0%, #094d5e 55%, #66c1c0 100%);
color: #fff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }
.site-header__actions {
display: flex;
align-items: center;
gap: var(--cc-space-sm);
}
.site-nav__list {
display: flex;
align-items: center;
gap: 1.75rem;
}
.site-nav__list > li { position: relative; }
.site-nav__list a {
display: inline-block;
padding: 0.5rem 0;
color: var(--cc-ink);
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition: color var(--cc-transition);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--cc-teal); }
.site-nav__list > .has-submenu {
display: flex;
align-items: center;
gap: 0.3rem;
}
.submenu-toggle {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.1rem;
background: none;
border: 0;
color: var(--cc-ink);
cursor: pointer;
transition: transform var(--cc-transition);
}
.submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.submenu {
position: absolute;
top: 100%;
left: -1rem;
z-index: 10;
min-width: 292px;
margin-top: 0.75rem;
padding: 0.6rem;
border-radius: var(--cc-radius);
background: #fff;
box-shadow: 0 14px 40px rgba(9, 77, 94, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--cc-transition), transform var(--cc-transition), visibility var(--cc-transition);
}
.site-nav__list > li:hover > .submenu,
.site-nav__list > li:focus-within > .submenu,
.site-nav__list > li.is-open > .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.submenu a {
display: block;
padding: 0.5rem 0.85rem;
border-radius: 8px;
font-size: 0.875rem;
line-height: 1.4;
}
.submenu a:hover { background: var(--cc-bg-alt); }
.submenu a:not(.btn) {
position: relative;
padding-left: 1.85rem;
padding-block: 0.6rem;
}
.submenu a:not(.btn)::before {
content: '';
position: absolute;
top: 50%;
left: 0.9rem;
width: 5px;
height: 5px;
margin-top: -2.5px;
border-radius: 50%;
background: var(--cc-mint);
}
.nav-toggle,
.nav-close {
display: none;
padding: 0.6rem;
background: none;
border: 0;
color: var(--cc-ink);
cursor: pointer;
}
.nav-toggle__bars {
display: grid;
gap: 5px;
width: 24px;
}
.nav-toggle__bars span {
display: block;
height: 2px;
background: currentColor;
border-radius: 2px;
}
.nav-overlay {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(9, 30, 33, 0.45);
}
@media (max-width: 1023px) {
.site-header__bar { padding-left: 22px; }
.site-header__cta { display: none; }
.nav-toggle { display: inline-flex; }
.nav-close { display: inline-flex; }
.site-nav__panel {
position: fixed;
top: 0;
right: 0;
z-index: 95;
display: flex;
flex-direction: column;
width: min(88vw, 380px);
height: 100dvh;
padding: 1.25rem 1.5rem 2rem;
background: #fff;
overflow-y: auto;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.3s ease, visibility 0.3s ease;
}
.site-nav.is-open .site-nav__panel {
transform: translateX(0);
visibility: visible;
}
.site-nav__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--cc-line);
}
.site-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
margin-top: 0.5rem;
}
.site-nav__list > li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--cc-line);
}
.site-nav__list > li > a { flex: 1; padding: 0.95rem 0; font-size: 1.0625rem; }
.submenu-toggle { padding: 0.95rem 0.5rem; }
.submenu {
position: static;
width: 100%;
margin: 0 0 0.5rem;
padding: 0 0 0.25rem 0.75rem;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}
.site-nav__list > li.is-open > .submenu { display: block; }
.site-nav__list > li:hover > .submenu { display: none; }
.site-nav__list > li.is-open:hover > .submenu { display: block; }
.site-nav__panel-cta { margin-top: auto; padding-top: 1.5rem; }
}
@media (min-width: 1024px) {
.nav-overlay { display: none; }
.site-nav__panel-head { display: none; }
.site-nav__panel-cta { display: none; }
}
@media (max-width: 400px) {
.site-header__bar {
gap: 0.75rem;
padding-left: 16px;
}
.site-logo__text {
font-size: 1.0625rem;
letter-spacing: 0.12em;
}
.site-logo img { max-height: 26px; }
}
.hero {
position: relative;
display: flex;
align-items: center;
min-height: min(100svh, 900px);
padding-top: calc(var(--cc-header-h) + var(--cc-space-md));
padding-bottom: var(--cc-space-xl);
overflow: hidden;
isolation: isolate;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__video,
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__overlay {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
100deg,
rgba(9, 58, 64, calc(0.85 * var(--hero-overlay, 0.55))) 0%,
rgba(9, 77, 94, calc(0.72 * var(--hero-overlay, 0.55))) 45%,
rgba(102, 193, 192, calc(0.34 * var(--hero-overlay, 0.55))) 100%
),
linear-gradient(
180deg,
rgba(9, 58, 64, 0.28) 0%,
rgba(9, 58, 64, 0) 40%
);
}
.hero__inner {
position: relative;
width: min(100% - (var(--cc-gutter) * 2), var(--cc-container));
}
.hero__heading {
max-width: 15ch;
color: #fff;
font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.02em;
text-wrap: balance;
}
.hero__actions { margin-top: var(--cc-space-md); }
.btn--light {
background: #fff;
color: var(--cc-ink);
font-size: 1rem;
font-weight: 500;
}
.btn--light:hover,
.btn--light:focus-visible {
background: rgba(102, 193, 192, 0.9);
color: #fff;
}
.btn--arrow {
padding: 0.5rem 0.5rem 0.5rem 1.75rem;
gap: 1rem;
}
.btn__arrow {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--cc-drop);
color: #fff;
transition: background var(--cc-transition), color var(--cc-transition);
}
.btn--light:hover .btn__arrow,
.btn--light:focus-visible .btn__arrow {
background: #fff;
color: var(--cc-ink);
}
.hero__stats {
display: flex;
flex-wrap: wrap;
gap: var(--cc-space-sm);
margin-top: var(--cc-space-lg);
}
.stat-card--clone { display: none; }
.stat-card {
flex: 0 1 auto;
min-width: 11rem;
padding: 1.75rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 18px;
background: rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-align: center;
}
.stat-card__value {
display: block;
color: #fff;
font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
font-weight: 500;
line-height: 1.2;
}
.stat-card__label {
display: block;
margin-top: 0.4rem;
color: rgba(255, 255, 255, 0.86);
font-size: 0.875rem;
}
@media (max-width: 767px) {
.hero {
min-height: 0;
padding-top: calc(var(--cc-header-h) + var(--cc-space-sm));
padding-bottom: var(--cc-space-sm);
text-align: center;
align-items: stretch;
}
.hero__inner {
display: flex;
flex-direction: column;
}
.hero:has(+ .logo-strip) {
min-height: calc(100vh - 7.75rem);
min-height: calc(100svh - 7.75rem);
}
.hero__heading {
max-width: 18ch;
margin-inline: auto;
margin-top: auto;
font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.25rem);
}
.hero__actions {
display: flex;
justify-content: center;
margin-top: var(--cc-space-md);
}
.hero__stats-wrap {
margin-top: auto;
padding-top: var(--cc-space-sm);
margin-inline: calc(var(--cc-gutter) * -1);
overflow: hidden;
}
.hero__stats {
flex-wrap: nowrap;
width: max-content;
gap: 0;
margin-top: 0;
animation: cc-marquee var(--stat-speed, 26s) linear infinite;
}
.stat-card {
flex: 0 0 auto;
min-width: 10.5rem;
margin-right: 0.75rem;
padding: 1.25rem 1rem;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(9, 45, 53, 0.38);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.hero__stats .stat-card--clone { display: block; }
.stat-card__label {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.94);
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.hero__stats {
animation: none;
padding-inline: var(--cc-gutter);
}
.hero__stats .stat-card--clone { display: none; }
.hero__stats-wrap {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hero__stats-wrap::-webkit-scrollbar { display: none; }
}
.logo-strip {
padding-block: var(--cc-space-lg);
background: #eceef0;
overflow: hidden;
}
.logo-strip__heading {
margin-bottom: var(--cc-space-md);
font-size: 1.125rem;
font-weight: 500;
color: var(--cc-muted);
text-align: center;
letter-spacing: 0.02em;
}
.logo-strip__viewport {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-strip__track {
display: flex;
width: max-content;
}
.logo-strip__list {
display: flex;
align-items: center;
gap: clamp(2.5rem, 5vw, 5.5rem);
padding-inline: clamp(1.25rem, 2.5vw, 2.75rem);
}
.logo-strip:not(.logo-strip--plain) .logo-strip__list { background: #eceef0; }
.logo-strip__item { flex: 0 0 auto; }
.logo-strip__img {
width: auto;
max-width: 190px;
max-height: 82px;
object-fit: contain;
opacity: 1;
mix-blend-mode: multiply;
transition: opacity var(--cc-transition), filter var(--cc-transition);
}
.logo-strip--grayscale .logo-strip__img { filter: grayscale(1); }
.logo-strip__img:hover,
.logo-strip__link:focus-visible .logo-strip__img {
opacity: 1;
filter: grayscale(0);
}
@keyframes cc-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.logo-strip--scroll .logo-strip__track {
animation: cc-marquee var(--logo-speed, 40s) linear infinite;
}
.logo-strip--scroll:hover .logo-strip__track,
.logo-strip--scroll:focus-within .logo-strip__track {
animation-play-state: paused;
}
.logo-strip:not(.logo-strip--scroll) .logo-strip__list {
flex-wrap: wrap;
justify-content: center;
gap: clamp(2rem, 4vw, 4rem);
}
.logo-strip:not(.logo-strip--scroll) .logo-strip__track {
width: 100%;
justify-content: center;
}
.logo-strip:not(.logo-strip--scroll) .logo-strip__viewport {
-webkit-mask-image: none;
mask-image: none;
}
@media (prefers-reduced-motion: reduce) {
.logo-strip__track {
animation: none !important;
width: 100%;
justify-content: center;
}
.logo-strip__list[aria-hidden="true"] { display: none; }
.logo-strip__list {
flex-wrap: wrap;
justify-content: center;
}
.logo-strip__viewport {
-webkit-mask-image: none;
mask-image: none;
}
}
@media (max-width: 640px) {
.logo-strip { padding-block: var(--cc-space-md); }
.logo-strip__img { max-width: 140px; max-height: 60px; }
}
.treatments {
position: relative;
padding-top: var(--cc-space-xl);
padding-bottom: 0;
background: #eceef0;
overflow: hidden;
isolation: isolate;
}
.treatments__pattern {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: clamp(200px, 27vw, 470px);
pointer-events: none;
}
.treatments__pattern img {
width: 100%;
height: 100%;
object-fit: cover;
}
.treatments__pattern--left {
left: 0;
-webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
}
.treatments__pattern--left img {
object-position: left top;
}
.treatments__pattern--right {
right: 0;
-webkit-mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
}
.treatments__pattern--right img {
object-position: right top;
}
@media (max-width: 767px) {
.treatments__pattern { width: 45vw; opacity: 0.6; }
}
.treatments__head { text-align: center; }
.treatments__heading { font-size: var(--cc-fs-section); }
.treatments__text {
max-width: 46ch;
margin: var(--cc-space-sm) auto 0;
font-size: var(--cc-fs-section-lead);
color: var(--cc-body);
}
.treatments__more {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: var(--cc-space-md);
color: var(--cc-ink);
font-weight: 500;
text-decoration: none;
transition: gap var(--cc-transition), color var(--cc-transition);
}
.treatments__more:hover {
gap: 1rem;
color: var(--cc-teal);
}
.treatments__viewport {
margin-top: var(--cc-space-lg);
overflow: hidden;
padding-block: 2.5rem 5rem;
}
.treatments__track {
display: flex;
width: max-content;
}
.treatments__list {
display: flex;
align-items: stretch;
gap: 0;
padding-inline: 0;
}
.treatment-slot {
flex: 0 0 auto;
display: flex;
width: 285px;
}
.treatment-card {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
padding: 14px 14px 22px;
border-radius: 26px;
background: #fff;
box-shadow: 0 18px 45px rgba(20, 45, 50, 0.13);
transition: box-shadow var(--cc-transition);
will-change: transform;
}
.treatment-card__media {
flex: none;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 6 / 5;
background: var(--cc-bg-alt);
}
.treatment-card__img,
.treatment-card__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.treatment-card__placeholder {
background: linear-gradient(135deg, var(--cc-mist), #eef4f4);
}
.treatment-card__title {
margin: 1.5rem 0 0.9rem;
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.35;
text-transform: capitalize;
}
.treatment-card__link {
color: var(--cc-ink);
text-decoration: none;
}
.treatment-card__link::after {
content: '';
position: absolute;
inset: 0;
border-radius: 26px;
}
.treatment-card__btn {
display: inline-flex;
margin-top: auto;
align-self: flex-start;
align-items: center;
padding: 0.7rem 1.4rem;
border-radius: var(--cc-radius-pill);
background: var(--cc-teal);
color: #fff;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
transition: background var(--cc-transition);
}
.treatment-card:hover { box-shadow: 0 22px 55px rgba(20, 45, 50, 0.2); }
.treatment-card:hover .treatment-card__btn { background: var(--cc-teal-dark); }
.treatment-card:focus-within { box-shadow: 0 22px 55px rgba(20, 45, 50, 0.2); }
@media (min-width: 768px) {
.treatment-slot:nth-child(5n + 1) .treatment-card { transform: rotate(-11deg) translateY(52px); }
.treatment-slot:nth-child(5n + 2) .treatment-card { transform: rotate(-6deg) translateY(16px); }
.treatment-slot:nth-child(5n + 3) .treatment-card { transform: rotate(0deg) translateY(-10px); }
.treatment-slot:nth-child(5n + 4) .treatment-card { transform: rotate(6deg) translateY(16px); }
.treatment-slot:nth-child(5n + 5) .treatment-card { transform: rotate(11deg) translateY(52px); }
}
@keyframes cc-treat-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.treatments--scroll .treatments__track {
animation: cc-treat-marquee var(--treat-speed, 60s) linear infinite;
}
.treatments--scroll .treatments__viewport {
cursor: grab;
touch-action: pan-y;
}
.treatments--scroll.is-held .treatments__viewport { cursor: grabbing; }
.treatments--scroll.is-held .treatments__track {
-webkit-user-select: none;
user-select: none;
}
.treatments--scroll .treatments__track:has(:focus-visible) {
animation-play-state: paused;
}
.treatments:not(.treatments--scroll) .treatments__viewport { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
.treatments__track { animation: none !important; }
.treatments__list[aria-hidden="true"] { display: none; }
.treatments__viewport { overflow-x: auto; }
.treatment-card { transform: none !important; }
}
@media (max-width: 767px) {
.treatments { padding-top: var(--cc-space-lg); }
.treatment-slot { width: 240px; }
.treatments__viewport { padding-block: 1.5rem 3rem; }
}
.results {
position: relative;
padding-top: 13rem;
padding-bottom: var(--cc-space-lg);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(90% 70% at 100% 55%, rgba(104, 200, 195, 0.5) 0%, rgba(104, 200, 195, 0) 62%),
radial-gradient(70% 55% at 0% 45%, rgba(104, 200, 195, 0.16) 0%, rgba(104, 200, 195, 0) 60%),
linear-gradient(180deg, #ffffff 0%, #f6fbfb 55%, #ffffff 100%);
}
.results__pattern {
position: absolute;
top: 8rem;
bottom: 0;
z-index: -1;
width: clamp(200px, 27vw, 470px);
pointer-events: none;
}
.results__pattern img {
width: 100%;
height: 100%;
object-fit: cover;
}
.results__pattern--left {
left: 0;
-webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
}
.results__pattern--left img { object-position: left top; }
.results__pattern--right {
right: 0;
-webkit-mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
}
.results__pattern--right img { object-position: right top; }
.results__head { text-align: center; }
.results__heading { font-size: var(--cc-fs-section); }
.results__text {
max-width: 52ch;
margin: var(--cc-space-sm) auto 0;
font-size: var(--cc-fs-section-lead);
}
.results__filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--cc-space-sm);
margin-top: var(--cc-space-md);
}
@media (max-width: 767px) {
.select--gender { display: none; }
}
body.home .select--gender,
body.page-template-template-home2 .select--gender,
body.page-template-template-results .select--gender { display: none; }
.select { position: relative; }
.select::after {
content: '';
position: absolute;
top: 50%;
right: 1.1rem;
width: 9px;
height: 9px;
border-right: 1.6px solid var(--cc-ink);
border-bottom: 1.6px solid var(--cc-ink);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.select__input {
appearance: none;
-webkit-appearance: none;
min-width: 11.5rem;
padding: 0.85rem 2.75rem 0.85rem 1.25rem;
border: 1px solid var(--cc-line);
border-radius: var(--cc-radius);
background: #fff;
color: var(--cc-ink);
font-size: 0.9375rem;
cursor: pointer;
box-shadow: 0 6px 18px rgba(20, 45, 50, 0.06);
}
@supports (appearance: base-select) {
.select__input,
.select__input::picker(select) {
appearance: base-select;
}
.select__input::picker-icon { display: none; }
.select__input::picker(select) {
margin-top: 6px;
padding: 0.4rem;
border: 1px solid var(--cc-line);
border-radius: 12px;
background: #fff;
box-shadow: 0 18px 44px rgba(20, 45, 50, 0.16);
}
.select__input option {
padding: 0.6rem 0.9rem;
border-radius: 8px;
background: transparent;
color: var(--cc-body);
font-size: 0.9375rem;
cursor: pointer;
transition: background var(--cc-transition), color var(--cc-transition);
}
.select__input option:hover,
.select__input option:focus {
background: var(--cc-bg-alt);
color: var(--cc-teal);
}
.select__input option:checked {
background: var(--cc-mist);
color: var(--cc-teal);
font-weight: 500;
}
.select__input option::checkmark { display: none; }
}
.results__strip {
margin-top: var(--cc-space-lg);
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.results__strip::-webkit-scrollbar { display: none; }
.results__list {
display: flex;
gap: 0.75rem;
width: max-content;
margin-inline: auto;
padding-inline: 0;
}
.results__item {
flex: 0 0 auto;
width: clamp(180px, 20vw, 420px);
scroll-snap-align: center;
}
.results__caption {
margin-top: 0.6rem;
font-size: 0.8125rem;
color: var(--cc-muted);
text-align: center;
}
.results:not(.results--grid) .results__caption { display: none; }
.results__item.is-hidden { display: none; }
.results__empty {
margin-top: var(--cc-space-md);
text-align: center;
color: var(--cc-muted);
}
.results__nav {
display: none;
justify-content: center;
gap: 0.75rem;
margin-top: var(--cc-space-md);
}
.rnav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--cc-line);
border-radius: 50%;
background: #fff;
color: var(--cc-teal);
cursor: pointer;
transition: background var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition), opacity var(--cc-transition);
}
.rnav .icon { width: 20px; height: 20px; }
.rnav--prev .icon { transform: scaleX(-1); }
.rnav:hover,
.rnav:focus-visible {
border-color: var(--cc-teal);
background: var(--cc-teal);
color: #fff;
}
.rnav[disabled] {
opacity: 0.35;
cursor: default;
}
.ba {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 6px;
background: var(--cc-bg-alt);
cursor: pointer;
}
.ba__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ba__tag {
position: absolute;
top: 0.6rem;
z-index: 2;
padding: 0.28rem 0.7rem;
border-radius: var(--cc-radius-pill);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
box-shadow: 0 2px 8px rgba(9, 30, 33, 0.18);
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.ba__tag--before {
left: 0.6rem;
background: var(--cc-mint);
color: var(--cc-ink);
}
.ba__tag--after {
right: 0.6rem;
background: var(--cc-teal);
color: #fff;
opacity: 0;
}
@media (min-width: 768px) {
.ba__img {
transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
will-change: clip-path;
}
.ba__img--before {
clip-path: inset(0 0 0 0);
}
.ba:hover .ba__img--before,
.ba:focus-visible .ba__img--before,
.ba:focus-within .ba__img--before {
clip-path: inset(0 0 0 100%);
}
.ba__tag {
transition: opacity 0.35s ease;
will-change: opacity;
}
.ba:hover .ba__tag--before,
.ba:focus-visible .ba__tag--before,
.ba:focus-within .ba__tag--before {
opacity: 0;
}
.ba:hover .ba__tag--after,
.ba:focus-visible .ba__tag--after,
.ba:focus-within .ba__tag--after {
opacity: 1;
}
}
@media (max-width: 767px) {
.ba {
touch-action: pan-y;
}
.ba__img--before {
clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
will-change: clip-path;
}
.ba__tag--before,
.ba:focus-visible .ba__tag--before,
.ba:focus-within .ba__tag--before,
.ba__tag--after,
.ba:focus-visible .ba__tag--after,
.ba:focus-within .ba__tag--after {
opacity: 1;
transform: none;
}
.ba::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: var(--ba-pos, 50%);
z-index: 3;
width: 2px;
background: #fff;
transform: translateX(-50%);
box-shadow: 0 0 8px rgba(9, 30, 33, 0.35);
pointer-events: none;
}
.ba::after {
content: '';
position: absolute;
top: 50%;
left: var(--ba-pos, 50%);
z-index: 4;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.2 4.5 2.8 8l3.4 3.5M9.8 4.5 13.2 8l-3.4 3.5" fill="none" stroke="%23191c1e" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 16px 16px no-repeat;
transform: translate(-50%, -50%);
box-shadow: 0 4px 14px rgba(9, 30, 33, 0.3);
pointer-events: none;
}
}
.ba:focus-visible {
outline: 3px solid var(--cc-drop);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.ba__img,
.ba__tag { transition: none; }
}
@media (max-width: 640px) {
.results { padding-block: var(--cc-space-lg); }
.results__item { width: 62vw; }
.results__filters { flex-direction: column; align-items: stretch; }
.select__input { width: 100%; }
}
@media (max-width: 767px) {
.results:not(.results--grid) .results__list {
gap: 0.5rem;
padding-inline: var(--cc-gutter);
}
.results:not(.results--grid) .results__item {
width: calc(100vw - (var(--cc-gutter) * 2));
scroll-snap-align: start;
}
.results:not(.results--grid) .results__strip {
scroll-padding-inline-start: var(--cc-gutter);
}
.results:not(.results--grid) .results__nav:not([hidden]) { display: flex; }
}
.feature {
position: relative;
padding-block: var(--cc-space-lg) var(--cc-space-md);
background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 40%, #eef8f7 78%, #f2faf9 100%);
}
.feature--embedded { margin-bottom: var(--cc-space-xl); }
@media (max-width: 767px) {
.testimonials:has(> .feature--embedded) { padding-top: 0; }
.testimonials > .feature--embedded {
width: 100%;
margin-bottom: var(--cc-space-lg);
}
.testimonials > .feature--embedded .feature__card {
border-radius: 0;
box-shadow: none;
}
}
.testimonials__body {
position: relative;
}
.testimonials__body.section--dark {
background: none;
}
.feature__card {
position: relative;
width: min(100%, 1100px);
margin: 0 auto;
aspect-ratio: 16 / 7;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 26px 60px rgba(20, 45, 50, 0.18);
isolation: isolate;
}
.feature__img,
.feature__video {
width: 100%;
height: 100%;
object-fit: cover;
}
.feature__embed {
position: absolute;
inset: 0;
overflow: hidden;
}
.feature__iframe {
position: absolute;
top: 50%;
left: 50%;
width: 112%;
aspect-ratio: 16 / 9;
border: 0;
transform: translate(-50%, -54%);
pointer-events: none;
}
@media (max-width: 640px) {
.feature__iframe {
width: auto;
height: 140%;
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
}
}
.feature__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(10, 32, 35, 0) 30%,
rgba(10, 32, 35, calc(0.85 * var(--scrim, 0.4))) 68%,
rgba(10, 32, 35, calc(1.05 * var(--scrim, 0.4))) 100%
);
pointer-events: none;
}
.feature__caption {
position: absolute;
left: 50%;
bottom: max(1.25rem, 20%);
z-index: 2;
width: min(88%, 46ch);
transform: translateX(-50%);
color: #fff;
font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
line-height: 1.5;
text-align: center;
text-wrap: balance;
}
@media (max-width: 640px) {
.feature { padding-block: var(--cc-space-md) var(--cc-space-lg); }
.feature__card { aspect-ratio: 4 / 3; border-radius: 14px; }
.feature__caption { bottom: max(1rem, 9%); }
.feature__card--video .feature__caption,
.feature__card--video .feature__scrim { display: none; }
}
.testimonials {
--test-gap: 1.25rem;
position: relative;
padding-block: var(--cc-space-xl) 9rem;
overflow: hidden;
isolation: isolate;
}
.testimonials__pattern {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: clamp(200px, 27vw, 470px);
opacity: 0.35;
pointer-events: none;
}
.testimonials__pattern img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
}
.testimonials__pattern--left {
left: 0;
-webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
}
.testimonials__pattern--left img { object-position: left bottom; }
.testimonials__pattern--right {
right: 0;
-webkit-mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
}
.testimonials__pattern--right img { object-position: right bottom; }
.testimonials__head {
position: relative;
text-align: center;
}
.testimonials__nav {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: var(--cc-space-md);
}
@media (min-width: 900px) {
.testimonials__nav {
position: absolute;
right: 0;
bottom: 0;
margin-top: 0;
}
}
.tnav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
transition: background var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition);
}
.tnav .icon {
width: 26px;
height: 26px;
}
.tnav--prev .icon { transform: scaleX(-1); }
.tnav:hover,
.tnav:focus-visible {
background: #fff;
border-color: #fff;
color: var(--cc-teal-dark);
}
.testimonials--light .tnav {
border-color: var(--cc-line);
background: #fff;
color: var(--cc-ink);
}
.testimonials--light .tnav:hover,
.testimonials--light .tnav:focus-visible {
background: var(--cc-teal);
border-color: var(--cc-teal);
color: #fff;
}
@media (max-width: 640px) {
.tnav { width: 48px; height: 48px; }
.tnav .icon { width: 22px; height: 22px; }
}
.testimonials__heading {
color: #fff;
font-size: var(--cc-fs-section);
}
.testimonials__text {
max-width: 52ch;
margin: var(--cc-space-sm) auto 0;
color: rgba(255, 255, 255, 0.85);
font-size: var(--cc-fs-section-lead);
}
.testimonials__rows {
display: grid;
gap: var(--test-gap);
margin-top: var(--cc-space-lg);
}
.testimonials__viewport {
position: relative;
}
.testimonials__track {
display: flex;
width: max-content;
}
.testimonials__list {
display: flex;
gap: var(--test-gap);
padding-inline: 0.625rem;
}
.testimonials__item {
flex: 0 0 auto;
width: clamp(255px, 24vw, 310px);
}
.tcard {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 1.5rem 1.4rem 1.25rem;
border-radius: 14px;
background: #fff;
box-shadow: 0 14px 34px rgba(6, 40, 44, 0.16);
}
.tcard__mark {
display: block;
margin-bottom: 0.35rem;
color: var(--cc-drop);
font-size: 2.5rem;
font-weight: 700;
line-height: 0.6;
}
.tcard__quote {
flex: 1;
margin: 0 0 1.25rem;
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.55;
}
.tcard__quote p { margin: 0; }
.tcard__person {
display: flex;
align-items: center;
gap: 0.7rem;
}
.tcard__avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.tcard__meta { display: grid; }
.tcard__name {
color: var(--cc-ink);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.3;
}
.tcard__role {
color: var(--cc-muted);
font-size: 0.8125rem;
}
@media (max-width: 767px) {
.testimonials__list { align-items: flex-start; }
.tcard { height: auto; }
.tcard__quote { flex: 0 0 auto; }
}
@keyframes cc-test-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.testimonials--scroll .testimonials__track {
animation: cc-test-marquee var(--test-speed, 70s) linear infinite;
}
.testimonials--scroll .testimonials__track--right {
animation-direction: reverse;
animation-delay: calc(var(--test-speed, 70s) * -0.4);
}
.testimonials:not(.testimonials--scroll) .testimonials__viewport { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
.testimonials__track { animation: none !important; }
.testimonials__list[aria-hidden="true"] { display: none; }
.testimonials__viewport {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
}
@media (max-width: 640px) {
.testimonials { padding-block: var(--cc-space-lg); }
.testimonials__item { width: 78vw; }
}
.steps {
--steps-gap: 2.5rem;
--step-num-size: clamp(1.85rem, 1.35rem + 1.6vw, 2.6rem);
position: relative;
padding-block: var(--cc-space-xl);
overflow: hidden;
isolation: isolate;
}
.steps__pattern {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
width: clamp(180px, 22vw, 380px);
opacity: 0.6;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
}
.steps__pattern img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
}
.steps__head { text-align: center; }
.steps__heading { font-size: var(--cc-fs-section); }
.steps__text {
max-width: 46ch;
margin: var(--cc-space-sm) auto 0;
font-size: var(--cc-fs-section-lead);
}
.steps__list {
display: grid;
gap: var(--steps-gap);
max-width: 1120px;
margin: var(--cc-space-lg) auto 0;
}
.step { position: relative; }
.step__num {
display: block;
margin-bottom: 1.5rem;
font-size: var(--step-num-size);
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
color: var(--cc-mist);
}
@supports (-webkit-text-stroke: 1px black) {
.step__num {
color: transparent;
-webkit-text-stroke: 1.5px #7fcfc8;
}
}
.step__title {
margin-bottom: 0.75rem;
font-size: 1.0625rem;
font-weight: 600;
}
.step__text {
color: var(--cc-muted);
font-size: 0.875rem;
line-height: 1.75;
}
@media (min-width: 900px) {
.steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step:not(:last-child)::after {
content: '';
position: absolute;
top: calc(var(--step-num-size) / 2);
left: calc(var(--step-num-size) * 1.3);
width: calc(100% - var(--step-num-size) * 1.3 + var(--steps-gap));
border-top: 1px dashed #b6dcd8;
}
}
@media (min-width: 560px) and (max-width: 899px) {
.steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
.steps__pattern { display: none; }
.steps { overflow: visible; }
.steps__list {
--stack-top: 84px;
--stack-peek: 13px;
display: block;
margin-top: var(--cc-space-md);
}
.step {
position: sticky;
top: calc(var(--stack-top) + (var(--i, 1) - 1) * var(--stack-peek));
display: flex;
flex-direction: column;
min-height: 330px;
padding: 2rem 1.75rem;
border-radius: 22px;
overflow: hidden;
text-align: left;
box-shadow: 0 14px 34px rgba(9, 30, 33, 0.10);
}
.step + .step { margin-top: 1.1rem; }
.step:nth-child(1) { background: #f3fbfa; }
.step:nth-child(2) { background: #dcf0ef; }
.step:nth-child(3) { background: var(--cc-mint); }
.step:nth-child(n + 4) {
background: var(--cc-teal);
color: #fff;
}
.step:nth-child(n + 4) .step__title { color: #fff; }
.step:nth-child(n + 4) .step__text { color: rgba(255, 255, 255, 0.86); }
.step__num {
position: static;
margin: 0 0 2.25rem;
font-size: 3.25rem;
line-height: 1;
color: var(--cc-mist);
-webkit-text-stroke: 0;
}
.step:nth-child(n + 4) .step__num { color: rgba(255, 255, 255, 0.35); }
@supports (-webkit-text-stroke: 1px black) {
.step__num {
color: transparent;
-webkit-text-stroke: 2px rgba(9, 77, 94, 0.32);
}
.step:nth-child(n + 4) .step__num {
color: transparent;
-webkit-text-stroke-color: rgba(255, 255, 255, 0.7);
}
}
.step__title {
position: relative;
margin: 0;
font-size: 1.5rem;
line-height: 1.25;
}
.step__text {
position: relative;
margin-top: 1.4rem;
padding-top: 0;
font-size: 0.9375rem;
line-height: 2;
}
}
.steps__actions {
display: flex;
justify-content: center;
margin-top: var(--cc-space-lg);
}
.btn--mint {
background: var(--cc-mint);
color: #fff;
font-size: 1rem;
}
.btn--mint:hover,
.btn--mint:focus-visible {
background: var(--cc-teal);
color: #fff;
}
.btn--mint .btn__arrow {
background: #fff;
color: var(--cc-ink);
}
.why {
position: relative;
padding-block: var(--cc-space-xl);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(42% 52% at 76% 42%, rgba(104, 200, 195, 0.5) 0%, rgba(104, 200, 195, 0) 65%),
#ffffff;
}
.why__pattern {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: clamp(160px, 20vw, 340px);
height: 60%;
opacity: 0.55;
pointer-events: none;
-webkit-mask-image: linear-gradient(160deg, #000 20%, transparent 85%);
mask-image: linear-gradient(160deg, #000 20%, transparent 85%);
}
.why__pattern img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
}
@media (max-width: 767px) {
.why__pattern { display: none; }
.why {
background:
radial-gradient(52% 28% at 12% 6%, rgba(104, 200, 195, 0.26) 0%, rgba(104, 200, 195, 0) 72%),
radial-gradient(62% 40% at 84% 34%, rgba(104, 200, 195, 0.45) 0%, rgba(104, 200, 195, 0) 70%),
#ffffff;
}
}
.why__head { text-align: center; }
.why__heading { font-size: var(--cc-fs-section); }
.why__text {
max-width: 46ch;
margin: var(--cc-space-sm) auto 0;
font-size: var(--cc-fs-section-lead);
}
.why > .container { --cc-container: 1440px; }
.why__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
max-width: 1434px;
margin: var(--cc-space-lg) auto 0;
}
.why-card {
display: flex;
flex-direction: column;
padding: 1.6rem 1.35rem;
border: 1px solid #e9edee;
border-radius: 10px;
background: #fff;
box-shadow: 0 10px 26px rgba(20, 45, 50, 0.05);
transition: box-shadow var(--cc-transition), transform var(--cc-transition);
}
@media (min-width: 768px) {
.why-card { min-height: 358px; }
}
.why-card:hover {
box-shadow: 0 16px 36px rgba(20, 45, 50, 0.1);
transform: translateY(-3px);
}
.why-card__icon {
margin-bottom: 2.5rem;
}
.why-card__icon img {
width: 88px;
height: 88px;
object-fit: contain;
}
.why-card__toggle {
display: none;
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--cc-line);
border-radius: 50%;
background: transparent;
color: var(--cc-ink);
cursor: pointer;
transition: background var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition);
}
.why-card__plus,
.why-card__plus::before {
position: absolute;
top: 50%;
left: 50%;
width: 13px;
height: 1.5px;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform var(--cc-transition), opacity var(--cc-transition);
}
.why-card__plus::before {
content: '';
transform: translate(-50%, -50%) rotate(90deg);
}
.why-card.is-open .why-card__plus::before {
transform: translate(-50%, -50%) rotate(0deg);
}
.why-card.is-open .why-card__toggle {
background: var(--cc-teal);
border-color: var(--cc-teal);
color: #fff;
}
.why-card__title {
margin-bottom: 0.7rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
}
.why-card__text {
color: var(--cc-muted);
font-size: 0.8125rem;
line-height: 1.7;
}
@media (max-width: 640px) {
.why { padding-block: var(--cc-space-lg); }
.why-card__icon { margin-bottom: 1.25rem; }
}
@media (max-width: 767px) {
.why-card {
position: relative;
padding-right: 4.5rem;
}
.why-card__toggle { display: block; }
.why-card__text {
display: grid;
grid-template-rows: 0fr;
margin: 0;
transition: grid-template-rows var(--cc-transition), margin var(--cc-transition);
}
.why-card__text > * {
min-height: 0;
overflow: hidden;
}
.why-card.is-open .why-card__text {
grid-template-rows: 1fr;
margin-top: 0.7rem;
}
.testimonials__viewport:nth-of-type(2) { display: none; }
}
.about {
position: relative;
padding-block: var(--cc-space-xl);
overflow: hidden;
background:
radial-gradient(38% 45% at 96% 62%, rgba(104, 200, 195, 0.34) 0%, rgba(104, 200, 195, 0) 68%),
#ffffff;
}
.about__inner {
display: grid;
gap: var(--cc-space-lg);
align-items: center;
}
@media (min-width: 900px) {
.about__inner {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: var(--cc-space-xl);
}
}
.about__heading {
margin-bottom: var(--cc-space-md);
font-size: var(--cc-fs-section);
}
.about__content {
max-width: 62ch;
color: var(--cc-body);
font-size: 1rem;
line-height: 1.75;
}
.about__content p + p { margin-top: 1.15rem; }
.about__content a {
color: var(--cc-ink);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--cc-transition);
}
.about__content a:hover,
.about__content a:focus-visible { color: var(--cc-teal); }
.about__actions { margin-top: var(--cc-space-md); }
.about__media { display: flex; justify-content: center; }
.about__circle {
position: relative;
width: min(100%, 420px);
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
background: var(--cc-mint);
}
.about__portrait {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
@media (max-width: 899px) {
.about__media { order: -1; }
.about__circle { width: min(100%, 320px); }
}
@media (max-width: 640px) {
.about { padding-block: var(--cc-space-lg); }
}
.cta {
position: relative;
padding-block: var(--cc-space-lg) var(--cc-space-xl);
background:
radial-gradient(40% 60% at 100% 52%, rgba(104, 200, 195, 0.32) 0%, rgba(104, 200, 195, 0) 70%),
#ffffff;
}
.cta > .container { --cc-container: 1440px; }
.cta-card {
display: grid;
gap: var(--cc-space-md);
align-items: center;
max-width: 1440px;
margin-inline: auto;
padding: clamp(1.75rem, 3.5vw, 3.25rem);
border-radius: 20px;
overflow: hidden;
background: linear-gradient(105deg, #06373d 0%, #0d5a5c 42%, #57bdb5 100%);
}
@media (min-width: 860px) {
.cta-card { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.cta-card { min-height: 450px; }
}
.cta-card__heading {
color: #fff;
font-size: clamp(1.6rem, 1.1rem + 2vw, 2.35rem);
}
.cta-card__text {
max-width: 46ch;
margin-top: 0.9rem;
color: rgba(255, 255, 255, 0.86);
font-size: 1rem;
}
.cta-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--cc-space-md);
}
.cta-card__actions .btn__arrow { display: none; }
.cta-card__actions > .btn {
gap: 0.5em;
padding: 0.95em 1.9em;
}
.cta-card__media {
display: flex;
justify-content: flex-end;
align-items: center;
}
.cta-card__art {
width: 100%;
max-height: 300px;
object-fit: contain;
object-position: center right;
}
@media (max-width: 859px) {
.cta-card__media { justify-content: center; }
.cta-card__art { max-height: 180px; object-position: center; }
}
.faq {
position: relative;
padding-block: var(--cc-space-xl);
overflow: hidden;
background:
radial-gradient(38% 48% at 100% 40%, rgba(104, 200, 195, 0.55) 0%, rgba(104, 200, 195, 0) 68%),
radial-gradient(32% 40% at 0% 66%, rgba(104, 200, 195, 0.35) 0%, rgba(104, 200, 195, 0) 70%),
#ffffff;
}
.faq__head { text-align: center; }
.faq__heading {
font-size: var(--cc-fs-section);
line-height: var(--cc-lh-heading);
}
.faq__cols {
display: grid;
gap: 1rem;
max-width: 1180px;
margin: var(--cc-space-lg) auto 0;
}
@media (min-width: 860px) {
.faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.faq__col { display: grid; gap: 1rem; align-content: start; }
.faq-item {
--faq-tint: #dff0ee;
border-radius: 10px;
background: #fff;
box-shadow: 0 8px 22px rgba(20, 45, 50, 0.07);
transition: background var(--cc-transition);
}
.faq-item__q { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-item__label {
flex: 1 1 auto;
min-width: 0;
}
.landing-page .faq-item__btn { padding-left: calc(1.35rem + 1.6em); }
.faq-item__n {
display: inline-block;
width: 1.6em;
margin-left: -1.6em;
}
.faq-item__btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 1.15rem 1.35rem;
border: 0;
border-radius: 10px;
background: none;
color: var(--cc-ink);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.45;
text-align: left;
cursor: pointer;
text-transform: capitalize;
}
@media (min-width: 860px) {
.faq-item__btn { min-height: 5.1rem; }
}
.faq-item__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
color: var(--cc-ink);
transition: transform var(--cc-transition);
}
.faq-item__btn[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item:hover,
.faq-item:focus-within,
.faq-item:has(.faq-item__btn[aria-expanded="true"]) { background: var(--faq-tint); }
.faq-item__panel { padding: 0 1.35rem 1.25rem; }
.faq-item__answer {
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.7;
}
.faq-item__answer p { margin: 0; }
.faq-item__answer p + p { margin-top: 0.75rem; }
.cases {
position: relative;
padding-block: var(--cc-space-xl) var(--cc-space-sm);
overflow: hidden;
background:
radial-gradient(52% 58% at 0% 46%, rgba(79, 176, 169, 0.85) 0%, rgba(79, 176, 169, 0) 72%),
radial-gradient(45% 45% at 12% 62%, rgba(13, 90, 92, 0.65) 0%, rgba(13, 90, 92, 0) 65%),
#ffffff;
}
.cases__head { text-align: center; }
.cases__heading { font-size: var(--cc-fs-section); }
.cases__text {
max-width: 48ch;
margin: var(--cc-space-sm) auto 0;
font-size: var(--cc-fs-section-lead);
}
.cases-intro { display: none; }
@media (max-width: 767px) {
.cases-intro {
display: block;
padding-top: var(--cc-space-lg);
text-align: center;
}
.cases-intro__heading {
font-size: var(--cc-fs-section);
line-height: var(--cc-lh-heading);
}
.cases-intro__text {
max-width: 46ch;
margin: var(--cc-space-sm) auto 0;
color: var(--cc-body);
font-size: var(--cc-fs-section-lead);
line-height: var(--cc-lh-body);
}
.cases-intro + .cases { padding-top: 0; }
}
.cases__more,
.news__more {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--cc-ink);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
transition: gap var(--cc-transition), color var(--cc-transition);
}
.cases__more { margin-top: var(--cc-space-md); }
.cases__more:hover { gap: 0.85rem; color: var(--cc-teal); }
.cases__viewport {
margin-top: var(--cc-space-lg);
padding-block: 0.5rem 4rem;
}
.cases__track {
display: flex;
width: max-content;
}
.cases__list {
display: flex;
gap: 1.25rem;
padding-inline: 0.625rem;
}
@keyframes cc-cases-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.cases--scroll .cases__track {
animation: cc-cases-marquee var(--cases-speed, 70s) linear infinite;
}
.cases--scroll .cases__viewport {
cursor: grab;
touch-action: pan-y;
}
.cases--scroll.is-held .cases__viewport { cursor: grabbing; }
.cases--scroll.is-held .cases__track {
-webkit-user-select: none;
user-select: none;
}
.cases--scroll .cases__track:has(.case-card:hover),
.cases--scroll .cases__track:has(.case-card:focus-within) {
animation-play-state: paused;
}
@supports not selector(:has(*)) {
.cases--scroll:hover .cases__track,
.cases--scroll:focus-within .cases__track {
animation-play-state: paused;
}
}
.cases:not(.cases--scroll) .cases__viewport {
overflow-x: auto;
scroll-snap-type: x proximity;
}
.cases:not(.cases--scroll) .cases__track {
width: max-content;
margin-inline: auto;
}
.cases:not(.cases--scroll) .case-card { scroll-snap-align: center; }
@media (prefers-reduced-motion: reduce) {
.cases__track { animation: none !important; }
.cases__list[aria-hidden="true"] { display: none; }
.cases__viewport {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
}
.case-card {
flex: 0 0 auto;
display: grid;
gap: 1.5rem;
align-items: center;
width: clamp(300px, 58vw, 800px);
padding: 1.25rem;
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 44px rgba(20, 45, 50, 0.14);
scroll-snap-align: center;
position: relative;
}
@media (min-width: 700px) {
.case-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 699px) {
.case-card {
grid-template-rows: auto 1fr;
align-content: start;
padding-bottom: 3.5rem;
}
.case-card__more {
position: absolute;
left: 1.25rem;
bottom: 1.25rem;
margin-top: 0;
}
}
.case-card__media {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--cc-bg-alt);
}
.case-card__img { width: 100%; height: 100%; object-fit: cover; }
.case-card__title {
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.45;
}
.case-card__link { color: var(--cc-ink); text-decoration: none; }
.case-card__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: 16px;
}
.case-card__excerpt {
margin-top: 0.85rem;
color: var(--cc-body);
font-size: 0.875rem;
line-height: 1.7;
}
.case-card__more {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 1rem;
color: var(--cc-ink);
font-size: 0.875rem;
font-weight: 500;
pointer-events: none;
}
.news {
position: relative;
padding-block: var(--cc-space-xl);
background: #ffffff;
}
.news--head { padding-bottom: 0; }
.news--grid { padding-top: var(--cc-space-lg); }
.news--grid .news__grid { margin-top: 0; }
.news__head { text-align: center; }
.news__heading { font-size: var(--cc-fs-section); }
.news__text {
max-width: 52ch;
margin: var(--cc-space-sm) auto 0;
font-size: var(--cc-fs-section-lead);
}
.news__grid {
display: grid;
gap: var(--cc-space-lg);
max-width: 1180px;
margin: var(--cc-space-lg) auto 0;
}
@media (min-width: 900px) {
.news__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.news-feature { position: relative; }
.news-feature__media {
margin-bottom: 1.5rem;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.news-feature__img { width: 100%; height: 100%; object-fit: cover; }
.news-feature__title {
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
font-weight: 600;
line-height: 1.4;
}
.news-feature__link { color: var(--cc-ink); text-decoration: none; }
.news-feature__link::after { content: ''; position: absolute; inset: 0; }
.news-feature__excerpt {
margin-top: 1rem;
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.7;
}
.news-feature .news__more { margin-top: 0.85rem; }
.news__list { display: grid; }
.news-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 150px;
gap: 1.25rem;
align-items: start;
padding-block: 1.5rem;
border-bottom: 1px solid var(--cc-line);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: 0; }
.news-item__title {
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
}
.news-item__link { color: var(--cc-ink); text-decoration: none; }
.news-item__link::after { content: ''; position: absolute; inset: 0; }
.news-item__excerpt {
margin-top: 0.6rem;
color: var(--cc-body);
font-size: 0.875rem;
line-height: 1.65;
}
.news-item .news__more { margin-top: 0.75rem; font-size: 0.8125rem; }
.news-item__media {
border-radius: 6px;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.news-item__img { width: 100%; height: 100%; object-fit: cover; }
.news__nav { display: none; }
@media (max-width: 767px) {
.news-item { grid-template-columns: minmax(0, 1fr); }
.news-item__media {
order: -1;
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 10px;
}
.news__nav:not([hidden]) {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.news:not(.news--grid) .news__nav:not([hidden]) { margin-top: var(--cc-space-lg); }
.news__nav:not([hidden]) + .news__grid { margin-top: 0; }
.news__grid {
grid-auto-flow: column;
grid-auto-columns: 84%;
gap: 1.1rem;
margin-inline: calc(var(--cc-gutter) * -1);
padding-inline: var(--cc-gutter);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: var(--cc-gutter);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.news__grid::-webkit-scrollbar { display: none; }
.news__list { display: contents; }
.news-feature,
.news-item {
scroll-snap-align: start;
min-width: 0;
}
.news-item {
padding-block: 0;
border-bottom: 0;
}
.news-feature__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
}
.news-feature:hover .news-feature__title,
.news-item:hover .news-item__title,
.case-card:hover .case-card__title { color: var(--cc-teal); }
@media (max-width: 767px) {
.home .case-card__excerpt,
.home .news-feature__excerpt,
.home .news-item__excerpt { display: none; }
}
@media (max-width: 560px) {
.faq { padding-block: var(--cc-space-lg); }
.cases { padding-block: var(--cc-space-lg); }
.news { padding-block: var(--cc-space-lg); }
}
.section-bg {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.section-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--bg-pos, center center);
}
.feature.has-bg-image,
.testimonials.has-bg-image {
background: #f2faf9;
isolation: isolate;
}
.news.has-bg-image {
background: #ffffff;
isolation: isolate;
}
.home-band {
position: relative;
isolation: isolate;
}
.home-band.has-bg-image {
background: #ffffff;
}
.home-band.has-bg-image > .cta,
.home-band.has-bg-image > .faq,
.home-band.has-bg-image > .cases,
.home-band.has-bg-image > .news,
.home-band.has-bg-image > .feature,
.home-band.has-bg-image > .results,
.home-band.has-bg-image > .testimonials {
background: none;
}
.home-band--wash.has-bg-image > .section-bg img { object-fit: cover; }
@media (max-width: 767px) {
.home-band--wash.has-bg-image > .section-bg img { display: none; }
.home-band--wash.has-bg-image > .section-bg {
background-image:
url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/landing/img/Group-1261156027-4.webp),
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 46%,
#127d7e 50%,
#0d7575 62%,
#2f8180 70%,
#75bcbb 78%,
#b2dfde 82%,
#eef9f9 86%,
#ffffff 90%
);
background-position: top center, top left;
background-repeat: no-repeat, no-repeat;
background-size: 100% auto, 100% 100%;
}
}
.home-band--wash.has-bg-image > .section-bg {
-webkit-mask-image: none;
mask-image: none;
}
.home-band--wash.has-bg-image .results__pattern,
.home-band--wash.has-bg-image .testimonials__pattern { display: none; }
.home-band.has-bg-image > .section-bg {
-webkit-mask-image: none;
mask-image: none;
}
.testimonials.has-bg-image .testimonials__pattern { z-index: -1; }
.page-band {
position: relative;
background:
linear-gradient(90deg, rgba(9, 82, 86, 0.6) 0%, rgba(9, 82, 86, 0) 20%),
linear-gradient(270deg, rgba(9, 82, 86, 0.5) 0%, rgba(9, 82, 86, 0) 18%),
radial-gradient(55% 22% at 100% 0%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 62%),
linear-gradient(
180deg,
#0a4d55 0%,
#12706e 6%,
#4fb2aa 13%,
#c3e8e3 20%,
#f4fbfa 27%,
#ffffff 40%,
#ffffff 100%
);
}
.page-band > .page-hero,
.page-band > .treat-grid,
.page-band > .contact,
.page-band > .cta {
background: none;
}
.blog-hero {
position: relative;
margin: 0.5rem;
padding-top: calc(var(--cc-header-h) + var(--cc-space-md));
padding-bottom: var(--cc-space-xl);
border-radius: 26px;
overflow: hidden;
isolation: isolate;
text-align: center;
background:
radial-gradient(60% 70% at 6% 0%, rgba(79, 178, 170, 0.75) 0%, rgba(79, 178, 170, 0) 62%),
radial-gradient(55% 60% at 0% 100%, rgba(120, 205, 198, 0.55) 0%, rgba(120, 205, 198, 0) 60%),
linear-gradient(115deg, #a7dcd6 0%, #d8f0ed 32%, #f4fbfa 58%, #ffffff 100%);
}
.blog-hero__pattern {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
width: clamp(220px, 40vw, 620px);
opacity: 0.5;
pointer-events: none;
-webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 100%);
mask-image: linear-gradient(270deg, #000 30%, transparent 100%);
}
.blog-hero__pattern img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right top;
}
.blog-hero__heading {
color: var(--cc-ink);
font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
}
.blog-hero__text {
max-width: 62ch;
margin: var(--cc-space-sm) auto 0;
color: var(--cc-body);
font-size: 1rem;
line-height: 1.65;
}
.blog-search {
display: flex;
align-items: center;
gap: 0.5rem;
width: min(100%, 480px);
margin: var(--cc-space-md) auto 0;
padding: 0.35rem 0.35rem 0.35rem 1.25rem;
border-radius: var(--cc-radius-pill);
background: #fff;
box-shadow: 0 10px 26px rgba(20, 45, 50, 0.1);
}
.blog-search__input {
flex: 1;
min-width: 0;
border: 0;
background: none;
color: var(--cc-ink);
font-size: 0.9375rem;
}
.blog-search__input::placeholder { color: #a9b3b5; }
.blog-search__input:focus { outline: none; }
.blog-search:focus-within {
outline: 3px solid var(--cc-drop);
outline-offset: 2px;
}
.blog-search__submit {
flex: 0 0 auto;
padding: 0.8rem 1.6rem;
border: 0;
border-radius: var(--cc-radius-pill);
background: var(--cc-teal);
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background var(--cc-transition);
}
.blog-search__submit:hover { background: var(--cc-teal-dark); }
.blog-layout {
display: grid;
gap: var(--cc-space-lg);
padding-block: var(--cc-space-xl);
align-items: start;
}
@media (min-width: 900px) {
.blog-layout { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
}
.blog-cats__heading {
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--cc-line);
color: var(--cc-muted);
font-size: 0.8125rem;
font-weight: 500;
}
.blog-cats__list { margin-top: 0.5rem; }
.blog-cats__link {
display: block;
padding: 0.65rem 0 0.65rem 1rem;
border-left: 2px solid transparent;
color: var(--cc-body);
font-size: 0.9375rem;
text-decoration: none;
transition: color var(--cc-transition), border-color var(--cc-transition);
}
.blog-cats__link:hover { color: var(--cc-teal); }
.blog-cats__item.is-current .blog-cats__link {
border-left-color: var(--cc-mint);
color: var(--cc-teal);
font-weight: 500;
}
.blog-promo {
margin-top: var(--cc-space-md);
padding: 1.4rem 1.25rem;
border-radius: 12px;
background: #e4f2f0;
}
.blog-promo__heading {
font-size: 1rem;
font-weight: 600;
}
.blog-promo__text {
margin-top: 0.6rem;
color: var(--cc-body);
font-size: 0.8125rem;
line-height: 1.6;
}
.blog-promo__btn {
margin-top: 1.1rem;
font-size: 0.8125rem;
padding: 0.75rem 1.25rem;
}
.blog-feature {
position: relative;
display: grid;
gap: var(--cc-space-md);
align-items: start;
margin-bottom: var(--cc-space-lg);
}
@media (min-width: 700px) {
.blog-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.blog-feature__media {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--cc-bg-alt);
}
.blog-feature__img { width: 100%; height: 100%; object-fit: cover; }
.blog-feature__title {
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
font-weight: 600;
line-height: 1.35;
}
.blog-feature__link { color: var(--cc-ink); text-decoration: none; }
.blog-feature__link::after { content: ''; position: absolute; inset: 0; }
.blog-feature__excerpt {
margin-top: 1rem;
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.65;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--cc-space-md) 1.75rem;
}
.blog-card { position: relative; }
.blog-card__media {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--cc-bg-alt);
}
.blog-card__img,
.blog-card__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-card__placeholder { background: linear-gradient(135deg, var(--cc-mist), #eef4f4); }
.blog-card__title {
margin-top: 1rem;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
}
.blog-card__link { color: var(--cc-ink); text-decoration: none; }
.blog-card__link::after { content: ''; position: absolute; inset: 0; }
.blog-card__excerpt {
margin-top: 0.7rem;
color: var(--cc-muted);
font-size: 0.8125rem;
line-height: 1.65;
}
.blog-more {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.85rem;
color: var(--cc-muted);
font-size: 0.8125rem;
transition: gap var(--cc-transition), color var(--cc-transition);
}
.blog-feature:hover .blog-more,
.blog-card:hover .blog-more { gap: 0.75rem; color: var(--cc-teal); }
.blog-feature:hover .blog-feature__title,
.blog-card:hover .blog-card__title { color: var(--cc-teal); }
@media (max-width: 640px) {
.blog-hero {
margin: 0.35rem;
border-radius: 18px;
padding-bottom: var(--cc-space-lg);
}
.blog-search { flex-wrap: wrap; padding: 0.75rem; }
.blog-search__input { width: 100%; flex: 1 0 100%; padding: 0.5rem 0.5rem 0.75rem; }
.blog-search__submit { width: 100%; }
}
.page-hero {
position: relative;
padding-top: calc(var(--cc-header-h) + var(--cc-space-lg));
padding-bottom: var(--cc-space-xl);
overflow: hidden;
isolation: isolate;
text-align: center;
background:
radial-gradient(58% 72% at 100% 0%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 58%),
radial-gradient(46% 60% at 0% 0%, rgba(4, 52, 58, 0.55) 0%, rgba(4, 52, 58, 0) 62%),
linear-gradient(168deg, #0a4d55 0%, #12706e 32%, #3ba79f 58%, #a5ddd7 82%, #f2fbfa 100%);
}
.page-hero.has-bg-image { background: #f2faf9; }
.page-hero__heading {
color: #fff;
font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
}
.page-hero__text {
max-width: 46ch;
margin: var(--cc-space-sm) auto 0;
color: rgba(255, 255, 255, 0.9);
font-size: 1.0625rem;
}
.treat-grid {
position: relative;
padding-block: var(--cc-space-lg) var(--cc-space-xl);
background:
linear-gradient(180deg, #f2fbfa 0%, #f8fcfc 26%, #ffffff 58%, #ffffff 100%);
}
.treat-grid__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.5rem;
max-width: 1180px;
margin-inline: auto;
}
.treat-card {
position: relative;
display: flex;
flex-direction: column;
padding: 0.9rem;
border-radius: 16px;
background: #fff;
box-shadow: 0 12px 30px rgba(20, 45, 50, 0.09);
transition: box-shadow var(--cc-transition), transform var(--cc-transition);
}
.treat-card:hover {
box-shadow: 0 18px 40px rgba(20, 45, 50, 0.16);
transform: translateY(-3px);
}
.treat-card__media {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--cc-bg-alt);
}
.treat-card__img,
.treat-card__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.treat-card__placeholder { background: linear-gradient(135deg, var(--cc-mist), #eef4f4); }
.treat-card__title {
margin: 0.9rem 0 0.85rem;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.35;
text-transform: capitalize;
}
.treat-card__link { color: var(--cc-ink); text-decoration: none; }
.treat-card__link::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.treat-card__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
margin: 0 0 0.85rem;
color: var(--cc-muted);
font-size: 0.8125rem;
line-height: 1.6;
}
.treat-card__btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
align-self: flex-start;
margin-top: auto;
padding: 0.3rem 0.3rem 0.3rem 1.1rem;
border-radius: var(--cc-radius-pill);
background: var(--cc-mint);
color: #fff;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
transition: background var(--cc-transition);
}
.treat-card__btn .btn__arrow {
width: 28px;
height: 28px;
background: #fff;
color: var(--cc-ink);
}
.treat-card:hover .treat-card__btn { background: var(--cc-teal); }
.treat-card.is-collapsed { display: none; }
@keyframes cc-card-reveal {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.treat-card.is-revealed {
animation: cc-card-reveal 0.55s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}
.treat-grid__more {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 48px;
margin: var(--cc-space-md) auto 0;
padding: 0 1.6rem;
border: 0;
border-radius: var(--cc-radius-pill);
background: var(--cc-mint);
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 26px rgba(9, 77, 94, 0.18);
transition: background var(--cc-transition), transform var(--cc-transition);
}
.treat-grid__more[hidden] { display: none; }
.treat-grid__more:hover,
.treat-grid__more:focus-visible {
background: var(--cc-teal);
transform: translateY(-2px);
}
.treat-grid__more .icon--chevron {
width: 22px;
height: 22px;
}
.contact {
position: relative;
padding-block: var(--cc-space-lg);
}
.contact__card {
display: grid;
gap: var(--cc-space-lg);
max-width: 1180px;
margin-inline: auto;
padding: clamp(1.75rem, 4vw, 4rem);
border-radius: 26px;
background: #fff;
box-shadow: 0 20px 60px rgba(20, 45, 50, 0.08);
}
@media (min-width: 880px) {
.contact__card {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: var(--cc-space-xl);
align-items: start;
}
}
.contact__heading { font-size: var(--cc-fs-section); }
.contact__text {
max-width: 34ch;
margin-top: var(--cc-space-sm);
color: var(--cc-body);
}
.contact__art { margin-top: var(--cc-space-md); }
.contact__art img { width: 100%; height: auto; }
.enquiry__row { display: grid; gap: 1.25rem; }
@media (min-width: 560px) {
.enquiry__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.enquiry__field { margin: 0 0 1rem; }
.enquiry__field label {
display: block;
margin-bottom: 0.4rem;
color: var(--cc-ink);
font-size: 0.8125rem;
font-weight: 500;
}
.enquiry__field input,
.enquiry__field textarea {
width: 100%;
padding: 0.95rem 1.1rem;
border: 1px solid #eef1f2;
border-radius: 10px;
background: #fbfcfc;
color: var(--cc-ink);
font-size: 0.9375rem;
}
.enquiry__field input::placeholder,
.enquiry__field textarea::placeholder { color: #a9b3b5; }
.enquiry__field input:focus,
.enquiry__field textarea:focus,
.enquiry__field .select__input:focus {
outline: 2px solid var(--cc-mint);
outline-offset: 1px;
border-color: var(--cc-mint);
}
.enquiry__field .select { display: block; }
.enquiry__field .select__input {
width: 100%;
min-width: 0;
padding: 0.95rem 2.6rem 0.95rem 1.1rem;
border: 1px solid #eef1f2;
border-radius: 10px;
background: #fbfcfc;
box-shadow: none;
color: var(--cc-muted);
font-size: 0.9375rem;
}
.enquiry__field textarea { resize: vertical; min-height: 10rem; }
.enquiry__actions { margin: 0.5rem 0 0; }
.enquiry__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact__notice {
margin-bottom: 1.25rem;
padding: 0.9rem 1.1rem;
border-radius: 8px;
font-size: 0.9375rem;
}
.contact__notice--ok { background: #dff0ee; color: #0d5a5c; }
.contact__notice--bad { background: #fdeaea; color: #8c2f2f; }
.closing-band {
position: relative;
background:
radial-gradient(46% 42% at 100% 14%, rgba(79, 178, 170, 0.55) 0%, rgba(79, 178, 170, 0) 62%),
radial-gradient(42% 38% at 100% 82%, rgba(79, 178, 170, 0.42) 0%, rgba(79, 178, 170, 0) 62%),
#ffffff;
}
.closing-band > .contact,
.closing-band > .cta {
background: none;
}
.article {
--cc-container: 1200px;
}
.article-head {
position: relative;
padding-top: calc(var(--cc-header-h) + var(--cc-space-lg));
padding-bottom: var(--cc-space-lg);
background:
radial-gradient(62% 72% at 2% 0%, rgba(79, 178, 170, 0.5) 0%, rgba(79, 178, 170, 0) 70%),
radial-gradient(78% 58% at 100% 2%, rgba(150, 208, 208, 0.34) 0%, rgba(150, 208, 208, 0) 72%),
linear-gradient(to bottom, #e3f3f0 0%, #f5faf9 40%, #ffffff 72%);
}
.article-head__title {
max-width: min(100%, 920px);
font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.5rem);
line-height: 1.15;
}
.article-head__standfirst {
max-width: min(100%, 880px);
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 1.125rem;
line-height: 1.6;
}
.article-layout {
display: grid;
gap: var(--cc-space-lg);
padding-block: var(--cc-space-lg) var(--cc-space-xl);
align-items: start;
}
@media (min-width: 1080px) {
.article-layout {
grid-template-columns: 210px minmax(0, 1fr) 210px;
column-gap: 3.5rem;
row-gap: var(--cc-space-md);
}
.article-layout--no-toc { grid-template-columns: minmax(0, 1fr) 210px; }
.article-layout--no-toc .article-body { max-width: 668px; }
}
@media (min-width: 1080px) {
.article-aside {
position: sticky;
top: calc(var(--cc-header-h) + 1rem);
}
}
.toc__heading {
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--cc-line);
color: var(--cc-muted);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.toc__list { margin-top: 0.4rem; }
.toc__link {
display: block;
padding: 0.5rem 0 0.5rem 0.9rem;
border-left: 2px solid var(--cc-line);
color: var(--cc-body);
font-size: 0.8125rem;
line-height: 1.4;
text-decoration: none;
transition: color var(--cc-transition), border-color var(--cc-transition);
}
.toc__link:hover { color: var(--cc-teal); }
.toc__item.is-active .toc__link {
border-left-color: var(--cc-mint);
color: var(--cc-teal);
font-weight: 500;
}
.article-aside .blog-promo { margin-top: var(--cc-space-md); }
.article-body .entry-content {
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.75;
}
.article-body .entry-content > * + * { margin-top: 1.1rem; }
.article-body .entry-content h2 {
margin-top: var(--cc-space-md);
font-size: 1.25rem;
font-weight: 600;
scroll-margin-top: calc(var(--cc-header-h) + 1.5rem);
}
.article-body .entry-content h3 {
margin-top: var(--cc-space-md);
color: var(--cc-mint);
font-size: 1rem;
font-weight: 600;
scroll-margin-top: calc(var(--cc-header-h) + 1.5rem);
}
.article-body .entry-content a {
color: var(--cc-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.article-body .entry-content a:hover { color: var(--cc-teal); }
.article-body .entry-content img { border-radius: 10px; }
.article-body .entry-content ul,
.article-body .entry-content ol { padding-left: 1.25rem; }
.article-body .entry-content li + li { margin-top: 0.4rem; }
.entry-ba .results__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
width: auto;
margin: 0;
padding: 0;
}
.entry-ba .results__item { width: auto; }
.article-faqs {
margin-top: var(--cc-space-lg);
scroll-margin-top: calc(var(--cc-header-h) + 1.5rem);
}
.article-body .entry-content { scroll-margin-top: calc(var(--cc-header-h) + 1.5rem); }
.article-faqs__heading {
margin-bottom: var(--cc-space-sm);
font-size: 1.125rem;
font-weight: 600;
}
.post-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cc-space-sm);
margin-top: var(--cc-space-lg);
padding: 1.75rem;
border-radius: 14px;
background: linear-gradient(105deg, #06373d 0%, #0d5a5c 45%, #57bdb5 100%);
}
.post-cta__body { flex: 1 1 16rem; min-width: 0; }
.post-cta__heading { color: #fff; font-size: 1.25rem; }
.post-cta__text {
max-width: 42ch;
margin-top: 0.5rem;
color: rgba(255, 255, 255, 0.85);
font-size: 0.875rem;
line-height: 1.6;
}
.post-cta__btn { flex: 0 0 auto; font-size: 0.875rem; }
.article-rail__heading {
margin-bottom: var(--cc-space-sm);
font-size: 1.0625rem;
font-weight: 600;
}
.rail-card { position: relative; margin-bottom: 3rem; }
.rail-card__media {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--cc-bg-alt);
}
.rail-card__img { width: 100%; height: 100%; object-fit: cover; }
.rail-card__title {
margin-top: 0.85rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
}
.rail-card__link { color: var(--cc-ink); text-decoration: none; }
.rail-card__link::after { content: ''; position: absolute; inset: 0; }
.rail-card__excerpt {
margin-top: 0.55rem;
color: var(--cc-muted);
font-size: 0.875rem;
line-height: 1.55;
}
.rail-card:hover .rail-card__title { color: var(--cc-teal); }
.site-footer {
padding-top: var(--cc-space-lg);
background:
radial-gradient(58% 95% at 0% 100%, rgba(190, 227, 223, 0.85) 0%, rgba(190, 227, 223, 0) 55%),
radial-gradient(48% 85% at 100% 65%, rgba(140, 202, 198, 0.5) 0%, rgba(140, 202, 198, 0) 62%),
linear-gradient(115deg, #0b4a54 0%, #0d565c 55%, #2e7f81 100%);
color: rgba(255, 255, 255, 0.88);
}
.site-footer .site-logo a:has(.site-logo__img--light) .site-logo__img--dark { display: none; }
.site-footer .site-logo__img--light { display: block; }
.site-footer .site-logo a { color: #fff; }
.site-footer__grid {
display: grid;
gap: var(--cc-space-md);
padding-bottom: var(--cc-space-lg);
}
@media (min-width: 900px) {
.site-footer__grid {
grid-template-columns: 1.6fr 1fr 2fr;
gap: var(--cc-space-lg);
}
}
.site-footer__logo img { max-height: 40px; width: auto; }
.site-footer__heading {
margin-bottom: 1.5rem;
font-size: 1.25rem;
font-weight: 700;
color: #fff;
}
.site-footer__list a {
display: inline-block;
padding: 0.45rem 0;
color: rgba(255, 255, 255, 0.85);
font-size: 1rem;
text-decoration: none;
transition: color var(--cc-transition);
}
.site-footer__list a:hover { color: #fff; }
@media (min-width: 900px) {
.site-footer__list--columns {
columns: 2;
column-gap: var(--cc-space-md);
}
.site-footer__list--columns li { break-inside: avoid; }
}
.social-links {
display: flex;
gap: 1.4rem;
margin: 2rem 0;
}
.social-links__link {
display: inline-flex;
color: #fff;
transition: color var(--cc-transition);
}
.social-links__link:hover { color: var(--cc-drop); }
.social-links__link svg { width: 22px; height: 22px; }
.locations { display: grid; gap: 1.25rem; }
.locations__item {
display: grid;
grid-template-columns: 20px 1fr;
gap: 0.85rem;
align-items: start;
max-width: 30rem;
}
.locations__pin { color: #fff; padding-top: 3px; }
.locations__pin svg { width: 18px; height: 18px; }
.locations__address {
font-style: normal;
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
line-height: 1.55;
}
a.locations__address:hover { color: #fff; }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cc-space-sm);
padding-block: 1.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.28);
font-size: 0.9375rem;
}
.site-footer__legal-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.site-footer__legal li { display: flex; align-items: center; gap: 0.5rem; }
.site-footer__legal li::before { content: '|'; color: rgba(255, 255, 255, 0.4); }
.site-footer__legal a {
color: rgba(255, 255, 255, 0.85);
text-decoration: underline;
}
.site-footer__legal a:hover { color: #fff; }
@media (max-width: 899px) {
.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
.post-list { display: grid; gap: var(--cc-space-md); }
@media (min-width: 700px) {
.post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.post-card {
border: 1px solid var(--cc-line);
border-radius: var(--cc-radius);
overflow: hidden;
background: var(--cc-bg);
}
.post-card__body { padding: var(--cc-space-sm); }
.page-head {
padding-block: var(--cc-space-lg);
background: var(--cc-bg-alt);
}
.breadcrumbs {
margin-bottom: var(--cc-space-xs);
font-size: 0.875rem;
color: var(--cc-muted);
}
.error-404__inner { padding-block: var(--cc-space-xl); text-align: center; }
.error-404__code {
font-size: clamp(4rem, 12vw, 9rem);
font-weight: 700;
line-height: 1;
color: var(--cc-mist);
}
.cc-admin-hint {
display: inline-block;
padding: 0.5em 1em;
border: 1px dashed var(--cc-muted);
border-radius: var(--cc-radius);
color: var(--cc-muted);
font-size: 0.875rem;
text-decoration: none;
}
.journey-band {
position: relative;
--cc-container: 1200px;
background:
radial-gradient(760px 420px at 0% 0%, rgba(52, 148, 144, 0.5) 0%, rgba(52, 148, 144, 0) 70%),
radial-gradient(620px 380px at 100% 40px, rgba(120, 196, 192, 0.32) 0%, rgba(120, 196, 192, 0) 72%),
linear-gradient(90deg, rgba(140, 202, 198, 0.28) 0%, rgba(140, 202, 198, 0) 18%),
linear-gradient(270deg, rgba(140, 202, 198, 0.24) 0%, rgba(140, 202, 198, 0) 16%),
linear-gradient(180deg, #e8f5f3 0px, #f6fbfa 220px, #ffffff 460px, #ffffff 100%);
}
.journey-band > .jhero,
.journey-band > .stages-tl,
.journey-band > .cta {
background: none;
}
.jhero {
padding-top: calc(var(--cc-header-h) + var(--cc-space-lg));
padding-bottom: var(--cc-space-xl);
}
.jhero__heading {
max-width: min(100%, 900px);
font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.5rem);
font-weight: 500;
line-height: 1.15;
}
.jhero__text {
max-width: min(100%, 820px);
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 1rem;
line-height: 1.7;
}
.jhero__text > * + * { margin-top: 1.1rem; }
.jhero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--cc-space-md);
}
.btn--outline {
border-color: var(--cc-mint);
background: #fff;
color: var(--cc-ink);
}
.btn--outline:hover,
.btn--outline:focus-visible {
border-color: var(--cc-teal);
background: #fff;
color: var(--cc-teal);
}
.stages-tl { padding-bottom: var(--cc-space-xl); }
.stages-tl__heading {
font-size: var(--cc-fs-section);
font-weight: 500;
}
.stages-tl__text {
max-width: 52ch;
margin-top: var(--cc-space-xs);
color: var(--cc-muted);
line-height: 1.7;
}
.stages-tl__list { margin-top: var(--cc-space-xl); }
.stage-tl {
position: relative;
display: grid;
gap: var(--cc-space-sm);
}
.stage-tl + .stage-tl { margin-top: var(--cc-space-xl); }
.stage-tl__label {
display: block;
color: var(--cc-body);
font-size: 0.8125rem;
}
.stage-tl__num {
display: block;
color: var(--cc-mint);
font-size: 2.25rem;
font-weight: 300;
line-height: 1.1;
}
.stage-tl__panel {
display: flex;
flex-direction: column;
gap: var(--cc-space-md);
}
.stage-tl__body { min-width: 0; }
.stage-tl__title,
.stage-tl__content h3 {
font-size: 1.0625rem;
font-weight: 600;
}
.stage-tl__content {
color: var(--cc-body);
font-size: 0.875rem;
line-height: 1.7;
}
.stage-tl__content > * + * { margin-top: 0.9rem; }
.stage-tl__content h3 { margin-top: var(--cc-space-sm); color: var(--cc-ink); }
.stage-tl__title + .stage-tl__content { margin-top: 0.7rem; }
.stage-tl__media {
border-radius: 16px;
overflow: hidden;
background: var(--cc-bg-alt);
aspect-ratio: 14 / 15;
}
.stage-tl__media img { width: 100%; height: 100%; object-fit: cover; }
.substages {
display: grid;
gap: var(--cc-space-md);
margin-top: var(--cc-space-md);
}
.substage__chip {
display: inline-block;
padding: 0.3rem 0.85rem;
border-radius: var(--cc-radius-pill);
background: var(--cc-mist);
color: var(--cc-teal-dark);
font-size: 0.75rem;
font-weight: 500;
}
.substage__title {
margin-top: 0.85rem;
font-size: 0.9375rem;
font-weight: 600;
}
.substage__text {
margin-top: 0.5rem;
color: var(--cc-body);
font-size: 0.8125rem;
line-height: 1.65;
}
@media (min-width: 700px) {
.substages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.stage-tl {
grid-template-columns: 110px minmax(0, 1fr);
gap: var(--cc-space-md);
}
.stage-tl::before {
content: '';
position: absolute;
top: 0;
bottom: calc(var(--cc-space-xl) * -1);
left: 0;
width: 1px;
background: var(--cc-line);
}
.stage-tl:first-child::before { top: 2.4rem; }
.stage-tl:last-child::before { bottom: auto; height: 2.4rem; }
.stage-tl__marker { position: relative; padding-left: 1rem; }
.stage-tl__marker::before {
content: '';
position: absolute;
top: 2.4rem;
left: 0;
width: 12px;
height: 1px;
background: var(--cc-line);
}
.stage-tl__panel {
flex-direction: row;
align-items: flex-start;
gap: var(--cc-space-lg);
}
.stage-tl:nth-child(even) .stage-tl__panel { flex-direction: row-reverse; }
.stage-tl__body { flex: 1 1 auto; }
.stage-tl__media { flex: 0 0 clamp(240px, 32%, 350px); }
}
.consult-page { --cc-container: 1200px; }
@media (min-width: 900px) {
.page-template-template-location .consult-page,
.page-template-template-surgeon .consult-page,
.page-template-template-about .consult-page {
background: #ffffff url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/page-wash.jpg) top center / 100% 100% no-repeat;
}
.page-template-template-location .news,
.page-template-template-location .cta,
.page-template-template-location .faq,
.page-template-template-surgeon .news,
.page-template-template-surgeon .cta,
.page-template-template-surgeon .faq,
.page-template-template-about .news,
.page-template-template-about .cta,
.page-template-template-about .faq { background-color: transparent; }
}
.chero {
position: relative;
margin: 0.5rem;
padding-top: calc(var(--cc-header-h) + var(--cc-space-md));
padding-bottom: var(--cc-space-xl);
border-radius: 26px;
overflow: hidden;
background:
radial-gradient(72% 130% at 0% 55%, rgba(74, 178, 172, 0.85) 0%, rgba(74, 178, 172, 0) 62%),
radial-gradient(58% 110% at 100% 45%, rgba(150, 212, 208, 0.5) 0%, rgba(150, 212, 208, 0) 70%),
linear-gradient(180deg, #f3fbfa 0%, #ffffff 100%);
}
.chero__pattern {
position: absolute;
inset: 0;
background-image: url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/hexagons.svg);
background-size: 132px 231px;
background-position: right -18px top -34px;
opacity: 0.5;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 84%);
mask-image: linear-gradient(90deg, transparent 34%, #000 84%);
}
.chero__pattern--art {
left: auto;
width: min(46%, 620px);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top right;
opacity: 1;
-webkit-mask-image: none;
mask-image: none;
}
.chero--art {
background: #ffffff;
}
.chero--art .chero__pattern { display: none; }
.chero__art {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: left top;
pointer-events: none;
}
.chero__inner { position: relative; }
.chero__heading {
max-width: min(100%, 900px);
font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.5rem);
font-weight: 500;
line-height: 1.15;
text-transform: none;
}
.chero__text {
max-width: min(100%, 620px);
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 1rem;
line-height: 1.7;
}
.chero__text > * + * { margin-top: 1.1rem; }
.chero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--cc-space-md);
}
.frows { padding-block: var(--cc-space-xl); }
.frow {
display: flex;
flex-direction: column;
gap: var(--cc-space-md);
}
.frow + .frow { margin-top: var(--cc-space-xl); }
.frow__heading {
max-width: 24ch;
font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
font-weight: 600;
line-height: 1.25;
}
.frow__content {
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.75;
}
.frow__content > * + * { margin-top: 0.9rem; }
.frow__media {
border-radius: 18px;
overflow: hidden;
background: var(--cc-bg-alt);
aspect-ratio: 1;
}
.frow__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
.frow {
flex-direction: row;
align-items: center;
gap: var(--cc-space-lg);
}
.frow--flip { flex-direction: row-reverse; }
.frow__body { flex: 1 1 auto; min-width: 0; }
.frow__figure { flex: 0 0 clamp(260px, 36%, 430px); }
.frow--collage .frow__figure { flex-basis: clamp(300px, 42%, 520px); }
}
.frow--wide .frow__heading { max-width: none; }
.frow__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: var(--cc-space-md);
}
.frow__collage {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.frow__collage .frow__media { aspect-ratio: 4 / 3; }
.frow__collage .frow__media:nth-child(odd):last-child {
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
}
.frow__link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: var(--cc-ink);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
}
.frow__link .btn__arrow {
width: auto;
height: auto;
background: none;
color: inherit;
transition: transform var(--cc-transition);
}
.frow__link:hover,
.frow__link:focus-visible { color: var(--cc-teal); }
.frow__link:hover .btn__arrow { transform: translateX(3px); }
.frow__content ul {
margin-top: 0.9rem;
padding-left: 1.1rem;
list-style: none;
}
.frow__content ul li {
position: relative;
padding-left: 0.9rem;
}
.frow__content ul li + li { margin-top: 0.45rem; }
.frow__content ul li::before {
content: '';
position: absolute;
top: 0.65em;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--cc-mint);
}
.frow__content a { color: inherit; }
.frow__content ul.frow__checks {
margin-top: var(--cc-space-md);
padding-left: 0;
}
.frow__content ul.frow__checks li {
padding-left: 2.1rem;
line-height: 1.5;
}
.frow__content ul.frow__checks li + li { margin-top: 0.9rem; }
.frow__content ul.frow__checks li::before {
top: 0.05em;
width: 22px;
height: 22px;
background: var(--cc-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.9 2.9 5.5-5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.media { padding-bottom: var(--cc-space-xl); }
.media__head {
display: flex;
justify-content: flex-end;
margin-bottom: var(--cc-space-sm);
}
.media__nav { display: flex; gap: 0.5rem; }
.media__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--cc-line);
border-radius: 50%;
background: #fff;
color: var(--cc-ink);
cursor: pointer;
transition: border-color var(--cc-transition), color var(--cc-transition);
}
.media__arrow:hover,
.media__arrow:focus-visible { border-color: var(--cc-teal); color: var(--cc-teal); }
.media__arrow[disabled] { opacity: 0.35; cursor: default; }
.media__grid { display: grid; gap: var(--cc-space-md); }
.media__stage {
position: relative;
border-radius: 14px;
overflow: hidden;
background: var(--cc-bg-alt);
aspect-ratio: 16 / 9;
}
.media__stage img,
.media__stage iframe,
.media__stage video {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.media__caption {
margin-top: 0.9rem;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.35;
}
.media__play {
position: absolute;
bottom: 1rem;
left: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--cc-ink);
cursor: pointer;
transition: background var(--cc-transition), transform var(--cc-transition);
}
.media__play:hover,
.media__play:focus-visible { background: #fff; transform: scale(1.06); }
.media__play--sm {
width: 30px;
height: 30px;
bottom: 0.85rem;
left: 0.85rem;
}
.media__list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
.media__list::-webkit-scrollbar { display: none; }
.media__card {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 12px;
overflow: hidden;
background: var(--cc-bg-alt);
aspect-ratio: 2 / 1;
cursor: pointer;
text-align: left;
}
.media__card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.media__card::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 55%;
background: linear-gradient(180deg, rgba(10, 40, 44, 0) 0%, rgba(10, 40, 44, 0.72) 100%);
pointer-events: none;
}
.media__label {
position: absolute;
right: 0.9rem;
bottom: 0.9rem;
left: 3.6rem;
z-index: 1;
color: #fff;
font-size: 0.8125rem;
line-height: 1.35;
}
.media__item.is-current .media__card { outline: 2px solid var(--cc-mint); outline-offset: 2px; }
@media (min-width: 900px) {
.media__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.media__list { max-height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
.media__list { scroll-behavior: auto; }
.media__play:hover { transform: none; }
}
.chero__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
gap: var(--cc-space-md) var(--cc-space-sm);
margin-top: var(--cc-space-lg);
}
.chero-stat__value {
color: var(--cc-teal);
font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
font-weight: 400;
line-height: 1.1;
}
.chero-stat__label {
margin: 0.5rem 0 0;
color: var(--cc-muted);
font-size: 0.6875rem;
line-height: 1.5;
}
@media (min-width: 900px) {
.chero__inner--split,
.chero__inner--badges {
display: grid;
align-items: center;
column-gap: var(--cc-space-xl);
}
.chero__inner--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.chero__inner--badges { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.chero__inner--split .chero__heading { max-width: 20ch; }
.chero__inner--split .chero__text { margin-top: 0; }
.chero__inner--badges .chero__heading { max-width: 18ch; }
.chero__inner--badges .badges { margin-top: 0; }
}
.frow__credit {
margin-top: var(--cc-space-sm);
padding-left: 0.9rem;
border-left: 2px solid var(--cc-mint);
}
.frow__credit-name {
font-size: 0.9375rem;
font-weight: 600;
}
.frow__credit-role {
margin-top: 0.35rem;
color: var(--cc-muted);
font-size: 0.8125rem;
line-height: 1.55;
}
.frow__content blockquote {
margin: var(--cc-space-md) 0 0;
padding-left: 1.1rem;
border-left: 2px solid var(--cc-mint);
color: var(--cc-teal);
font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
line-height: 1.45;
}
.frow__content blockquote + p {
margin-top: 0.9rem;
padding-left: 1.1rem;
color: var(--cc-ink);
font-size: 0.875rem;
}
.papers { padding-bottom: var(--cc-space-xl); }
.papers__heading {
font-size: var(--cc-fs-section);
font-weight: 500;
}
.papers__text {
max-width: 46ch;
margin-top: var(--cc-space-xs);
color: var(--cc-muted);
line-height: 1.7;
}
.papers__list {
margin: var(--cc-space-lg) 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--cc-line);
}
.paper {
display: grid;
gap: 0.35rem;
padding: var(--cc-space-sm) 0;
border-bottom: 1px solid var(--cc-line);
}
.paper__num {
color: var(--cc-mint);
font-size: 1.25rem;
font-weight: 400;
line-height: 1.2;
}
.paper__title {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.45;
}
.paper__authors,
.paper__citation {
margin-top: 0.35rem;
color: var(--cc-muted);
font-size: 0.8125rem;
line-height: 1.5;
}
.paper__pmid {
justify-self: start;
padding: 0.3rem 0.65rem;
border: 1px solid var(--cc-line);
border-radius: 6px;
color: var(--cc-body);
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-decoration: none;
white-space: nowrap;
transition: border-color var(--cc-transition), color var(--cc-transition);
}
.paper__pmid:hover,
.paper__pmid:focus-visible { border-color: var(--cc-teal); color: var(--cc-teal); }
@media (min-width: 800px) {
.paper {
grid-template-columns: 3.5rem minmax(0, 1fr) auto;
align-items: start;
gap: var(--cc-space-sm);
padding: var(--cc-space-md) 0;
}
.paper__pmid { justify-self: end; }
}
.stories { padding-block: var(--cc-space-xl) var(--cc-space-lg); }
.stories__filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: var(--cc-space-md);
}
.pill {
padding: 0.5rem 1.1rem;
border: 1px solid var(--cc-line);
border-radius: var(--cc-radius-pill);
background: #fff;
color: var(--cc-body);
font-size: 0.8125rem;
line-height: 1;
cursor: pointer;
transition: border-color var(--cc-transition), background var(--cc-transition), color var(--cc-transition);
}
.pill:hover,
.pill:focus-visible { border-color: var(--cc-mint); color: var(--cc-teal); }
.pill.is-active {
border-color: var(--cc-mint);
background: var(--cc-mint);
color: #fff;
}
.stories__grid {
display: grid;
gap: var(--cc-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.stories__item.is-hidden { display: none; }
.story {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: var(--cc-space-sm);
border: 1px solid var(--cc-line);
border-radius: 14px;
background: #fff;
}
.story__mark {
color: var(--cc-mint);
font-size: 1.75rem;
font-weight: 700;
line-height: 0.8;
}
.story__date {
align-self: flex-end;
margin-top: -1.4rem;
color: var(--cc-muted);
font-size: 0.75rem;
}
.story__quote {
margin: 0.9rem 0 0;
color: var(--cc-body);
font-size: 0.875rem;
line-height: 1.6;
}
.story__quote p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
.story__person {
display: flex;
align-items: center;
gap: 0.65rem;
margin-top: auto;
padding-top: var(--cc-space-sm);
}
.story__avatar,
.hero-quote__avatar {
position: relative;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
}
.story__avatar img,
.hero-quote__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.story__avatar--initials {
display: grid;
place-items: center;
background: var(--cc-mint);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
.story__who { display: flex; flex-direction: column; gap: 0.15rem; }
.story__name { font-size: 0.875rem; font-weight: 600; }
.story__treatment { color: var(--cc-muted); font-size: 0.75rem; }
.stories__empty {
margin-top: var(--cc-space-md);
color: var(--cc-muted);
}
@media (min-width: 640px) {
.stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.stories__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hero-quote { padding-block: var(--cc-space-lg); }
.hero-quote__card {
position: relative;
margin: 0;
padding: var(--cc-space-md);
border-radius: 16px;
overflow: hidden;
background: var(--cc-mint);
color: #fff;
}
.hero-quote__mark {
display: block;
font-size: 2rem;
font-weight: 700;
line-height: 0.7;
color: var(--cc-teal-dark);
}
.hero-quote__ghost {
position: absolute;
top: -0.35em;
right: 0.35em;
color: rgba(255, 255, 255, 0.16);
font-size: 9rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
}
.hero-quote__text {
position: relative;
max-width: 46ch;
margin: var(--cc-space-sm) 0 0;
font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
line-height: 1.5;
}
.hero-quote__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cc-space-sm);
margin-top: var(--cc-space-md);
}
.hero-quote__person { display: flex; align-items: center; gap: 0.7rem; }
.hero-quote__who { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-quote__name { font-size: 0.875rem; font-weight: 600; }
.hero-quote__meta { color: rgba(255, 255, 255, 0.8); font-size: 0.75rem; }
.hero-quote__stars { color: #fff; font-size: 0.9375rem; letter-spacing: 0.15em; }
.vids { padding-block: var(--cc-space-lg); }
.vids__heading {
font-size: var(--cc-fs-section);
font-weight: 600;
}
.vids__text { margin-top: 0.4rem; color: var(--cc-body); font-size: var(--cc-fs-section-lead); }
.vids__list {
display: grid;
gap: var(--cc-space-md);
margin: var(--cc-space-lg) 0 0;
padding: 0;
list-style: none;
}
.vids__frame {
position: relative;
border-radius: 14px;
overflow: hidden;
background: var(--cc-bg-alt);
aspect-ratio: 16 / 10;
}
.vids__frame img,
.vids__frame iframe,
.vids__frame video {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.vids__frame::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(40% 40% at 50% 50%, rgba(9, 30, 33, 0.38) 0%, rgba(9, 30, 33, 0) 70%),
linear-gradient(180deg, rgba(9, 30, 33, 0.14) 0%, rgba(9, 30, 33, 0) 32%, rgba(9, 30, 33, 0.34) 100%);
transition: opacity var(--cc-transition);
}
.vids__frame:has(iframe)::after,
.vids__frame:has(video)::after { opacity: 0; }
.vids__play {
position: absolute;
top: 50%;
left: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--cc-teal);
box-shadow: 0 6px 20px rgba(9, 30, 33, 0.32);
cursor: pointer;
transform: translate(-50%, -50%);
transition: background var(--cc-transition), scale var(--cc-transition);
}
.vids__play:hover,
.vids__play:focus-visible { background: #fff; scale: 1.07; }
.vids__caption { margin-top: 0.7rem; color: var(--cc-body); font-size: 0.875rem; }
@media (min-width: 700px) {
.vids__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.hero-quote__card { padding: var(--cc-space-lg); }
}
@media (prefers-reduced-motion: reduce) {
.vids__play:hover { scale: 1; }
}
.chero__inner--centre { text-align: center; }
.chero__inner--centre .chero__heading,
.chero__inner--centre .chero__text {
margin-inline: auto;
}
.chero__inner--centre .chero__actions { justify-content: center; }
.results--grid .results__head { text-align: left; }
.results--grid .results__text { margin-inline: 0; }
.results--grid .results__filters { justify-content: flex-start; }
.results--grid .results__strip {
width: min(100% - (var(--cc-gutter) * 2), var(--cc-container));
margin-inline: auto;
overflow-x: visible;
scroll-snap-type: none;
}
.results--grid .results__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--cc-space-sm);
width: auto;
margin-inline: 0;
}
.results--grid .results__item { width: auto; }
.cases.cases--grid .cases__viewport {
width: min(100% - (var(--cc-gutter) * 2), var(--cc-container));
margin-inline: auto;
overflow: visible;
scroll-snap-type: none;
padding-block: var(--cc-space-xl) var(--cc-space-lg);
}
.cases.cases--grid .cases__track {
display: block;
width: auto;
margin-inline: 0;
animation: none;
transform: none;
}
.cases.cases--grid .cases__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cc-space-lg) var(--cc-space-md);
width: auto;
margin: 0;
padding: 0;
}
.cases.cases--grid .case-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.9rem;
width: auto;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.cases.cases--grid .case-card__media {
border-radius: 0;
aspect-ratio: 4 / 3;
}
.cases.cases--grid .case-card__body {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0;
}
.cases.cases--grid .case-card__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.cases.cases--grid .case-card__more {
position: static;
margin-top: 1rem;
}
@media (min-width: 640px) {
.cases.cases--grid .cases__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.cases.cases--grid .cases__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.logo-strip--plain { background: none; }
.consult-page > .chero + *,
.journey-band > .jhero + * {
padding-top: var(--cc-space-xl);
}
.consult-page > .chero + .cases .cases__viewport,
.consult-page > .chero + .results .results__head,
.consult-page > .chero + .stories .stories__filters {
padding-top: 0;
margin-top: 0;
}
.section-head {
max-width: 60ch;
margin-inline: auto;
text-align: center;
}
.section-head__title {
font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
font-weight: 600;
}
.section-head__text {
margin-top: 0.7rem;
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.7;
}
.badges {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: var(--cc-space-md) 0 0;
padding: 0;
list-style: none;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.7rem;
align-self: flex-start;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
border-radius: var(--cc-radius-pill);
background: #fff;
box-shadow: 0 8px 24px rgba(20, 45, 50, 0.10);
font-size: 0.875rem;
}
.badge:nth-child(2) { margin-left: 2.5rem; }
.badge:nth-child(3) { margin-left: 1.25rem; }
.badge:nth-child(4) { margin-left: 3.25rem; }
.badge__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
}
.badge--amber .badge__icon  { background: #fdf0cd; color: #d69b12; }
.badge--teal .badge__icon   { background: #d5eef0; color: #128b95; }
.badge--green .badge__icon  { background: #d8f0dd; color: #2e8b4a; }
.badge--purple .badge__icon { background: #f3dcf3; color: #a02ba0; }
.glance { padding-bottom: var(--cc-space-xl); }
.glance__price {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: var(--cc-space-md);
color: var(--cc-muted);
font-size: 0.9375rem;
}
.glance__price-value {
padding: 0.45rem 1.25rem;
border-radius: var(--cc-radius-pill);
background: var(--cc-mist);
color: var(--cc-teal);
font-size: 1.25rem;
font-weight: 500;
}
.glance__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--cc-space-sm);
margin: var(--cc-space-lg) 0 0;
padding: 0;
list-style: none;
}
.fact {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: var(--cc-space-sm);
border: 1px solid var(--cc-line);
border-radius: 20px;
background: #fff;
}
.fact__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: var(--cc-space-sm);
border-radius: 10px;
background: var(--cc-bg-alt);
color: var(--cc-body);
}
.fact__title { font-size: 0.9375rem; font-weight: 600; }
.fact__value { margin-top: 0.4rem; color: var(--cc-muted); font-size: 0.8125rem; line-height: 1.55; }
.tjourney { padding-bottom: var(--cc-space-xl); }
.tjourney__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cc-space-xl) var(--cc-space-md);
margin: var(--cc-space-xl) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 640px) {
.tjourney__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.tjourney__list { grid-template-columns: repeat(var(--jsteps, 5), minmax(0, 1fr)); }
}
.jstep { position: relative; }
.jstep__num {
display: block;
margin-bottom: 1.5rem;
-webkit-text-stroke: 1.5px var(--cc-mint);
color: transparent;
font-size: 2.75rem;
font-weight: 700;
line-height: 1;
}
.jstep::after { display: none; }
@media (min-width: 1000px) {
.jstep::after {
content: '';
display: block;
position: absolute;
top: 1.375rem;
left: 3.4rem;
right: calc(var(--cc-space-md) * -1);
border-top: 1px dashed #b9dfe0;
}
.jstep--row-end::after { display: none; }
}
.jstep__title { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.jstep__text {
margin-top: 1.5rem;
color: var(--cc-body);
font-size: 0.875rem;
line-height: 2;
}
.ttimeline { padding-bottom: var(--cc-space-xl); }
.ttimeline__grid {
display: grid;
gap: 0;
margin: var(--cc-space-xl) 0 0;
padding: 0;
list-style: none;
}
.phase {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: var(--cc-space-md);
}
.phase__when {
display: inline-block;
padding: 0.35rem 0.9rem;
border-radius: var(--cc-radius-pill);
background: var(--cc-mist);
color: var(--cc-teal);
font-size: 0.75rem;
font-weight: 500;
}
.ttimeline__grid.is-revealing .phase {
--phase-in: 0ms;
}
.ttimeline__grid.is-revealing .phase .phase__when {
opacity: 0;
transform: translateY(14px) scale(0.88);
transform-origin: left center;
}
.ttimeline__grid.is-revealing .phase .phase__title {
opacity: 0;
transform: translateY(18px);
}
.ttimeline__grid.is-revealing .phase .phase__text {
opacity: 0;
transform: translateY(26px);
filter: blur(5px);
}
.ttimeline__grid.is-revealing .phase.is-revealed .phase__when,
.ttimeline__grid.is-revealing .phase.is-revealed .phase__title,
.ttimeline__grid.is-revealing .phase.is-revealed .phase__text {
opacity: 1;
transform: none;
filter: none;
}
.ttimeline__grid.is-revealing .phase.is-revealed .phase__when {
transition-property: opacity, transform;
transition-duration: 0.34s, 0.66s;
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.34, 1.56, 0.64, 1);
transition-timing-function:
cubic-bezier(0.22, 1, 0.36, 1),
linear(
0, 0.418 7.2%, 0.71 14.4%, 0.898 21.4%, 0.986 27%, 1.024 33.6%,
1.031 41.2%, 1.014 52.4%, 0.996 68.6%, 1
);
transition-delay: var(--phase-in);
}
.ttimeline__grid.is-revealing .phase.is-revealed .phase__title {
transition-property: opacity, transform;
transition-duration: 0.46s, 0.78s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--phase-in) + 120ms);
}
.ttimeline__grid.is-revealing .phase.is-revealed .phase__text {
transition-property: opacity, transform, filter;
transition-duration: 0.58s, 1.05s, 0.72s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--phase-in) + 230ms);
}
.phase__title { margin-top: 1.5rem; font-size: 0.9375rem; font-weight: 600; }
.phase__text {
margin-top: 0.9rem;
color: var(--cc-body);
font-size: 0.875rem;
line-height: 2;
}
.priceband {
margin-block: var(--cc-space-xl);
padding-block: var(--cc-space-xl);
background:
radial-gradient(60% 90% at 0% 50%, rgba(46, 150, 148, 0.35) 0%, rgba(46, 150, 148, 0) 62%),
linear-gradient(100deg, #63c0bd 0%, #9ad8d4 38%, #eaf7f5 68%, #ffffff 100%);
}
.priceband__inner {
display: grid;
gap: var(--cc-space-lg);
align-items: center;
}
.priceband__heading {
font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
font-weight: 600;
line-height: 1.3;
}
.priceband__figure { color: var(--cc-teal); }
.priceband__text {
max-width: 42ch;
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 0.875rem;
line-height: 1.7;
}
.priceband__body .btn { margin-top: var(--cc-space-md); }
.priceband__media {
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--cc-bg-alt);
}
.priceband__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) {
.ttimeline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.glance__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ttimeline__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.priceband__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.fact {
min-height: 190px;
padding: 1.5rem;
}
.fact__icon {
width: 56px;
height: 56px;
border-radius: 14px;
}
.fact__icon svg {
width: 28px;
height: 28px;
}
.phase { min-height: 311px; }
}
@media (min-width: 900px) {
.phase:nth-child(6n + 1),
.phase:nth-child(6n + 3),
.phase:nth-child(6n + 5) { background: var(--cc-mist); }
}
@media (min-width: 768px) and (max-width: 899px) {
.phase:nth-child(4n + 1),
.phase:nth-child(4n + 4) { background: var(--cc-mist); }
}
.consult-page--treatment .results__heading,
.consult-page--treatment .testimonials__heading {
font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
font-weight: 600;
}
@media (min-width: 900px) {
.phase:nth-child(6n + 1) .phase__when,
.phase:nth-child(6n + 3) .phase__when,
.phase:nth-child(6n + 5) .phase__when { background: #fff; }
}
@media (min-width: 768px) and (max-width: 899px) {
.phase:nth-child(4n + 1) .phase__when,
.phase:nth-child(4n + 4) .phase__when { background: #fff; }
}
.chero--badges {
padding-top: calc(var(--cc-header-h) + var(--cc-space-lg));
padding-bottom: var(--cc-space-xl);
}
.chero__inner--badges .chero__heading {
font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
line-height: 1.2;
}
.chero__inner--badges .chero__text {
max-width: min(100%, 480px);
margin-top: var(--cc-space-md);
}
.chero__inner--badges .chero__actions { margin-top: var(--cc-space-lg); }
.chero--badges .badge {
gap: 0.85rem;
padding: 0.55rem 1.5rem 0.55rem 0.55rem;
font-size: 0.9375rem;
}
.chero--badges .badge__icon {
width: 40px;
height: 40px;
}
.chero--badges .badge__icon svg {
width: 19px;
height: 19px;
}
.chero--badges .badges { gap: 1rem; }
@media (min-width: 1000px) {
.chero--badges .badge:nth-child(2) { margin-left: 8rem; }
.chero--badges .badge:nth-child(3) { margin-left: 4rem; }
.chero--badges .badge:nth-child(4) { margin-left: 8rem; }
}
@media (max-width: 999px) {
.chero--badges .badge:nth-child(2),
.chero--badges .badge:nth-child(3),
.chero--badges .badge:nth-child(4) { margin-left: 0; }
}
.testimonials.testimonials--light {
color: var(--cc-ink);
}
.testimonials--light .testimonials__heading { color: var(--cc-ink); }
.testimonials--light .testimonials__text { color: var(--cc-body); }
.chero__figure {
border-radius: 20px;
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
}
.chero__figure img { display: block; width: 100%; height: auto; }
.chero__badges { margin-top: var(--cc-space-lg); }
.badges--row {
flex-direction: row;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 0;
}
.badges--row .badge {
align-self: auto;
margin-left: 0;
gap: 0.7rem;
padding: 0.45rem 1.15rem 0.45rem 0.45rem;
font-size: 0.875rem;
}
.badges--row .badge__icon { width: 34px; height: 34px; }
.badges--row .badge__icon svg { width: 17px; height: 17px; }
@media (min-width: 768px) {
.chero__badges .badges--row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.chero__badges .badges--row .badge {
gap: 0.6rem;
padding: 0.45rem 0.9rem 0.45rem 0.45rem;
font-size: 0.875rem;
line-height: 1.35;
}
.chero__badges .badges--row .badge__icon {
width: 32px;
height: 32px;
}
.chero__badges .badges--row .badge__icon svg {
width: 16px;
height: 16px;
}
}
@media (min-width: 1100px) {
.chero__badges .badges--row {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.85rem;
}
.chero__badges .badges--row .badge {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
}
.chero__badges .badges--row .badge__label {
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (min-width: 900px) {
.chero__inner--media {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
align-items: center;
column-gap: var(--cc-space-xl);
}
.chero__inner--media .chero__heading { max-width: 18ch; }
.chero__inner--media .chero__badges { grid-column: 1 / -1; }
.page-template-template-treatment .chero__inner--media .chero__actions {
gap: 0.5rem;
}
.page-template-template-treatment .chero__inner--media .chero__actions .btn {
padding-inline: 1.35em;
}
}
@media (min-width: 1000px) {
.chero--badges .badges--row .badge:nth-child(2),
.chero--badges .badges--row .badge:nth-child(3),
.chero--badges .badges--row .badge:nth-child(4) { margin-left: 0; }
}
@media (min-width: 640px) and (max-width: 899px) {
.ttimeline__grid .phase--last { grid-column: span var(--phase-span-2, 1); }
}
@media (min-width: 900px) {
.ttimeline__grid .phase--last { grid-column: span var(--phase-span-3, 1); }
}
@media (min-width: 900px) {
.chero--bleed .chero__inner { position: static; }
.chero--bleed .chero__inner--media { grid-template-columns: minmax(0, 1fr); }
.chero--bleed .chero__main {
position: relative;
z-index: 1;
max-width: 46%;
}
.chero--bleed .chero__figure {
position: absolute;
top: var(--cc-header-h);
right: 0;
bottom: 0;
z-index: 0;
width: 56%;
border-radius: 0;
background: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
.chero--bleed .chero__figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chero--bleed .chero__badges { position: relative; z-index: 2; }
}
.chero--products {
padding-top: calc(var(--cc-header-h) + var(--cc-space-xl));
padding-bottom: 0;
overflow: hidden;
background: #ffffff url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/products-hero-bg.jpg) center / cover no-repeat;
}
.chero--products .chero__decor { display: none; }
.chero--products .chero__heading { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.chero--products .chero__text {
max-width: min(100%, 25rem);
margin-top: var(--cc-space-md);
font-size: 1.0625rem;
line-height: 1.75;
}
.chero__decor {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.chero__decor::before,
.chero__decor::after {
content: '';
position: absolute;
border-radius: 50%;
}
.chero__decor::before {
top: 1.5rem;
left: -9.75rem;
width: 18.5rem;
height: 18.5rem;
border: 1.5rem solid rgba(13, 90, 92, 0.1);
}
.chero__decor::after {
right: -12rem;
bottom: -11.5rem;
width: 24rem;
height: 24rem;
border: 1.75rem solid rgba(13, 90, 92, 0.15);
}
.chero__jump {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: var(--cc-space-xl);
}
.chero__jump {
flex-wrap: wrap;
margin-inline: auto;
}
.pill--jump {
flex: 0 0 auto;
text-align: center;
white-space: nowrap;
}
@media (max-width: 767px) {
.pill--jump {
flex: 0 1 auto;
white-space: normal;
}
}
.pill--jump {
padding: 0.65rem 1.25rem;
border-color: rgba(13, 90, 92, 0.28);
font-size: 0.875rem;
line-height: 1.2;
text-decoration: none;
}
@media (max-width: 599px) {
.chero--products { padding-top: calc(var(--cc-header-h) + var(--cc-space-lg)); }
.chero__decor::before { display: none; }
.chero__decor::after { right: -14rem; bottom: -14rem; }
}
.products {
position: relative;
padding-bottom: var(--cc-space-xl);
}
.products::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(26rem 20rem at 0% 18%, rgba(79, 178, 170, 0.26) 0%, rgba(79, 178, 170, 0) 70%),
radial-gradient(24rem 18rem at 100% 64%, rgba(120, 205, 198, 0.28) 0%, rgba(120, 205, 198, 0) 70%);
background-repeat: repeat-y;
background-size: 100% 1100px;
}
.products > .container { position: relative; z-index: 1; }
.prange { scroll-margin-top: calc(var(--cc-header-h) + 1.5rem); }
.prange + .prange { margin-top: var(--cc-space-xl); }
.prange__intro {
display: grid;
gap: var(--cc-space-sm);
padding: 1rem;
border: 1px solid var(--cc-line);
border-radius: 24px;
background: #fff;
box-shadow: 0 10px 30px rgba(20, 45, 50, 0.05);
}
.prange__media {
position: relative;
border-radius: 18px;
overflow: hidden;
background: var(--cc-bg-alt);
aspect-ratio: 16 / 9;
}
.prange__media img,
.prange__media iframe,
.prange__media video {
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.prange__play {
position: absolute;
top: 50%;
left: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--cc-mint);
cursor: pointer;
transform: translate(-50%, -50%);
transition: background var(--cc-transition), scale var(--cc-transition);
}
.prange__play:hover,
.prange__play:focus-visible { background: #fff; scale: 1.07; }
.prange__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--cc-space-md) var(--cc-space-sm);
border-radius: 18px;
background: var(--cc-bg-alt);
}
.prange__intro--plain .prange__body { background: none; }
.prange__heading {
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
font-weight: 600;
}
.prange__heading--bare { margin-bottom: var(--cc-space-md); }
.prange__text {
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.85;
}
.prange__text > * + * { margin-top: 0.9rem; }
.prange__text a { color: var(--cc-teal); }
.prange__list {
display: grid;
gap: var(--cc-space-sm);
margin: var(--cc-space-md) 0 0;
padding: 0;
list-style: none;
}
.pcard {
display: flex;
flex-direction: column;
padding: 1rem;
border: 1px solid var(--cc-line);
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 30px rgba(20, 45, 50, 0.05);
}
.pcard__media {
flex: 0 0 auto;
border-radius: 14px;
overflow: hidden;
background: var(--cc-bg-alt);
aspect-ratio: 16 / 10;
}
.pcard__media img {
width: 100%;
height: 100%;
padding: 0.75rem;
object-fit: contain;
}
.pcard__media iframe,
.pcard__media video {
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.pcard__placeholder {
display: block;
width: 100%;
height: 100%;
}
.pcard__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding-top: var(--cc-space-sm);
}
.pcard__title {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
}
.pcard__text {
margin-top: 0.7rem;
color: var(--cc-body);
font-size: 0.875rem;
line-height: 1.8;
}
.pcard__text > * + * { margin-top: 0.65rem; }
.pcard__text a { color: var(--cc-teal); }
.pcard__text ul {
padding-left: 0.2rem;
list-style: none;
}
.pcard__text ul li {
position: relative;
padding-left: 0.9rem;
}
.pcard__text ul li + li { margin-top: 0.45rem; }
.pcard__text ul li::before {
content: '';
position: absolute;
top: 0.75em;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--cc-mint);
}
.pcard__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: auto;
padding-top: var(--cc-space-sm);
}
.pcard__order,
.pcard__watch {
padding: 0.8em 1.6em;
font-size: 0.8125rem;
}
.pcard__watch { gap: 0.45em; }
@media (min-width: 640px) {
.prange__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.prange__intro {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
align-items: stretch;
gap: 1rem;
}
.prange__media { aspect-ratio: auto; }
.prange__body { padding: var(--cc-space-md); }
}
@media (min-width: 1000px) {
.prange__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prange__list--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
.prange__list--wide .pcard {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
align-items: stretch;
gap: 1.5rem;
}
.prange__list--wide .pcard__media { aspect-ratio: auto; }
.prange__list--wide .pcard__body { padding-top: 0; }
}
.faq__cols--single {
grid-template-columns: minmax(0, 1fr);
max-width: 1180px;
}
.terms { padding-block: var(--cc-space-lg) var(--cc-space-xl); }
.terms__heading { font-size: var(--cc-fs-section); }
.terms__text {
margin-top: var(--cc-space-md);
color: var(--cc-body);
font-size: 0.875rem;
line-height: 1.75;
}
.terms__text > * + * { margin-top: 0.75rem; }
.terms__text a { color: var(--cc-teal); }
@media (prefers-reduced-motion: reduce) {
.prange__play:hover { scale: 1; }
}
.consult-page--about .chero {
margin: 0;
padding-top: calc(var(--cc-header-h) + var(--cc-space-lg));
padding-bottom: var(--cc-space-lg);
border-radius: 0;
background:
radial-gradient(30% 55% at -6% 112%, rgba(74, 178, 172, 0.22) 0%, rgba(74, 178, 172, 0) 74%),
radial-gradient(46% 46% at 92% -6%, rgba(150, 212, 208, 0.5) 0%, rgba(150, 212, 208, 0) 76%),
radial-gradient(70% 78% at 26% -10%, rgba(38, 158, 154, 0.95) 0%, rgba(38, 158, 154, 0.55) 42%, rgba(38, 158, 154, 0) 82%),
var(--cc-bg);
}
.consult-page--about .chero__pattern { display: none; }
.consult-page--about .chero__heading { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.75rem); }
.consult-page--about .chero__text { max-width: min(100%, 760px); }
.consult-page > .chero + .pstrip { padding-top: 0; }
.pstrip { --cc-container: 1600px; }
.pstrip__viewport { overflow: hidden; }
.pstrip__track {
display: flex;
width: max-content;
animation: cc-marquee var(--pstrip-speed, 45s) linear infinite;
}
.pstrip__list {
display: flex;
align-items: flex-end;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.pstrip__item {
flex: 0 0 44vw;
margin-right: 0.75rem;
border-radius: 14px;
overflow: hidden;
background: var(--cc-bg-alt);
}
@media (prefers-reduced-motion: reduce) {
.pstrip__track {
display: block;
width: auto;
animation: none;
}
.pstrip__list--clone { display: none; }
.pstrip__viewport {
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pstrip__viewport::-webkit-scrollbar { display: none; }
.pstrip__item { scroll-snap-align: start; }
}
.pstrip__item img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 700px) {
.pstrip__viewport { overflow: visible; }
.pstrip__track {
display: block;
width: auto;
animation: none;
}
.pstrip__list--clone { display: none; }
.pstrip__list { gap: 1rem; }
.pstrip__item {
flex: 1 1 0;
margin-right: 0;
}
}
.team {
position: relative;
padding-block: var(--cc-space-xl);
overflow: hidden;
isolation: isolate;
background: url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/team-bg.png) center / cover no-repeat;
}
.team__pattern {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
width: clamp(240px, 30vw, 540px);
display: none;
pointer-events: none;
}
.team__pattern--art {
display: block;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top right;
opacity: 1;
-webkit-mask-image: none;
mask-image: none;
}
.team__head { text-align: center; }
.team__heading {
font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
font-weight: 600;
}
.team__text {
max-width: 52ch;
margin: var(--cc-space-sm) auto 0;
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.7;
}
.team__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--cc-space-lg) var(--cc-space-md);
margin-top: var(--cc-space-lg);
}
.team-member {
width: 176px;
text-align: center;
}
.team-member__photo {
display: block;
width: 170px;
height: 170px;
margin-inline: auto;
border-radius: 50%;
overflow: hidden;
background: var(--cc-mint);
}
.team-member__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.team-member__name {
margin-top: 1.25rem;
font-size: 1rem;
font-weight: 600;
}
.team-member__role {
margin-top: 0.35rem;
color: var(--cc-body);
font-size: 0.875rem;
}
@media (max-width: 640px) {
.team { padding-block: var(--cc-space-lg); }
.team-member { width: 140px; }
.team-member__photo { width: 132px; height: 132px; }
}
.page-template-template-consultation .steps {
background: url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/steps-bg.jpg) center / cover no-repeat;
}
.page-template-template-consultation .steps__pattern { display: none; }
.consult-page--contact .chero {
margin: 0;
padding-top: calc(var(--cc-header-h) + var(--cc-space-xl));
padding-bottom: var(--cc-space-xl);
border-radius: 0;
}
.consult-page--contact .chero__text {
max-width: min(100%, 620px);
margin-top: var(--cc-space-md);
}
@media (max-width: 767px) {
.consult-page--contact .chero {
padding-top: calc(var(--cc-header-h) + var(--cc-space-md));
padding-bottom: var(--cc-space-lg);
}
}
.tprofiles {
padding-block: var(--cc-space-xl);
}
.tprofiles__head { text-align: center; }
.tprofiles__heading {
font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
font-weight: 600;
}
.tprofiles__list {
display: grid;
gap: var(--cc-space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.tprofiles__head + .tprofiles__list { margin-top: var(--cc-space-lg); }
.tprofile {
position: relative;
display: grid;
gap: var(--cc-space-lg);
padding: var(--cc-space-lg);
border-radius: 26px;
overflow: hidden;
isolation: isolate;
background: #ffffff url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/tprofile-bg.png) center / cover no-repeat;
border: 1px solid rgba(20, 45, 50, 0.06);
box-shadow: 0 2px 8px rgba(20, 45, 50, 0.07);
}
.tprofile__pattern { display: none; }
.tprofile__figure {
position: relative;
align-self: start;
width: min(100%, 240px);
margin-inline: auto;
--offset: 16px;
}
.tprofile__figure::before {
content: '';
position: absolute;
z-index: 0;
top: var(--offset);
right: calc(var(--offset) * -1);
bottom: calc(var(--offset) * -1);
left: var(--offset);
border-radius: 22px;
background: #0D4E5B;
}
.tprofile__frame {
position: relative;
z-index: 1;
display: block;
aspect-ratio: 7 / 8;
overflow: hidden;
border-radius: 22px;
background: var(--cc-mint);
}
.tprofile__frame img {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center top;
background: none;
border-radius: 0;
}
.tprofile__body { align-self: center; }
.tprofile__name {
font-size: 25px;
font-weight: 500;
line-height: 40px;
letter-spacing: 0;
text-transform: none;
}
.tprofile__role {
color: #0f6f74;
font-weight: 500;
}
.tprofile__text {
margin-top: var(--cc-space-sm);
color: var(--cc-ink);
font-size: 0.875rem;
line-height: 1.75;
}
@media (min-width: 768px) {
.tprofile {
grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
gap: 4.8%;
padding: 2.1% 7.65%;
align-items: center;
}
.tprofile__figure {
width: 100%;
margin-inline: 0;
}
}
.tprofiles,
.tprofiles > .container { overflow: visible; }
.tprofiles__list {
gap: 0;
}
.tprofiles__list .tprofile {
position: sticky;
top: calc(var(--deck-top, 100px) + (var(--deck-i, 0) * 14px));
}
.tprofiles__list .tprofile:nth-child(1) { --deck-i: 0; }
.tprofiles__list .tprofile:nth-child(2) { --deck-i: 1; }
.tprofiles__list .tprofile:nth-child(3) { --deck-i: 2; }
.tprofiles__list .tprofile:nth-child(4) { --deck-i: 3; }
.tprofiles__list .tprofile:nth-child(5) { --deck-i: 4; }
.tprofiles__list .tprofile:nth-child(6) { --deck-i: 5; }
.tprofiles__list .tprofile:nth-child(7) { --deck-i: 6; }
.tprofiles__list .tprofile:nth-child(8) { --deck-i: 7; }
@media (min-width: 768px) {
.tprofiles__list .tprofile { min-height: 420px; }
}
@media (max-width: 767px) {
.tprofiles__list { --deck-top: 76px; }
.tprofiles__list .tprofile {
top: calc(var(--deck-top) + (var(--deck-i, 0) * 4px));
}
.tprofile {
gap: 1.25rem;
padding: 1.5rem;
}
.tprofile__figure {
width: min(100%, 190px);
margin-inline: auto;
transform: translateX(calc(var(--offset) / -2));
}
.tprofile__name {
font-size: 20px;
line-height: 1.35;
}
.tprofile__sep { display: none; }
.tprofile__role {
display: block;
margin-top: 0.2rem;
font-size: 16px;
line-height: 1.35;
}
.tprofile__text { font-size: 0.8125rem; }
}
.tprofiles { padding-bottom: calc(var(--cc-space-xl) * 1.5); }
.follow {
padding-block: var(--cc-space-xl);
--card-lift: 3rem;
}
.follow__heading {
font-size: var(--cc-fs-section);
font-weight: 500;
line-height: var(--cc-lh-heading);
}
.follow__text {
max-width: 44ch;
margin-top: var(--cc-space-sm);
color: var(--cc-body);
line-height: 1.7;
}
.follow > .container { --cc-container: 1440px; }
.follow__list {
display: grid;
gap: 1.25rem;
margin: calc(var(--cc-space-lg) + var(--card-lift)) auto 0;
padding: 0;
list-style: none;
max-width: 1445px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.social-card {
position: relative;
height: 100%;
min-height: auto;
padding: 1.6rem;
border: 1px solid var(--cc-line);
border-radius: 16px;
background: var(--cc-bg);
overflow: hidden;
transition:
height 0.25s ease-out,
margin-top 0.25s ease-out,
background 0.25s ease-out,
color 0.25s ease-out,
border-color 0.25s ease-out,
box-shadow 0.25s ease-out;
}
.social-card:hover,
.social-card:focus-within {
z-index: 2;
height: calc(100% + var(--card-lift));
margin-top: calc(var(--card-lift) * -1);
border-color: transparent;
box-shadow: 0 22px 46px rgba(9, 30, 33, 0.22);
}
.social-card--instagram:hover,
.social-card--instagram:focus-within {
background: linear-gradient(160deg, #6228d7 0%, #ee2a7b 55%, #f9ce34 100%);
}
.social-card--linkedin:hover,
.social-card--linkedin:focus-within { background: #0a66c2; }
.social-card--facebook:hover,
.social-card--facebook:focus-within { background: #1877f2; }
.social-card--youtube:hover,
.social-card--youtube:focus-within { background: #f42c04; }
.social-card--twitter:hover,
.social-card--twitter:focus-within { background: #1d9bf0; }
.social-card--whatsapp:hover,
.social-card--whatsapp:focus-within { background: #25d366; }
.social-card--x:hover,
.social-card--x:focus-within,
.social-card--tiktok:hover,
.social-card--tiktok:focus-within { background: #0b0b0b; }
.social-card:hover .social-card__name,
.social-card:focus-within .social-card__name,
.social-card:hover .social-card__link,
.social-card:focus-within .social-card__link { color: #fff; }
.social-card:hover .social-card__text,
.social-card:focus-within .social-card__text { color: rgba(255, 255, 255, 0.88); }
.social-card:hover .social-card__icon,
.social-card:focus-within .social-card__icon {
background: #fff;
color: var(--cc-ink);
}
.social-card__go {
position: absolute;
top: 1.15rem;
right: 1.15rem;
display: grid;
place-items: center;
color: #fff;
opacity: 0;
transform: translate(-5px, 5px);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}
.social-card:hover .social-card__go,
.social-card:focus-within .social-card__go {
opacity: 1;
transform: none;
}
.social-card__action {
position: absolute;
left: 1.6rem;
bottom: 0.9rem;
font-size: 2.75rem;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.3);
opacity: 0;
transform: translateY(14px);
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}
.social-card:hover .social-card__action,
.social-card:focus-within .social-card__action {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.social-card,
.social-card__go,
.social-card__action { transition: none; }
.social-card:hover,
.social-card:focus-within {
height: 100%;
margin-top: 0;
}
}
.social-card:hover {
border-color: var(--cc-mist);
box-shadow: 0 12px 30px rgba(9, 77, 94, 0.08);
}
.social-card__icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 7px;
background: var(--cc-ink);
color: #fff;
}
.social-card__icon svg {
width: 16px;
height: 16px;
}
.social-card__icon--instagram {
background: linear-gradient(45deg, #f9ce34 5%, #ee2a7b 50%, #6228d7 95%);
}
.social-card__icon--linkedin { background: #0a66c2; }
.social-card__icon--facebook { background: #1877f2; }
.social-card__icon--youtube  { background: #ff0000; }
.social-card__icon--twitter  { background: #1d9bf0; }
.social-card__icon--whatsapp { background: #25d366; }
.social-card__icon--tiktok   { background: #010101; }
.social-card__icon--x        { background: #000000; }
.social-card__name {
margin-top: 1.5rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.social-card__link {
color: inherit;
text-decoration: none;
}
.social-card__link::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
.social-card__text {
margin-top: 0.6rem;
color: var(--cc-muted);
font-size: 0.8125rem;
line-height: 1.6;
}
.chero--below { padding-bottom: 0; }
.chero__figure--below {
margin-top: calc(var(--cc-space-xl) * -1);
border-radius: 0;
background: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
.chero--below .chero__inner { position: relative; z-index: 1; }
.chero__figure--below img {
display: block;
width: 100%;
height: auto;
}
.chero--portrait .chero__figure {
position: relative;
border-radius: 0;
background: none;
overflow: visible;
}
.chero--portrait .chero__figure::before {
content: '';
position: absolute;
inset: 6% 8% 12% 8%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, rgba(180, 226, 222, 0.85) 0%, rgba(180, 226, 222, 0) 68%);
}
.chero--portrait .chero__figure img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
.chero__figure--art::before { display: none; }
.chero--portrait .chero__badges { margin-top: 0; }
.chips {
margin: 0;
padding: 0;
list-style: none;
}
.chip {
position: absolute;
z-index: 2;
padding: 0.4rem 0.9rem;
border: 1px solid var(--cc-line);
border-radius: var(--cc-radius-pill);
background: #fff;
box-shadow: 0 6px 18px rgba(20, 45, 50, 0.10);
font-size: 0.75rem;
white-space: nowrap;
}
.chip:nth-child(1) { top: 12%; left: -4%; }
.chip:nth-child(2) { top: 4%; right: -2%; }
.chip:nth-child(3) { top: 40%; left: -12%; }
.chip:nth-child(4) { top: 62%; right: -8%; }
@media (max-width: 899px) {
.chips { display: none; }
}
.career { padding-bottom: var(--cc-space-xl); }
.career__heading {
font-size: var(--cc-fs-section);
font-weight: 600;
}
.career__text {
max-width: 56ch;
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: var(--cc-fs-section-lead);
line-height: 1.7;
}
.career__tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: var(--cc-space-md);
}
.career__panel { margin-top: var(--cc-space-md); }
.career__panel.is-hidden { display: none; }
.career__grid {
display: grid;
gap: var(--cc-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.cred {
padding: var(--cc-space-sm);
border: 1px solid var(--cc-line);
border-radius: 14px;
background: #fff;
}
.cred__title { font-size: 0.9375rem; font-weight: 600; color: var(--cc-teal-dark); }
.cred__text { margin-top: 0.4rem; color: var(--cc-muted); font-size: 0.8125rem; line-height: 1.55; }
.impact { padding-block: var(--cc-space-xl); }
.impact__inner {
display: grid;
gap: var(--cc-space-lg);
align-items: start;
}
.impact__heading {
font-size: var(--cc-fs-section);
font-weight: 600;
}
.impact__text {
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: var(--cc-fs-section-lead);
line-height: 1.8;
}
.impact__text > * + * { margin-top: 1rem; }
.impact__stats { display: grid; gap: var(--cc-space-md); margin: 0; }
.impact-stat__value {
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
font-weight: 500;
line-height: 1.1;
}
.impact-stat__label {
margin: 0.35rem 0 0;
color: var(--cc-muted);
font-size: 0.8125rem;
}
@media (min-width: 700px) {
.career__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.impact__inner { grid-template-columns: minmax(0, 1fr) 260px; column-gap: var(--cc-space-xl); }
}
.frow__note {
display: flex;
align-items: center;
gap: 0.85rem;
max-width: 30rem;
margin-top: var(--cc-space-md);
padding: 0.85rem 1rem;
border: 1px solid var(--cc-line);
border-radius: 10px;
background: #fff;
}
.frow__note-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--cc-teal-dark);
color: #fff;
}
.frow__note-body { display: flex; flex-direction: column; gap: 0.15rem; }
.frow__note-title {
color: var(--cc-teal);
font-size: 0.875rem;
font-weight: 600;
}
.frow__note-text { color: var(--cc-muted); font-size: 0.75rem; line-height: 1.45; }
.cs-hero .chero__text { max-width: min(100%, 460px); }
.cs-stats {
display: grid;
grid-template-columns: repeat(2, minmax(min-content, 1fr));
gap: var(--cc-space-md) var(--cc-space-sm);
margin-top: var(--cc-space-lg);
}
.cs-stat__value {
color: var(--cc-teal-dark);
font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
.cs-stat__label {
margin: 0.3rem 0 0;
color: var(--cc-body);
font-size: 0.75rem;
}
@media (min-width: 900px) {
.cs-stats {
grid-template-columns: repeat(4, max-content);
column-gap: 2.5rem;
width: max-content;
max-width: 100%;
}
}
.cs-results { padding-block: var(--cc-space-xl); }
.cs-results__head {
display: grid;
gap: var(--cc-space-sm);
align-items: start;
margin-bottom: var(--cc-space-lg);
}
.cs-results__heading {
font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
font-weight: 600;
}
.cs-results__note { color: var(--cc-body); font-size: 0.875rem; line-height: 1.6; }
.cs-results__grid { display: grid; gap: var(--cc-space-md); }
.cs-results__col { display: grid; gap: var(--cc-space-md); align-content: start; }
.cs-shot {
position: relative;
margin: 0;
border-radius: 14px;
overflow: hidden;
background: var(--cc-bg-alt);
}
.cs-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-shot__tag {
position: absolute;
top: 0.85rem;
left: 0.85rem;
z-index: 1;
padding: 0.3rem 0.85rem;
border-radius: var(--cc-radius-pill);
background: #fff;
color: var(--cc-ink);
font-size: 0.75rem;
font-weight: 500;
}
.cs-shot--after .cs-shot__tag { background: var(--cc-teal-dark); color: #fff; }
.cs-card {
padding: var(--cc-space-md);
border-radius: 14px;
background: var(--cc-teal-dark);
color: #fff;
}
.cs-card__value { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.cs-card__label { margin-top: 0.3rem; font-size: 0.9375rem; }
.cs-card__text { margin-top: 0.9rem; color: rgba(255, 255, 255, 0.82); font-size: 0.8125rem; line-height: 1.6; }
.cs-video {
margin-top: var(--cc-space-lg);
border-radius: 16px;
overflow: hidden;
}
@media (min-width: 800px) {
.cs-results__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cs-results__note { justify-self: end; max-width: 34ch; }
.cs-results__grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: start; }
.cs-shot--after { aspect-ratio: 16 / 9; }
}
.cs-story { padding-bottom: var(--cc-space-xl); }
.cs-story__inner { display: grid; gap: var(--cc-space-md); align-items: start; }
.cs-story__heading {
font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
font-weight: 600;
line-height: 1.25;
}
.cs-story__body { color: var(--cc-body); font-size: 0.9375rem; line-height: 1.8; }
.cs-story__body > * + * { margin-top: 1rem; }
.cs-story__body blockquote,
.cs-why__content blockquote {
margin: var(--cc-space-md) 0;
padding-left: 1.1rem;
border-left: 2px solid var(--cc-mint);
color: var(--cc-teal);
font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
line-height: 1.55;
}
@media (min-width: 900px) {
.cs-story__inner {
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
column-gap: var(--cc-space-xl);
}
.cs-story__heading { position: relative; }
.cs-story__heading::after {
content: '';
position: absolute;
top: 1.4rem;
left: calc(100% + 0.75rem);
width: calc(var(--cc-space-xl) - 1.5rem);
border-top: 1px dashed #b9dfe0;
}
}
.cs-why { padding-bottom: var(--cc-space-xl); }
.cs-why__inner { display: grid; gap: var(--cc-space-lg); align-items: start; }
.cs-why__heading {
font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
font-weight: 600;
}
.cs-why__content {
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 0.9375rem;
line-height: 1.8;
}
.cs-why__content > * + * { margin-top: 1rem; }
.cs-why__card {
padding: var(--cc-space-md);
border-radius: 14px;
background: var(--cc-mint);
color: #fff;
}
.cs-why__card-title { font-size: 1rem; font-weight: 600; }
.cs-why__list {
margin: var(--cc-space-sm) 0 0;
padding-left: 1.1rem;
list-style: disc;
font-size: 0.875rem;
line-height: 1.7;
}
.cs-why__list li::marker { color: rgba(255, 255, 255, 0.75); }
.cs-why__list li + li { margin-top: 0.35rem; }
.single-cc_case_study .cs-story,
.single-cc_case_study .tjourney,
.single-cc_case_study .cs-why {
padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.single-cc_case_study .cta-card__text {
line-height: 1.9;
}
.single-cc_case_study .cta-card__heading {
line-height: 1.35;
}
.page-template-template-cases .chero__heading,
.single-cc_case_study .chero__heading {
line-height: 1.3;
}
@media (min-width: 900px) {
.cs-why__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); column-gap: var(--cc-space-xl); }
}
.cs-afters { display: grid; gap: var(--cc-space-sm); }
@media (min-width: 800px) {
.cs-afters--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-afters--pair .cs-shot--after { aspect-ratio: 4 / 3; }
}
.cs-shot--plain .cs-shot__tag { display: none; }
.chero__inner--centre .cs-stats { justify-items: center; margin-inline: auto; }
.chero__inner--centre .chero__text { margin-inline: auto; }
.submenu__cta {
margin-top: 0.35rem;
padding: 0.6rem 0.75rem 0.15rem;
border-top: 1px solid var(--cc-line);
}
.submenu__cta .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
width: 100%;
padding: 0.75em 1.1em;
border-radius: var(--cc-radius-pill);
font-size: 0.8125rem;
line-height: 1;
text-align: center;
color: #fff;
}
.submenu__cta .btn:hover,
.submenu__cta .btn:focus-visible {
background: var(--cc-teal);
color: #fff;
}
.submenu__cta .btn--arrow {
padding: 0.85em 1.1em;
gap: 0.4em;
}
.submenu__cta .btn__arrow {
width: auto;
height: auto;
background: none;
border-radius: 0;
color: inherit;
transition: transform var(--cc-transition);
}
.submenu__cta .btn:hover .btn__arrow,
.submenu__cta .btn:focus-visible .btn__arrow { transform: translateX(3px); }
.consult {
position: fixed;
inset: 0;
z-index: 200;
}
.consult__overlay {
position: absolute;
inset: 0;
background: rgba(9, 30, 33, 0.5);
opacity: 0;
transition: opacity var(--cc-transition);
}
.consult.is-open .consult__overlay { opacity: 1; }
.consult__panel {
position: absolute;
top: 0;
left: 0;
width: min(100%, 900px);
height: 100%;
padding: var(--cc-space-lg) var(--cc-space-md) var(--cc-space-xl);
overflow-y: auto;
background: #fff;
box-shadow: 0 0 60px rgba(9, 30, 33, 0.28);
transform: translateX(-100%);
transition: transform var(--cc-transition);
-webkit-overflow-scrolling: touch;
}
.consult.is-open .consult__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.consult__panel,
.consult__overlay { transition: none; }
.consult__panel { transform: none; }
}
.consult__close {
position: absolute;
top: 1rem;
right: 1rem;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--cc-bg-alt);
color: var(--cc-ink);
cursor: pointer;
transition: background var(--cc-transition);
}
.consult__close:hover,
.consult__close:focus-visible { background: var(--cc-mist); }
.consult__head { margin-bottom: var(--cc-space-md); }
.consult__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.consult__text {
max-width: 46ch;
margin-top: var(--cc-space-sm);
color: var(--cc-body);
font-size: 0.9375rem;
}
body.has-consult-open { overflow: hidden; }
.consult-tab {
position: fixed;
top: 50%;
right: 0.5rem;
z-index: 150;
display: flex;
flex-direction: column;
align-items: center;
--tab-disc: 40px;
gap: 0.5rem;
width: calc(var(--tab-disc) * 1.55);
padding: 1.25rem 0 1.25rem;
border: 0;
border-radius: var(--cc-radius-pill);
background: #fff;
color: var(--cc-ink);
box-shadow: 0 16px 44px rgba(9, 30, 33, 0.18);
cursor: pointer;
transform: translateY(-50%);
transition: transform var(--cc-transition), box-shadow var(--cc-transition);
}
.consult-tab:hover,
.consult-tab:focus-visible {
transform: translateY(-50%) translateX(-5px);
box-shadow: 0 18px 48px rgba(9, 30, 33, 0.24);
}
.consult-tab__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: var(--tab-disc);
height: var(--tab-disc);
border-radius: 50%;
background: var(--cc-mint);
color: #fff;
}
.consult-tab__label {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
}
@media (max-width: 767px) {
.consult-tab {
--tab-disc: 34px;
right: 0.4rem;
gap: 0.4rem;
padding-block: 1rem;
touch-action: none;
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(1rem);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
body.has-passed-hero .consult-tab {
opacity: 1;
visibility: visible;
transform: translateY(-50%);
}
.consult-tab__label { font-size: 0.9375rem; }
body.has-nav-open .consult-tab { display: none; }
.consult__panel { padding: var(--cc-space-md) var(--cc-space-sm) var(--cc-space-lg); }
}
.consult__panel {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: safe center;
padding: 2.5rem 2rem;
}
.consult__head { margin-bottom: 1.5rem; }
.consult__title { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); }
.consult__text {
margin-top: 0.5rem;
font-size: 0.9375rem;
line-height: 1.5;
}
.consult .enquiry__row { gap: 1rem; }
.consult .enquiry__field { margin-bottom: 0.75rem; }
.consult .enquiry__field label { margin-bottom: 0.3rem; }
.consult .enquiry__field input,
.consult .enquiry__field textarea,
.consult .enquiry__field .select__input {
padding: 0.7rem 1rem;
}
.consult .enquiry__field textarea {
min-height: 0;
height: 6.5rem;
}
.consult .enquiry__actions { margin-top: 0.25rem; }
@media (max-height: 760px) {
.consult__panel { padding-block: 1.75rem; }
.consult__head { margin-bottom: 1rem; }
.consult .enquiry__field { margin-bottom: 0.5rem; }
.consult .enquiry__field textarea { height: 4.5rem; }
}
.consult__panel {
width: min(100%, 640px);
background:
url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/consult-bg.png) center / cover no-repeat,
radial-gradient(135% 100% at 92% -6%, #0b535b 0%, #15646a 35%, #4d9a99 60%, #b9dedb 82%, #ffffff 100%);
justify-content: flex-start;
padding: clamp(2rem, 6vh, 4rem) clamp(1.5rem, 4vw, 3rem);
}
.consult__title {
color: #fff;
font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
text-transform: none;
}
.consult__text { color: rgba(255, 255, 255, 0.85); }
.consult__head { margin-bottom: 2.25rem; }
.consult .enquiry__field label {
color: #fff;
margin-bottom: 0.5rem;
font-size: 0.9375rem;
}
.consult .enquiry__row { gap: 1.25rem; }
.consult .enquiry__field { margin-bottom: 1.1rem; }
.consult .enquiry__field input,
.consult .enquiry__field textarea,
.consult .enquiry__field .select__input {
padding: 0.95rem 1.1rem;
}
.consult .enquiry__field textarea { height: 12rem; }
.consult .enquiry__actions { margin-top: 1rem; }
.consult .enquiry__field input,
.consult .enquiry__field textarea,
.consult .enquiry__field .select__input {
border-color: transparent;
background: #fff;
}
.consult__close {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.consult__close:hover,
.consult__close:focus-visible { background: rgba(255, 255, 255, 0.32); }
.landing-page .consult__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.landing-page .consult__text {
font-size: 0.875rem;
line-height: 1.5;
}
.landing-page .consult__head { margin-bottom: 1.25rem; }
.landing-page .consult .enquiry__row { row-gap: 0; }
.landing-page .consult .enquiry__field { margin-bottom: 0.85rem; }
.landing-page .consult .enquiry__field label {
margin-bottom: 0.35rem;
font-size: 0.875rem;
}
.landing-page .consult .enquiry__field input,
.landing-page .consult .enquiry__field .select__input {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
}
.consult__skyline {
display: block;
width: 100%;
margin-top: 2rem;
pointer-events: none;
opacity: 1;
}
.consult-page--treatment .chero {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.consult-page--treatment .results {
background: #ffffff;
}
.consult-page--treatment .glance {
padding-top: var(--cc-space-xl);
background: url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/team-bg.png) center / cover no-repeat;
}
.consult-page--treatment .glance__price { color: var(--cc-body); }
.consult-page--treatment .tjourney {
padding-top: var(--cc-space-xl);
}
.consult-page--treatment .frow__heading {
text-transform: none;
}
@media (min-width: 900px) {
.consult-page--treatment .frow {
align-items: flex-start;
}
.consult-page--treatment .frow__heading {
max-width: 20ch;
line-height: 1.7;
}
.consult-page--treatment .frow + .frow {
margin-top: calc(var(--cc-space-xl) * 2);
}
}
.consult-page--treatment .testimonials,
.consult-page--treatments .testimonials {
background:
radial-gradient(58% 52% at 16% 55%, rgba(104, 200, 195, 0.30) 0%, rgba(104, 200, 195, 0) 70%),
radial-gradient(54% 48% at 86% 60%, rgba(104, 200, 195, 0.26) 0%, rgba(104, 200, 195, 0) 72%),
linear-gradient(180deg, #ffffff 0%, #f2fafa 42%, #f2fafa 62%, #ffffff 100%);
}
.consult-page--treatment .results__pattern,
.consult-page--treatment .testimonials__pattern,
.consult-page--treatment .steps__pattern {
display: none;
}
.consult-page--treatment .chero__figure {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border-radius: 0;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.consult-page--treatment .chero__figure img {
width: 100%;
max-width: 793px;
height: auto;
max-height: none;
margin: 0;
object-fit: contain;
border-radius: 20px;
}
.consult-page--treatment .chero__inner .chero__heading {
max-width: min(100%, 690px);
font-weight: 500;
font-size: clamp(2rem, 1.2rem + 2.6vw, 50px);
line-height: 1.68;
letter-spacing: 0.1px;
text-transform: none;
}
.consult-page--treatment .chero__inner .chero__text {
max-width: min(100%, 462px);
font-size: 18px;
line-height: 1.944;
letter-spacing: 0.1px;
}
@media (min-width: 900px) {
.consult-page--treatment .chero--bleed .chero__inner--media {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.consult-page--treatment .chero--bleed .chero__main {
max-width: none;
}
.consult-page--treatment .chero--bleed .chero__figure {
position: static;
width: auto;
padding-bottom: 0;
align-self: end;
}
.consult-page--treatment .chero--bleed .chero__badges {
margin-top: 0;
}
}
.priceband {
position: relative;
overflow: hidden;
isolation: isolate;
}
.priceband--art { background: none; }
.priceband__art {
position: absolute;
inset: 0;
z-index: -1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
pointer-events: none;
}
.priceband__media {
aspect-ratio: 1;
width: min(100%, 24rem);
margin-left: auto;
background: none;
}
.faq {
position: relative;
isolation: isolate;
}
.faq--art { background: #ffffff; }
.faq__art {
position: absolute;
inset: 0;
z-index: -1;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
pointer-events: none;
}
@media (max-width: 767px) {
.consult-page--treatment .chero,
.consult-page--treatment .chero--badges {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
min-height: 100svh;
margin: 0;
border-radius: 0;
padding-top: calc(var(--cc-header-h) + var(--cc-space-sm));
padding-bottom: var(--cc-space-lg);
}
.consult-page--treatment .chero__actions { gap: 0.5rem; }
.consult-page--treatment .chero__actions .btn {
flex: 0 1 auto;
padding: 0.95em 1.4em;
font-size: 0.875rem;
}
}
.badge--clone { display: none; }
@media (max-width: 767px) {
.chero__aside,
.chero__badges {
overflow: hidden;
padding-block: 0.9rem;
margin-top: calc(var(--cc-space-md) - 0.9rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.chero .badges {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: max-content;
margin-top: 0;
animation: cc-marquee var(--badge-speed, 24s) linear infinite;
}
.chero .badges { gap: 0; }
.chero .badge {
flex: 0 0 auto;
margin-left: 0;
margin-right: 0.75rem;
}
.chero .badge--clone { display: inline-flex; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.chero__aside,
.chero__badges {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.chero__aside::-webkit-scrollbar,
.chero__badges::-webkit-scrollbar { display: none; }
.chero .badges { animation: none; }
.chero .badge--clone { display: none; }
}
@media (max-width: 767px) {
.tjourney--stack {
--jstack-top: calc(var(--cc-header-h) - 1.25rem);
--jstack-peek: 1rem;
}
.tjourney--stack .tjourney__list {
display: block;
margin-top: var(--cc-space-md);
}
.tjourney--stack .jstep {
position: sticky;
top: calc(var(--jstack-top) + (var(--jstep-i, 0) * var(--jstack-peek)));
min-height: 17rem;
padding: 1.75rem 1.5rem;
border-radius: 24px;
overflow: hidden;
background-color: #ffffff;
background-image:
linear-gradient(
0deg,
rgba(9, 77, 94, var(--jstep-deep, 0)) 0%,
rgba(9, 77, 94, var(--jstep-deep, 0)) 100%
),
linear-gradient(
0deg,
rgba(102, 193, 192, var(--jstep-tint, 0)) 0%,
rgba(102, 193, 192, var(--jstep-tint, 0)) 100%
);
box-shadow: 0 -6px 26px rgba(6, 40, 44, 0.14);
}
.tjourney--stack .jstep + .jstep { margin-top: 1rem; }
.tjourney--stack .jstep__num {
margin-bottom: 1.1rem;
-webkit-text-stroke: 2px rgba(9, 77, 94, 0.32);
font-size: 3.25rem;
}
.tjourney--stack .jstep__title {
color: var(--cc-ink);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.tjourney--stack .jstep__text {
margin-top: 0.9rem;
color: var(--cc-ink);
font-size: 0.9375rem;
line-height: 1.7;
}
.tjourney--stack .jstep--dark .jstep__title { color: #fff; }
.tjourney--stack .jstep--dark .jstep__text { color: rgba(255, 255, 255, 0.9); }
.tjourney--stack .jstep--dark .jstep__num {
-webkit-text-stroke-color: rgba(255, 255, 255, 0.7);
}
}
@media (max-width: 767px) {
.frow__body { display: contents; }
.frow { gap: 0; }
.frow__figure {
order: 1;
margin-top: var(--cc-space-md);
}
.frow__actions { order: 2; }
}
@media (max-width: 767px) {
:root {
--cc-space-lg: 2rem;
--cc-space-xl: 2.5rem;
}
.testimonials { padding-bottom: var(--cc-space-xl); }
.results { padding-top: var(--cc-space-xl); }
}
@media (max-width: 767px) {
:root { --cc-fs-section-lead: 1.125rem; }
p,
.entry-content p,
.article-body p,
.blog-card__excerpt,
.blog-feature__excerpt,
.blog-hero__text,
.blog-promo__text,
.case-card__excerpt,
.chero--products .chero__text,
.chero__text,
.consult__text,
.cred__text,
.cs-card__text,
.cs-story__body,
.cta-card__text,
.faq-item__answer,
.jhero__text,
.jstep__text,
.news-feature__excerpt,
.news-item__excerpt,
.page-hero__text,
.pcard__text,
.phase__text,
.post-cta__text,
.prange__text,
.priceband__text,
.rail-card__excerpt,
.section-head__text,
.social-card__text,
.step__text,
.story__quote,
.tcard__quote,
.terms__text,
.tjourney--stack .jstep__text,
.treat-card__text,
.why-card__text,
.hero-quote__text {
font-size: 1.125rem;
}
}
@media (max-width: 767px) {
.ttimeline__grid {
display: block;
counter-reset: phase;
margin-top: var(--cc-space-md);
}
.ttimeline__grid .phase {
position: relative;
counter-increment: phase;
min-height: 0;
padding: 0 0 var(--cc-space-md) 3.5rem;
}
.ttimeline__grid .phase:last-child { padding-bottom: 0; }
.ttimeline__grid .phase::before {
content: counter(phase);
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--cc-line);
border-radius: 50%;
background: #fff;
color: var(--cc-muted);
font-size: 0.8125rem;
font-weight: 600;
transition:
background var(--cc-transition),
border-color var(--cc-transition),
color var(--cc-transition);
}
.ttimeline__grid .phase::after {
content: '';
position: absolute;
top: 2.5rem;
bottom: 0.25rem;
left: 1.125rem;
width: 1px;
background: var(--cc-line);
}
.ttimeline__grid .phase:last-child::after { display: none; }
.ttimeline__grid .phase .phase__when { background: var(--cc-mist); }
.ttimeline__grid .phase__title { margin-top: 1.1rem; font-size: 1rem; }
.ttimeline__grid .phase__text {
margin-top: 0.7rem;
font-size: 0.875rem;
line-height: 1.75;
}
.ttimeline__grid.is-tracking .phase {
opacity: 0.75;
transition: opacity var(--cc-transition);
}
.ttimeline__grid.is-tracking .phase.is-active { opacity: 1; }
.ttimeline__grid.is-tracking .phase.is-active::before {
border-color: var(--cc-teal);
background: var(--cc-teal);
color: #fff;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.ttimeline__grid .phase,
.ttimeline__grid .phase::before { transition: none; }
}
@media (max-width: 767px) {
.testimonials--scroll .testimonials__track {
animation: none;
width: max-content;
}
.testimonials__viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--cc-gutter);
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-mask-image: none;
mask-image: none;
}
.testimonials__viewport::-webkit-scrollbar { display: none; }
.testimonials__list { padding-inline: var(--cc-gutter); }
.testimonials__item {
width: calc(100vw - (var(--cc-gutter) * 2));
scroll-snap-align: start;
}
}
body.home .site-main .results,
body.page-template-template-home2 .site-main .results {
padding-top: 6rem;
}
@media (max-width: 640px) {
.chero__actions,
.about__actions,
.frow__actions,
.cta-card__actions,
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.6rem;
}
.chero__actions > .btn,
.about__actions > .btn,
.frow__actions > .btn,
.cta-card__actions > .btn,
.hero__actions > .btn {
flex: 0 1 auto;
min-width: 0;
padding-inline: 1.4rem;
padding-block: 0.9rem;
font-size: 0.8125rem;
white-space: normal;
text-align: center;
}
.chero__actions .btn__arrow,
.frow__actions .btn__arrow { display: none; }
.hero__actions > .btn {
background: #fff;
color: var(--cc-ink);
padding: 0.4rem 0.4rem 0.4rem 1.4rem;
font-size: 0.9375rem;
}
.hero__actions > .btn .btn__arrow {
flex: 0 0 auto;
width: 36px;
height: 36px;
background: var(--cc-drop);
color: #fff;
}
.about__actions > .btn {
background: var(--cc-mint);
color: #fff;
padding: 0.4rem 0.4rem 0.4rem 1.4rem;
font-size: 0.9375rem;
}
.about__actions > .btn .btn__arrow {
flex: 0 0 auto;
width: 36px;
height: 36px;
background: #fff;
color: var(--cc-ink);
}
.hero__actions > .btn > span:first-child,
.about__actions > .btn > span:first-child {
flex: 1;
min-width: 0;
}
.cta-card__actions {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 767px) {
.social-card:hover,
.social-card:focus-within {
height: 100%;
margin-top: 0;
}
.social-card__action { display: none; }
}
@media (max-width: 640px) {
.site-logo img { max-height: 22px; }
}
.hero--landing {
--cc-landing-accent: #1a8b8f;
min-height: min(100svh, 880px);
padding-block: var(--cc-space-xl);
}
.hero--landing .hero__inner { --cc-container: 1440px; }
.hero--landing .hero__video {
height: 125%;
object-position: center top;
}
.hero--landing .hero__heading {
max-width: min(100%, 21.5em);
font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
line-height: 1.3333;
letter-spacing: 0.1px;
text-wrap: normal;
}
.hero__lead {
max-width: 462px;
margin-top: 1.35rem;
color: rgba(255, 255, 255, 0.7);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.9444;
letter-spacing: 0.1px;
}
.hrate {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 1.5rem;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: default;
}
.hrate.is-ready { cursor: pointer; }
.hrate__g {
flex: none;
display: block;
width: 24px;
height: 24px;
}
.hrate__score {
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.1px;
}
.hrate__stars {
display: flex;
gap: 5px;
flex: none;
}
.hrate__star {
display: block;
flex: none;
width: 26px;
height: 26px;
fill: #fbbc04;
}
.hrate__star--dim { fill: rgba(251, 188, 4, 0.45); }
.lbar { display: none; }
@media (max-width: 767px) {
.lbar {
display: block;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 40;
padding-block: 10px;
background: none;
}
.lbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 52px;
padding: 6px 6px 6px 16px;
border-radius: var(--cc-radius-pill);
background: #fff;
border: 1px solid rgba(20, 45, 50, 0.08);
box-shadow: 0 2px 10px rgba(9, 77, 94, 0.10);
}
.lbar .site-logo {
flex: 0 1 auto;
min-width: 0;
}
.lbar .site-logo a { display: block; }
.lbar .site-logo img {
max-height: 20px;
max-width: 100%;
width: auto;
height: auto;
}
.lbar__call {
flex: none;
padding: 0.55rem 0.95rem;
font-size: 0.8125rem;
white-space: nowrap;
}
}
body.has-greviews-open { overflow: hidden; }
.greviews {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2.5rem);
}
.greviews[hidden] { display: none; }
.greviews__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 20, 24, 0.6);
}
.greviews__panel {
position: relative;
width: min(680px, 100%);
max-height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: clamp(1.75rem, 4vw, 2.75rem);
border-radius: 22px;
background: #fff;
color: var(--cc-ink);
text-align: center;
}
.greviews__panel::-webkit-scrollbar { display: none; }
.greviews__close {
position: absolute;
top: 1rem;
right: 1rem;
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--cc-ink);
cursor: pointer;
}
.greviews__close:hover,
.greviews__close:focus-visible { background: rgba(8, 20, 24, 0.07); }
.greviews__head:not(:last-child) {
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(8, 20, 24, 0.1);
}
.greviews__title {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin: 0;
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
font-weight: 600;
}
.greviews__g { flex: none; }
.greviews__count {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin: 0.5rem 0 0;
color: var(--cc-body);
font-size: 1.0625rem;
}
.greviews__count strong { color: var(--cc-ink); }
.greviews__star {
width: 20px;
height: 20px;
flex: none;
fill: #fbbc04;
}
.greviews__cta {
display: inline-block;
margin-top: 1.75rem;
padding: 0.75rem 1.6rem;
border-radius: var(--cc-radius-pill);
background: var(--cc-teal);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: background var(--cc-transition);
}
.greviews__cta:hover,
.greviews__cta:focus-visible { background: var(--cc-drop); }
.greviews__list {
margin: 1.75rem 0 0;
padding: 0;
list-style: none;
text-align: left;
}
.greview + .greview {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(8, 20, 24, 0.1);
}
.greview__who {
display: flex;
align-items: center;
gap: 0.75rem;
}
.greview__face {
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.greview__face--blank {
display: grid;
place-items: center;
background: var(--cc-bg-alt);
font-weight: 600;
text-transform: uppercase;
}
.greview__meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.greview__name { font-weight: 600; }
.greview__when {
color: var(--cc-body);
font-size: 0.875rem;
}
.greview__stars {
display: flex;
gap: 2px;
margin-top: 0.6rem;
}
.greview__star {
width: 17px;
height: 17px;
flex: none;
fill: #fbbc04;
}
.greview__text {
margin: 0.5rem 0 0;
color: var(--cc-body);
line-height: 1.7;
white-space: pre-line;
}
.greviews__embed {
margin-top: 1.75rem;
text-align: left;
}
.greviews__note {
margin: 1.75rem 0 0;
padding: 0.9rem 1rem;
border-radius: 12px;
background: #fff6e5;
color: #6b4a00;
font-size: 0.9375rem;
line-height: 1.6;
text-align: left;
}
.hero--landing .hero__actions { margin-top: 2.1rem; }
.hero--landing .btn--arrow {
padding: 0.6rem 0.6rem 0.6rem 2rem;
font-size: 1.1875rem;
}
.hero--landing .btn__arrow {
width: 52px;
height: 52px;
background: var(--cc-landing-accent);
}
.hero--landing .btn--light:hover .btn__arrow,
.hero--landing .btn--light:focus-visible .btn__arrow {
background: #fff;
color: var(--cc-ink);
}
.logo-strip + .pstrip {
padding-top: var(--cc-space-lg);
padding-bottom: var(--cc-space-lg);
}
.pstrip__heading {
max-width: 24ch;
margin-inline: auto;
margin-bottom: var(--cc-space-md);
font-size: var(--cc-fs-section);
text-align: center;
text-wrap: balance;
}
.pstrip__head {
margin-bottom: var(--cc-space-md);
text-align: center;
}
.pstrip__head .pstrip__heading { margin-bottom: var(--cc-space-sm); }
.pstrip__text {
max-width: 58ch;
margin: 0 auto;
color: var(--cc-muted);
font-size: var(--cc-fs-section-lead);
text-wrap: balance;
}
.labout { padding-block: clamp(2.5rem, 5.8vw, 100px); }
.labout + .labout { padding-top: 0; }
.landing-page .tprofiles,
.landing-page .vids {
--cc-container: 1200px;
padding-block: clamp(3.5rem, 7vw, 6rem);
}
.landing-page .steps__list { max-width: 1280px; }
.landing-page .steps {
padding-block: clamp(3rem, 5.2vw, 90px);
background: #fff url(https://staging.crownclinic.co.uk/wp-content/themes/crown-clinic/assets/img/steps-landing-bg.png) center / cover no-repeat;
}
.landing-page .steps__pattern { display: none; }
.labout__inner { --cc-container: 1440px; }
.labout__panel {
position: relative;
aspect-ratio: 1440 / 636;
overflow: hidden;
isolation: isolate;
border-radius: 24px;
background: var(--cc-bg-alt);
}
.labout__media,
.labout__scrim {
position: absolute;
inset: 0;
}
.labout__media { z-index: -2; }
.labout__video,
.labout__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.labout__scrim {
z-index: -1;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.82) 30%,
rgba(255, 255, 255, 0.66) 55%,
rgba(255, 255, 255, 0.55) 78%,
rgba(255, 255, 255, 0.5) 100%
);
}
.labout__content {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0;
max-width: calc(475px + (clamp(1.5rem, 5vw, 72px) * 2));
height: 100%;
padding: clamp(1.5rem, 5vw, 72px);
}
.labout__heading {
max-width: 475px;
margin: 0;
color: #000;
font-size: clamp(2rem, 3.5vw, 50px);
line-height: 2;
letter-spacing: 0;
}
.labout__text {
max-width: 475px;
margin: 0;
color: var(--cc-body);
font-size: 1rem;
font-weight: 400;
line-height: 2.1875;
letter-spacing: 0.1px;
}
.labout__cta {
justify-content: space-between;
min-width: 269px;
min-height: 66px;
margin-top: 40px;
padding: 10px 10px 10px 25px;
gap: 1rem;
font-size: 16px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
}
.labout__cta .btn__arrow {
width: 46px;
height: 46px;
color: var(--cc-mint);
}
.labout__cta:hover .btn__arrow,
.labout__cta:focus-visible .btn__arrow {
background: #fff;
color: var(--cc-ink);
}
.labout__play,
.lexp__play {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: none;
transform: translate(-50%, -50%);
cursor: pointer;
transition: transform var(--cc-transition), opacity var(--cc-transition);
}
.labout__play:hover,
.lexp__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.labout__play svg,
.lexp__play svg { display: block; }
.labout__scrim,
.labout__content { transition: opacity var(--cc-transition); }
@media (max-width: 899px) {
.labout__panel { aspect-ratio: auto; }
.labout__scrim {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.9) 55%,
rgba(255, 255, 255, 0.55) 100%
);
}
.labout__content {
height: auto;
max-width: none;
padding-block: clamp(2rem, 7vw, 3.5rem);
}
.labout__play {
top: auto;
bottom: 1.25rem;
left: auto;
right: 1.25rem;
transform: none;
}
.labout__play:hover { transform: scale(1.06); }
.labout__play svg { width: 52px; height: 52px; }
}
.lexp { padding-inline: 10px; }
.lexp__panel {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 24px;
background: #6ecbc6;
}
.lexp__bg {
position: absolute;
inset: 0;
z-index: -1;
}
.lexp__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lexp__panel.has-bg-image { background: none; }
.lexp__inner {
--cc-container: 1440px;
display: grid;
grid-template-columns: minmax(0, 1fr) 542px;
align-items: center;
gap: 3.5rem;
padding-block: clamp(2.5rem, 5.7vw, 98px);
}
.lexp__heading {
margin: 0;
color: #000;
font-size: clamp(2rem, 3.5vw, 50px);
line-height: 2;
letter-spacing: 0;
}
.lexp__text {
max-width: 567px;
margin: 0;
color: var(--cc-body);
font-size: 1rem;
font-weight: 400;
line-height: 2.1875;
letter-spacing: 0.1px;
}
.lexp__cta {
justify-content: space-between;
min-width: 269px;
min-height: 66px;
margin-top: 40px;
padding: 10px 10px 10px 25px;
gap: 1rem;
font-size: 16px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
}
.lexp__cta .btn__arrow {
width: 46px;
height: 46px;
color: var(--cc-mint);
}
.lexp__cta:hover .btn__arrow,
.lexp__cta:focus-visible .btn__arrow {
background: #fff;
color: var(--cc-ink);
}
.lexp__figure {
position: relative;
aspect-ratio: 542 / 494;
overflow: hidden;
background: rgba(255, 255, 255, 0.22);
}
.lexp__figure img,
.lexp__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lexp__figure.is-playing .lexp__play { display: none; }
.lexp__play svg {
width: 56px;
height: 56px;
}
@media (max-width: 899px) {
.lexp { padding-inline: 0; }
.lexp__panel { border-radius: 0; }
.lexp__inner {
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;
}
.lexp__figure { aspect-ratio: 16 / 11; }
}
.ltreat { padding-inline: var(--cc-gutter); }
.ltreat__panel {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 24px;
background: var(--cc-bg-alt);
}
.ltreat__bg {
position: absolute;
inset: 0;
z-index: -1;
}
.ltreat__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ltreat__panel.has-bg-image { background: none; }
.ltreat__inner {
--cc-container: 1440px;
padding-block: clamp(2.5rem, 10.9vw, 188px);
}
.ltreat__head { text-align: center; }
.ltreat__heading {
max-width: 867px;
margin-inline: auto;
color: #000;
font-size: clamp(2rem, 3.5vw, 50px);
line-height: 1;
letter-spacing: 0;
text-wrap: balance;
}
.ltreat__text {
max-width: 696px;
margin: 0.9rem auto 0;
color: var(--cc-body);
font-size: 1.25rem;
font-weight: 400;
line-height: 1.75;
letter-spacing: 0.1px;
}
.ltreat__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17px;
margin-top: clamp(2rem, 4.5vw, 4.5rem);
}
.ltreat__card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #eaeaea;
border-radius: 20px;
background: #fff;
}
.ltreat__media {
aspect-ratio: 347 / 367;
background: #fff;
}
.ltreat__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ltreat__media .ba {
aspect-ratio: auto;
height: 100%;
border-radius: 0;
}
.ltreat__foot {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 1rem;
margin-top: auto;
padding: 16px 16px 16px 24px;
background: var(--cc-teal);
color: #fff;
}
.ltreat__title {
grid-column: 1;
grid-row: 1;
font-size: 0.875rem;
line-height: 1.35;
white-space: nowrap;
}
.ltreat__price {
grid-column: 1;
grid-row: 2;
margin: 0.2rem 0 0;
color: rgba(255, 255, 255, 0.78);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.35;
white-space: nowrap;
}
.ltreat__btn { grid-column: 2; grid-row: 1 / span 2; }
.ltreat__title {
margin: 0;
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.875;
letter-spacing: 0.1px;
}
.ltreat__btn {
background: var(--cc-mint);
flex: 0 0 auto;
padding: 0.62rem 0.75rem;
border-radius: var(--cc-radius-pill);
color: #fff;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background var(--cc-transition);
}
.ltreat__btn:hover,
.ltreat__btn:focus-visible {
background: #fff;
color: var(--cc-teal);
}
@media (max-width: 1023px) {
.ltreat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
.ltreat { padding-inline: 0; }
.ltreat__panel { border-radius: 0; }
.ltreat__grid { gap: 1rem; }
}
.lcar { position: relative; }
.lcar__nav { display: none; }
@media (max-width: 899px) {
.lcar [data-carousel-track] {
display: flex;
grid-template-columns: none;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-inline: 1px;
padding-bottom: 0.5rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.lcar [data-carousel-track]::-webkit-scrollbar { display: none; }
.lcar [data-carousel-track] > * {
flex: 0 0 min(80vw, 330px);
scroll-snap-align: center;
}
.lcar__nav {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 1.25rem;
}
.lcar__btn {
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(9, 77, 94, 0.16);
border-radius: 50%;
background: #fff;
color: var(--cc-teal);
cursor: pointer;
transition: background var(--cc-transition), color var(--cc-transition);
}
.lcar__btn:hover,
.lcar__btn:focus-visible {
background: var(--cc-teal);
color: #fff;
}
.lcar .ltreat__card { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
.lcar [data-carousel-track] { scroll-behavior: auto; }
}
@media (max-width: 899px) {
.labout__content {
align-items: center;
text-align: center;
}
.labout__text { margin-inline: auto; }
.labout__cta,
.lexp__cta {
min-width: 0;
}
.labout__cta {
align-self: center;
margin-top: 1.75rem;
}
.labout__play {
top: auto;
right: auto;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
}
.labout__play:hover { transform: translateX(-50%) scale(1.06); }
.labout__play svg {
width: 44px;
height: 44px;
}
.labout__content { padding-bottom: 5.5rem; }
}
@media (max-width: 767px) {
.landing-page .steps { background: #fff; }
}
@media (max-width: 899px) {
.landing-page .vids__caption { text-align: center; }
}
.landing-page .pstrip__item img { cursor: zoom-in; }
.landing-page .vids__heading,
.landing-page .tprofiles__heading {
max-width: 954px;
margin-inline: auto;
color: #000;
font-size: clamp(1.5rem, 2.7vw, 35px);
font-weight: 500;
line-height: 1.715;
letter-spacing: 0;
}
.landing-page .vids__text,
.landing-page .tprofiles__text {
max-width: 954px;
margin: 0.5rem auto 0;
color: rgba(0, 0, 0, 0.8);
font-size: clamp(1rem, 1.6vw, 20px);
font-weight: 400;
line-height: 1.75;
letter-spacing: 0.1px;
}
.landing-page .vids__head { text-align: left; }
.landing-page .vids__heading,
.landing-page .vids__text { margin-inline: 0; }
.landing-page .tprofiles__head { text-align: center; }
.landing-page .logo-strip,
.landing-page .logo-strip + .pstrip,
.landing-page .ltreat,
.landing-page .labout,
.landing-page .lexp,
.landing-page .steps,
.landing-page .vids,
.landing-page .tprofiles,
.landing-page .faq {
padding-block: 22.5px;
}
@media (max-width: 767px) {
.landing-page .logo-strip,
.landing-page .logo-strip + .pstrip,
.landing-page .ltreat,
.landing-page .labout,
.landing-page .lexp,
.landing-page .steps,
.landing-page .vids,
.landing-page .tprofiles,
.landing-page .faq {
padding-block: 12.5px;
}
}
.pzoom {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(8, 20, 24, 0.88);
cursor: zoom-out;
}
.pzoom[hidden] { display: none; }
.pzoom__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 14px;
cursor: default;
}
.pzoom__close {
position: absolute;
top: clamp(0.75rem, 2vw, 1.5rem);
right: clamp(0.75rem, 2vw, 1.5rem);
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
.pzoom__close:hover,
.pzoom__close:focus-visible { background: rgba(255, 255, 255, 0.3); }
.pzoom__nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
transform: translateY(-50%);
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #fff;
cursor: pointer;
transition: background var(--cc-transition);
}
.pzoom__nav--prev { left: clamp(0.75rem, 3vw, 2rem); }
.pzoom__nav--next { right: clamp(0.75rem, 3vw, 2rem); }
.pzoom__nav:hover,
.pzoom__nav:focus-visible { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 767px) {
.landing-page .hero--landing .hero__inner { text-align: center; }
.landing-page .hero--landing .hero__heading,
.landing-page .hero--landing .hero__lead { margin-inline: auto; }
.landing-page .hero--landing .hrate { justify-content: center; }
.landing-page .pstrip__track { animation-direction: reverse; }
.landing-page .ltreat__heading { line-height: 1.25; }
.landing-page .ltreat__text {
max-width: 46ch;
font-size: var(--cc-fs-section-lead);
line-height: var(--cc-lh-body);
letter-spacing: normal;
}
.landing-page .ltreat__foot {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
row-gap: 0.5rem;
padding: 1.15rem 1.25rem 1.35rem;
text-align: center;
}
.landing-page .ltreat__btn {
grid-column: 1;
grid-row: 3;
margin-top: 0.4rem;
}
.landing-page .ltreat__title {
max-width: none;
line-height: 1.35;
}
.landing-page .ltreat__btn {
width: min(100%, 190px);
padding-block: 0.85rem;
text-align: center;
}
.landing-page .labout__heading {
line-height: 1.2;
text-wrap: balance;
}
.landing-page .vids__frame {
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.landing-page .vids__frame:active,
.landing-page .vids__item:focus-within .vids__frame {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(8, 20, 24, 0.18);
}
.landing-page .tprofile__figure {
width: min(100%, 190px);
max-width: none;
margin-inline: 0;
}
.landing-page .tprofile { background-image: none; }
.landing-page .tprofile__name { line-height: 1.25; }
.landing-page .tprofile__role { display: block; margin-top: 0.15rem; }
.landing-page .tprofile { border-radius: 16px; }
.landing-page .vids__head { text-align: center; }
.landing-page .vids__heading,
.landing-page .vids__text { margin-inline: auto; }
.landing-page .lexp__copy { text-align: center; }
.landing-page .lexp__text { margin-inline: auto; }
.landing-page .lexp__cta { margin-inline: auto; }
.landing-page .pstrip__heading,
.landing-page .ltreat__heading,
.landing-page .labout__heading,
.landing-page .lexp__heading,
.landing-page .steps__heading,
.landing-page .vids__heading,
.landing-page .tprofiles__heading,
.landing-page .faq__heading {
margin-bottom: 0.75rem;
font-size: 1.5rem;
line-height: 1.3;
}
.landing-page .pstrip__text,
.landing-page .ltreat__text,
.landing-page .labout__text,
.landing-page .lexp__text,
.landing-page .steps__text,
.landing-page .vids__text,
.landing-page .tprofiles__text {
margin-top: 0;
}
}
.landing-page .labout__panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
aspect-ratio: auto;
overflow: visible;
border-radius: 0;
background: none;
}
.landing-page .labout__content { grid-column: 1; grid-row: 1; }
.landing-page .labout__media {
grid-column: 2;
grid-row: 1;
position: relative;
inset: auto;
z-index: 0;
aspect-ratio: 16 / 10;
border-radius: 20px;
overflow: hidden;
background: var(--cc-bg-alt);
}
.landing-page .labout__scrim { display: none; }
.landing-page .labout__content {
height: auto;
max-width: 520px;
padding: 0;
}
@media (max-width: 899px) {
.landing-page .labout__panel {
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 5vw, 2.5rem);
}
.landing-page .labout__media {
grid-column: 1;
grid-row: 1;
}
.landing-page .labout__content {
grid-column: 1;
grid-row: 2;
max-width: none;
}
}
@media (max-width: 767px) {
.landing-page {
--cc-rise: 20px;
--cc-rise-time: 780ms;
--cc-rise-ease: cubic-bezier(0.22, 1, 0.36, 1);
--cc-hero-step: 110ms;
--cc-step: 100ms;
}
.landing-page .cc-reveal,
.landing-page .cc-rise {
opacity: 0;
transform: translateY(var(--cc-rise));
transition:
opacity var(--cc-rise-time) var(--cc-rise-ease),
transform var(--cc-rise-time) var(--cc-rise-ease);
}
.landing-page .cc-rise { transition-delay: var(--cc-rise-delay, 0ms); }
.landing-page .cc-reveal.is-in,
.landing-page .cc-rise.is-in {
opacity: 1;
transform: none;
}
.landing-page .cc-wipe {
opacity: 0;
clip-path: inset(100% -30% -30% -30%);
transform: translateY(var(--cc-rise));
transition:
opacity var(--cc-rise-time) var(--cc-rise-ease),
clip-path var(--cc-rise-time) var(--cc-rise-ease),
transform var(--cc-rise-time) var(--cc-rise-ease);
transition-delay: var(--cc-rise-delay, 0ms);
}
.landing-page .cc-wipe.is-in {
opacity: 1;
clip-path: inset(-30% -30% -30% -30%);
transform: none;
}
.landing-page .hero--landing .hero__video,
.landing-page .hero--landing .hero__image {
animation: cc-hero-settle 12s var(--cc-rise-ease) forwards;
}
}
@keyframes cc-hero-settle {
from { transform: scale(1.06); }
to   { transform: scale(1); }
}
.steps-pin {
position: relative;
height: 340vh;
}
.landing-page .steps--pinned {
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.landing-page .steps--pinned .steps__list {
position: relative;
display: block;
width: min(100%, 860px);
min-height: 340px;
margin: clamp(4rem, 9vh, 6.5rem) auto 0;
}
.landing-page .steps--pinned .step {
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: clamp(1.25rem, 2.5vw, 2.25rem);
width: min(100%, 540px);
will-change: transform, opacity;
}
.landing-page .steps--pinned .step__num {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
margin-bottom: 0;
min-width: 2.5em;
}
.landing-page .steps--pinned .step__title {
grid-column: 2;
grid-row: 1;
margin-bottom: 0.5rem;
}
.landing-page .steps--pinned .step__text {
grid-column: 2;
grid-row: 2;
}
.landing-page .steps--pinned .step:not(:last-child)::after { display: none; }
@media (max-width: 1023px) {
.landing-page .steps--rotating .steps__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-height: 0;
max-width: 420px;
margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
}
.landing-page .steps--rotating .step {
grid-area: 1 / 1;
position: relative;
top: auto;
display: block;
min-height: 0;
margin: 0;
padding: 1.75rem 1.5rem;
border-radius: 22px;
overflow: hidden;
text-align: left;
box-shadow: 0 14px 34px rgba(9, 30, 33, 0.10);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.landing-page .steps--rotating .step.is-on {
opacity: 1;
transform: none;
pointer-events: auto;
}
.landing-page .steps--rotating .step:not(:last-child)::after { display: none; }
.landing-page .steps--rotating .step:nth-child(1) { background: #f3fbfa; }
.landing-page .steps--rotating .step:nth-child(2) { background: #dcf0ef; }
.landing-page .steps--rotating .step:nth-child(3) { background: var(--cc-mint); }
.landing-page .steps--rotating .step:nth-child(n + 4) {
background: var(--cc-teal);
color: #fff;
}
.landing-page .steps--rotating .step:nth-child(n + 4) .step__title { color: #fff; }
.landing-page .steps--rotating .step:nth-child(n + 4) .step__text { color: rgba(255, 255, 255, 0.86); }
.landing-page .steps--rotating .step__num {
position: static;
display: block;
margin: 0 0 1.25rem;
font-size: 2.75rem;
line-height: 1;
color: var(--cc-mist);
-webkit-text-stroke: 0;
}
.landing-page .steps--rotating .step:nth-child(n + 4) .step__num { color: rgba(255, 255, 255, 0.35); }
@supports (-webkit-text-stroke: 1px black) {
.landing-page .steps--rotating .step__num {
color: transparent;
-webkit-text-stroke: 2px rgba(9, 77, 94, 0.32);
}
.landing-page .steps--rotating .step:nth-child(n + 4) .step__num {
color: transparent;
-webkit-text-stroke-color: rgba(255, 255, 255, 0.7);
}
}
.landing-page .steps--rotating .step__title {
margin: 0 0 0.75rem;
font-size: 1.25rem;
line-height: 1.3;
}
.landing-page .steps--rotating .step__text {
margin-top: 0;
font-size: 0.9375rem;
line-height: 1.75;
}
.landing-page .steps--rotating .steps__nav {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 1.25rem;
}
.landing-page .steps--rotating .steps__btn {
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(9, 77, 94, 0.16);
border-radius: 50%;
background: #fff;
color: var(--cc-teal);
cursor: pointer;
transition: background var(--cc-transition), color var(--cc-transition);
}
.landing-page .steps--rotating .steps__btn:hover,
.landing-page .steps--rotating .steps__btn:focus-visible {
background: var(--cc-teal);
color: #fff;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.landing-page .hero--landing .hero__video,
.landing-page .hero--landing .hero__image { animation: none; }
.landing-page .vids__frame { transition: none; }
.landing-page .vids__frame:active,
.landing-page .vids__item:focus-within .vids__frame { transform: none; }
}
@media (max-width: 767px) {
.landing-page .tprofile { border-radius: 12px; }
.landing-page .tprofile__frame,
.landing-page .tprofile__figure::before { border-radius: 14px; }
.landing-page .consult__panel {
height: auto;
max-height: 100%;
padding-bottom: 1.5rem;
}
}
@media (max-width: 767px) {
.landing-page .hero--landing { padding-bottom: 1rem; }
.landing-page .hero--landing .hero__lead { margin-top: 0.75rem; }
.landing-page .hero--landing .hrate { margin-top: 0.85rem; }
.landing-page .hero--landing .hero__actions { margin-top: 1rem; }
}
@media (min-width: 768px) {
.consult__panel {
top: 50%;
left: 50%;
width: min(100% - 4rem, 640px);
height: auto;
max-height: calc(100% - 4rem);
border-radius: 24px;
transform: translate(-50%, -50%) scale(0.97);
opacity: 0;
transition: transform var(--cc-transition), opacity var(--cc-transition);
}
.consult.is-open .consult__panel {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
.consult__panel,
.consult.is-open .consult__panel {
transform: translate(-50%, -50%);
opacity: 1;
transition: none;
}
}
@media (min-width: 768px) {
.landing-page .labout__heading {
margin-bottom: 0.35em;
line-height: 1.3;
}
}
.ty {
display: flex;
align-items: center;
justify-content: center;
padding: var(--cc-space-xl) var(--cc-gutter);
background: #fff;
}
.ty__inner {
width: min(100%, 620px);
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--cc-line);
border-radius: 24px;
background: #fff;
text-align: center;
}
.ty__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
margin-bottom: 1.5rem;
border-radius: 50%;
background: rgba(102, 193, 192, 0.16);
color: var(--cc-mint);
}
.ty__heading {
margin: 0 0 0.75rem;
color: var(--cc-ink);
font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
line-height: 1.2;
text-transform: none;
}
.ty__text {
margin: 0 auto;
max-width: 46ch;
color: var(--cc-body);
font-size: 1.0625rem;
line-height: 1.7;
}
.ty__text p { margin: 0 0 0.75rem; }
.ty__text p:last-child { margin-bottom: 0; }
.ty__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 2rem;
}
.ty__call {
margin: 1.5rem 0 0;
color: var(--cc-muted);
font-size: 0.9375rem;
}
.ty__call a {
color: var(--cc-teal);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(9, 77, 94, 0.25);
}
.ty__call a:hover,
.ty__call a:focus-visible { border-bottom-color: currentColor; }
@media (max-width: 599px) {
.ty { padding-block: var(--cc-space-lg); }
}
.ty__actions .btn--mint {
justify-content: center;
min-height: 66px;
padding: 10px 10px 10px 25px;
gap: 1rem;
font-size: 16px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
}
.ty__actions .btn__arrow {
width: 46px;
height: 46px;
color: var(--cc-mint);
}
.ty__actions .btn--mint:hover .btn__arrow,
.ty__actions .btn--mint:focus-visible .btn__arrow {
background: #fff;
color: var(--cc-ink);
}
body.cc-h2-page .cc-h2-main {
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: auto !important;
float: none !important;
}
body.cc-h2-page .cc-h2-main > * {
max-width: none;
}
body.cc-h2-page .cc-h2-main,
body.cc-h2-page .cc-h2-main *,
body.cc-h2-page .lbar,
body.cc-h2-page .lbar *,
body.cc-h2-page .consult,
body.cc-h2-page .consult *,
body.cc-h2-page .consult-tab,
body.cc-h2-page .consult-tab * {
font-family: var(--cc-font);
}
body.cc-h2-page .cc-h2-main ul,
body.cc-h2-page .cc-h2-main ol,
body.cc-h2-page .lbar ul,
body.cc-h2-page .consult ul,
body.cc-h2-page .greviews ul {
list-style: none !important;
margin-left: 0;
padding-left: 0;
}
body.cc-h2-page .cc-h2-main li::marker,
body.cc-h2-page .greviews li::marker {
content: none;
}
@media (max-width: 899px) {
body.cc-h2-page .cc-h2-main .lcar [data-carousel-track] {
--cc-lcar-card: min(80vw, 330px);
--cc-lcar-side: max(1px, calc((100% - var(--cc-lcar-card)) / 2));
padding-inline: var(--cc-lcar-side);
scroll-padding-inline: var(--cc-lcar-side);
margin-left: 0;
}
body.cc-h2-page .cc-h2-main .lcar [data-carousel-track] > * {
flex: 0 0 var(--cc-lcar-card);
scroll-snap-align: center;
}
}
body.cc-h2-page .cc-h2-main {
overflow-x: clip;
}
.cc-h2-sound-host {
position: relative;
}
.cc-h2-sound {
display: none;
position: absolute;
right: 12px;
bottom: 12px;
z-index: 5;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem 0.4rem 0.6rem;
border: 0;
border-radius: 999px;
background: rgba(9, 30, 33, 0.62);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
font: 500 0.8125rem/1 inherit;
letter-spacing: 0.01em;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background 0.2s ease;
}
.cc-h2-sound.is-on {
display: inline-flex;
}
.cc-h2-sound:hover,
.cc-h2-sound:focus-visible {
background: rgba(9, 30, 33, 0.85);
}
.cc-h2-sound svg {
flex: 0 0 auto;
}
@media (max-width: 767px) {
.cc-h2-sound {
right: 10px;
bottom: 10px;
padding: 0.5rem 0.85rem 0.5rem 0.7rem;
font-size: 0.875rem;
}
}
.cc-h2-sound.is-muted {
background: rgba(9, 30, 33, 0.45);
}
.cc-h2-sound.is-muted:hover,
.cc-h2-sound.is-muted:focus-visible {
background: rgba(9, 30, 33, 0.72);
}
.cc-h2-sound:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
body.cc-h2-page .cc-h2-main .hero--landing .hero__still {
position: absolute;
inset: 0;
width: 100%;
height: 125%;
object-fit: cover;
object-position: center top;
z-index: 1;
transition: opacity 700ms ease;
}
body.cc-h2-page .cc-h2-main .hero--landing .hero__media.is-live .hero__still {
opacity: 0;
}
@media (max-width: 767px) {
body.landing-page.cc-h2-page .cc-h2-main .hero--landing .hero__still {
animation: cc-hero-settle 12s var(--cc-rise-ease) forwards;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
body.landing-page.cc-h2-page .cc-h2-main .hero--landing .hero__still {
animation: none;
}
}
body.cc-h2-page .cc-h2-main .labout,
body.cc-h2-page .cc-h2-main .lexp,
body.cc-h2-page .cc-h2-main .tprofiles,
body.cc-h2-page .cc-h2-main .faq {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
body.cc-h2-page .cc-h2-main .lexp__figure {
border-radius: 20px;
}
body.cc-h2-page .cc-h2-main .hero--landing .hero__heading {
max-width: min(100%, 16.5em);
}
body.cc-h2-page.landing-page .consult .enquiry__field textarea {
height: 7.5rem;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
}
@media (max-height: 760px) {
body.cc-h2-page.landing-page .consult .enquiry__field textarea {
height: 5.5rem;
}
}
body.cc-h2-page .cc-h2-main .faq-item__n {
width: 2.1em;
margin-left: -2.1em;
padding-right: 0.45em;
}
body.cc-h2-page .cc-h2-main .faq-item__btn {
padding-left: calc(1.35rem + 2.1em);
}
@media (max-width: 767px) {
body.cc-h2-page .cc-h2-main .hero--landing .hero__heading {
font-size: clamp(2.25rem, 9vw, 2.75rem);
line-height: 1.15;
}
body.cc-h2-page .cc-h2-main .hero--landing .hero__lead {
font-size: 1.0625rem;
line-height: 1.65;
}
body.cc-h2-page .cc-h2-main .pstrip__heading,
body.cc-h2-page .cc-h2-main .ltreat__heading,
body.cc-h2-page .cc-h2-main .labout__heading,
body.cc-h2-page .cc-h2-main .lexp__heading,
body.cc-h2-page .cc-h2-main .steps__heading,
body.cc-h2-page .cc-h2-main .faq__heading {
font-size: clamp(2.125rem, 8.6vw, 2.5rem);
line-height: 1.2;
}
body.cc-h2-page .cc-h2-main .vids__heading,
body.cc-h2-page .cc-h2-main .tprofiles__heading {
font-size: clamp(1.875rem, 7.6vw, 2.25rem);
line-height: 1.25;
}
body.cc-h2-page .cc-h2-main .pstrip__text,
body.cc-h2-page .cc-h2-main .ltreat__text,
body.cc-h2-page .cc-h2-main .labout__text,
body.cc-h2-page .cc-h2-main .lexp__text,
body.cc-h2-page .cc-h2-main .steps__text,
body.cc-h2-page .cc-h2-main .vids__text,
body.cc-h2-page .cc-h2-main .tprofiles__text {
font-size: 1rem;
line-height: 1.65;
}
body.cc-h2-page .cc-h2-main .step__title {
font-size: 1.125rem;
}
}