/**
 * Page-specific styles: Industry Recognition & Reputation (/industry-recognition-reputation/).
 *
 * Ported 1:1 from the production Betheme/custom page design (scoped there to
 * `#dmx-val`), re-scoped to the `.dmax-recognition` root class that sits on the
 * outer full-bleed kadence/rowlayout. Section vertical spacing lives in
 * rowlayout padding attrs (desktop/tablet/mobile); everything visual lives here.
 *
 * Dropped from production (handled by Kadence instead):
 * - `html:has(#dmx-val){overflow-x:clip}` and the 100vw full-bleed margin hacks
 *   (rowlayout is already full-bleed under `_kad_post_layout: fullwidth`).
 * - `.dmx-wrap` max-width/side padding (rowlayout maxWidth + padding attrs).
 * - `.dmx-btn` base styles (buttons are kadence/singlebtn blocks; only pill
 *   geometry is mirrored below under `.dmx-btn-pill` scope helpers).
 */


.dmax-recognition{
--dmx-black:#000000;
--dmx-mid:#040C14;
--dmx-navy:#0E2133;
--dmx-surface:#0A1927;
--dmx-white:#FFFFFF;
--dmx-muted:#A9BCCC;
--dmx-muted2:#7C93A6;
--dmx-cyan:#64BAE1;
--dmx-blue:#29528D;
--dmx-blue-h:#33629F;
--dmx-violet:#272A63;
--dmx-line:rgba(255,255,255,.08);
--dmx-line-c:rgba(100,186,225,.16);
--dmx-pill:999px;
color:var(--dmx-white);
font-family:'Lato',system-ui,'Segoe UI',Roboto,sans-serif;
font-size:18px;
/* Production (Betheme) body text renders at 500 — inherited there, explicit here. */
font-weight:500;
line-height:1.62;
-webkit-font-smoothing:antialiased;
}
.editor-styles-wrapper .dmax-recognition{
color:var(--dmx-white);
font-family:'Lato',system-ui,'Segoe UI',Roboto,sans-serif;
font-size:18px;
font-weight:500;
line-height:1.62;
}
.dmax-recognition *,.dmax-recognition *::before,.dmax-recognition *::after{box-sizing:border-box}
/*
 * Strong reset for headings/paragraphs. Kadence theme injects
 * `.single-content h1..h6{margin:1.5em 0 .5em}` and p bottom margins from
 * content.min.css — at this page's font sizes that means e.g. a 138px top
 * margin on the 92px hero H1. The :where() keeps specificity at (0,2,0):
 * above the theme rules, and below every component rule — the two pure
 * two-class paragraph rules in this file are tag-qualified (p.dmx-head-sub,
 * p.dmx-ctap → (0,2,1)) so they win regardless of rule order; all other
 * component rules already carry a third class or tag.
 */
.dmax-recognition .kt-inside-inner-col :where(h1,h2,h3,h4,h5,h6,p){margin:0;padding:0}
.dmax-recognition a{color:inherit;text-decoration:none;border:0;box-shadow:none}
.dmax-recognition a:hover{text-decoration:none}
.dmax-recognition p{font-size:inherit;line-height:inherit}
.dmax-recognition h1,.dmax-recognition h2,.dmax-recognition h3{
font-family:'Lato',sans-serif;font-weight:900;color:var(--dmx-white);
letter-spacing:-.02em;line-height:.99;text-transform:none;
}
.editor-styles-wrapper .dmax-recognition h1,.editor-styles-wrapper .dmax-recognition h2,.editor-styles-wrapper .dmax-recognition h3{
font-family:'Lato',sans-serif;font-weight:900;color:var(--dmx-white);
letter-spacing:-.02em;line-height:.99;text-transform:none;
}
.dmax-recognition #dmx-validation{scroll-margin-top:100px}
/* ---- eyebrow ---- */
.dmax-recognition .dmx-eyebrow{
display:block;font-weight:700;font-size:clamp(17px,1.5vw,22px);color:var(--dmx-cyan);
letter-spacing:0;text-transform:none;margin-bottom:18px;line-height:1.3;
}
/* ---- hero ---- */
.dmax-recognition .dmax-rec-hero h1{font-size:clamp(44px,7vw,92px);max-width:13ch;margin-bottom:34px}
.dmax-recognition .dmx-lead{font-size:clamp(18px,1.5vw,23px);color:var(--dmx-white);max-width:50ch;line-height:24px;font-weight:400}
/* ---- buttons: pill geometry on top of Kadence global button styles ----
 * Rendered anchors carry `.kt-button` (not `.kb-btn`). Kadence prints per-block
 * button CSS inline in <body> at (0,3,0); this rule is (0,3,1), so no
 * !important is needed. */
.dmax-recognition .wp-block-kadence-advancedbtn.dmx-cta-row{margin-top:48px;margin-bottom:0;display:flex;gap:18px;flex-wrap:wrap}
.dmax-recognition .dmx-ctaband .wp-block-kadence-advancedbtn.dmx-cta-row{margin-top:0;margin-bottom:0;justify-content:center}
.dmax-recognition .wp-block-kadence-advancedbtn a.kt-button{
padding:19px 46px;font-size:18px;font-weight:400;
line-height:1.2;border-width:2px;border-radius:var(--dmx-pill);
display:inline-flex;align-items:center;justify-content:center;text-align:center;
transition:background .2s ease,transform .18s ease,border-color .2s ease,color .2s ease;
}
.dmax-recognition .wp-block-kadence-advancedbtn a.kt-button:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){
.dmax-recognition .wp-block-kadence-advancedbtn a.kt-button{transition:none}
.dmax-recognition .wp-block-kadence-advancedbtn a.kt-button:hover{transform:none}
.dmax-recognition .dmx-fcard{transition:none}
.dmax-recognition .dmx-fcard:hover{transform:none}
.dmax-recognition .dmx-mcard{transition:none}
.dmax-recognition .dmx-mcard:hover{transform:none}
}
/* ---- stats ---- */
.dmax-recognition .dmx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:92px}
.dmax-recognition .dmx-stat{background:rgba(255,255,255,.035);border:1px solid var(--dmx-line);border-radius:18px;padding:32px 30px}
.dmax-recognition .dmx-num{font-weight:900;font-size:54px;color:var(--dmx-white);letter-spacing:-.03em;line-height:1}
.dmax-recognition .dmx-num small{font-size:26px;color:var(--dmx-cyan);font-weight:700}
.dmax-recognition .dmx-stat.dmx-accent .dmx-num{color:var(--dmx-cyan)}
.dmax-recognition .dmx-lbl{margin-top:14px;font-size:15px;color:var(--dmx-muted);line-height:1.4}
/* ---- section heads ---- */
.dmax-recognition .dmx-head{max-width:66ch}
.dmax-recognition h2.dmx-head{font-size:clamp(32px,3.9vw,54px);max-width:689px}
/*
 * Production wraps the head block (eyebrow+h2+sub) in a .dmx-head div whose
 * 66ch resolves at the 18px root font ≈ 689px. On staging the 66ch sits on
 * each element (no wrapper), resolving at the sub's own 19px (≈727px) and at
 * the h2's 54px (inactive). Explicit px restores production's exact wrap.
 * line-heights: production's Betheme forces p{line-height:24px} everywhere —
 * all p rules below render 24px there regardless of font-size.
 */
.dmax-recognition p.dmx-head-sub{margin-top:18px;margin-bottom:54px;max-width:689px;color:var(--dmx-muted);font-size:19px;line-height:24px}
/* ---- featured ---- */
.dmax-recognition .dmx-featured{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.dmax-recognition .dmx-fcard{
background:var(--dmx-surface);border:1px solid var(--dmx-line);border-radius:22px;
padding:46px 42px;transition:transform .2s ease,border-color .2s ease;
}
.dmax-recognition .dmx-fcard:hover{transform:translateY(-4px);border-color:rgba(100,186,225,.42)}
.dmax-recognition .dmx-src{font-weight:700;font-size:17px;color:var(--dmx-cyan);line-height:1.3}
.dmax-recognition .dmx-score{font-weight:900;font-size:78px;color:var(--dmx-white);line-height:1;margin:16px 0 8px;letter-spacing:-.035em}
.dmax-recognition .dmx-score.dmx-sm{font-size:46px;line-height:1.08;margin-top:22px}
.dmax-recognition .dmx-score small{font-size:30px;color:var(--dmx-muted2);font-weight:700}
.dmax-recognition .dmx-fcard h3{font-weight:900;font-size:24px;margin-bottom:14px;letter-spacing:-.01em}
.dmax-recognition .dmx-fcard p{color:var(--dmx-muted);font-size:17px;line-height:24px}
.dmax-recognition .dmx-flink{display:inline-block;margin-top:26px;margin-right:22px;font-weight:700;font-size:16px;color:var(--dmx-cyan)}
.dmax-recognition .dmx-flink:hover{color:var(--dmx-cyan);text-decoration:underline;text-underline-offset:4px}
/* ---- mention grid ---- */
.dmax-recognition .dmx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dmax-recognition .dmx-mcard{
display:flex;flex-direction:column;background:rgba(255,255,255,.03);
border:1px solid var(--dmx-line);border-radius:18px;padding:34px 30px;
transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.dmax-recognition .dmx-mcard:hover{transform:translateY(-3px);border-color:rgba(100,186,225,.4);background:rgba(100,186,225,.05)}
.dmax-recognition .dmx-top{display:flex;justify-content:flex-start;align-items:flex-start;gap:14px;margin-bottom:16px}
.dmax-recognition .dmx-msrc{font-weight:900;font-size:18px;color:var(--dmx-white);letter-spacing:-.01em;line-height:1.25}
.dmax-recognition .dmx-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dmax-recognition .dmx-tag{
font-size:12.5px;font-weight:700;color:var(--dmx-cyan);background:rgba(41,82,141,.4);
border:1px solid rgba(100,186,225,.2);padding:4px 10px;border-radius:7px;line-height:1.4;
}
.dmax-recognition .dmx-mcard p{color:var(--dmx-muted);font-size:16px;line-height:24px;flex:1}
.dmax-recognition .dmx-foot{
display:flex;justify-content:space-between;align-items:center;gap:10px;
margin-top:22px;padding-top:18px;border-top:1px solid var(--dmx-line);
}
.dmax-recognition .dmx-date{font-size:13.5px;color:var(--dmx-muted2)}
.dmax-recognition .dmx-rlink{font-weight:700;font-size:14.5px;color:var(--dmx-cyan);white-space:nowrap}
.dmax-recognition .dmx-rlink:hover{color:var(--dmx-cyan);text-decoration:underline;text-underline-offset:3px}
/* ---- CTA band (class sits on the kadence/column wrapper) ---- */
.dmax-recognition .dmx-ctaband{
padding:90px 48px;text-align:center;border-radius:28px;position:relative;overflow:hidden;
background:linear-gradient(135deg,#050D15,var(--dmx-violet));border:1px solid var(--dmx-line-c);
}
.dmax-recognition .dmx-ctaband::before{
content:"";position:absolute;top:-45%;right:-8%;width:440px;height:440px;
background:radial-gradient(circle,rgba(100,186,225,.22),transparent 65%);
}
.dmax-recognition .dmx-ctaband .kt-inside-inner-col{padding:0}
.dmax-recognition .dmx-ctaband h2{font-size:clamp(32px,4.4vw,58px);position:relative}
.dmax-recognition p.dmx-ctap{margin:20px auto 38px;max-width:52ch;color:var(--dmx-white);position:relative;font-size:20px;line-height:24px}
.dmax-recognition .dmx-ctaband .wp-block-kadence-advancedbtn{position:relative}
/* ---- disclaimer ---- */
.dmax-recognition .dmx-disc{font-size:12.5px;color:var(--dmx-muted2);max-width:92ch;line-height:24px}
.dmax-recognition a:focus-visible,.dmax-recognition .wp-block-kadence-advancedbtn a.kt-button:focus-visible{outline:2px solid var(--dmx-cyan);outline-offset:3px;border-radius:6px}
/* ---- responsive ---- */
/*
 * Production narrows `.dmx-wrap` side padding to 32px at ≤1200px and to 22px
 * only at ≤640px; Kadence rowlayout attrs switch at their own breakpoints
 * (tablet ≤1024, mobile ≤767), leaving the desktop 40px in 1025–1200 and the
 * mobile 22px in 641–767. 641px lower bound keeps Kadence's 22px below 640.
 * (0,2,1) outranks Kadence's inline per-row padding CSS (0,2,0).
 */
@media (min-width:641px) and (max-width:1200px){
.dmax-recognition section .kt-row-column-wrap{padding-left:32px;padding-right:32px}
}
@media (max-width:980px){
.dmax-recognition .dmx-stats{grid-template-columns:repeat(2,1fr)}
.dmax-recognition .dmx-featured{grid-template-columns:1fr}
.dmax-recognition .dmx-grid{grid-template-columns:repeat(2,1fr)}
.dmax-recognition .dmx-fcard{padding:38px 34px}
.dmax-recognition .dmx-mcard{padding:30px 26px}
.dmax-recognition .dmx-ctaband{padding:72px 40px}
}
@media (max-width:640px){
.dmax-recognition{font-size:16px}
.dmax-recognition p.dmx-head-sub{margin-bottom:34px}
.dmax-recognition .dmx-grid{grid-template-columns:1fr;gap:18px}
.dmax-recognition .dmx-stats{grid-template-columns:1fr 1fr;gap:14px;margin-top:56px}
.dmax-recognition .dmx-stat{padding:24px 20px}
.dmax-recognition .dmx-num{font-size:42px}
.dmax-recognition .dmx-fcard{padding:30px 26px}
.dmax-recognition .dmx-mcard{padding:26px 22px}
.dmax-recognition .dmx-score{font-size:60px}
.dmax-recognition .dmx-ctaband{padding:52px 26px}
.dmax-recognition .wp-block-kadence-advancedbtn a.kt-button{padding:16px 34px;font-size:16.5px}
.dmax-recognition .wp-block-kadence-advancedbtn.dmx-cta-row .kt-button{flex:1 1 auto;min-width:220px}
}