:root { --dw-product-accent: var(--dw-primary); } .dw-product-hero { align-items: center; }
.dw-product-hero__glow {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(46rem 34rem at 84% 34%, color-mix(in srgb, var(--dw-product-accent) 26%, transparent), transparent 70%),
radial-gradient(40rem 30rem at 4% 104%, rgba(0, 173, 198, .16), transparent 70%),
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px;
-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.dw-product-hero__grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
gap: 3rem clamp(2rem, 1rem + 4vw, 5rem);
align-items: center;
}
.dw-product-hero__eyebrow:has(.dw-product-hero__icon)::before { display: none; }
.dw-product-hero__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
color: var(--dw-navy-900);
background: var(--dw-product-accent);
border-radius: 8px;
}
.dw-product-hero__title { font-size: clamp(2.375rem, 1.7rem + 2.6vw, 4rem); }
.dw-product-hero__title--long { font-size: clamp(2rem, 1.55rem + 1.9vw, 3.25rem); line-height: 1.08; }
.dw-product-hero__tagline {
max-width: 36rem;
margin-top: 1.25rem;
font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
font-weight: var(--dw-fw-semibold);
line-height: 1.4;
letter-spacing: -.005em;
color: var(--dw-white);
}
.dw-product-hero__tagline + .dw-page-hero__lead { margin-top: 1rem; }
.dw-product-hero__visual .dw-media {
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--dw-radius-large);
box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .65), 0 0 0 8px rgba(255, 255, 255, .03);
}
@media (max-width: 1099px) {
.dw-product-hero__grid { grid-template-columns: minmax(0, 1fr); }
.dw-product-hero__visual { max-width: 40rem; }
} .dw-product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--dw-grid-gap);
}
@media (max-width: 1099px) {
.dw-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
.dw-product-grid { grid-template-columns: minmax(0, 1fr); }
}
.dw-product-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--dw-white);
border: 1px solid var(--dw-color-border);
border-radius: var(--dw-radius-medium);
overflow: hidden;
transition: box-shadow var(--dw-dur) var(--dw-ease), transform var(--dw-dur) var(--dw-ease-out), border-color var(--dw-dur);
} .dw-product-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
height: 4px;
background: var(--dw-product-accent);
transform: scaleX(.22);
transform-origin: left;
transition: transform .6s var(--dw-ease-out);
}
.dw-product-card:hover,
.dw-product-card:focus-within { border-color: transparent; box-shadow: var(--dw-shadow-lg); transform: translateY(-4px); }
.dw-product-card:hover::before,
.dw-product-card:focus-within::before { transform: scaleX(1); }
.dw-product-card:hover .dw-media__img,
.dw-product-card:focus-within .dw-media__img { transform: scale(1.05); }
.dw-product-card:has(.dw-stretched:focus-visible) { outline: 2px solid var(--dw-focus); outline-offset: 3px; }
.dw-product-card .dw-stretched:focus-visible { outline: none; }
.dw-product-card__media { position: relative; }
.dw-product-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.75rem 2rem; }
.dw-product-card__top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.dw-product-card__icon {
display: grid;
place-items: center;
flex: none;
width: 2.5rem;
height: 2.5rem;
color: var(--dw-navy-900);
background: color-mix(in srgb, var(--dw-product-accent) 24%, var(--dw-white));
border-radius: var(--dw-radius-medium);
transition: background-color var(--dw-dur);
}
.dw-product-card:hover .dw-product-card__icon { background: var(--dw-product-accent); }
.dw-product-card__category {
min-width: 0;
font-size: .75rem;
font-weight: var(--dw-fw-bold);
line-height: 1.3;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dw-gray-600);
}
.dw-product-card__index { margin-left: auto; font-size: .8125rem; font-weight: var(--dw-fw-bold); letter-spacing: .08em; color: var(--dw-gray-500); }
.dw-product-card__title { margin-bottom: .75rem; }
.dw-product-card__text { font-size: .9375rem; color: var(--dw-gray-700); }
.dw-product-card__list {
display: grid;
gap: .5rem;
margin-top: 1.375rem;
padding-top: 1.375rem;
font-size: .875rem;
font-weight: var(--dw-fw-medium);
color: var(--dw-navy-900);
border-top: 1px solid var(--dw-color-border);
}
.dw-product-card__list li { display: flex; gap: .625rem; line-height: 1.45; }
.dw-product-card__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; background: var(--dw-product-accent); }
.dw-product-card__foot { margin-top: auto; padding-top: 1.75rem; } @supports (grid-template-rows: subgrid) {
.dw-product-grid { grid-auto-rows: auto; }
.dw-product-card {
display: grid;
grid-row: span 6;
grid-template-rows: subgrid;
row-gap: 0;
}
.dw-product-card__body { display: contents; }
.dw-product-card__body > * { margin-inline: 1.75rem; }
.dw-product-card__top { margin-top: 1.75rem; }
.dw-product-card__title { align-self: start; }
.dw-product-card__foot { align-self: end; margin-bottom: 2rem; }
.dw-product-tailored { grid-row: span 6; }
}
.dw-product-card:hover .dw-link > span,
.dw-product-card:focus-within .dw-link > span { background-size: 100% 1.5px; }
.dw-product-card:hover .dw-link__arrow,
.dw-product-card:focus-within .dw-link__arrow { transform: translateX(5px); } .dw-product-tailored {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 22rem;
padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
overflow: hidden;
color: var(--dw-on-dark-muted);
background: var(--dw-gradient-navy);
border-radius: var(--dw-radius-medium);
isolation: isolate;
}
.dw-product-tailored::after {
content: "";
position: absolute;
top: -9rem;
right: -9rem;
z-index: -1;
width: 22rem;
height: 22rem;
border: 1px solid rgba(253, 170, 72, .35);
border-radius: 50%;
box-shadow: 0 0 0 3rem rgba(253, 170, 72, .04), 0 0 0 6rem rgba(253, 170, 72, .03);
}
.dw-product-tailored__icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-bottom: auto;
color: var(--dw-navy-900);
background: var(--dw-primary);
border-radius: 50%;
}
.dw-product-tailored__title { margin-top: 2.5rem; color: var(--dw-white); }
.dw-product-tailored__text { margin-top: .75rem; }
.dw-product-tailored__actions { margin-top: 1.75rem; } .dw-product-page .dw-problem__text,
.dw-product-value {
font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
font-weight: var(--dw-fw-medium);
line-height: 1.55;
letter-spacing: -.005em;
}
.dw-product-value { color: var(--dw-white); }
.dw-product-page .dw-feature__icon {
color: var(--dw-navy-900);
background: color-mix(in srgb, var(--dw-product-accent) 22%, var(--dw-white));
}
.dw-product-page .dw-problem__col--outcome .dw-eyebrow { color: var(--dw-product-accent); }
.dw-product-page .dw-problem__col--outcome .dw-eyebrow::before { background: var(--dw-product-accent); }
.dw-product-note { max-width: 46rem; margin-top: 2.5rem; font-size: .8125rem; line-height: 1.6; color: var(--dw-gray-600); }
.dw-product-benefits__lead { max-width: 30rem; margin-top: 1.25rem; font-size: 1.0625rem; color: var(--dw-on-dark-muted); }
.dw-benefit-list li { align-items: flex-start; font-size: 1rem; font-weight: var(--dw-fw-regular); letter-spacing: 0; }
.dw-benefit-list .dw-outcome-list__icon { background: var(--dw-product-accent); }
.dw-benefit-list__body { display: grid; gap: .375rem; padding-top: .3rem; }
.dw-benefit-list__title {
font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
font-weight: var(--dw-fw-bold);
line-height: 1.3;
letter-spacing: -.01em;
color: var(--dw-white);
}
.dw-benefit-list__text { font-size: 1rem; line-height: 1.6; color: var(--dw-on-dark-muted); }
.dw-audience {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--dw-grid-gap);
}
.dw-audience__item {
padding: 2rem 1.75rem;
background: var(--dw-color-surface);
border-top: 3px solid var(--dw-product-accent);
border-radius: 0 0 var(--dw-radius-medium) var(--dw-radius-medium);
}
.dw-audience__icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-bottom: 1.5rem;
color: var(--dw-navy-900);
background: var(--dw-white);
border-radius: 50%;
box-shadow: var(--dw-shadow-sm);
}
.dw-audience__title { margin-bottom: .5rem; }
.dw-audience__text { font-size: .9375rem; color: var(--dw-gray-700); }
@media (max-width: 1099px) {
.dw-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
.dw-audience { grid-template-columns: minmax(0, 1fr); }
}
.dw-faq__lead { margin: 1.25rem 0 1.75rem; max-width: 26rem; color: var(--dw-gray-700); }
.dw-faq { border-top: 1px solid var(--dw-color-border-strong); }
.dw-faq__item { border-bottom: 1px solid var(--dw-color-border-strong); }
.dw-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 0;
font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
font-weight: var(--dw-fw-bold);
line-height: 1.4;
color: var(--dw-navy-900);
list-style: none;
cursor: pointer;
}
.dw-faq__question::-webkit-details-marker { display: none; }
.dw-faq__question:hover .dw-faq__toggle { border-color: var(--dw-navy-900); }
.dw-faq__toggle {
position: relative;
flex: none;
width: 2.5rem;
height: 2.5rem;
border: 1.5px solid var(--dw-color-border-strong);
border-radius: 50%;
transition: background-color var(--dw-dur-fast), border-color var(--dw-dur-fast);
}
.dw-faq__toggle::before,
.dw-faq__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: .75rem;
height: 1.5px;
margin: -.75px 0 0 -.375rem;
background: var(--dw-navy-900);
transition: transform var(--dw-dur) var(--dw-ease-out), background-color var(--dw-dur-fast);
}
.dw-faq__toggle::after { transform: rotate(90deg); }
.dw-faq__item[open] .dw-faq__toggle { background: var(--dw-navy-900); border-color: var(--dw-navy-900); }
.dw-faq__item[open] .dw-faq__toggle::before,
.dw-faq__item[open] .dw-faq__toggle::after { background: var(--dw-white); }
.dw-faq__item[open] .dw-faq__toggle::after { transform: rotate(0); }
.dw-faq__answer { padding: 0 3.75rem 1.75rem 0; font-size: 1.0625rem; line-height: 1.7; color: var(--dw-gray-700); }
@media (max-width: 699px) {
.dw-faq__answer { padding-right: 0; }
} .dw-enquiry-note {
display: flex;
align-items: flex-start;
gap: 1rem;
margin: -1rem 0 2rem;
padding: 1rem 1.25rem;
font-size: .9375rem;
line-height: 1.55;
color: var(--dw-navy-900);
background: var(--dw-primary-soft);
border: 1px solid rgba(253, 170, 72, .5);
border-radius: var(--dw-radius-medium);
}
.dw-enquiry-note__icon {
display: grid;
place-items: center;
flex: none;
width: 2.25rem;
height: 2.25rem;
color: var(--dw-navy-900);
background: var(--dw-primary);
border-radius: 50%;
}
.dw-enquiry-note strong { font-weight: var(--dw-fw-bold); }
.dw-enquiry-note a { font-weight: var(--dw-fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.dw-enquiry-note a:hover { text-decoration-thickness: 2px; }