. So
`sd-btn` on a Button widget painted a full-width gradient bar with a plain
link inside it. Neutralise the wrapper, style the anchor. */
.elementor-widget-button.sd-btn,
.elementor-widget-button.sd-btn > .elementor-widget-container,
.elementor-widget-button .sd-btn {
background: none;
border: 0;
box-shadow: none;
padding: 0;
transform: none;
}
.elementor-widget-button .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 26px;
border: 0;
border-radius: var(--sd-r-pill);
background: var(--sd-grad);
color: #fff;
font: 700 15px var(--sd-font-body);
letter-spacing: .01em;
text-decoration: none;
transition: background .2s ease, transform .16s ease, box-shadow .2s ease, color .2s ease;
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible {
background: var(--sd-grad-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--sd-shadow-cta);
}
/* Icons inside the button inherit the label colour in every state, including
Elementor's own icon span. */
.elementor-widget-button .elementor-button .elementor-button-icon,
.elementor-widget-button .elementor-button .elementor-button-icon i,
.elementor-widget-button .elementor-button .elementor-button-icon svg {
color: currentColor;
fill: currentColor;
}
/* Ghost variant, and the on-dark ghost used in the CTA bands. */
.elementor-widget-button.sd-btn--ghost .elementor-button {
background: transparent;
color: var(--sd-ink);
box-shadow: inset 0 0 0 1.5px var(--sd-border-strong);
}
.elementor-widget-button.sd-btn--ghost .elementor-button:hover {
background: var(--sd-grad-hover);
color: #fff;
box-shadow: none;
}
.elementor-widget-button.sd-btn--on-dark .elementor-button {
background: transparent;
color: #fff;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
.elementor-widget-button.sd-btn--on-dark .elementor-button:hover {
background: #fff;
color: var(--sd-ink);
box-shadow: none;
}
.elementor-widget-button.sd-btn--sm .elementor-button { padding: 9px 18px; font-size: 14px; }
.elementor-widget-button.sd-btn--block .elementor-button { width: 100%; }
/* --- 3. Dark bands ---------------------------------------------------------
The stats bar and the footprint sit on espresso. Body-coloured text is
invisible there, so every text primitive gets a dark-context value. */
.sd-section--dark,
.sd-section--dark .elementor-widget-text-editor,
.sd-section--dark .elementor-widget-text-editor p { color: rgba(255, 255, 255, .82); }
.sd-section--dark h1,
.sd-section--dark h2,
.sd-section--dark h3,
.sd-section--dark .elementor-heading-title,
.sd-section--dark .sd-intro__title { color: #fff; }
.sd-section--dark .sd-eyebrow,
.sd-section--dark .sd-intro .sd-eyebrow { color: var(--sd-accent-warm); }
.sd-section--dark .sd-stat__num { color: var(--sd-accent-warm); }
.sd-section--dark .sd-stat__label { color: rgba(255, 255, 255, .78); }
.sd-section--dark .sd-check__text,
.sd-section--dark .sd-card__body { color: rgba(255, 255, 255, .8); }
.sd-section--dark a:not(.sd-btn):not(.elementor-button) { color: var(--sd-accent-warm); }
/* The stats bar reads as a band, not a section: centred. */
.sd-section--dark .sd-stats { text-align: center; }
/* --- 4. Empty intro blocks -------------------------------------------------
Elementor heading/text widgets sit above several of ours, so the widget's
own optional intro is usually blank. Do not leave a gap for it. */
.sd-intro:empty { display: none; }
/* --- 5. Hero, whichever path renders it ----------------------------------- */
.sd-hero-slider { position: relative; }
.sd-hero-slider > .sd-hero[hidden] { display: none; }
/* ==========================================================================
DESIGN-PARITY CORRECTIONS
Each rule here closes a specific gap between the WordPress build and the
approved design.
========================================================================== */
/* --- Hero: flush, full-bleed, no Elementor gutters ----------------------- */
.sd-hero-section,
.sd-hero-section > .elementor-container {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
}
.sd-hero-section .elementor-column,
.sd-hero-section .elementor-widget-wrap,
.sd-hero-section .elementor-widget:not(:last-child) { padding: 0; margin: 0; }
.sd-hero-section .elementor-widget-shortcode,
.sd-hero-section .elementor-shortcode { display: block; }
/* The badge and the accent rule are self-sized, not stretched by the hero's
flex column. Without this the badge background spans the whole panel. */
.sd-hero__text .sd-badge,
.sd-hero__text .sd-rule { align-self: flex-start; }
.sd-hero__text .sd-badge { width: auto; max-width: max-content; }
/* --- Card hover: the light-brown border, at a specificity Elementor's
widget wrappers cannot out-rank ------------------------------------- */
.elementor-widget-container .sd-card:hover,
.elementor-widget-container a.sd-card:hover,
.sd-card:hover,
a.sd-card:hover {
border-color: var(--sd-border-hover);
box-shadow: var(--sd-shadow-hover);
transform: translateY(-6px) scale(1.015);
}
.elementor-widget-container .sd-card--noborder:hover,
.sd-card--noborder:hover { border-color: transparent; }
/* --- "Learn more →" on linked cards -------------------------------------- */
.sd-card__more {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 16px;
font: 700 13.5px var(--sd-font-body);
color: var(--sd-accent-deep);
letter-spacing: .01em;
}
.sd-card__more svg { transition: transform .2s ease; }
a.sd-card:hover .sd-card__more svg { transform: translateX(3px); }
/* --- Bundled icon set ---------------------------------------------------- */
.sd-icon { display: block; }
.sd-card__icon .sd-icon { width: 22px; height: 22px; }
.sd-subnav__tab .sd-icon { width: 18px; height: 18px; }
/* --- Proof cards: image, amber band, then body (design spec) ------------- */
.sd-card--photo { border-top: 3px solid var(--sd-accent); }
.sd-card--photo img { height: 168px; }
.sd-card__band {
background: var(--sd-badge-bg);
padding: 14px 20px 12px;
}
.sd-card__sector {
font: 400 12px var(--sd-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: #7b6f64;
margin-bottom: 2px;
}
.sd-card__metric {
font: 700 44px/1 var(--sd-font-head);
color: #3f3028;
margin: 0 0 4px;
}
.sd-card__metric-label { font: 600 13px/1.4 var(--sd-font-body); color: var(--sd-text-soft); }
.sd-card__body-wrap { padding: 16px 20px 20px; }
.sd-card__body-wrap .sd-card__body { font: 400 14px/1.55 var(--sd-font-body); }
/* --- CTA bands: buttons centred, side by side, white on hover ------------ */
.sd-cta-band .elementor-widget-button {
display: inline-block;
width: auto;
vertical-align: middle;
margin: 6px 7px 0;
}
.sd-cta-band .elementor-widget-wrap,
.sd-cta-band .elementor-element-populated { text-align: center; }
/* On espresso, the primary button's brown hover disappears into the
background — so it inverts to white, as the design does. */
.sd-cta-band .elementor-widget-button .elementor-button:hover,
.sd-cta-band .elementor-widget-button .elementor-button:focus-visible {
background: #fff;
color: var(--sd-ink);
box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.sd-cta-band .elementor-widget-button.sd-btn--on-dark .elementor-button {
background: transparent;
color: #fff;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
/* --- Footer parity ------------------------------------------------------- */
.sd-footer__office { margin-bottom: 4px; }
.sd-footer__office-name {
font: 700 15px var(--sd-font-head);
color: #fff;
margin-bottom: 12px;
}
.sd-footer__row {
display: flex;
gap: 9px;
align-items: flex-start;
margin-bottom: 10px;
font: 400 14px/1.5 var(--sd-font-body);
color: rgba(255, 255, 255, .8);
text-decoration: none;
}
.sd-footer__row .sd-icon { color: var(--sd-accent); flex-shrink: 0; margin-top: 2px; }
.sd-footer__row--addr { color: rgba(255, 255, 255, .65); }
.sd-footer__email { margin-top: 20px; }
.sd-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-top: 24px;
}
.sd-footer__bottom span,
.sd-footer__motto { font: 400 13px var(--sd-font-body); color: rgba(255, 255, 255, .45); }
@media (max-width: 900px) {
.sd-footer__grid { grid-template-columns: 1fr; gap: 32px; }
.sd-footer__contact { grid-template-columns: 1fr; }
}
/* ==========================================================================
DESIGN-PARITY PASS 2
========================================================================== */
/* --- Mega menu: two columns per group, separator between groups ---------- */
.sd-mega__items--2col {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 40px;
row-gap: 2px;
}
.sd-mega--product .sd-mega__group + .sd-mega__group {
border-left: 1px solid var(--sd-border);
padding-left: 44px;
}
.sd-mega__group:first-child .sd-mega__label { color: #f5b44e; }
.sd-mega__group:nth-child(2) .sd-mega__label { color: #d57d2a; }
.sd-mega__item { white-space: nowrap; }
.sd-mega__group:first-child .sd-mega__item .sd-icon { color: #f5b44e; }
.sd-mega__group:nth-child(2) .sd-mega__item .sd-icon { color: #d57d2a; }
@media (max-width: 1100px) { .sd-mega__items--2col { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
.sd-mega__group + .sd-mega__group {
border-left: 0;
padding-left: 0;
border-top: 1px solid var(--sd-border);
padding-top: 24px;
}
}
/* --- Hero caption: rule, title, body ------------------------------------- */
.sd-hero__caption {
position: absolute;
left: 44px;
right: 44px;
bottom: 44px;
color: #fff;
pointer-events: none;
}
.sd-hero__caption-rule {
width: 30px;
height: 5px;
background: #ea9a45;
border-radius: 999px;
margin-bottom: 16px;
}
.sd-hero__caption-title {
font: 700 22px/1.25 var(--sd-font-head);
color: #fff;
margin-bottom: 8px;
}
.sd-hero__caption-body { font: 400 15px/1.5 var(--sd-font-body); color: rgba(255, 255, 255, .72); }
/* --- Stats bar: white band, not espresso --------------------------------- */
.sd-stats-band,
.sd-stats-band.elementor-section {
background: #fff !important;
border-bottom: 1px solid var(--sd-border);
}
.sd-stats-band .sd-stat__num {
font: 700 38px var(--sd-font-head);
color: #3f3028;
letter-spacing: -.01em;
}
.sd-stats-band .sd-stat__label {
font: 600 13px var(--sd-font-body);
color: #7b6f64;
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 2px;
}
/* The label is uppercase everywhere, not only in the band. */
.sd-stat__label { text-transform: uppercase; letter-spacing: .06em; }
/* --- Parallax: the bundled plate, so the section is never flat ----------- */
.sd-parallax { position: relative; isolation: isolate; }
.sd-parallax:not([style*="background-image"]):before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("img/design/whatyoucandobg.png") center/cover no-repeat fixed;
opacity: .1;
}
.sd-parallax:after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--sd-bg-alt);
opacity: .82;
}
@supports (-webkit-touch-callout: none) {
.sd-parallax:not([style*="background-image"]):before { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
.sd-parallax:not([style*="background-image"]):before { background-attachment: scroll; }
}
/* --- Proof cards: accent bar, no border, aligned rows -------------------- */
.sd-card--photo {
border: 0;
border-top: 0;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(58, 46, 40, .1);
display: flex;
flex-direction: column;
height: 100%;
transition: transform .2s ease, box-shadow .2s ease;
}
/* The orange top is a painted accent, not a border — so it cannot pick up a
hover border-colour and cannot shift the box by a pixel. */
.sd-card--photo:before {
content: "";
display: block;
height: 3px;
background: var(--sd-accent);
flex-shrink: 0;
}
.sd-card--photo:hover,
a.sd-card--photo:hover,
.elementor-widget-container .sd-card--photo:hover {
border: 0;
border-color: transparent;
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
}
/* Equal image height across all three, so the amber bands line up. */
.sd-card--photo img {
width: 100%;
height: 168px;
object-fit: cover;
display: block;
flex-shrink: 0;
}
.sd-card--photo .sd-card__band {
background: #fbe6c9;
padding: 14px 20px 10px;
text-align: left;
flex-shrink: 0;
}
.sd-card--photo .sd-card__sector {
font: 400 12px var(--sd-font-body);
color: #7b6f64;
text-transform: uppercase;
letter-spacing: .06em;
margin: 0;
}
.sd-card--photo .sd-card__metric {
font: 700 44px/1 var(--sd-font-head);
color: #3f3028;
margin: 2px 0 0;
}
.sd-card--photo .sd-card__metric-label {
font: 600 13px var(--sd-font-body);
color: var(--sd-text-soft);
margin-top: -4px;
}
/* Body sits on the same left rule as the metric, with the design's padding. */
.sd-card--photo .sd-card__body-wrap {
padding: 16px 20px 20px;
text-align: left;
flex: 1;
}
.sd-card--photo .sd-card__body-wrap .sd-card__body {
font: 400 14px/1.55 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
text-align: left;
}
/* Equal card heights across the row. */
.sd-cards-grid,
.sd-grid--3 { align-items: stretch; }
/* --- Browser mockup: brown chrome bar with traffic lights ---------------- */
.sd-browser {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 48px rgba(44, 33, 27, .22);
border: 1px solid #ddd5cb;
background: #fff;
}
.sd-browser__bar {
height: 34px;
background: #3a2e28;
display: flex;
align-items: center;
gap: 7px;
padding: 0 14px;
}
.sd-browser__dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.sd-browser__dot:nth-child(1) { background: #ff6058; }
.sd-browser__dot:nth-child(2) { background: #ffbd2e; }
.sd-browser__dot:nth-child(3) { background: #28c840; }
.sd-browser__url {
margin-left: 10px;
font: 11px monospace;
color: rgba(255, 255, 255, .6);
}
.sd-browser img { width: 100%; height: 340px; object-fit: cover; display: block; }
/* --- Final CTA band: the design's espresso panel with the warm orb ------- */
.sd-cta-band {
position: relative;
overflow: hidden;
background: #241d18 !important;
}
.sd-cta-band:before {
content: "";
position: absolute;
top: -80px;
right: -40px;
width: 360px;
height: 360px;
background: var(--sd-grad);
filter: blur(90px);
opacity: .3;
border-radius: 999px;
pointer-events: none;
}
.sd-cta-band > .elementor-container { position: relative; z-index: 1; }
/* The short accent rule above the heading. */
.sd-cta-band .sd-cta-rule .elementor-divider-separator,
.sd-cta-band .sd-cta-rule hr {
width: 34px;
height: 6px;
background: #ea9a45;
border: 0;
border-radius: 999px;
margin: 0 auto;
}
.sd-cta-band .elementor-heading-title {
font: 700 40px/1.15 var(--sd-font-head);
color: #fff;
letter-spacing: -.01em;
}
.sd-cta-band .elementor-widget-text-editor {
font: 400 18px/1.55 var(--sd-font-body);
color: rgba(255, 255, 255, .72);
max-width: 560px;
margin: 0 auto;
}
.sd-cta-band .elementor-widget-button .elementor-button { padding: 16px 28px; }
@media (max-width: 700px) {
.sd-cta-band .elementor-heading-title { font-size: 30px; }
}
/* --- Footer parity pass 2 ------------------------------------------------ */
/* Fallback shown when a form has not been imported yet. */
.sd-form-missing {
font: 400 15px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
.sd-footer__socials { display: flex; gap: 10px; margin-top: 22px; }
.sd-footer__socials a {
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, .08);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background .2s ease;
}
.sd-footer__socials a:hover { background: rgba(255, 255, 255, .18); }
.sd-footer__socials svg { stroke: rgba(255, 255, 255, .85); }
/* Email reads at the same weight as the phone line above it. */
.sd-footer__email,
.sd-footer__email span { color: rgba(255, 255, 255, .8); }
.sd-footer__bottom { justify-content: space-between; }
/* ==========================================================================
DESIGN-PARITY PASS 3
Late overrides. Each of these beats an earlier rule in this file — the
comment says which, so the winner is never a mystery.
========================================================================== */
/* --- 1. Mega menu columns are per panel --------------------------------
Product splits each group across two columns; every other panel keeps one
column per group. Scoped to .sd-mega--product so the configuration is never
forced onto another panel, and written at :first-child specificity so it
still beats the base 3-across rule for Core Features. */
.sd-mega--product .sd-mega__group .sd-mega__items,
.sd-mega--product .sd-mega__group:first-child .sd-mega__items,
.sd-mega--product .sd-mega__items--2col {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 40px;
row-gap: 2px;
}
/* One column per group everywhere else, at matching specificity. */
.sd-mega:not(.sd-mega--product) .sd-mega__group .sd-mega__items,
.sd-mega:not(.sd-mega--product) .sd-mega__group:first-child .sd-mega__items {
display: flex;
flex-direction: column;
gap: 2px;
}
@media (max-width: 1100px) {
.sd-mega--product .sd-mega__group .sd-mega__items,
.sd-mega--product .sd-mega__group:first-child .sd-mega__items { grid-template-columns: 1fr; }
}
/* --- 3. Hero: the scrim belongs to the photo, not to the caption --------
The design darkens the bottom 62% of the image with a gradient; the caption
sits on top of it with no background of its own. */
.sd-hero__media:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
background: linear-gradient(180deg, transparent, rgba(29, 22, 17, .94));
pointer-events: none;
z-index: 1;
}
.sd-hero__caption {
z-index: 2;
background: none;
padding: 0;
border-radius: 0;
backdrop-filter: none;
}
/* --- 5. Parallax: the photograph is the point ---------------------------
The design uses a full-strength fixed background with no wash over it.
Everything below neutralises the earlier 10%-opacity + cream-overlay pair. */
.sd-parallax {
position: relative;
isolation: auto;
background-color: var(--sd-bg-alt);
background-image: url("img/design/whatyoucandobg.png");
background-position: center 30%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.sd-parallax:before,
.sd-parallax:after { content: none !important; }
.sd-parallax .sd-parallax__bg { opacity: 1; z-index: 0; }
.sd-parallax > * { position: relative; z-index: 1; }
@supports (-webkit-touch-callout: none) {
.sd-parallax { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
.sd-parallax { background-attachment: scroll; }
}
/* --- 6 & 7. Proof cards: equal boxes, aligned rows, left-aligned body ---
The grid stretches, the image is a fixed height, the band is fixed, and the
body takes the remainder — so image tops, amber bands and body text line up
across all three regardless of copy length. Beats the earlier
`.sd-card__body-wrap { padding: 20px 26px 26px }`. */
.sd-grid--2,
.sd-grid--3,
.sd-grid--4,
.sd-cards-grid {
align-items: stretch;
}
.sd-grid--3 > .sd-card--photo,
.sd-cards-grid > .sd-card--photo,
.elementor-widget-container .sd-card--photo {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
text-align: left;
}
.elementor-widget-container .sd-card--photo > img,
.sd-card--photo > img {
width: 100%;
height: 168px;
min-height: 168px;
max-height: 168px;
object-fit: cover;
display: block;
flex: 0 0 168px;
}
.elementor-widget-container .sd-card--photo .sd-card__band,
.sd-card--photo .sd-card__band {
flex: 0 0 auto;
padding: 14px 20px 10px;
text-align: left;
}
.elementor-widget-container .sd-card--photo .sd-card__body-wrap,
.sd-card--photo .sd-card__body-wrap {
padding: 16px 20px 20px;
text-align: left;
flex: 1 1 auto;
}
.elementor-widget-container .sd-card--photo .sd-card__body-wrap .sd-card__body,
.sd-card--photo .sd-card__body-wrap .sd-card__body {
margin: 0;
padding: 0;
text-align: left;
font: 400 14px/1.55 var(--sd-font-body);
color: var(--sd-text-soft);
}
.sd-card--photo .sd-card__sector,
.sd-card--photo .sd-card__metric,
.sd-card--photo .sd-card__metric-label { text-align: left; }
/* --- 8. CTA band: the two buttons share one line -----------------------
Elementor stacks widgets in a column, so the buttons need the wrap itself
to be a centred flex row, with the copy above forced to full width. */
.sd-cta-band .elementor-widget-wrap,
.sd-cta-band .elementor-element-populated {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0 14px;
}
.sd-cta-band .elementor-widget-divider,
.sd-cta-band .elementor-widget-heading,
.sd-cta-band .elementor-widget-text-editor {
flex: 0 0 100%;
width: 100%;
}
.sd-cta-band .elementor-widget-button {
flex: 0 0 auto;
width: auto;
max-width: none;
margin: 10px 0 0;
}
@media (max-width: 520px) {
.sd-cta-band .elementor-widget-button { flex-basis: 100%; }
.sd-cta-band .elementor-widget-button .elementor-button { width: 100%; }
}
/* ==========================================================================
FINAL CTA BAND
Measured directly from the approved design. The band is rendered as one HTML
widget (see templates/elementor/*.json), so Elementor never gets to size or
stack these parts — every value below is the design's own.
========================================================================== */
.sd-cta-band {
position: relative;
overflow: hidden;
background: #241d18 !important;
}
/* The warm blurred orb, top-right. */
.sd-cta-band:before {
content: "";
position: absolute;
top: -80px;
right: -40px;
width: 360px;
height: 360px;
background: linear-gradient(135deg, #f3b25a 0%, #e2873a 52%, #c8651f 100%);
filter: blur(90px);
opacity: .3;
border-radius: 999px;
pointer-events: none;
}
.sd-cta-band > .elementor-container,
.sd-cta-band .elementor-widget-wrap { position: relative; z-index: 1; }
.sd-cta {
max-width: 820px;
margin: 0 auto;
padding: 0 40px;
text-align: center;
}
.sd-cta__rule {
width: 34px;
height: 6px;
background: #ea9a45;
border-radius: 999px;
margin: 0 auto 22px;
}
.sd-cta__title {
font: 700 40px/1.15 var(--sd-font-head);
color: #fff;
margin: 0 0 18px;
letter-spacing: -.01em;
}
.sd-cta__body {
font: 400 18px/1.55 var(--sd-font-body);
color: rgba(255, 255, 255, .72);
margin: 0 auto 32px;
max-width: 560px;
}
.sd-cta__actions {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.sd-cta__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-radius: 999px;
background: linear-gradient(135deg, #f3b25a 0%, #e2873a 52%, #c8651f 100%);
color: #fff;
font: 700 15px var(--sd-font-body);
text-decoration: none;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(210, 116, 43, .3);
transition: background .2s ease, color .2s ease;
}
.sd-cta__btn:hover,
.sd-cta__btn:focus-visible { background: #fff; color: #3f3028; }
.sd-cta__btn svg { flex-shrink: 0; }
.sd-cta__btn--ghost {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255, 255, 255, .3);
box-shadow: none;
}
.sd-cta__btn--ghost:hover,
.sd-cta__btn--ghost:focus-visible {
background: #fff;
color: #3f3028;
border-color: #fff;
}
@media (max-width: 700px) {
.sd-cta__title { font-size: 30px; }
.sd-cta__body { font-size: 16px; }
}
@media (max-width: 520px) {
.sd-cta__actions { flex-direction: column; align-items: stretch; }
.sd-cta__btn { justify-content: center; }
}
/* ==========================================================================
ABOUT PAGE
The About layouts are bespoke — a sticky story column, a five-up value row,
a hotspot map — so the page is emitted as HTML widgets and styled here,
measured from the approved design rather than approximated with Elementor
columns.
========================================================================== */
/* --- Shared bits --------------------------------------------------------- */
.sd-secthead {
text-align: center;
max-width: 680px;
margin: 0 auto 48px;
padding: 0 40px;
}
.sd-secthead h2 {
font: 700 36px/1.15 var(--sd-font-head);
color: var(--sd-ink);
margin: 0;
letter-spacing: -.01em;
}
.sd-eyebrow--light { color: #f0b269; }
/* The rounded icon tile (amber by default, stone for the Vision card). */
.sd-ftile {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fbe6c9;
color: #d2742b;
flex-shrink: 0;
}
.sd-ftile--petrol { background: #e3dad0; color: #3f3028; }
/* --- Hero ---------------------------------------------------------------- */
.sd-about-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.sd-about-hero__title {
font: 700 48px/1.1 var(--sd-font-head);
color: var(--sd-ink);
margin: 20px 0 24px;
letter-spacing: -.015em;
}
.sd-about-hero__lede {
font: 400 17px/1.65 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
.sd-about-hero__img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 22px;
box-shadow: 0 10px 28px rgba(58, 46, 40, .14);
display: block;
}
/* --- Origin story -------------------------------------------------------- */
.sd-story {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 56px;
align-items: start;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.sd-story__aside { position: sticky; top: 100px; }
.sd-story__title {
font: 700 34px/1.15 var(--sd-font-head);
color: var(--sd-ink);
margin: 0 0 18px;
letter-spacing: -.01em;
}
.sd-story__img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 16px;
margin-top: 8px;
display: block;
}
.sd-story__body {
font: 400 16.5px/1.75 var(--sd-font-body);
color: #3a3128;
}
.sd-story__body p { margin: 0 0 20px; }
.sd-story__body p:last-of-type { margin-bottom: 24px; }
.sd-story__stats {
display: flex;
gap: 20px;
flex-wrap: wrap;
border-top: 1px solid var(--sd-border);
padding-top: 24px;
}
.sd-story__stat-n { font: 700 32px var(--sd-font-head); color: #3f3028; }
.sd-story__stat-l { font: 400 14px var(--sd-font-body); color: #7b6f64; }
/* --- Mission / Vision ---------------------------------------------------- */
.sd-mv {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.sd-mv__card,
.sd-value,
.sd-why__card {
background: #fff;
box-shadow: 0 4px 12px rgba(58, 46, 40, .1);
border: 2px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-mv__card { border-radius: 22px; padding: 36px; }
.sd-mv__card h3 {
font: 700 24px var(--sd-font-head);
color: var(--sd-ink);
margin: 22px 0 14px;
}
.sd-mv__card p {
font: 400 16px/1.65 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
.sd-mv__card:hover,
.sd-value:hover,
.sd-why__card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: #d2742b;
}
/* --- Values -------------------------------------------------------------- */
.sd-values {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
align-items: stretch;
}
.sd-value {
border-radius: 16px;
padding: 24px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
height: 100%;
}
.sd-value h3 {
font: 700 17px var(--sd-font-head);
color: var(--sd-ink);
margin: 16px 0 8px;
}
.sd-value p {
font: 400 13.5px/1.55 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
/* --- Footprint ----------------------------------------------------------- */
.sd-foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.sd-foot__title {
font: 700 34px/1.15 var(--sd-font-head);
color: #fff;
margin: 0 0 18px;
letter-spacing: -.01em;
}
.sd-foot__body {
font: 400 17px/1.65 var(--sd-font-body);
color: rgba(255, 255, 255, .75);
margin: 0 0 28px;
}
.sd-foot__pills { display: flex; gap: 10px; flex-wrap: wrap; }
.sd-foot__pill {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255, 255, 255, .1);
color: #fff;
font: 600 14px var(--sd-font-body);
padding: 9px 16px;
border-radius: 999px;
}
.sd-foot__pill svg { color: #f0b269; }
.sd-foot__mapwrap { display: flex; justify-content: center; }
.sd-foot__mapbox {
position: relative;
width: 82%;
max-width: 380px;
aspect-ratio: 1 / 1;
background: rgba(255, 255, 255, .06);
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.sd-foot__mapinner {
position: relative;
width: 100%;
aspect-ratio: 239.057 / 217.318;
}
.sd-foot__mapinner > img { width: 100%; height: 100%; display: block; }
.sd-hot { position: absolute; z-index: 2; }
.sd-hot__dot {
position: absolute;
left: 0;
top: 0;
width: 9px;
height: 9px;
border-radius: 999px;
background: #f0b269;
box-shadow: 0 0 0 2px rgba(29, 22, 17, .5);
transform: translate(-50%, -50%);
}
.sd-hot__pulse {
position: absolute;
inset: 0;
border-radius: 999px;
background: #f0b269;
animation: sd-pulse 1.8s ease-out infinite;
}
@keyframes sd-pulse {
0% { transform: scale(1); opacity: .8; }
100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.sd-hot__pulse { animation: none; }
}
.sd-hot__label {
position: absolute;
font: 700 11px var(--sd-font-body);
color: #fff;
background: rgba(29, 22, 17, .82);
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
/* --- Why choose ---------------------------------------------------------- */
.sd-why {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
align-items: stretch;
}
.sd-why__card {
position: relative;
border-radius: 16px;
padding: 29px 26px 26px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
border-top: 0;
height: 100%;
overflow: hidden;
}
/* Painted accent, exactly as the Proven In The Field cards do it. */
.sd-why__card:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--sd-accent);
}
.sd-why__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sd-why__head h3 {
font: 700 18px var(--sd-font-head);
color: var(--sd-ink);
margin: 0;
}
.sd-why__card p {
font: 400 14.5px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
.sd-values { grid-template-columns: repeat(3, 1fr); }
.sd-why { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.sd-about-hero,
.sd-story,
.sd-mv,
.sd-foot { grid-template-columns: 1fr; gap: 32px; }
.sd-story__aside { position: static; }
.sd-values { grid-template-columns: repeat(2, 1fr); }
.sd-about-hero__title { font-size: 36px; }
.sd-story__title,
.sd-foot__title { font-size: 28px; }
.sd-secthead h2 { font-size: 28px; }
}
@media (max-width: 560px) {
.sd-values,
.sd-why { grid-template-columns: 1fr; }
.sd-about-hero,
.sd-story,
.sd-mv,
.sd-foot,
.sd-values,
.sd-why,
.sd-secthead { padding-left: 20px; padding-right: 20px; }
}
/* ==========================================================================
ABOUT PAGE — WIDTH AND IMAGE PARITY
========================================================================== */
/* The About sections are single HTML widgets, so Elementor wraps them in its
default 1140px container while the markup inside asks for 1280px. The inner
value is the design's, so the wrapper is the one that gives way. */
.sd-sec-abouthero > .elementor-container,
.sd-sec-story > .elementor-container,
.sd-sec-mv > .elementor-container,
.sd-sec-values > .elementor-container,
.sd-sec-foot > .elementor-container,
.sd-sec-why > .elementor-container {
max-width: 100%;
width: 100%;
}
.sd-sec-abouthero .elementor-widget-html,
.sd-sec-story .elementor-widget-html,
.sd-sec-mv .elementor-widget-html,
.sd-sec-values .elementor-widget-html,
.sd-sec-foot .elementor-widget-html,
.sd-sec-why .elementor-widget-html {
width: 100%;
}
/* Rounded corners survive Elementor's image resets. */
.sd-about-hero__img { border-radius: 22px; }
.sd-story__img { border-radius: 16px; }
/* Explicit, and specific enough to beat any Elementor image reset. */
.sd-sec-abouthero .sd-about-hero img.sd-about-hero__img { border-radius: 22px; }
.sd-sec-story .sd-story img.sd-story__img { border-radius: 16px; }
/* ==========================================================================
PRODUCT PAGE
Emitted as HTML widgets and measured from the approved design. The sticky
tabs deliberately reuse the theme's .sd-subnav markup contract, so the
existing scroll-spy and sticky-offset engine drive them with no extra JS.
========================================================================== */
.sd-sec-phero > .elementor-container,
.sd-sec-ptabs > .elementor-container,
.sd-sec-core > .elementor-container,
.sd-sec-inds > .elementor-container { max-width: 100%; width: 100%; }
/* --- Hero: left-aligned on a 760px measure ------------------------------- */
.sd-phero {
max-width: 760px;
margin: 0;
padding: 0 40px;
text-align: left;
}
.sd-phero h1 {
font: 700 46px/1.1 var(--sd-font-head);
color: var(--sd-ink);
margin: 18px 0 20px;
letter-spacing: -.015em;
}
.sd-phero p {
font: 400 18px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0 0 28px;
}
/* --- Sticky tabs --------------------------------------------------------- */
.sd-sec-ptabs {
position: sticky;
top: var(--sd-header-h, 82px);
z-index: 40;
}
.sd-ptabs.sd-subnav {
position: static;
background: rgba(250, 247, 242, .92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--sd-border);
}
/* An overflow other than visible on any ancestor kills position:sticky. */
.sd-sec-ptabs,
.sd-sec-ptabs > .elementor-container,
.sd-sec-ptabs .elementor-column,
.sd-sec-ptabs .elementor-widget-wrap,
.sd-sec-ptabs .elementor-widget-html,
.sd-sec-ptabs .elementor-widget-container { overflow: visible; }
.sd-ptabs .sd-subnav__inner {
max-width: 1200px;
margin: 0 auto;
padding: 16px 40px;
display: flex;
justify-content: center;
gap: 14px;
}
.sd-ptabs .sd-subnav__tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 110px;
text-decoration: none;
border: 0;
background: none;
padding: 0;
color: #9b8f83;
}
.sd-ptabs__ico {
width: 40px;
height: 40px;
border-radius: 12px;
border: 2.5px solid currentColor;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sd-ptabs .sd-subnav__label {
font: 600 13px var(--sd-font-body);
color: currentColor;
text-align: center;
white-space: nowrap;
}
.sd-ptabs .sd-subnav__tab.is-active,
.sd-ptabs .sd-subnav__tab.is-active .sd-subnav__label { color: #e2873a; }
.sd-ptabs .sd-subnav__tab.is-active .sd-ptabs__ico {
background: #fbe6c9;
border-color: #e2873a;
color: #e2873a;
}
/* The icon inherits the tab's colour, so both states need no extra rule. */
.sd-ptabs .sd-subnav__tab svg { color: currentColor; }
/* Hover previews the active colour without committing to it. */
.sd-ptabs .sd-subnav__tab:hover { color: #b15e22; }
/* --- Core features ------------------------------------------------------- */
.sd-secthead--tight { max-width: 640px; margin: 36px auto 40px; }
.sd-secthead--tight h2 { font-size: 34px; }
.sd-secthead__lede { font: 400 17px/1.6 var(--sd-font-body); color: var(--sd-text-soft); margin: 14px 0 0; }
.sd-eyebrow--ink { color: #3f3028; }
.sd-feats { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.sd-feat {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
padding: 56px 0;
border-top: 1px solid var(--sd-border);
scroll-margin-top: calc(var(--sd-header-h, 82px) + var(--sd-subnav-h, 73px));
}
/* Alternating sides, without direction:rtl — order keeps text reading order
intact for screen readers and avoids punctuation flipping. */
.sd-feat--rev .sd-feat__copy { order: 2; }
.sd-feat--rev .sd-feat__media { order: 1; }
.sd-feat__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sd-feat__num { font: 700 13px monospace; color: var(--sd-text-muted); }
.sd-feat h3 {
font: 700 28px/1.2 var(--sd-font-head);
color: var(--sd-ink);
margin: 0 0 14px;
letter-spacing: -.01em;
}
.sd-feat p {
font: 400 16.5px/1.7 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
/* Browser mockup */
.sd-shot {
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(58, 46, 40, .1);
border: 1px solid #ddd5cb;
background: #fff;
}
.sd-shot__bar {
height: 30px;
background: #3a2e28;
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
}
.sd-shot__bar span { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.sd-shot__bar span:nth-child(1) { background: #ff6058; }
.sd-shot__bar span:nth-child(2) { background: #ffbd2e; }
.sd-shot__bar span:nth-child(3) { background: #28c840; }
.sd-shot > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.sd-shot--plain { background: transparent; }
.sd-shot__square { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* Two-phone cascade */
.sd-phones {
position: relative;
width: 100%;
max-width: 440px;
height: 480px;
--ph-shift: 160px;
}
.sd-phones--start { justify-self: start; }
.sd-phones--end { justify-self: end; }
.sd-phone {
position: absolute;
width: 220px;
height: 440px;
border-radius: 28px;
border: 8px solid var(--sd-ink);
overflow: hidden;
background: #fff;
}
.sd-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-phone--back {
top: 40px;
z-index: 1;
box-shadow: 0 12px 28px rgba(58, 46, 40, .18);
}
.sd-phone--front {
top: 0;
z-index: 2;
box-shadow: 0 16px 32px rgba(58, 46, 40, .24);
}
.sd-phones--start .sd-phone--back { left: var(--ph-shift); }
.sd-phones--start .sd-phone--front { left: 0; }
.sd-phones--end .sd-phone--back { left: 0; }
.sd-phones--end .sd-phone--front { left: var(--ph-shift); }
/* --- Industries: two up, icon beside the copy ---------------------------- */
.sd-inds {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
align-items: stretch;
}
.sd-ind {
background: #fff;
border-radius: 16px;
padding: 28px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
display: flex;
gap: 18px;
height: 100%;
border: 2px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
scroll-margin-top: calc(var(--sd-header-h, 82px) + var(--sd-subnav-h, 73px));
}
.sd-ind:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: #d2742b;
}
.sd-ind h3 { font: 700 20px var(--sd-font-head); color: var(--sd-ink); margin: 2px 0 8px; }
.sd-ind p { font: 400 14.5px/1.6 var(--sd-font-body); color: var(--sd-text-soft); margin: 0; }
/* --- CTA variant --------------------------------------------------------- */
.sd-cta--wide { max-width: 860px; }
.sd-cta__title--sm { font-size: 36px; line-height: 1.25; margin-bottom: 20px; }
.sd-cta__body--wide { max-width: 640px; font-size: 18px; line-height: 1.6; }
/* --- Responsive: the phone cascade is the fragile part ------------------- */
@media (max-width: 900px) {
.sd-feat { grid-template-columns: 1fr; gap: 32px; }
.sd-feat--rev .sd-feat__copy,
.sd-feat--rev .sd-feat__media { order: 0; }
.sd-phones { justify-self: start; }
.sd-inds { grid-template-columns: 1fr; }
.sd-phero h1 { font-size: 34px; }
.sd-secthead--tight h2 { font-size: 26px; }
}
@media (max-width: 700px) {
.sd-phones { max-width: 320px; height: 380px; --ph-shift: 120px; }
.sd-phone { width: 170px; height: 340px; border-width: 7px; border-radius: 24px; }
.sd-phone--back { top: 32px; }
.sd-ptabs .sd-subnav__inner { padding: 12px 20px; gap: 10px; }
}
@media (max-width: 480px) {
.sd-phones { max-width: 260px; height: 340px; --ph-shift: 85px; }
.sd-phone { width: 150px; height: 300px; border-width: 6px; border-radius: 22px; }
.sd-phone--back { top: 28px; }
.sd-phero,
.sd-feats,
.sd-inds,
.sd-secthead { padding-left: 20px; padding-right: 20px; }
}
/* ==========================================================================
PRICING PAGE
Measured from the approved design. The sticky compare bar and the FAQ
accordion reuse the theme's existing JS contracts
([data-sd-compare-bar] + .sd-compare-section, and .sd-faq__item), so the
behaviour is the design's with no page-specific script.
========================================================================== */
.sd-sec-prhero > .elementor-container,
.sd-sec-plans > .elementor-container,
.sd-sec-comparebar > .elementor-container,
.sd-sec-compare > .elementor-container,
.sd-sec-incl > .elementor-container,
.sd-sec-faq > .elementor-container { max-width: 100%; width: 100%; }
/* The bar is fixed, so its section must not reserve height. */
.sd-sec-comparebar { padding: 0 !important; }
/* --- Hero ---------------------------------------------------------------- */
.sd-prhero {
max-width: 820px;
margin: 0 auto;
text-align: center;
padding: 0 40px;
}
.sd-prhero h1 {
font: 700 44px/1.14 var(--sd-font-head);
color: var(--sd-ink);
margin: 20px 0 18px;
letter-spacing: -.015em;
}
.sd-prhero p {
font: 400 18px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
/* --- Plan cards ---------------------------------------------------------- */
.sd-plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
/* The wrapper is a positioning device only — no surface of its own. */
.sd-sec-plans .sd-planwrap {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
display: block;
height: 100%;
}
.sd-sec-plans .sd-planwrap:hover { transform: none; box-shadow: none; border: 0; }
/* The featured plan lifts as a whole, so its shadow lifts with it. */
.sd-planwrap--featured { transform: translateY(-12px); }
.sd-plancard {
border-radius: 22px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
border: 1px solid #ddd5cb;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-planwrap--featured .sd-plancard {
box-shadow: 0 10px 28px rgba(58, 46, 40, .14);
border: 1.5px solid #f0b269;
}
.sd-plancard:hover {
transform: scale(1.02);
box-shadow: 0 16px 32px rgba(210, 116, 43, .3);
border-color: #d2742b;
}
.sd-plancard__flag {
background: linear-gradient(180deg, #e89446 0%, #db7b2c 100%);
color: #fff;
font: 700 12px var(--sd-font-body);
letter-spacing: .1em;
text-transform: uppercase;
text-align: center;
padding: 8px;
}
.sd-plancard__pad { padding: 32px 28px; display: flex; flex-direction: column; flex: 1; }
.sd-plancard__tag {
font: 600 13px var(--sd-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: #3f3028;
margin-bottom: 8px;
}
.sd-planwrap--featured .sd-plancard__tag { color: #b15e22; }
.sd-plancard__pad h3 { font: 700 26px var(--sd-font-head); color: var(--sd-ink); margin: 0 0 8px; }
.sd-plancard__pad p {
font: 400 15px/1.65 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0 0 28px;
flex: 1;
}
.sd-plancard__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font: 700 15px var(--sd-font-body);
padding: 16px 28px;
border-radius: 999px;
background: transparent;
color: var(--sd-ink);
border: 1.5px solid #ddd5cb;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sd-planwrap--featured .sd-plancard__cta {
background: linear-gradient(135deg, #f3b25a 0%, #e2873a 52%, #c8651f 100%);
color: #fff;
border: 0;
}
.sd-plancard__cta:hover {
background: linear-gradient(135deg, #5a4636 0%, #3f3028 55%, #2a1f19 100%);
color: #fff;
border-color: #3f3028;
}
.sd-plancard__compare {
text-align: center;
font: 700 13.5px var(--sd-font-body);
color: #b15e22;
margin-top: 14px;
text-decoration: none;
}
.sd-plans__note {
text-align: center;
font: 400 14px var(--sd-font-body);
color: #7b6f64;
margin: 12px 0 0;
padding: 0 40px;
}
/* --- Comparison table ---------------------------------------------------- */
.sd-compare-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 24px;
}
.sd-compare { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sd-compare__anchor {
border-top: 1px solid var(--sd-border);
scroll-margin-top: calc(var(--sd-header-h, 82px) + 52px);
}
.sd-compare__cat { border-bottom: 1px solid var(--sd-border); padding: 24px 0; }
.sd-compare__cat-title {
font: 700 13px var(--sd-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: #b15e22;
margin-bottom: 14px;
}
.sd-compare__items { display: flex; flex-direction: column; gap: 10px; }
.sd-compare__item {
display: flex;
gap: 10px;
align-items: flex-start;
font: 400 13.5px/1.4 var(--sd-font-body);
color: #3a3128;
}
.sd-tick {
width: 20px;
height: 20px;
border-radius: 999px;
background: #fbe6c9;
color: #d2742b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sd-compare__none { font: 400 13.5px var(--sd-font-body); color: #c4b9ab; }
.sd-compare__plan-label { display: none; }
/* Sticky bar */
.sd-compare-bar {
position: fixed;
top: var(--sd-header-h, 82px);
left: 0;
right: 0;
z-index: 190;
background: #fff;
box-shadow: 0 4px 16px rgba(58, 46, 40, .12);
border-bottom: 1px solid var(--sd-border);
display: none;
}
.sd-compare-bar.is-visible { display: block; }
.sd-compare-bar__inner { max-width: 1280px; margin: 0 auto; padding: 16px 40px; }
.sd-compare-bar .sd-compare-grid { align-items: center; }
.sd-compare-bar__title {
font: 700 15px var(--sd-font-head);
color: var(--sd-ink);
white-space: nowrap;
}
.sd-compare-bar__plan {
font: 700 14px var(--sd-font-head);
color: #3f3028;
white-space: nowrap;
}
.sd-compare-bar__plan.is-featured { color: #b15e22; }
/* --- All plans include --------------------------------------------------- */
.sd-secthead--incl { max-width: 640px; margin: 0 auto 44px; }
.sd-secthead--incl h2 { font-size: 34px; }
.sd-secthead--faq { max-width: 640px; margin: 0 auto 40px; }
.sd-incl {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
align-items: stretch;
}
.sd-incl__card {
background: #fff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
display: flex;
gap: 16px;
align-items: flex-start;
border: 2px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-incl__card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: #d2742b;
}
.sd-incl__card h3 { font: 700 16px var(--sd-font-head); color: var(--sd-ink); margin: 2px 0 6px; }
.sd-incl__card p { font: 400 13.5px/1.55 var(--sd-font-body); color: var(--sd-text-soft); margin: 0; }
/* --- FAQ ----------------------------------------------------------------- */
.sd-faq {
max-width: 820px;
margin: 0 auto;
border-top: 1px solid var(--sd-border);
padding: 0 40px;
}
.sd-faq__item { border-bottom: 1px solid var(--sd-border); }
.sd-faq__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 4px;
background: none;
border: 0;
cursor: pointer;
text-align: left;
font: 600 18px var(--sd-font-head);
color: var(--sd-ink);
}
.sd-faq__ico {
width: 32px;
height: 32px;
border-radius: 999px;
background: #fbe6c9;
color: #b15e22;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sd-faq__item.is-open .sd-faq__ico {
background: var(--sd-accent);
color: #fff;
transform: rotate(180deg);
}
/* Closed by default; the theme's accordion opens the first item on load. */
.sd-faq__a { display: none; }
.sd-faq__item.is-open .sd-faq__a { display: block; }
.sd-faq__a p {
font: 400 15.5px/1.7 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0 4px 24px;
max-width: 720px;
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
.sd-plans,
.sd-incl { grid-template-columns: 1fr; }
.sd-plan--featured { transform: none; }
.sd-prhero h1 { font-size: 32px; }
}
/* Below 760 the table restructures into per-plan blocks with their own
labels, which makes the pinned bar redundant — the theme's JS hides it at
exactly this width. */
@media (max-width: 760px) {
.sd-compare-bar { display: none !important; }
.sd-compare-grid { display: block; }
.sd-compare-grid > div { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f0ebe3; }
.sd-compare-grid > div:last-child { border-bottom: 0; margin-bottom: 0; }
.sd-compare__plan-label {
display: block;
font: 700 13px var(--sd-font-head);
color: #b15e22;
margin-bottom: 8px;
}
.sd-faq__q { font-size: 16px; }
}
@media (max-width: 480px) {
.sd-prhero,
.sd-plans,
.sd-compare,
.sd-incl,
.sd-faq { padding-left: 20px; padding-right: 20px; }
}
/* ==========================================================================
RESOURCES — panel and page
========================================================================== */
/* Three equal columns, single-column lists, one label colour. */
.sd-mega--resources .sd-mega__inner { justify-content: flex-start; }
.sd-mega--resources .sd-mega__group { flex: 1; }
.sd-mega--resources .sd-mega__label { color: #d2742b; }
.sd-mega--resources .sd-mega__item .sd-icon { color: #d2742b; }
.sd-mega--resources .sd-mega__items,
.sd-mega--resources .sd-mega__group .sd-mega__items {
display: flex;
flex-direction: column;
gap: 2px;
}
@media (max-width: 760px) {
.sd-mega--resources .sd-mega__group + .sd-mega__group {
border-top: 1px solid var(--sd-border);
padding-top: 24px;
}
}
/* --- Page hero: left-aligned, 720px measure ------------------------------ */
.sd-sec-reshero > .elementor-container,
.sd-sec-res > .elementor-container { max-width: 100%; width: 100%; }
.sd-reshero { max-width: 720px; margin: 0; padding: 0 40px; text-align: left; }
.sd-reshero__rule {
width: 30px;
height: 5px;
background: #ea9a45;
border-radius: 999px;
margin-bottom: 18px;
}
.sd-reshero h1 {
font: 700 46px/1.1 var(--sd-font-head);
color: var(--sd-ink);
margin: 18px 0 18px;
letter-spacing: -.015em;
}
.sd-reshero p { font: 400 18px/1.6 var(--sd-font-body); color: var(--sd-text-soft); margin: 0; }
/* --- Cards --------------------------------------------------------------- */
.sd-res {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
align-items: stretch;
}
.sd-res__card {
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border: 2px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-res__card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: #d2742b;
color: inherit;
}
.sd-res__top { display: flex; align-items: center; justify-content: space-between; }
/* The pill states the item's availability — a muted outline for the two that
are not published yet, accent for the one you can actually open. */
.sd-res__tag {
font: 600 11px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .05em;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid currentColor;
white-space: nowrap;
}
.sd-res__tag--muted { color: #9b8f83; }
.sd-res__tag--accent { color: #d2742b; }
.sd-res__card h3 { font: 700 21px var(--sd-font-head); color: var(--sd-ink); margin: 20px 0 10px; }
.sd-res__card p { font: 400 15px/1.6 var(--sd-font-body); color: var(--sd-text-soft); margin: 0; flex: 1; }
@media (max-width: 900px) {
.sd-res { grid-template-columns: 1fr; }
.sd-reshero h1 { font-size: 34px; }
}
@media (max-width: 480px) {
.sd-reshero,
.sd-res { padding-left: 20px; padding-right: 20px; }
}
/* ==========================================================================
SUPPORT + CONTACT
========================================================================== */
.sd-sec-pghero > .elementor-container,
.sd-sec-support > .elementor-container,
.sd-sec-contact > .elementor-container { max-width: 100%; width: 100%; }
/* --- Shared page hero: left-aligned, rule above the badge ---------------- */
.sd-pghero { max-width: 720px; margin: 0; padding: 0 40px; text-align: left; }
.sd-pghero__rule {
width: 30px;
height: 5px;
background: #ea9a45;
border-radius: 999px;
margin-bottom: 18px;
}
.sd-pghero h1 {
font: 700 46px/1.1 var(--sd-font-head);
color: var(--sd-ink);
margin: 18px 0 18px;
letter-spacing: -.015em;
}
.sd-pghero p { font: 400 18px/1.6 var(--sd-font-body); color: var(--sd-text-soft); margin: 0; }
/* --- Support: four cards -------------------------------------------------- */
.sd-support {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
align-items: stretch;
}
.sd-support__card {
background: #fff;
border-radius: 16px;
padding: 26px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border: 2px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-support__card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: #d2742b;
color: inherit;
}
.sd-support__card h3 { font: 700 18px/1.25 var(--sd-font-head); color: var(--sd-ink); margin: 18px 0 8px; }
.sd-support__card p { font: 400 14px/1.6 var(--sd-font-body); color: var(--sd-text-soft); margin: 0 0 14px; flex: 1; }
.sd-support__more {
display: inline-flex;
align-items: center;
gap: 5px;
font: 700 13px var(--sd-font-body);
color: #b15e22;
}
.sd-support__more svg { transition: transform .2s ease; }
.sd-support__card:hover .sd-support__more svg { transform: translateX(3px); }
/* --- Contact: rail of region cards beside the form card ------------------ */
.sd-contact {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
align-items: start;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.sd-contact__rail { display: grid; grid-template-columns: 1fr; gap: 20px; }
.sd-region {
background: #fff;
border-radius: 16px;
padding: 26px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
height: 100%;
border: 2px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-region:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: #d2742b;
}
.sd-region__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sd-region__head h3 { font: 700 20px var(--sd-font-head); color: var(--sd-ink); margin: 0; }
.sd-region__head span { font: 400 12px var(--sd-font-body); color: var(--sd-text-muted); }
.sd-region__rows { display: flex; flex-direction: column; gap: 14px; }
.sd-region__row {
display: flex;
gap: 12px;
align-items: center;
font: 400 15px/1.5 var(--sd-font-body);
color: #3a2e28;
text-decoration: none;
}
.sd-region__row svg { color: #d2742b; flex-shrink: 0; }
.sd-region__row--soft { align-items: flex-start; color: var(--sd-text-soft); }
.sd-region__row--soft svg { margin-top: 2px; }
.sd-region__wa {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
font: 700 14px var(--sd-font-body);
padding: 13px 20px;
border-radius: 999px;
border: 1.5px solid #ddd5cb;
color: var(--sd-ink);
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sd-region__wa:hover {
background: linear-gradient(135deg, #5a4636 0%, #3f3028 55%, #2a1f19 100%);
color: #fff;
border-color: #3f3028;
}
.sd-contact__form {
background: #fff;
border-radius: 22px;
padding: 32px;
box-shadow: 0 4px 12px rgba(58, 46, 40, .1);
}
.sd-contact__form h3 { font: 700 24px var(--sd-font-head); color: var(--sd-ink); margin: 0 0 6px; }
.sd-contact__form-lede {
font: 400 15px/1.5 var(--sd-font-body);
color: #7b6f64;
margin: 0 0 24px;
}
/* The form sits inside the card, so it needs no surface of its own. */
.sd-contact__form .fluentform_wrapper,
.sd-contact__form .sd-ff { background: none; padding: 0; }
.sd-contact__form .ff-btn-submit { width: 100%; }
@media (max-width: 1100px) { .sd-support { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
.sd-contact { grid-template-columns: 1fr; gap: 28px; }
.sd-pghero h1 { font-size: 34px; }
}
@media (max-width: 560px) { .sd-support { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
.sd-pghero,
.sd-support,
.sd-contact { padding-left: 20px; padding-right: 20px; }
.sd-contact__form { padding: 24px 20px; }
}
/* ==========================================================================
CONVERSION PAGES — trial, demo, order
The rail and the form card are two widgets in one Elementor column; this
turns that column's widget wrap into the design's two-column grid, so no
inner sections are needed and the form stays inside its white card.
========================================================================== */
.sd-sec-formpage > .elementor-container,
.sd-sec-next > .elementor-container { max-width: 100%; width: 100%; }
.sd-sec-formpage > .elementor-container > .elementor-column > .elementor-widget-wrap,
.sd-sec-formpage > .elementor-container > .elementor-column > .elementor-element-populated {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: start;
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
/* Elementor gives widgets full-width flex behaviour; the grid supplies the
sizing here, so those defaults have to be neutralised. */
.sd-sec-formpage .elementor-widget { width: auto; max-width: none; margin: 0; }
/* --- Left rail ----------------------------------------------------------- */
.sd-formrail h1 {
font: 700 42px/1.12 var(--sd-font-head);
color: var(--sd-ink);
margin: 18px 0;
letter-spacing: -.015em;
}
.sd-formrail__lede {
font: 400 17px/1.65 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0 0 32px;
}
.sd-formrail__block { margin-bottom: 32px; }
.sd-formrail__block h3 {
font: 700 18px var(--sd-font-head);
color: var(--sd-ink);
margin: 0 0 16px;
}
.sd-ticklist { display: flex; flex-direction: column; gap: 14px; }
.sd-ticklist__row {
display: flex;
gap: 12px;
align-items: flex-start;
font: 400 15.5px/1.5 var(--sd-font-body);
color: #3a3128;
}
.sd-ticklist__tick {
width: 26px;
height: 26px;
border-radius: 999px;
background: #fbe6c9;
color: #d2742b;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
/* Meta strip under a hairline: trial length / cost / setup. */
.sd-formrail__metas {
display: flex;
gap: 28px;
flex-wrap: wrap;
border-top: 1px solid var(--sd-border);
padding-top: 20px;
}
.sd-formrail__meta-k {
font: 700 13px var(--sd-font-body);
color: #9b8f83;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 4px;
}
.sd-formrail__meta-v { font: 700 17px var(--sd-font-head); color: var(--sd-ink); }
/* --- Selected-plan panel (order page) ------------------------------------ */
.sd-planpanel {
background: #fff;
border-radius: 16px;
padding: 22px 24px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
margin-bottom: 28px;
}
.sd-planpanel__k {
font: 700 12px var(--sd-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: #9b8f83;
margin-bottom: 8px;
}
.sd-planpanel__name { font: 700 24px var(--sd-font-head); color: var(--sd-ink); }
.sd-planpanel__blurb {
font: 400 14.5px/1.55 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 10px 0 0;
}
/* --- Form card ----------------------------------------------------------- */
.sd-formcard {
background: #fff;
border-radius: 22px;
padding: 32px;
box-shadow: 0 4px 12px rgba(58, 46, 40, .1);
}
.sd-formcard h3 { font: 700 22px var(--sd-font-head); color: var(--sd-ink); margin: 0 0 6px; }
.sd-formcard__lede {
font: 400 14.5px/1.5 var(--sd-font-body);
color: #7b6f64;
margin: 0 0 22px;
}
.sd-formcard__note {
font: 400 12.5px/1.5 var(--sd-font-body);
color: #9b8f83;
text-align: center;
margin: 14px 0 0;
}
/* The form is already inside a card, so it must not paint a second one. */
.sd-formcard .fluentform_wrapper,
.sd-formcard .sd-ff { background: none; padding: 0; }
.sd-formcard .ff-btn-submit { width: 100%; }
/* --- What happens next --------------------------------------------------- */
.sd-sec-next { border-top: 1px solid var(--sd-border); }
.sd-next { max-width: 720px; margin: 0 auto; padding: 0 40px; }
.sd-next h3 { font: 700 22px var(--sd-font-head); color: var(--sd-ink); margin: 0 0 20px; }
.sd-next .sd-ticklist { gap: 16px; }
@media (max-width: 900px) {
.sd-sec-formpage > .elementor-container > .elementor-column > .elementor-widget-wrap,
.sd-sec-formpage > .elementor-container > .elementor-column > .elementor-element-populated {
grid-template-columns: 1fr;
gap: 32px;
}
.sd-formrail h1 { font-size: 32px; }
}
@media (max-width: 480px) {
.sd-sec-formpage > .elementor-container > .elementor-column > .elementor-widget-wrap,
.sd-sec-formpage > .elementor-container > .elementor-column > .elementor-element-populated {
padding-left: 20px;
padding-right: 20px;
}
.sd-next { padding-left: 20px; padding-right: 20px; }
.sd-formcard { padding: 24px 20px; }
}
/* ==========================================================================
FORM CHROME + NAV TRIAL BUTTON
Fluent Forms ships a blue focus ring and blue-tinted autofill from the
browser; both are overridden here in the brand palette.
========================================================================== */
/* --- 1. Nav trial button, a touch larger -------------------------------- */
.sd-header .sd-btn--sm,
.sd-nav .sd-btn--sm,
.sd-header__actions .sd-btn--sm {
padding: 13px 26px;
font-size: 15px;
line-height: 1.1;
}
@media (max-width: 1180px) {
.sd-header .sd-btn--sm,
.sd-nav .sd-btn--sm,
.sd-header__actions .sd-btn--sm { padding: 12px 20px; font-size: 14px; }
}
/* --- 2. Pill submit buttons --------------------------------------------- */
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.sd-formcard .ff-btn-submit,
.sd-contact__form .ff-btn-submit,
.fluentform button[type="submit"] {
border-radius: 999px !important;
border: 0;
padding: 16px 30px;
font: 700 15px var(--sd-font-body);
color: #fff;
background: linear-gradient(135deg, #f3b25a 0%, #e2873a 52%, #c8651f 100%);
box-shadow: 0 4px 14px rgba(210, 116, 43, .28);
transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
background: linear-gradient(135deg, #5a4636 0%, #3f3028 55%, #2a1f19 100%);
box-shadow: 0 6px 18px rgba(44, 33, 27, .3);
transform: translateY(-1px);
}
/* --- 3. Focus and autofill in brand colours ----------------------------- */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform select,
.fluentform textarea,
.fluentform .ff-el-form-control {
border: 1.5px solid #ddd5cb !important;
border-radius: 10px !important;
background-color: #fff !important;
color: #3a2e28 !important;
font: 400 15px var(--sd-font-body) !important;
padding: 13px 14px !important;
box-shadow: none !important;
transition: border-color .18s ease, box-shadow .18s ease;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus,
.fluentform .ff-el-form-control:focus {
outline: none !important;
border-color: #e2873a !important;
box-shadow: 0 0 0 3px rgba(226, 135, 58, .18) !important;
}
/* The browser's own autofill wash is blue and cannot be styled directly —
an inset shadow the size of the field is the only reliable override. */
.fluentform input:-webkit-autofill,
.fluentform input:-webkit-autofill:hover,
.fluentform input:-webkit-autofill:focus,
.fluentform textarea:-webkit-autofill,
.fluentform select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fdf8f1 inset !important;
box-shadow: 0 0 0 1000px #fdf8f1 inset !important;
-webkit-text-fill-color: #3a2e28 !important;
caret-color: #3a2e28;
border-color: #e6c9a3 !important;
}
.fluentform input:-webkit-autofill:focus { border-color: #e2873a !important; }
/* Selected option, checkboxes and radios also default to blue. */
.fluentform select option:checked { background: #fbe6c9; color: #3a2e28; }
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] { accent-color: #e2873a; }
.fluentform ::selection { background: #fbe6c9; color: #3a2e28; }
.fluentform .ff-el-form-check-label input:checked + span:before,
.fluentform .ff_item_selected { border-color: #e2873a !important; }
/* Labels, help text and validation messages in the brand palette. */
.fluentform .ff-el-input--label label {
font: 600 14px var(--sd-font-body) !important;
color: #3f3028 !important;
margin-bottom: 6px;
}
.fluentform .ff-el-input--label .ff-el-is-required:after { color: #d2742b; }
.fluentform .ff-el-help-message {
font: 400 12.5px/1.5 var(--sd-font-body);
color: #9b8f83;
}
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .error-text { color: #b3403c !important; }
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select { border-color: #d9908c !important; }
.fluentform .ff-message-success {
background: #fdf8f1;
border: 1.5px solid #e6c9a3;
border-radius: 14px;
padding: 22px 24px;
color: #3a2e28;
font: 400 15px/1.6 var(--sd-font-body);
}
.fluentform .ff-message-success h3 {
font: 700 20px var(--sd-font-head);
color: var(--sd-ink);
margin: 0 0 6px;
}
/* ==========================================================================
CARD HOVER BORDER — one value, matching the icon colour
Every hovering card family points at the same custom property, so the accent
can never drift between sections again.
========================================================================== */
:root { --sd-card-hover: #d2742b; }
.sd-card:hover,
.sd-why__card:hover,
.sd-ind:hover,
.sd-incl__card:hover,
.sd-res__card:hover,
.sd-support__card:hover,
.sd-region:hover,
.sd-value:hover,
.sd-feature-card:hover,
.sd-plancard:hover,
.sd-mv__card:hover { border-color: var(--sd-card-hover) !important; }
/* The five-then-one row must stay a clean grid at every width. */
.sd-why { align-items: stretch; }
/* ==========================================================================
RESOURCE ARTICLES — Maintenance Insights + Best Practices
The card and header plates stand in for banner artwork: an espresso plate
with the amber orb, alternating with the cream band. Built from CSS so a new
article gets the right banner with no upload.
========================================================================== */
/* --- shared bits --------------------------------------------------------- */
.sd-res-rule {
display: block;
width: 30px;
height: 5px;
background: #ea9a45;
border-radius: 999px;
margin-bottom: 18px;
}
.sd-res-eyebrow {
display: inline-flex;
color: var(--sd-accent);
background: #fbe6c9;
font: 700 12px var(--sd-font-body);
letter-spacing: .04em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 18px;
}
.sd-res-tag {
display: inline-flex;
align-self: flex-start;
font: 700 11px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--sd-accent);
border: 1px solid var(--sd-accent);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.sd-res-tag--solid {
color: #2c211b;
background: #f5b44e;
border-color: #f5b44e;
}
/* --- index hero ---------------------------------------------------------- */
.sd-res-hero { padding: 72px 0 56px; }
.sd-res-hero__inner { max-width: 760px; }
.sd-res-hero__title {
font: 700 46px/1.1 var(--sd-font-head);
color: var(--sd-ink);
margin: 0 0 18px;
letter-spacing: -.015em;
text-wrap: pretty;
}
.sd-res-hero__lede {
font: 400 18px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
text-wrap: pretty;
}
/* --- card grid ----------------------------------------------------------- */
.sd-res-listwrap { padding: 64px 0 80px; }
.sd-res-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
align-items: stretch;
}
.sd-res-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
border: 2px solid transparent;
text-decoration: none;
height: 100%;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-res-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: var(--sd-accent);
}
.sd-res-card__body {
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
flex: 1;
gap: 12px;
}
.sd-res-card__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sd-res-card__date {
font: 400 12px var(--sd-font-body);
color: #9b8f83;
}
.sd-res-card__title {
font: 700 20px/1.3 var(--sd-font-head);
color: var(--sd-ink);
margin: 0;
text-wrap: pretty;
}
.sd-res-card__dek {
font: 400 15px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
flex: 1;
text-wrap: pretty;
}
.sd-res-card__more {
font: 700 14px var(--sd-font-body);
color: var(--sd-accent);
display: inline-flex;
align-items: center;
gap: 7px;
}
.sd-res-empty {
font: 400 17px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
background: #fff;
border-radius: 16px;
padding: 30px;
margin: 0;
}
/* --- the plate (banner stand-in) ---------------------------------------- */
.sd-res-plate {
position: relative;
overflow: hidden;
min-height: 136px;
padding: 26px 24px 22px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.sd-res-plate--dark { background: var(--sd-ink); }
.sd-res-plate--light { background: #fbe6c9; }
.sd-res-plate__orb {
position: absolute;
top: -70px;
right: -50px;
width: 200px;
height: 200px;
border-radius: 999px;
background: #ea9a45;
filter: blur(70px);
opacity: .34;
}
.sd-res-plate--light .sd-res-plate__orb { display: none; }
.sd-res-plate__weave {
position: absolute;
inset: 0;
background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px);
}
.sd-res-plate--light .sd-res-plate__weave {
background: repeating-linear-gradient(115deg, rgba(44, 33, 27, .045) 0 1px, transparent 1px 14px);
}
.sd-res-plate__inner { position: relative; }
.sd-res-plate__rule {
display: block;
width: 26px;
height: 4px;
border-radius: 999px;
margin-bottom: 12px;
background: #ea9a45;
}
.sd-res-plate--light .sd-res-plate__rule { background: var(--sd-accent); }
.sd-res-plate__kicker {
display: block;
font: 700 22px/1.2 var(--sd-font-head);
color: #fff;
letter-spacing: -.01em;
}
.sd-res-plate--light .sd-res-plate__kicker { color: var(--sd-ink); }
.sd-res-card__photo img {
display: block;
width: 100%;
height: 168px;
object-fit: cover;
}
/* --- cross-link band ----------------------------------------------------- */
.sd-res-cross { padding: 56px 0; }
.sd-res-cross__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.sd-res-cross__copy { max-width: 620px; }
.sd-res-cross__title {
font: 700 26px/1.25 var(--sd-font-head);
color: var(--sd-ink);
margin: 0 0 8px;
}
.sd-res-cross__body {
font: 400 16px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
}
/* --- article header ------------------------------------------------------ */
.sd-res-head {
position: relative;
overflow: hidden;
background: var(--sd-ink);
padding: 72px 0 64px;
}
.sd-res-head__orb {
position: absolute;
top: -120px;
right: -60px;
width: 420px;
height: 420px;
border-radius: 999px;
background: #ea9a45;
filter: blur(110px);
opacity: .3;
}
.sd-res-head__weave {
position: absolute;
inset: 0;
background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 16px);
}
.sd-res-head__inner { position: relative; max-width: 820px; }
.sd-res-back {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 14px var(--sd-font-body);
color: rgba(255, 255, 255, .7);
text-decoration: none;
margin-bottom: 26px;
}
.sd-res-back:hover { color: #ea9a45; }
.sd-res-head__tags {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.sd-res-head__reader {
font: 600 13px var(--sd-font-body);
color: rgba(255, 255, 255, .62);
}
.sd-res-head__title {
font: 700 42px/1.15 var(--sd-font-head);
color: #fff;
margin: 0 0 20px;
letter-spacing: -.015em;
text-wrap: pretty;
}
.sd-res-head__dek {
font: 400 19px/1.6 var(--sd-font-body);
color: rgba(255, 255, 255, .75);
margin: 0 0 28px;
max-width: 720px;
text-wrap: pretty;
}
.sd-res-head__byline {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font: 400 14px var(--sd-font-body);
color: rgba(255, 255, 255, .62);
}
.sd-res-head__author { font-weight: 700; color: rgba(255, 255, 255, .85); }
/* --- article body ------------------------------------------------------- */
.sd-res-bodywrap { padding: 64px 0 24px; }
.sd-res-body {
max-width: 780px;
margin: 0 auto;
padding: 0 40px;
}
.sd-res-body h2 {
font: 700 26px/1.3 var(--sd-font-head);
color: var(--sd-ink);
margin: 38px 0 14px;
letter-spacing: -.01em;
text-wrap: pretty;
}
.sd-res-body h2:first-child { margin-top: 0; }
.sd-res-body p {
font: 400 17px/1.75 var(--sd-font-body);
color: #4a4038;
margin: 0 0 24px;
text-wrap: pretty;
}
.sd-res-body ul:not([class*="elementor"]) {
margin: 4px 0 26px;
padding: 0 0 0 4px;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.sd-res-body ul:not([class*="elementor"]) > li {
position: relative;
padding-left: 21px;
font: 400 17px/1.7 var(--sd-font-body);
color: #4a4038;
text-wrap: pretty;
}
.sd-res-body ul:not([class*="elementor"]) > li:before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--sd-accent);
}
.sd-res-stat {
background: #fbe6c9;
border-radius: 16px;
padding: 28px 30px;
margin: 28px 0;
display: flex;
align-items: baseline;
gap: 20px;
flex-wrap: wrap;
}
.sd-res-stat__num {
font: 700 52px/1 var(--sd-font-head);
color: var(--sd-ink);
letter-spacing: -.02em;
}
.sd-res-stat__label {
font: 600 16px/1.5 var(--sd-font-body);
color: #7b6f64;
flex: 1;
min-width: 200px;
}
.sd-res-quote,
.sd-res-body blockquote {
margin: 30px 0;
padding: 4px 0 4px 24px;
border-left: 4px solid #ea9a45;
quotes: none;
}
/* The text sits either directly in the blockquote or inside a , depending on
whether the copy was seeded or typed in WordPress. Style both, so an editor
pressing the quote button gets the design without knowing the class. */
.sd-res-quote,
.sd-res-quote p,
.sd-res-body blockquote,
.sd-res-body blockquote p {
font: 600 20px/1.55 var(--sd-font-head);
color: var(--sd-ink);
text-wrap: pretty;
}
.sd-res-quote p,
.sd-res-body blockquote p { margin: 0; }
.sd-res-body blockquote cite { display: block; font: 400 14px var(--sd-font-body); color: var(--sd-text-muted); margin-top: 10px; font-style: normal; }
/* --- share row ---------------------------------------------------------- */
.sd-res-share {
border-top: 1px solid var(--sd-border);
margin-top: 44px;
padding-top: 26px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.sd-res-share__label {
font: 700 13px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .05em;
color: #9b8f83;
}
.sd-res-share__link {
font: 700 14px var(--sd-font-body);
color: var(--sd-text-soft);
border: 1px solid #ddd5cb;
background: #fff;
padding: 9px 18px;
border-radius: 999px;
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.sd-res-share__link:hover { border-color: var(--sd-accent); color: var(--sd-accent); }
/* --- related reading ---------------------------------------------------- */
.sd-res-relwrap { padding: 56px 0 72px; }
.sd-res-relhead {
font: 700 24px var(--sd-font-head);
color: var(--sd-ink);
margin: 0 0 22px;
}
.sd-res-related {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;
}
.sd-res-relcard {
background: #fff;
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
border: 2px solid transparent;
text-decoration: none;
height: 100%;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-res-relcard:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: var(--sd-accent);
}
.sd-res-relcard__title {
font: 700 17px/1.35 var(--sd-font-head);
color: var(--sd-ink);
margin: 2px 0 0;
text-wrap: pretty;
}
.sd-res-relcard__dek {
font: 400 14px/1.6 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
flex: 1;
text-wrap: pretty;
}
/* --- closing CTA -------------------------------------------------------- */
.sd-res-cta { padding: 80px 0; }
.sd-res-cta__inner {
text-align: center;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.sd-res-cta__rule {
display: block;
width: 34px;
height: 6px;
background: #ea9a45;
border-radius: 999px;
margin: 0 auto 22px;
}
.sd-res-cta__title {
font: 700 40px/1.15 var(--sd-font-head);
color: #fff;
margin: 0 auto 18px;
max-width: 820px;
letter-spacing: -.01em;
text-wrap: pretty;
}
.sd-res-cta__body {
font: 400 18px/1.55 var(--sd-font-body);
color: rgba(255, 255, 255, .72);
margin: 0 auto 32px;
max-width: 560px;
}
.sd-res-cta__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
/* --- responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
.sd-res-grid,
.sd-res-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.sd-res-grid,
.sd-res-related { grid-template-columns: 1fr; }
.sd-res-hero { padding: 56px 0 44px; }
.sd-res-hero__title { font-size: 34px; }
.sd-res-head { padding: 56px 0 48px; }
.sd-res-head__title { font-size: 32px; }
.sd-res-head__dek { font-size: 17px; }
.sd-res-body { padding: 0 24px; }
.sd-res-cta__title { font-size: 30px; }
.sd-res-cta__actions .sd-btn { width: 100%; justify-content: center; }
}
/* Resources index: four cards */
.sd-res {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
gap: 24px;
align-items: stretch;
}
@media (max-width: 620px) { .sd-res { grid-template-columns: 1fr; } }
/* Resource article: step diagrams */
.sd-res-steps {
display: flex;
flex-direction: column;
gap: 14px;
margin: 26px 0 30px;
}
.sd-res-step {
display: flex;
gap: 18px;
align-items: flex-start;
background: #fff;
border-radius: 14px;
padding: 20px 22px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
}
.sd-res-step__n {
flex: none;
width: 34px;
height: 34px;
border-radius: 999px;
background: #fbe6c9;
color: var(--sd-accent);
font: 700 16px var(--sd-font-head);
display: flex;
align-items: center;
justify-content: center;
}
.sd-res-step__body h3 {
font: 700 17px/1.3 var(--sd-font-head);
color: #2c211b;
margin: 5px 0 7px;
text-wrap: pretty;
}
.sd-res-step__body p {
font: 400 15px/1.65 var(--sd-font-body);
color: var(--sd-text-soft);
margin: 0;
text-wrap: pretty;
}
/* Resource article: checklists */
.sd-res-body ul.sd-res-check {
margin: 24px 0 28px;
padding: 22px 24px;
list-style: none;
display: flex;
flex-direction: column;
gap: 13px;
background: #fff;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
}
.sd-res-body ul.sd-res-check li {
display: flex;
gap: 13px;
align-items: flex-start;
font: 400 16px/1.6 var(--sd-font-body);
color: #4a4038;
padding: 0;
text-wrap: pretty;
}
.sd-res-body ul.sd-res-check li:before {
content: "\2713";
flex: none;
width: 20px;
height: 20px;
border-radius: 6px;
background: #fbe6c9;
color: var(--sd-accent);
font: 700 12px var(--sd-font-body);
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
position: static;
}
/* ==========================================================================
RESOURCES: REPORTS, STORIES, CASE STUDIES, WEBINARS
========================================================================== */
/* --- Report body blocks -------------------------------------------------- */
.sd-res-key {
background: #2c211b;
border-radius: 16px;
padding: 26px 28px;
margin: 8px 0 30px;
}
.sd-res-key__label {
font: 700 11px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .06em;
color: #f5b44e;
margin-bottom: 14px;
}
.sd-res-body ul.sd-res-key__list,
.sd-res-key ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.sd-res-body .sd-res-key ul li,
.sd-res-key li {
position: relative;
padding-left: 19px;
font: 400 16px/1.6 var(--sd-font-body);
color: rgba(255, 255, 255, .85);
text-wrap: pretty;
margin: 0;
}
.sd-res-body .sd-res-key ul li:before,
.sd-res-key li:before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 999px;
background: #ea9a45;
transform: none;
}
.sd-res-table { overflow-x: auto; margin: 24px 0 30px; }
.sd-res-table table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
}
.sd-res-table th {
text-align: left;
font: 700 12px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .05em;
color: #fff;
background: #3a2e28;
padding: 12px 16px;
}
.sd-res-table td {
font: 400 14px/1.55 var(--sd-font-body);
color: #4a4038;
padding: 12px 16px;
border-top: 1px solid #efe7dc;
vertical-align: top;
text-wrap: pretty;
}
.sd-res-bars {
background: #fff;
border-radius: 14px;
padding: 24px 26px;
margin: 24px 0 30px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
}
.sd-res-bars__label { font: 700 13px var(--sd-font-body); color: #5c5147; margin-bottom: 18px; text-wrap: pretty; }
.sd-res-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sd-res-bar:last-child { margin-bottom: 0; }
.sd-res-bar__name { flex: none; width: 190px; font: 600 13px var(--sd-font-body); color: #5c5147; }
.sd-res-bar__track {
flex: 1;
height: 22px;
background: #f5f1ea;
border-radius: 999px;
overflow: hidden;
display: block;
}
.sd-res-bar__fill {
display: block;
height: 100%;
background: var(--sd-grad);
border-radius: 999px;
}
.sd-res-bar__val { flex: none; width: 88px; text-align: right; font: 700 14px var(--sd-font-head); color: #2c211b; }
@media (max-width: 620px) {
.sd-res-bar { flex-wrap: wrap; }
.sd-res-bar__name { width: 100%; }
.sd-res-bar__val { width: auto; }
}
/* References: numbered list with the inline superscript links pointing in. */
.sd-res-refs { border-top: 2px solid #e6ddd2; margin-top: 36px; padding-top: 22px; }
.sd-res-refs h2 { font: 700 18px var(--sd-font-head); color: #2c211b; margin: 0 0 14px; }
.sd-res-refs ol { margin: 0; padding: 0; list-style: none; counter-reset: sdref; display: flex; flex-direction: column; gap: 10px; }
.sd-res-refs li {
counter-increment: sdref;
position: relative;
padding-left: 30px;
font: 400 14px/1.6 var(--sd-font-body);
color: #5c5147;
text-wrap: pretty;
scroll-margin-top: 120px;
}
.sd-res-refs li:before {
content: counter(sdref);
position: absolute;
left: 0;
top: 0;
font: 700 13px var(--sd-font-body);
color: #d2742b;
}
.sd-res-refs li:target {
background: #fbe6c9;
border-radius: 8px;
padding: 4px 8px 4px 38px;
margin-left: -8px;
}
/* The counter is absolutely positioned, so it has to move with the padding the
highlight adds — otherwise the number sits 4px high and 8px off. */
.sd-res-refs li:target:before {
left: 8px;
top: 4px;
}
.sd-res-body sup a { color: #d2742b; font: 700 12px var(--sd-font-body); text-decoration: none; }
.sd-res-body sup a:hover { color: #b15e22; }
/* Download PDF sits in the byline row of a report. */
.sd-res-pdf {
display: inline-flex;
align-items: center;
gap: 8px;
background: #f5b44e;
color: #2c211b;
border: 0;
font: 700 13px var(--sd-font-body);
padding: 10px 20px;
border-radius: 999px;
cursor: pointer;
transition: background .2s ease;
}
.sd-res-pdf:hover { background: #ea9a45; }
/* --- Customer story (case-study) layout ---------------------------------- */
.sd-case__head {
position: relative;
overflow: hidden;
background: #2c211b;
padding: 64px 0 56px;
}
.sd-case__orb {
position: absolute;
top: -120px;
right: -60px;
width: 420px;
height: 420px;
background: #ea9a45;
filter: blur(110px);
opacity: .3;
border-radius: 999px;
pointer-events: none;
}
.sd-case__weave {
position: absolute;
inset: 0;
background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 16px);
pointer-events: none;
}
.sd-case__head-inner { position: relative; }
.sd-case__head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.sd-case__head-copy { max-width: 760px; }
.sd-case__head-copy .sd-res-tag--solid { margin-bottom: 18px; }
.sd-case__title {
font: 700 44px/1.12 var(--sd-font-head);
color: #fff;
margin: 0 0 14px;
letter-spacing: -.015em;
text-wrap: pretty;
}
.sd-case__facts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sd-case__countries { font: 600 15px var(--sd-font-body); color: rgba(255, 255, 255, .72); }
.sd-case__years {
display: inline-flex;
align-items: center;
gap: 7px;
font: 700 13px var(--sd-font-body);
color: #f5b44e;
border: 1px solid rgba(245, 180, 78, .45);
padding: 6px 14px;
border-radius: 999px;
}
.sd-case__num { text-align: right; flex: none; }
.sd-case__num-big {
display: block;
font: 700 64px/1 var(--sd-font-head);
color: rgba(255, 255, 255, .14);
letter-spacing: -.02em;
}
.sd-case__num-label {
display: block;
font: 600 12px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(255, 255, 255, .45);
margin-top: 4px;
}
/* Stat cards overlap the hero edge. */
.sd-case__stats {
position: relative;
margin-top: -34px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.sd-case__stat {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 26px rgba(44, 33, 27, .28), 0 0 0 1px rgba(250, 247, 242, .35);
display: flex;
flex-direction: column;
border: 2px solid transparent;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-case__stat:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
border-color: var(--sd-accent);
}
.sd-case__stat-head {
padding: 14px 20px 12px;
background: var(--sd-grad);
text-align: center;
flex: none;
font: 700 15px var(--sd-font-body);
color: #fff;
text-transform: uppercase;
letter-spacing: .08em;
}
.sd-case__stat-body { padding: 26px 22px 28px; background: #fff; text-align: center; flex: 1; }
.sd-case__stat-value { margin-bottom: 12px; }
.sd-case__stat-num { font: 700 52px/1 var(--sd-font-head); color: var(--sd-accent); letter-spacing: -.01em; }
.sd-case__stat-suffix { font: 700 26px/1 var(--sd-font-head); color: var(--sd-accent); }
.sd-case__stat-label { font: 400 16px/1.5 var(--sd-font-body); color: #5c5147; text-wrap: pretty; }
.sd-case__bodywrap { padding-top: 52px; padding-bottom: 0; }
.sd-case__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: stretch;
}
.sd-case__col { display: flex; flex-direction: column; gap: 28px; }
.sd-case__panel {
background: #fff;
border-radius: 16px;
padding: 28px 30px;
box-shadow: 0 1px 3px rgba(58, 46, 40, .08);
}
.sd-case__panel--alt { background: #f5f1ea; box-shadow: none; }
/* Stretching is the grid's job; a hard height would overflow the row whenever
this column is the taller of the two. */
.sd-case__panel--tall { height: auto; align-self: stretch; }
.sd-case__panel p { font: 400 16px/1.7 var(--sd-font-body); color: #4a4038; margin: 0; text-wrap: pretty; }
.sd-case__panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sd-case__panel-rule { width: 22px; height: 4px; background: var(--sd-accent); border-radius: 999px; flex: none; }
.sd-case__panel-head h2 {
font: 700 15px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .06em;
color: #2c211b;
margin: 0;
}
.sd-case__ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sd-case__ticks li { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.6 var(--sd-font-body); color: #4a4038; text-wrap: pretty; }
.sd-case__tick {
flex: none;
width: 28px;
height: 28px;
border-radius: 999px;
background: #fbe6c9;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.sd-case__tick svg { stroke: var(--sd-accent); stroke-width: 2.6; }
.sd-case__whywrap { padding-top: 44px; padding-bottom: 56px; }
.sd-case__why {
position: relative;
overflow: hidden;
background: #2c211b;
border-radius: 18px;
padding: 34px 38px;
}
.sd-case__why .sd-case__orb { top: -80px; right: -40px; width: 260px; height: 260px; filter: blur(80px); }
.sd-case__why-inner { position: relative; }
.sd-case__why-label {
font: 700 12px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .06em;
color: #f5b44e;
margin-bottom: 10px;
}
.sd-case__why p {
font: 600 20px/1.55 var(--sd-font-head);
color: #fff;
margin: 0;
max-width: 900px;
text-wrap: pretty;
}
.sd-case__navwrap { padding-top: 0; padding-bottom: 56px; }
.sd-case__nav { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sd-case__navlink {
display: inline-flex;
align-items: center;
gap: 10px;
font: 700 15px var(--sd-font-body);
color: #5c5147;
background: #fff;
border: 1px solid var(--sd-border);
padding: 13px 22px;
border-radius: 999px;
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.sd-case__navlink:hover { border-color: var(--sd-accent); color: var(--sd-accent); }
@media (max-width: 980px) {
.sd-case__stats { grid-template-columns: 1fr; }
.sd-case__cols { grid-template-columns: 1fr; }
.sd-case__title { font-size: 34px; }
}
/* --- Case Studies: the four-year storyline -------------------------------- */
.sd-cs-hero {
position: relative;
overflow: hidden;
background: #2c211b;
padding: 72px 0 76px;
}
.sd-cs-hero__orb {
position: absolute;
top: -120px;
right: -60px;
width: 420px;
height: 420px;
background: #ea9a45;
filter: blur(110px);
opacity: .3;
border-radius: 999px;
pointer-events: none;
}
.sd-cs-hero__weave {
position: absolute;
inset: 0;
background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 16px);
pointer-events: none;
}
.sd-cs-hero .sd-container { position: relative; }
.sd-cs-hero .sd-res-tag--solid { margin-bottom: 18px; }
.sd-cs-hero__title {
font: 700 46px/1.1 var(--sd-font-head);
color: #fff;
margin: 0 0 16px;
letter-spacing: -.015em;
max-width: 840px;
text-wrap: pretty;
}
.sd-cs-hero__lede {
font: 400 18px/1.65 var(--sd-font-body);
color: rgba(255, 255, 255, .72);
margin: 0;
max-width: 700px;
text-wrap: pretty;
}
.sd-cs-intro { padding: 64px 0 12px; }
.sd-cs-prose { max-width: 860px; margin: 0 auto; padding: 0 40px; }
.sd-cs-prose p { font: 400 18px/1.75 var(--sd-font-body); color: #4a4038; margin: 0 0 20px; text-wrap: pretty; }
.sd-cs-prose p:last-child { margin-bottom: 0; }
.sd-cs-chapter { padding: 56px 0 0; }
.sd-cs-chapter__grid {
display: grid;
grid-template-columns: 180px 1fr;
gap: 36px;
align-items: start;
}
.sd-cs-chapter__marker { position: sticky; top: 110px; }
.sd-cs-chapter__year {
font: 700 46px/1 var(--sd-font-head);
white-space: nowrap;
background: linear-gradient(135deg, #ea9a45, #d2742b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -.02em;
}
.sd-cs-chapter__phase {
font: 700 13px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .08em;
color: #9b8f83;
margin-top: 6px;
}
.sd-cs-chapter__body { position: relative; }
.sd-cs-chapter__rail {
position: absolute;
left: -19px;
top: 8px;
bottom: -56px;
width: 2px;
background: linear-gradient(180deg, #ea9a45, rgba(234, 154, 69, .12));
}
.sd-cs-chapter__title {
font: 700 30px/1.2 var(--sd-font-head);
color: #2c211b;
margin: 0 0 14px;
letter-spacing: -.01em;
max-width: 720px;
text-wrap: pretty;
}
.sd-cs-chapter__lede {
font: 400 17px/1.75 var(--sd-font-body);
color: #4a4038;
margin: 0 0 26px;
max-width: 760px;
text-wrap: pretty;
}
.sd-cs-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
/* Built as the home page proof cards are: an espresso top edge, an amber band
carrying the figure, then the white body. The top edge is espresso rather
than orange, so it reads as structure instead of an accent rule. */
.sd-cs-stat {
flex: 1;
min-width: 200px;
background: #fff;
border-radius: 16px;
overflow: hidden;
padding: 0;
box-shadow: 0 4px 12px rgba(58, 46, 40, .1);
border-top: 3px solid var(--sd-accent);
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease;
}
.sd-cs-stat:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 28px rgba(210, 116, 43, .28);
}
.sd-cs-stat__value {
padding: 14px 20px 10px;
background: #fbe6c9;
flex: none;
}
.sd-cs-stat__num { font: 700 44px var(--sd-font-head); color: var(--sd-accent); }
.sd-cs-stat__suffix { font: 700 24px var(--sd-font-head); color: var(--sd-accent); }
.sd-cs-stat__label {
font: 400 14px/1.55 var(--sd-font-body);
color: #5c5147;
padding: 16px 20px 20px;
flex: 1;
text-wrap: pretty;
}
.sd-cs-how { background: #f5f1ea; border-radius: 16px; padding: 22px 26px; max-width: 760px; }
.sd-cs-how__label {
font: 700 12px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .06em;
color: #7b6f64;
margin-bottom: 8px;
}
.sd-cs-how p { font: 400 15px/1.65 var(--sd-font-body); color: #4a4038; margin: 0; text-wrap: pretty; }
.sd-cs-pattern { padding: 72px 0 80px; }
.sd-cs-pattern__card {
position: relative;
overflow: hidden;
background: #fbe6c9;
border-radius: 18px;
padding: 40px 44px;
border: 1px solid rgba(210, 116, 43, .25);
}
.sd-cs-pattern__orb {
position: absolute;
top: -80px;
right: -40px;
width: 300px;
height: 300px;
background: #ea9a45;
filter: blur(90px);
opacity: .25;
border-radius: 999px;
pointer-events: none;
}
.sd-cs-pattern__inner { position: relative; max-width: 860px; }
.sd-cs-pattern__label {
font: 700 12px var(--sd-font-body);
text-transform: uppercase;
letter-spacing: .06em;
color: #b15e22;
margin-bottom: 12px;
}
.sd-cs-pattern__lead { font: 600 22px/1.55 var(--sd-font-head); color: #2c211b; margin: 0 0 14px; text-wrap: pretty; }
.sd-cs-pattern__body { font: 400 16px/1.7 var(--sd-font-body); color: #5c4a3a; margin: 0; text-wrap: pretty; }
@media (max-width: 980px) {
.sd-cs-hero__title { font-size: 34px; }
.sd-cs-chapter__grid { grid-template-columns: 1fr; gap: 18px; }
.sd-cs-chapter__marker { position: static; display: flex; align-items: baseline; gap: 14px; }
.sd-cs-chapter__rail { display: none; }
.sd-cs-chapter__phase { margin-top: 0; }
}
@media (max-width: 640px) {
.sd-cs-hero__title { font-size: 29px; }
.sd-cs-chapter__year { font-size: 38px; }
.sd-cs-prose { padding: 0 22px; }
}
/* --- Webinars empty state ------------------------------------------------- */
.sd-web-empty { padding-top: 72px; padding-bottom: 80px; }
.sd-web-empty__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.sd-web-empty__icon {
width: 72px;
height: 72px;
border-radius: 999px;
background: #fbe6c9;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.sd-web-empty__icon svg { stroke: var(--sd-accent); }
.sd-web-empty__title { font: 700 28px/1.25 var(--sd-font-head); color: #2c211b; margin: 0 0 12px; }
.sd-web-empty__body { font: 400 17px/1.7 var(--sd-font-body); color: #5c5147; margin: 0 0 28px; text-wrap: pretty; }
.sd-web-empty__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* --- Print: reports export as clean documents ---------------------------- */
@media print {
.no-print,
.sd-header,
.sd-footer,
.sd-backtotop,
.sd-cta-band { display: none !important; }
.sd-res-head,
.sd-case__head,
.sd-cs-hero { background: #fff !important; padding: 24px 0 !important; }
.sd-res-head *,
.sd-case__head *,
.sd-cs-hero * { color: #2c211b !important; }
.sd-res-head__orb,
.sd-res-head__weave,
.sd-case__orb,
.sd-case__weave,
.sd-cs-hero__orb,
.sd-cs-hero__weave { display: none !important; }
.sd-res-key { background: #f5f1ea !important; }
.sd-res-key li,
.sd-res-key__label { color: #2c211b !important; }
body { background: #fff; }
/* Each article block is its own section, so the printer is free to break
between them — but never inside a figure, where a split table or half a
chart is worse than a short page. */
.sd-res-key,
.sd-res-table,
.sd-res-bars,
.sd-res-stat,
.sd-res-quote,
.sd-res-step,
.sd-res-bar { break-inside: avoid; page-break-inside: avoid; }
/* A heading belongs with the text it introduces. */
.sd-res-body h2,
.sd-res-body h3 { break-after: avoid; page-break-after: avoid; }
/* A long table repeats its headings on each page. */
.sd-res-table thead { display: table-header-group; }
.sd-res-table tr { break-inside: avoid; page-break-inside: avoid; }
/* References read as a block, and their target highlight is screen-only. */
.sd-res-refs { break-before: auto; }
.sd-res-refs li:target { background: none !important; padding-left: 30px !important; margin-left: 0 !important; }
/* Sections must not introduce print padding of their own. */
.sd-res-block,
.sd-res-block > .elementor-container { padding: 0 !important; margin: 0 !important; }
}
/* --- Privacy policy: the site container, not Elementor's boxed one -------- */
/* The sections are full width so Elementor adds no container of its own; this
restores the same 1280px measure every other page uses. */
.sd-sec-legal > .elementor-container,
.sd-sec-legal > .e-con-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
.sd-sec-legal .elementor-widget-text-editor { max-width: 900px; }
.sd-sec-legal .elementor-heading-title { text-wrap: pretty; }
@media (max-width: 700px) {
.sd-sec-legal > .elementor-container,
.sd-sec-legal > .e-con-inner { padding: 0 22px; }
}
/* --- Mobile menu: icon and label on one line ----------------------------- */
/* These links carry a leading icon, and display:block put it on its own line. */
.sd-mobile-sub a,
.sd-mobile-sub__link {
display: flex;
align-items: center;
gap: 10px;
}
.sd-mobile-sub__link svg,
.sd-mobile-sub a svg {
flex: none;
color: var(--sd-accent);
}
/* The label must not wrap under its own icon on a narrow phone. */
.sd-mobile-sub__link span,
.sd-mobile-sub a span { flex: 1; min-width: 0; }
.sd-mobile-link {
display: flex;
align-items: center;
gap: 10px;
}
/* --- Help tooltip icon in brand brown, not the plugin's blue ------------- */
/* Fluent Forms renders a field's help message either as inline text or as this
tooltip trigger next to the label. The trigger ships blue; these cover the
markup variants across plugin versions (an inline SVG, a font glyph, or a
plain anchor) so the order form's Selected plan icon matches the palette. */
.fluentform .ff-el-tooltip,
.fluentform .ff_tooltip_icon,
.fluentform .ff-el-input--label .ff-el-tooltip,
.sd-ff .ff-el-tooltip,
.sd-ff .ff_tooltip_icon {
color: var(--sd-accent) !important;
fill: var(--sd-accent) !important;
border-color: var(--sd-accent) !important;
}
.fluentform .ff-el-tooltip svg,
.fluentform .ff_tooltip_icon svg,
.sd-ff .ff-el-tooltip svg,
.sd-ff .ff_tooltip_icon svg {
color: var(--sd-accent) !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.fluentform .ff-el-tooltip svg path,
.fluentform .ff-el-tooltip svg circle,
.sd-ff .ff-el-tooltip svg path,
.sd-ff .ff-el-tooltip svg circle { fill: currentColor; }
.fluentform .ff-el-tooltip:hover,
.fluentform .ff_tooltip_icon:hover,
.sd-ff .ff-el-tooltip:hover { color: var(--sd-accent-deep) !important; }
/* The bubble the trigger opens is espresso, matching every other tooltip. */
.fluentform .ff-el-tooltip-container .ff-el-tooltip-content,
.fluentform .ff_tooltip_container,
.fluentform .tippy-box {
background: var(--sd-ink) !important;
color: #fff !important;
font: 400 12.5px/1.5 var(--sd-font-body) !important;
border-radius: 8px !important;
}
.fluentform .tippy-arrow { color: var(--sd-ink) !important; }
/* ==========================================================================
RESOURCES PAGES AS ELEMENTOR SECTIONS
The PHP templates wrapped each band's content in .sd-container. On an
Elementor page the section is the band and the widget emits only the inner
markup, so the container measure is restored here instead.
========================================================================== */
.sd-res-hero > .elementor-container,
.sd-res-hero > .e-con-inner,
.sd-res-listwrap > .elementor-container,
.sd-res-listwrap > .e-con-inner,
.sd-res-cross > .elementor-container,
.sd-res-cross > .e-con-inner,
.sd-cs-hero > .elementor-container,
.sd-cs-hero > .e-con-inner,
.sd-cs-intro > .elementor-container,
.sd-cs-intro > .e-con-inner,
.sd-cs-chapters > .elementor-container,
.sd-cs-chapters > .e-con-inner,
.sd-cs-pattern > .elementor-container,
.sd-cs-pattern > .e-con-inner,
.sd-web-empty > .elementor-container,
.sd-web-empty > .e-con-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
position: relative;
}
/* The prose block carries its own measure, so it must not be padded twice. */
.sd-cs-intro .sd-cs-prose { padding: 0; }
/* Chapters are one widget now, so the per-chapter section padding moves onto
the chapter itself. The first needs no top gap — the section supplies it. */
/* One section holds every chapter, so the per-chapter top padding becomes the
gap BETWEEN chapters and the section supplies the gap above the first. */
.sd-cs-chapters .sd-cs-chapter:first-child { padding-top: 0; }
/* Orb and weave sit inside the widget rather than beside the container, so the
wrapper becomes the positioning context. Both are decorative and blurred, so
the few pixels of offset this introduces are invisible. */
.sd-cs-hero__body { position: relative; }
.sd-cs-hero__inner { position: relative; }
/* Optional fixed column counts on the card grid. */
.sd-res-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sd-res-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
.sd-res-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.sd-res-grid--2,
.sd-res-grid--3 { grid-template-columns: 1fr; }
.sd-res-hero > .elementor-container,
.sd-res-hero > .e-con-inner,
.sd-res-listwrap > .elementor-container,
.sd-res-listwrap > .e-con-inner,
.sd-res-cross > .elementor-container,
.sd-res-cross > .e-con-inner,
.sd-cs-hero > .elementor-container,
.sd-cs-hero > .e-con-inner,
.sd-cs-intro > .elementor-container,
.sd-cs-intro > .e-con-inner,
.sd-cs-chapters > .elementor-container,
.sd-cs-chapters > .e-con-inner,
.sd-cs-pattern > .elementor-container,
.sd-cs-pattern > .e-con-inner,
.sd-web-empty > .elementor-container,
.sd-web-empty > .e-con-inner { padding: 0 22px; }
}
/* The band padding lives on the Elementor section so it is visible and
adjustable in the editor. These keep the bands correct on a page that has not
been re-imported yet, where the section still has no padding of its own. */
.sd-res-hero.elementor-section:not([style*="padding"]) { padding: 72px 0 56px; }
.sd-res-listwrap.elementor-section:not([style*="padding"]) { padding: 64px 0 80px; }
.sd-res-cross.elementor-section:not([style*="padding"]) { padding: 56px 0; }
.sd-cs-intro.elementor-section:not([style*="padding"]) { padding: 64px 0 12px; }
.sd-cs-pattern.elementor-section:not([style*="padding"]) { padding: 72px 0 80px; }
/* ==========================================================================
ARTICLES BUILT IN ELEMENTOR
The article template still supplies the header plate, share row, related
reading and CTA; only the body comes from the builder. Elementor wraps each
widget in its own section and container, which would introduce a second
measure inside the article's own column — these rules flatten that.
========================================================================== */
body:not(.elementor-editor-active) .sd-res-body .elementor,
body:not(.elementor-editor-active) .sd-res-body .elementor-section,
body:not(.elementor-editor-active) .sd-res-body .elementor-container,
body:not(.elementor-editor-active) .sd-res-body .e-con,
body:not(.elementor-editor-active) .sd-res-body .e-con-inner,
body:not(.elementor-editor-active) .sd-res-body .elementor-column,
body:not(.elementor-editor-active) .sd-res-body .elementor-widget-wrap {
max-width: none;
width: auto;
padding: 0;
margin: 0;
}
/* Vertical rhythm comes from the blocks themselves, as it does in an imported
article, so Elementor's own widget spacing is removed on the front end. */
body:not(.elementor-editor-active) .sd-res-body .elementor-widget:not(:last-child) { margin-bottom: 0; }
body:not(.elementor-editor-active) .sd-res-body .elementor-element { --widgets-spacing: 0px 0px; }
/* Each article block is its own Elementor section, carrying .sd-res-block. The
sections keep Elementor's own padding so the builder has room for its
handles; on the published page that padding is removed here instead, so the
blocks read as one continuous prose column. The selector is deliberately
specific enough to outrank Elementor's kit CSS, which loads later. */
body:not(.elementor-editor-active) .sd-res-body .elementor-section.sd-res-block,
body:not(.elementor-editor-active) .sd-res-body section.sd-res-block,
body:not(.elementor-editor-active) .sd-res-body .sd-res-block > .elementor-container {
padding: 0;
margin: 0;
min-height: 0;
}
/* Everything the builder needs lives in assets/sd-elementor-editor.css, which
is loaded only inside the editor preview. Mixing the two in one file is what
produced handles drawn on top of the words. */
/* A block should behave the same whether it was typed in the builder or came
from the seed content, so the first and last lose their outer margin. */
.sd-res-body .elementor > .elementor-element:first-child > * > * > * > :first-child { margin-top: 0; }
/* Footnote markers, wherever they are generated. */
.sd-res-body sup a {
color: var(--sd-accent);
font: 700 12px var(--sd-font-body);
text-decoration: none;
}
.sd-res-body sup a:hover { color: var(--sd-accent-deep); }
/* ==========================================================================
CUSTOMER STORIES BUILT IN ELEMENTOR
In the meta-driven layout these classes sat on a .sd-container, so each one
carried BOTH the page measure and its own grid. On a converted story the
class is on the Elementor section instead, so the measure and the grid move
onto the section's container.
========================================================================== */
.sd-case--built .sd-case__head > .elementor-container,
.sd-case--built .sd-case__head > .e-con-inner,
.sd-case--built .sd-case__whywrap > .elementor-container,
.sd-case--built .sd-case__whywrap > .e-con-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
position: relative;
}
/* The stat row overlaps the header's lower edge, so the lift belongs to the
section and the three-column grid to the container inside it. */
.sd-case--built .sd-case__stats {
position: relative;
z-index: 2;
margin-top: -34px;
padding: 0;
/* The meta-driven layout put this class on a .sd-container, so the class
itself carries "display:grid; 3 columns". On a converted story the class is
on the SECTION, whose only child is the container — which then sat in the
first of three columns. The grid moves to the container below. */
display: block;
grid-template-columns: none;
gap: 0;
}
.sd-case--built .sd-case__stats > .elementor-container,
.sd-case--built .sd-case__stats > .e-con-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
/* Elementor wraps a widget's output, so the cards are one level deeper than
they were; the wrapper is flattened rather than restyled. */
.sd-case--built .sd-case__stats .elementor-column,
.sd-case--built .sd-case__stats .elementor-widget-wrap,
.sd-case--built .sd-case__stats .elementor-widget,
.sd-case--built .sd-case__stats .elementor-widget-container {
display: contents;
}
/* The two panel columns. */
.sd-case--built .sd-case__bodywrap,
.sd-case--built .sd-case__whywrap,
.sd-case--built .sd-case__head {
display: block;
grid-template-columns: none;
}
.sd-case--built .sd-case__bodywrap > .elementor-container,
.sd-case--built .sd-case__bodywrap > .e-con-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: stretch;
}
.sd-case--built .sd-case__bodywrap .elementor-column { width: auto; max-width: none; }
.sd-case--built .sd-case__col > .elementor-widget-wrap,
.sd-case--built .sd-case__col > .elementor-element-populated {
display: flex;
flex-direction: column;
gap: 28px;
height: 100%;
padding: 0;
}
/* Only the panel marked full height fills its column. Applying this to every
panel made the first card claim the whole column and hid the one below it. */
.sd-case--built .sd-case__col .elementor-widget-sd-story-panel { margin: 0; }
.sd-case--built .sd-case__col .elementor-widget-sd-story-panel:only-child,
.sd-case--built .sd-case__col .elementor-widget-sd-story-panel:only-child > .elementor-widget-container,
.sd-case--built .sd-case__col .elementor-widget-sd-story-panel:only-child .sd-case__panel--tall { height: 100%; }
/* The header and closing note are single widgets filling their band. */
.sd-case--built .sd-case__head .elementor-widget-wrap,
.sd-case--built .sd-case__whywrap .elementor-widget-wrap { padding: 0; }
.sd-case--built .elementor-widget:not(:last-child) { margin-bottom: 0; }
@media (max-width: 900px) {
.sd-case--built .sd-case__stats > .elementor-container,
.sd-case--built .sd-case__stats > .e-con-inner { grid-template-columns: 1fr; }
.sd-case--built .sd-case__bodywrap > .elementor-container,
.sd-case--built .sd-case__bodywrap > .e-con-inner { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.sd-case--built .sd-case__head > .elementor-container,
.sd-case--built .sd-case__head > .e-con-inner,
.sd-case--built .sd-case__stats > .elementor-container,
.sd-case--built .sd-case__stats > .e-con-inner,
.sd-case--built .sd-case__bodywrap > .elementor-container,
.sd-case--built .sd-case__bodywrap > .e-con-inner,
.sd-case--built .sd-case__whywrap > .elementor-container,
.sd-case--built .sd-case__whywrap > .e-con-inner { padding: 0 22px; }
}
/* --- Native Elementor text widgets inside an article --------------------- */
/* The body's typography is set on the elements themselves, so a heading or text
widget inherits it. These only remove Elementor's own wrappers and defaults,
which would otherwise add a second set of margins. */
.sd-res-body .elementor-widget-heading,
.sd-res-body .elementor-widget-text-editor,
.sd-res-body .elementor-widget-sd-article-heading,
.sd-res-body .elementor-widget-sd-article-prose { margin: 0; }
.sd-res-body .elementor-widget-heading .elementor-heading-title {
font: 700 26px/1.3 var(--sd-font-head);
color: var(--sd-ink);
margin: 38px 0 14px;
letter-spacing: -.01em;
text-wrap: pretty;
}
.sd-res-body .elementor-widget-heading:first-child .elementor-heading-title { margin-top: 0; }
.sd-res-body .elementor-widget-heading h3.elementor-heading-title {
font: 700 19px/1.35 var(--sd-font-head);
margin: 26px 0 10px;
}
.sd-res-body .elementor-widget-text-editor { color: inherit; font: inherit; }
.sd-res-body .elementor-widget-text-editor p:last-child { margin-bottom: 24px; }
/* Lists inside Elementor's text editor are already covered by the article's own
".sd-res-body ul" rules, so a typed list and a seeded one are identical. Only
Elementor's own list reset needs undoing. */
.sd-res-body .elementor-widget-text-editor ul { list-style: none; }
.sd-res-body .elementor-widget-text-editor ol { padding-left: 20px; }