@font-face { font-family: 'Eina01-SemiBold'; src: url('../fonts/Eina01-SemiBold.woff2') format('woff2'), url('../fonts/Eina01-SemiBold.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Eina01-Regular'; src: url('../fonts/Eina01-Regular.woff2') format('woff2'), url('../fonts/Eina01-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
:root{ --color-data: #4152F3; --color-data-900: #0d1031; --color-data-indigo: #3D3DC8; --color-data-navy: #1a1f6e; --color-glass: #E0E0E0; --color-glass-500: #00cdc3; --color-glass-900: #002927; --color-glass-100: #f5f9f9; --color-glass-150: #f0faf9; --color-glass-200: #ccf5f3; --color-glass-300: #99ebe7; --color-glass-600: #00a49c; --color-glass-700: #00524e; --color-glass-800: #004d49; --color-glass-bright: #00d8d0; --color-border-soft: #e4e4ef; --color-text-slate: #3b3a4f; --color-dusk: #b585e0; --color-hi-vis: #DFF114; --color-brick: #f24b16; --color-white: #FFFFFF; --color-black: #000000; --color-sidewalk: #F1EEEC; --color-concrete: #8b8886; --color-iron: #3f3c3a; --color-cool-gray-90: #21272a; --color-hero-start: #3D62F5; --color-hero-end: #8388F3; --font-heading: "Eina01-SemiBold", sans-serif; --font-body: "Eina01-Regular", sans-serif; --radius-btn: 3.125rem; --radius-card: 1.25rem; --radius-card-inner: 2rem; --dpv2-header-height: 5rem; }
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: auto !important; }
body { margin: 0; padding-top: var(--dpv2-header-height); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--color-iron); background: var(--color-white); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
/* Paragraph */
p,.body-md {font-size: clamp(0.875rem, 0.831rem + 0.188vw, 1rem); line-height: 1.4;color: var(--color-iron);font-weight: 400;}
.body-lg {font-size: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem); line-height: 1.4;color: var(--color-iron);font-weight: 400;}
/* Create the Default Headers  */
h1, h2, h3, h4, h5, h6 {font-weight: 400;position: relative;color: var(--color-iron);font-family: var(--font-heading);}
/* Specific Header Settings */
h1,.h1 {font-size:clamp( 2.5rem, calc(1.84rem + 2.82vw), 4.375rem );line-height: 1.1;letter-spacing: clamp(-0.032em, -0.013em - 0.014vw, -0.018em);}
h2,.h2 {font-size:clamp(2rem, 1.82rem + 0.76vw, 2.5rem);line-height: 1.15;letter-spacing: -0.02em;}
h3,.h3 {font-size:clamp(1.75rem, 1.66rem + 0.38vw, 2rem);line-height: 1.2;letter-spacing: -0.02em;}
h4,.h4 {font-size:1.25rem;line-height: clamp(1.25, 1.232 + 0.075vw, 1.3);}
h5,.h5 {font-size:1rem;line-height: 1.5;}
h6,.h6 {font-size:0.875rem;line-height: 1.5;}
/* Common CSS */
.container{ width:100%;max-width:75rem;padding-right:0.9375rem;padding-left:0.9375rem;margin-right:auto;margin-left:auto;}
.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-0.9375rem;margin-left:-0.9375rem;}
.col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{position:relative;width:100%;padding-right:0.9375rem;padding-left:0.9375rem;}
.col-12 {max-width: 100%;}
.col-11 {max-width: 91.66666667%;}
.col-10 {max-width: 83.33333333%;}
.col-9 {max-width: 75%;}
.col-8 {max-width: 66.66666667%;}
.col-7 {max-width: 58.33333333%;}
.col-6 {max-width: 50%;}
.col-5 {max-width: 41.66666667%;}
.col-4 {max-width: 33.33333333%;}
.col-3 {max-width: 25%;}
.col-2 {max-width: 16.66666667%;}
.col-1 {max-width: 8.33333333%;}
.d-block{display:block}
.position-relative{ position:relative;}
.hidden,.d-none{ display:none !important;}
.d-flex{display: flex;}
.flex-wrap{flex-wrap: wrap;}
.align-items-center{align-items:center}
.align-items-baseline{align-items:baseline;}
.align-items-flexEnd{align-items:flex-end;}
.justify-content{justify-content: center;}
.justify-between{justify-content: space-between;}
.justify-end{justify-content: flex-end;}
.font-weight-medium {font-weight: 500;}
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.no-listed{list-style: none;}
figure{margin: 0;padding: 0;line-height: 0;}
.w-100{width: 100%;}
img{max-width: 100%;height: auto;}
section{position: relative;padding: 4.5rem 0;}
body .btn{padding: 1.125rem 1.375rem;color: #2E3000;background-color: var(--color-hi-vis);border-radius: var(--radius-btn);align-items: center;gap:0.5rem;font-size: 1rem;font-weight: 400;line-height: 1;text-decoration: none;font-family: var(--font-heading);display: inline-flex;transition: 0.2s ease all;}
body .btn::after { content: ""; width: 0.9375rem; height: 0.75rem; display: inline-block; background: url("data:image/svg+xml,%3Csvg%20width%3D%2715%27%20height%3D%2712%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M14.8623%205.95459C15.0439%205.77295%2015.0439%205.47412%2014.8623%205.29248L9.70605%200.13623C9.52441-0.0454102%209.22559-0.0454102%209.04395%200.13623C8.86231%200.317871%208.86231%200.616699%209.04395%200.79834L13.4004%205.15479H0.46875C0.210938%205.15479%200%205.36572%200%205.62354C0%205.88135%200.210938%206.09229%200.46875%206.09229H13.4004L9.04395%2010.4487C8.86231%2010.6304%208.86231%2010.9292%209.04395%2011.1108C9.22559%2011.2925%209.52441%2011.2925%209.70605%2011.1108L14.8623%205.95459Z%27%20fill%3D%27%232E3000%27/%3E%3C/svg%3E") center/contain no-repeat; }
body .btn:hover{gap:0.75rem;}
body .btn-blue{background-color: var(--color-data);color: var(--color-white);}
body .btn-blue::after { background: url("data:image/svg+xml,%3Csvg%20width%3D%2715%27%20height%3D%2712%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M14.8623%205.95459C15.0439%205.77295%2015.0439%205.47412%2014.8623%205.29248L9.70605%200.13623C9.52441-0.0454102%209.22559-0.0454102%209.04395%200.13623C8.86231%200.317871%208.86231%200.616699%209.04395%200.79834L13.4004%205.15479H0.46875C0.210938%205.15479%200%205.36572%200%205.62354C0%205.88135%200.210938%206.09229%200.46875%206.09229H13.4004L9.04395%2010.4487C8.86231%2010.6304%208.86231%2010.9292%209.04395%2011.1108C9.22559%2011.2925%209.52441%2011.2925%209.70605%2011.1108L14.8623%205.95459Z%27%20fill%3D%27white%27/%3E%3C/svg%3E") center/contain no-repeat; }
body .btn-white{background-color: var(--color-white);color: var(--color-iron);}
body .btn-white::after { background: url("data:image/svg+xml,%3Csvg%20width%3D%2715%27%20height%3D%2712%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M14.8623%205.95459C15.0439%205.77295%2015.0439%205.47412%2014.8623%205.29248L9.70605%200.13623C9.52441-0.0454102%209.22559-0.0454102%209.04395%200.13623C8.86231%200.317871%208.86231%200.616699%209.04395%200.79834L13.4004%205.15479H0.46875C0.210938%205.15479%200%205.36572%200%205.62354C0%205.88135%200.210938%206.09229%200.46875%206.09229H13.4004L9.04395%2010.4487C8.86231%2010.6304%208.86231%2010.9292%209.04395%2011.1108C9.22559%2011.2925%209.52441%2011.2925%209.70605%2011.1108L14.8623%205.95459Z%27%20fill%3D%27%23000000%27/%3E%3C/svg%3E") center/contain no-repeat; }
body .btn-link{color: var(--color-data);text-decoration: none;font-family: var(--font-heading);font-size: 1rem;font-weight: 400;line-height: 1;transition: 0.2s ease all;display: inline-flex;align-items: center;gap:0.5rem;}
body .btn-link span{border-bottom: 0.0625rem solid var(--color-data);padding-bottom: 0.125rem;}
body .btn-link::after { content: ""; display: inline-block; width: 0.9375rem; height: 1rem; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg%20width%3D%2715%27%20height%3D%2716%27%20viewBox%3D%270%200%2015%2016%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M14.8623%205.95459C15.0439%205.77295%2015.0439%205.47412%2014.8623%205.29248L9.70605%200.13623C9.52441-0.0454102%209.22559-0.0454102%209.04395%200.13623C8.86231%200.317871%208.86231%200.616699%209.04395%200.79834L13.4004%205.15479H0.46875C0.210938%205.15479%200%205.36572%200%205.62354C0%205.88135%200.210938%206.09229%200.46875%206.09229H13.4004L9.04395%2010.4487C8.86231%2010.6304%208.86231%2010.9292%209.04395%2011.1108C9.22559%2011.2925%209.52441%2011.2925%209.70605%2011.1108L14.8623%205.95459Z%27%20fill%3D%27%234152F3%27/%3E%3C/svg%3E") center/contain no-repeat; }
body .btn-link:hover{gap:0.75rem;}
body ::selection { background: var(--color-data-indigo); color: var(--color-white); }
/* Header CSS */
.dpv2-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--dpv2-header-height); background-color: transparent; transition: background-color 0.3s ease; }
.dpv2-header--scrolled { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); }
.dpv2-header--light { background-color: var(--color-white); }
.dpv2-header--light.dpv2-header--scrolled { background-color: rgba(255, 255, 255, 0.85); }
.dpv2-header--light.dpv2-header--mega-open,
.dpv2-header--light.dpv2-header--scrolled.dpv2-header--mega-open { background-color: var(--color-white); }

.dpv2-header--light .dpv2-header__logo-img--inverse { display: none; }
.dpv2-header--light .dpv2-header__logo-img--default { display: block; }
.dpv2-header--light .dpv2-header__toggle-bar { background-color: var(--color-iron); }
.dpv2-header--light .dpv2-header__nav-link { color: var(--color-iron); }
.dpv2-header--light .dpv2-header__cta { background-color: var(--color-hi-vis) !important; color: #2E3000 !important; }

/* Single post pages — light header via WordPress body.single class */
body.single .dpv2-header { background-color: var(--color-white); box-shadow: none;}
body.single .dpv2-header.dpv2-header--scrolled { background-color: rgba(255, 255, 255, 0.85); }
body.single .dpv2-header.dpv2-header--mega-open,
body.single .dpv2-header.dpv2-header--scrolled.dpv2-header--mega-open { background-color: var(--color-white); }
body.single .dpv2-header .dpv2-header__logo-img--inverse { display: none; }
body.single .dpv2-header .dpv2-header__logo-img--default { display: block; }
body.single .dpv2-header .dpv2-header__toggle-bar { background-color: var(--color-iron); }
body.single .dpv2-header .dpv2-header__nav-link { color: var(--color-iron); }
body.single .dpv2-header .dpv2-header__cta { background-color: var(--color-hi-vis) !important; color: #2E3000 !important; }
.dpv2-header--menu-open { background-color: var(--color-white); }
.dpv2-header--mega-open { background-color: var(--color-white); }
.dpv2-header__container { position: relative; z-index: 1; height: 100%; max-width: 90rem; }
.dpv2-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1.875rem; }
.dpv2-header__logo { display: flex; align-items: center; flex-shrink: 0; width: 10rem; text-decoration: none; }
.dpv2-header__logo:focus-visible { opacity: 0.85; }
.dpv2-header__logo-img { display: block; width: 8.6875rem; height: 2.25rem; }
.dpv2-header__logo-img--inverse { display: block; }
.dpv2-header__logo-img--default { display: none; }
.dpv2-header--scrolled .dpv2-header__logo-img--inverse,
.dpv2-header--menu-open .dpv2-header__logo-img--inverse,
.dpv2-header--mega-open .dpv2-header__logo-img--inverse { display: none; }
.dpv2-header--scrolled .dpv2-header__logo-img--default,
.dpv2-header--menu-open .dpv2-header__logo-img--default,
.dpv2-header--mega-open .dpv2-header__logo-img--default { display: block; }
.dpv2-header__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 0.375rem; width: 1.5rem; height: 1.125rem; padding: 0; border: 0; border-radius: 0.25rem; background: transparent; cursor: pointer; transition: background-color 0.3s ease; }
.dpv2-header__toggle:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
.dpv2-header__toggle-bar { display: block; width: 1.5rem; height: 0.0625rem; background-color: var(--color-white); border-radius: 0.0625rem; transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; }
.dpv2-header--scrolled .dpv2-header__toggle-bar,
.dpv2-header--menu-open .dpv2-header__toggle-bar { background-color: var(--color-iron); }
.dpv2-header__toggle[aria-expanded="true"] .dpv2-header__toggle-bar:nth-child(1) { transform: translateY(0.21875rem) rotate(45deg); }
.dpv2-header__toggle[aria-expanded="true"] .dpv2-header__toggle-bar:nth-child(2) { transform: translateY(-0.21875rem) rotate(-45deg); }
/* Menu CSS */
.dpv2-header__menu { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 1.875rem; }
.dpv2-header__nav { display: flex; align-items: center; }
.dpv2-header__nav-list { display: flex; align-items: center; gap: 1.875rem; margin: 0; padding: 0; }
.dpv2-header__nav-link { display: inline-flex; align-items: center; min-height: 2.8125rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 400; line-height: 2.8125rem; color: var(--color-white); text-decoration: none; white-space: nowrap; transition: color 0.3s ease, opacity 0.3s ease; }
.dpv2-header--scrolled .dpv2-header__nav-link,
.dpv2-header--menu-open .dpv2-header__nav-link,
.dpv2-header--mega-open .dpv2-header__nav-link { color: var(--color-iron); }
.dpv2-header__nav-link--solutions,
.dpv2-header__nav-item--has-children > .dpv2-header__nav-link { display: inline-flex; }
.dpv2-header__nav-link:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; border-radius: 0.125rem; }
.dpv2-header__actions { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; width: 8.5rem; }
body .dpv2-header__cta { white-space: nowrap; padding: 0.75rem 1.375rem; }
body .dpv2-header__cta:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
.dpv2-header__nav-trigger { display: none; align-items: center; width: 100%; min-height: auto; padding: 0; border: 0; background: transparent; font-family: var(--font-heading); font-size: 2rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-iron); text-align: left; cursor: pointer; }
.dpv2-header__nav-trigger:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; border-radius: 0.125rem; }
.dpv2-header__menu-panel { display: contents; }
.dpv2-header__menu-panel--solutions,
.dpv2-header__menu-panel--submenu { display: none; }
.dpv2-header__solutions-title,
.dpv2-header__submenu-title { margin: 0; padding: 0; border: 0; background: transparent; font-family: var(--font-heading); font-size: 2rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-iron); text-align: left; cursor: pointer; }
.dpv2-header__solutions-title:focus-visible,
.dpv2-header__submenu-title:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; border-radius: 0.125rem; }
.dpv2-header__solutions-sub,
.dpv2-header__submenu-sub { display: flex; flex-direction: column; gap: 1.875rem; width: 100%; }
.dpv2-header__nav--solutions-extra,
.dpv2-header__nav--submenu-extra { width: 100%; }
.dpv2-header__mega-cards > .dpv2-header__mega-menu-item { display: flex; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
.dpv2-header__mega-cards > .dpv2-header__mega-menu-item > .dpv2-header__mega-card { width: 100%; }
/* Mega menu CSS */ 
.dpv2-header__backdrop { position: fixed; top: var(--dpv2-header-height); left: 0; right: 0; bottom: 0; z-index: 999; background-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dpv2-header-mega-duration, 0.32s) cubic-bezier(0.4, 0, 0.6, 1), visibility 0s linear var(--dpv2-header-mega-duration, 0.32s); }
.dpv2-header__backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dpv2-header-mega-duration, 0.32s) cubic-bezier(0.4, 0, 0.6, 1), visibility 0s step-start 0s; }
/* Mega panel: no top border-radius so it sits flush against the header bar */
.dpv2-header__mega {display: block; position: fixed; top: var(--dpv2-header-height); left: 0; right: 0; z-index: 1001; height: 0; overflow: hidden; background-color: var(--color-white); border-radius: 0; visibility: hidden; pointer-events: none; transition: height var(--dpv2-header-mega-duration, 0.32s) cubic-bezier(0.4, 0, 0.6, 1), visibility 0s linear var(--dpv2-header-mega-duration, 0.32s); }
.dpv2-header__mega.is-visible { visibility: visible; pointer-events: auto; transition: height var(--dpv2-header-mega-duration, 0.32s) cubic-bezier(0.4, 0, 0.6, 1), visibility 0s step-start 0s; }
.dpv2-header__mega-container { max-width: 90rem; padding-top: 2rem; padding-bottom: 2.5rem; }
.dpv2-header__mega-cards { display: flex; gap: 2.5rem; width: 100%;padding-left: 0; }
/* Height driven by aspect-ratio (580×200 per Figma's own mega-card frame,
   29:10) instead of a fixed min-height — same reasoning as the homepage
   lottie cards: this way the card's proportions hold at whatever actual
   width the two-card flex row resolves to, rather than assuming one
   specific container width up front. */
.dpv2-header__mega-card { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: space-between; aspect-ratio: 29 / 10; padding: 1.25rem; overflow: hidden; text-decoration: none; transition: transform 0.3s ease; }
.dpv2-header__mega-card--platform { background-color: var(--color-glass-500); border-radius: 0.75rem; }
/* border-radius set to 0.75rem/12px per the Solutions-dropdown-cards ticket
   (Figma node 6761-1454) — distinct from the outer dropdown container, which
   is 1rem/16px (see .dpv2-header__mega above). */
.dpv2-header__mega-card--dataset { background-color: var(--color-data); border-radius: 0.75rem; }
/* Lottie card — canvas-based; aspect-ratio drives height, line-height:0 removes gap */
/* Matches .dpv2-approach-cards__card-hero--lottie's own pattern: the canvas
   is a real sibling DOM element (not a ::before), pulled out of flow and
   positioned behind the title/desc text via position:absolute + a lower
   stacking order, rather than the card showing only a full-bleed canvas
   with no text at all. Text stays on top via the existing z-index:1 on
   .dpv2-header__mega-card-title/-desc further down this file. */
.dpv2-header__mega-card--lottie { position: relative; overflow: hidden; }
.dpv2-header__mega-card-lottie {
    position: absolute;
    left: 30%;
    right: 0;
    top: 0;
    bottom: auto;
    display: block;
    pointer-events: none;
    width: 91%;
}
.dpv2-header__mega-cards > .dpv2-header__mega-menu-item:nth-child(2) .dpv2-header__mega-card-lottie {
    top: -33px;
}
.dpv2-header__mega-card-title { position: relative; z-index: 1; margin: 0; font-family: var(--font-heading); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.dpv2-header__mega-card--platform .dpv2-header__mega-card-title { font-size: 2rem; color: var(--color-glass-900); }
.dpv2-header__mega-card--dataset .dpv2-header__mega-card-title { font-size: 2rem; color: var(--color-white); }
.dpv2-header__mega-card-desc { position: relative; z-index: 1; margin: 0; max-width: 11.25rem; font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.4; }
.dpv2-header__mega-card--platform .dpv2-header__mega-card-desc { color: var(--color-glass-900); }
.dpv2-header__mega-card--dataset .dpv2-header__mega-card-desc { color: var(--color-white); }
.dpv2-header__mega-card-graphic--platform { position: absolute; right: -0.625rem; bottom: 1.25rem; width: 17.3125rem; height: auto; pointer-events: none; }
.dpv2-header__mega-card-graphic--platform img { display: block; width: 100%; height: auto; }
.dpv2-header__mega-tags { position: absolute; right: -4.8125rem; bottom: 0.625rem; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; pointer-events: none; }
.dpv2-header__mega-tags-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }
.dpv2-header__mega-tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 0.75rem 0.5625rem; border: 0.0625rem solid var(--color-white); border-radius: 0.375rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.02; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-white); white-space: nowrap; }
body.dpv2-header-mega-open { overflow: hidden; }
/* Footer CSS */
.dpv2-footer { background-color: var(--color-data-900); color: var(--color-white); padding: 0;}
.dpv2-footer__container { display: flex; flex-direction: column; max-width: 90rem; padding-top: 3.75rem; padding-bottom: 1.25rem; }
.dpv2-footer__bottom-container{display: flex; flex-direction: column; max-width: 90rem;}
.dpv2-footer__main { display: flex; align-items: flex-start; justify-content: space-between; gap: 2.5rem; width: 100%; }
.dpv2-footer__logo { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.375rem; height: 2.875rem; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity 0.3s ease; }
.dpv2-footer__logo:hover,
.dpv2-footer__logo:focus-visible { opacity: 0.85; }
.dpv2-footer__logo:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.25rem; border-radius: 0.125rem; }
.dpv2-footer__logo-img { display: block; width: 2.375rem; height: 2.875rem; }
.dpv2-footer__links { display: flex; flex: 1; justify-content: flex-end; gap: 2.5rem; max-width: 65.58%; }
.dpv2-footer__col { flex: 1 1 0; min-width: 0; }
.dpv2-footer__col--split { display: flex; flex-direction: column; gap: 2.5rem; }
.dpv2-footer__heading { margin: 0; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 400; line-height: 1.15; color: var(--color-white); }
.dpv2-footer__list { display: flex; flex-direction: column; gap: 0.875rem; margin: 0.875rem 0 0; padding: 0; }
.dpv2-footer__col--split .dpv2-footer__list { margin-top: 0.875rem; }
.dpv2-footer__link { display: inline-block; font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.15; color: var(--color-white); text-decoration: none; transition: opacity 0.3s ease; }
.dpv2-footer__link:hover,
.dpv2-footer__link:focus-visible { opacity: 0.7; }
.dpv2-footer__link:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; border-radius: 0.125rem; }
.dpv2-footer__bottom { margin-top: 6.25rem; padding: 1.25rem 0; border-top: 0.0625rem solid var(--color-data); }
.dpv2-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; margin: 0; padding: 0; }
.dpv2-footer__legal-item { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.15; color: var(--color-data); white-space: nowrap; }
.dpv2-footer__legal-link { color: inherit; text-decoration: none; transition: opacity 0.3s ease; }
.dpv2-footer__legal-link:hover,
.dpv2-footer__legal-link:focus-visible { opacity: 0.7; }
.dpv2-footer__legal-link:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; border-radius: 0.125rem; }
/* Platform animation CSS */
.anim-fade-up { opacity: 0; transform: translateY(2rem); transition: opacity 0.6s ease, transform 0.6s ease; }
.anim-fade-left { opacity: 0; transform: translateX(-1.5rem); transition: opacity 0.6s ease, transform 0.6s ease; }
.anim-fade-right { opacity: 0; transform: translateX(1.5rem); transition: opacity 0.6s ease, transform 0.6s ease; }
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }
.anim-delay-5 { transition-delay: 0.5s; }
.anim-delay-6 { transition-delay: 0.6s; }
.anim-delay-7 { transition-delay: 0.7s; }
.anim-delay-8 { transition-delay: 0.8s; }
.anim-delay-9 { transition-delay: 0.9s; }
.anim-delay-10 { transition-delay: 1s; }
.anim-delay-11 { transition-delay: 1.1s; }
.anim-delay-12 { transition-delay: 1.2s; }
.anim-in { opacity: 1 !important; transform: translate(0, 0) !important; }

/* Edge-to-edge image blades: the background/media wrapper should already be visible
   on scroll-in — only the inner content (text, logo, indicators) should build in. */
.anim-fade-up:has(.dpv2-quote-slider__media),
.anim-fade-left:has(.dpv2-quote-slider__media),
.anim-fade-right:has(.dpv2-quote-slider__media),
.anim-fade-up:has(.dpv2-cta__media),
.anim-fade-left:has(.dpv2-cta__media),
.anim-fade-right:has(.dpv2-cta__media),
.anim-fade-up:has(.dp-cta__bg),
.anim-fade-left:has(.dp-cta__bg),
.anim-fade-right:has(.dp-cta__bg),
.anim-fade-up:has(.ab-cta__bg),
.anim-fade-left:has(.ab-cta__bg),
.anim-fade-right:has(.ab-cta__bg) { opacity: 1 !important; transform: none !important; transition: none !important; }

.dpv2-quote-slider__inner,
.dpv2-cta__inner,
.dp-cta__inner,
.ab-cta__inner { opacity: 0; transform: translateY(2rem); transition: opacity 0.6s ease, transform 0.6s ease; }

.anim-in .dpv2-quote-slider__inner,
.anim-in .dpv2-cta__inner,
.anim-in .dp-cta__inner,
.anim-in .ab-cta__inner { opacity: 1; transform: translate(0, 0); }

/* Footer no longer needs a CSS-level opacity override here — footer.php
   is now directly editable in this project, and the anim-fade-up classes
   that used to cause the "blank then pop in" delay have been removed at
   the markup source instead (see footer.php: the logo button, all four
   column divs, and the bottom legal bar no longer carry that class at
   all). Nothing left for an IntersectionObserver to gate, so there's
   nothing left to neutralize here. */

/* Banner CSS */
.dpv2-hero { position: relative; margin-top: calc(-1 * var(--dpv2-header-height)); padding: 0; overflow: hidden; color: var(--color-white); background: var(--color-hero-start); }
.dpv2-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Must be a square (equal width/height), not sized as a percentage of
     the container's own (possibly very different) width vs. height. On a
     tall, narrow mobile viewport the container is much taller than wide,
     so "200% width / 200% height" produced a rectangle, not a square —
     rotating a non-square shape lets its shorter side swing closer to the
     center at some angles than the container's longer dimension needs,
     revealing the shape's own straight edge as a hard diagonal seam
     instead of staying safely covered. vmax-based sizing keeps both sides
     equal and generously larger than any container's diagonal regardless
     of aspect ratio, so it fully covers the corners at every rotation
     angle on any device. */
  width: 250vmax;
  height: 250vmax;
  transform: translate(-50%, -50%) rotate(0deg);
  background: linear-gradient(102.613deg, var(--color-hero-start) 14.281%, var(--color-hero-end) 78.85%);
  animation: dpv2-hero-gradient-rotate 12s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes dpv2-hero-gradient-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.dpv2-hero h1, .dpv2-hero h4, .dpv2-hero p { margin: 0; color: inherit; }
/* The global h1 rule's letter-spacing (clamp down to -0.032em) is tight
   enough at this hero's large display size that certain letter pairs
   (e.g. "rt", "ry") visually touch/overlap. Loosen it here specifically
   rather than changing the global h1 rule, which may be tuned fine for
   smaller headings elsewhere. */
.dpv2-hero h1 { letter-spacing: -0.01em; }
.dpv2-hero__container { position: relative; z-index: 1; max-width: 90rem; padding-top: calc(var(--dpv2-header-height) + 5rem); padding-bottom: 0; }
.dpv2-hero__layout { display: flex; flex-direction: column; gap: 6.25rem; }
.dpv2-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.875rem; max-width: 50rem; }
.dpv2-hero__copy { display: flex; flex-direction: column; gap: 3.125rem; }
.dpv2-hero__visual { margin: 0; width: 100%; line-height: 0; }
.dpv2-hero__visual-img { display: block; width: 100%; height: auto; aspect-ratio: 3024 / 1964; object-fit: cover; border-radius: 0.75rem; }
/* aspect-ratio added to match the sibling .dpv2-hero__visual-img fallback
   (line above) — without it, the <video> has zero intrinsic size until its
   own metadata loads, so the browser can't reserve its height up front. The
   hero section's whole height then jumps once the video's real dimensions
   are known, which shifts the .dpv2-hero::before decorative gradient shape
   too (its `top:50%` is relative to .dpv2-hero's own height) — that's the
   0.216 CLS score Lighthouse attributes to the ::before pseudo-element.
   Reserving this ratio up front removes the jump entirely. Scoped to
   desktop/tablet only (see the max-width:1024px override below, which
   still correctly keeps aspect-ratio:auto on mobile) — that override exists
   because this same fixed ratio, applied to a narrow/tall mobile viewport,
   cropped caption text baked into the video itself; at desktop widths the
   video's own framing is close enough to this ratio that object-fit:cover
   doesn't introduce the same problem. */
.dpv2-hero__visual-video { display: block; width: 100%; height: auto; aspect-ratio: 3024 / 1964; border-radius: 0.75rem; object-fit: cover; }
.dpv2-hero__visual-video::-webkit-media-controls,
.dpv2-hero__visual-video::-webkit-media-controls-enclosure,
.dpv2-hero__visual-video::-webkit-media-controls-panel { display: none !important; }
.dpv2-hero__trust { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; width: 100%; padding-top: 6.25rem; padding-bottom: 5rem; }
.dpv2-hero__trust-inner { width: 100%; }
.dpv2-hero__logos { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.dpv2-hero__logos.contact-form{margin-left: 0;}
.dpv2-hero__logos-track { display: flex; width: max-content; will-change: transform; animation: dpv2-hero-logos-scroll var(--hero-logos-duration, 40s) linear infinite; }
.dpv2-hero__logos-set { display: flex; align-items: center; flex-shrink: 0; gap: 4.375rem; margin: 0 4.375rem 0 0; padding: 0; height: 6.875rem; }
.dpv2-hero__logo-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: auto; max-width: 12.5rem; overflow: hidden; }
.dpv2-hero__logo-item img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
.dpv2-contact .dpv2-hero__logo-item img {
    filter: brightness(0.545) sepia(0.04);
}
@keyframes dpv2-hero-logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--hero-logos-scroll, 0px))); }
}
/* Ground Truth hero */
.dpv2-hero--gt { margin-top: 0; overflow: visible; color: var(--color-iron); background: var(--color-white); }
.dpv2-hero--gt::before { display: none; }
.dpv2-hero--gt .dpv2-hero__container { padding-top: 6.25rem; padding-bottom: 0; }
.dpv2-hero--gt .dpv2-hero__inner { display: flex; flex-direction: column; }
.dpv2-hero--gt .dpv2-hero__content { display: flex; flex-direction: column; gap: 2.5rem; padding-bottom: 5rem; }
.dpv2-hero--gt .dpv2-hero__title { margin: 0; font-family: var(--font-heading); font-size: 4.375rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-data); }
.dpv2-hero--gt .dpv2-hero__description { margin: 0; font-size: 1.375rem; line-height: 1.4; color: var(--color-iron); }
/* Our approach CSS */
.dpv2-approach { padding: 0; background: var(--color-white); overflow: hidden; }
.dpv2-approach__container { max-width: 90rem; padding-top: 6.25rem; padding-bottom: 0; }
.dpv2-approach__header { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: start; }
.dpv2-approach__header h2 { margin: 0; padding-right: 3.75rem; }
.dpv2-approach__header p { margin: 0; }
.dpv2-approach__body { position: relative; margin-top: 5rem; padding-top: 2.5rem; padding-bottom: 0; border-top: 0.0625rem solid var(--color-data); overflow: hidden; }
.dpv2-approach__stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; text-align: center; }
.dpv2-approach__stat { display: flex; flex-direction: column; align-items: center; }
.dpv2-approach__stat-value { margin: 0; display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 6.875rem; }
.dpv2-approach__stat-number { font-family: var(--font-body); font-size: clamp(5rem, 3.5rem + 4vw, 6.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-data); }
.dpv2-approach__stat-label { margin: 0; color: var(--color-cool-gray-90); line-height: 1.3; }
.dpv2-approach__visual { z-index: 0; margin-top: -7rem; pointer-events: none; text-align: center; }
/* Our approach cards CSS */
.dpv2-approach-cards { padding: 0; background: var(--color-sidewalk); }
.dpv2-approach-cards__container { max-width: 90rem; padding-top: 6.25rem; padding-bottom: 7.5rem; }
.dpv2-approach-cards__header { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: start; margin-bottom: 5rem; }
.dpv2-approach-cards__header h2 { margin: 0; padding-right: 3.75rem; }
.dpv2-approach-cards__header p { margin: 0; }
.dpv2-approach-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.875rem; align-items: start; }
.dpv2-approach-cards__card { display: flex; flex-direction: column; gap: 1.25rem; padding: 0.75rem 0.75rem 1.875rem; border-radius: 1.25rem; background: var(--color-white); overflow: hidden; transition: box-shadow 200ms ease, transform 200ms ease; cursor: pointer; }
.dpv2-approach-cards__card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.10); transform: translateY(-2px); }
.dpv2-approach-cards__card-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 10.625rem; padding: 1.25rem; overflow: hidden; }
/* Corrected to 0.75rem/12px per Figma (Frame 68: 561×170, radius 12px,
   padding 20px) — same value on desktop as mobile now, no more 16px/12px
   split. Both variants match each other and the Figma spec exactly. */
.dpv2-approach-cards__card-hero--platform { border-radius: 0.75rem; background: var(--color-glass-500); color: var(--color-glass-900); }
.dpv2-approach-cards__card-hero--dataset { border-radius: 0.75rem; background: var(--color-data); color: var(--color-white); }
/* Reverted to the original desktop rule — the "unified rule for every
   breakpoint" approach tried here previously ended up conflicting with
   later tablet/mobile-specific work and made the desktop view a mash-up.
   Desktop now goes back to its original height/position/mask values;
   tablet (641–1024px) and mobile (≤640px) get their own dedicated
   overrides further down instead of sharing a single cross-breakpoint
   rule with desktop. */
.dpv2-approach-cards__card-hero--lottie {
    height: 10.625rem;
    border-radius: 0.75rem;
}
/* mask-image (the left-edge fade) removed per explicit request — it was
   dimming/overlaying part of the animation instead of showing it clearly.
   Both the -webkit- and standard versions are gone now, not just one. */
.dpv2-approach-cards__card-lottie {
    position: absolute;
    left: 35%;
    right: 0;
    top: -20px;
    bottom: 0;
    display: block;
    pointer-events: none;
    width: 85%;
}
/* Global Dataset card specifically (2nd card in the grid) needs its own
   crop/position — its Lottie file's own framing doesn't line up with the
   shared positioning above the way the Platform card's does. */
.dpv2-approach-cards__card:nth-child(2) .dpv2-approach-cards__card-lottie {
    top: -55px;
    width: 100%;
    left: 28%;
}
.dpv2-approach-cards__card-hero--dataset .dpv2-approach-cards__card-title,
.dpv2-approach-cards__card-hero--dataset .dpv2-approach-cards__card-desc { color: var(--color-white); }
.dpv2-approach-cards__card-graphic-wrap { position: absolute; right: -0.875rem; top: 1.5rem; width: 17.3125rem; line-height: 0; pointer-events: none; }
.dpv2-approach-cards__card-graphic { display: block; width: 17.3125rem; height: 9.875rem; max-width: none; }
.dpv2-approach-cards__card-title { margin: 0; color: inherit; position: relative; z-index: 1; }
.dpv2-approach-cards__card-desc { margin: 0; max-width: 11.25rem; color: inherit; position: relative; z-index: 1; }
.dpv2-approach-cards__tags { position: absolute; right: -3rem; top: -0.5rem; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 17rem; pointer-events: none; }
.dpv2-approach-cards__tags-row { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0.5rem; }
.dpv2-approach-cards__tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.5625rem 0.5rem 0.375rem; border: 0.0625rem solid var(--color-white); border-radius: 0.3125rem; font-family: var(--font-body); font-size: 0.6875rem; line-height: 1.02; letter-spacing: 0.103125em; text-transform: uppercase; color: var(--color-white); white-space: nowrap; }
.dpv2-approach-cards__features { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; padding: 0 1.25rem; }
.dpv2-approach-cards__feature { display: flex; align-items: center; gap: 0.75rem; min-height: 1.75rem; }
.dpv2-approach-cards__feature-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; }
.dpv2-approach-cards__feature p { margin: 0; }
.dpv2-approach-cards__cta { margin: 1.25rem 1.25rem 0; }
/* Tablet (641-1024px) and mobile (≤640px) treatments for the Platform/
   Dataset lottie cards, per feedback: the canvas was overflowing onto the
   heading at tablet widths specifically because its sizing didn't shrink
   along with the much-narrower hero box there. Both blocks below anchor
   from the right (left: auto) rather than a left percentage, and use
   transform: scale() + object-fit: cover on the canvas itself instead of
   aspect-ratio math, so a mismatch between the box's own ratio and the
   animation's native ratio crops/zooms instead of stretching.

   Selectors for .card-hero/.card-title/.card-desc are scoped to the
   --lottie variant specifically (.card-hero--lottie, or
   .card-hero.card-hero--lottie for the hero box itself) rather than the
   bare shared class — those classes are also used by the other (tags/
   image) card variant, which doesn't have this overflow problem and
   shouldn't be resized along with it. The compounding also matters for
   specificity: the desktop base rules above already use a compound
   selector / descendant scope specifically so they win over breakpoints
   that don't know about them, so a same-scoped override is what's needed
   to win back here in turn. */
@media (max-width: 1024px) and (min-width: 641px) {
  .dpv2-approach-cards__card-hero.dpv2-approach-cards__card-hero--lottie {
    min-height: 13rem;
    height: auto;
    padding: 1.5rem;
    border-radius: 0.75rem;
  }
  .dpv2-approach-cards__card-hero--lottie .dpv2-approach-cards__card-title,
  .dpv2-approach-cards__card-hero--lottie .dpv2-approach-cards__card-desc {
    max-width: 42%;
  }
  .dpv2-approach-cards__card-lottie {
    top: 0;
    right: -10%;
    left: auto;
    width: 65%;
    height: 100%;
    aspect-ratio: unset;
    object-fit: cover;
    transform: scale(1.15);
    transform-origin: right center;
  }
}
@media (max-width: 640px) {
  .dpv2-approach-cards__card-hero {
    position: relative;
    overflow: hidden;
    height: auto; /* the desktop .card-hero--lottie rule sets a fixed height: 10.625rem, not min-height — without resetting it to auto here first, min-height below would be a no-op and the box would stay locked at the desktop size. */
    min-height: 8.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
  }
  .dpv2-approach-cards__card-title {
    position: relative;
    z-index: 2;
    font-size: 1.75rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
  }
  .dpv2-approach-cards__card-desc {
    position: relative;
    z-index: 2;
    max-width: 48%;
    font-size: 0.875rem;
    line-height: 1.35;
  }
  .dpv2-approach-cards__card-lottie {
    position: absolute;
    top: auto;
    right: -130px;
    left: auto;
    width: 80%;
    height: auto;
    aspect-ratio: unset;
    transform: scale(1.4);
    transform-origin: right center;
    pointer-events: none;
    bottom: -60px;
  }
  .dpv2-approach-cards__card:nth-child(2) .dpv2-approach-cards__card-lottie {
    top: auto;
    width: 80%;
    bottom: -50px;
}
}
@media (max-width: 480px) {
    .dpv2-approach-cards__card-lottie {
        position: absolute;
        top: auto;
        right: -90px;
        left: auto;
        width: 80%;
        height: auto;
        aspect-ratio: unset;
        transform: scale(1.4);
        transform-origin: right center;
        pointer-events: none;
        bottom: -20px;
    }
    .dpv2-approach-cards__card:nth-child(2) .dpv2-approach-cards__card-lottie {
        top: auto;
        width: 80%;
        bottom: -38px;
    }
}
/* Testimonial/quote slider CSS */
.dpv2-quote-slider { position: relative; overflow: hidden; background: var(--color-black); padding: 0; --quote-slider-inner-pt: 6.25rem; --quote-slider-inner-pb: 14.125rem; }
/* Two independent, parallel layers instead of one self-contained slide per
   testimonial — see york-v2-home-testimonials.php for the full rationale.
   In short: a per-slide overlay meant two overlays were briefly stacked on
   top of each other mid-crossfade, compounding into a measurably darker
   dip than either slide alone. Splitting photos and text panels into their
   own layers lets a single, constant, non-fading overlay sit between them
   in stacking order — impossible to insert "in between" descendants of a
   single positioned slide element, since establishing a stacking context
   (which .dpv2-quote-slider__slide.is-active did, via position + z-index)
   traps all of that element's descendants at one stacking level as a
   group; a sibling overlay can only go above or below that whole group,
   never in the middle of it. Three parallel top-level groups (media,
   overlay, slide/panel), each a plain sibling of the others, avoids that
   entirely — z-index just compares normally across all three. */
.dpv2-quote-slider__media { position: absolute; left: 0; right: 0; top: calc(-1 * var(--quote-slider-inner-pt)); bottom: calc(-1 * var(--quote-slider-inner-pb)); z-index: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms ease, visibility 0s linear 400ms; }
.dpv2-quote-slider__media.is-active { opacity: 1; visibility: visible; transition: opacity 400ms ease, visibility 0s step-start 0s; }
.dpv2-quote-slider__image { width:100%; height: 100%; object-fit: cover; }
/* Single shared overlay: constant, never fades, sits above every photo
   (z-index 0) and below every text panel (z-index 2). */
.dpv2-quote-slider__overlay { position: absolute; left: 0; right: 0; top: calc(-1 * var(--quote-slider-inner-pt)); bottom: calc(-1 * var(--quote-slider-inner-pb)); z-index: 1; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
.dpv2-quote-slider__inner { position: relative; z-index: 1; padding-top: 6.25rem; padding-bottom: 11.125rem; }
.dpv2-quote-slider__track { position: relative; width: 100%; }
.dpv2-quote-slider__slide { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms ease, visibility 0s linear 400ms; }
.dpv2-quote-slider__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 400ms ease, visibility 0s step-start 0s; }
.dpv2-quote-slider__slide.is-measuring { position: relative; inset: auto; opacity: 0; visibility: hidden; pointer-events: none; }
.dpv2-quote-slider__panel { position: relative; display: flex; justify-content: center; width: 100%; padding-right: 7.5rem; padding-left: 7.5rem; height: 100%;}
.dpv2-quote-slider__content { display: flex; flex-direction: column; justify-content: space-between; gap: 6.875rem; width: 100%; max-width: 56.25rem; padding-left: 2.5rem; border-left: 0.125rem solid var(--color-white); }
/* margin-top: -6px nudges the quote text up to align its visible top edge
   with the top of the border-left accent line — large font-size (2.5rem)
   at line-height: 1.2 leaves extra optical space above the actual glyphs
   (a normal line-height quirk), which was making the text appear to start
   noticeably lower than the line beside it even though both technically
   start at the same container edge. */
.dpv2-quote-slider__quote { margin: -0.375rem 0 0; }
.dpv2-quote-slider__quote p { margin: 0; font-family: var(--font-body); font-size: 2.5rem; font-weight: 400; line-height: 1.2; color: var(--color-white); }
/* Author section: logo stacked above divider line above role text — column
   layout for all viewports. The divider is now a short horizontal accent
   line between logo and role (was a vertical line in the old side-by-side
   layout). */
.dpv2-quote-slider__author { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
/* Height-based sizing: keeps logos at consistent visual weight regardless
   of natural aspect ratio (wide wordmark vs more square logo). */
/* --brand-h !important: this custom property is also set inline per-slide
   (york-v2-home-testimonials.php writes style="--brand-h:...px" whenever
   a slide's logo_height ACF field has a value). An inline style — even
   just a custom property — always beats a normal stylesheet declaration
   regardless of selector specificity, so without !important here, every
   slide with a custom logo_height renders at whatever height that editor
   happened to type in, while slides without one fall back to var()'s
   invalid/unset behavior (effectively auto, sized by the image's own
   intrinsic dimensions instead). Both are why logos were "all over the
   place" — some editor-chosen heights, some raw image sizes, no shared
   baseline. Forcing one value here means every logo now renders at the
   same height regardless of what any per-slide field says, and
   object-fit: contain (below) keeps each logo's own aspect ratio within
   that fixed height so none of them stretch. */
.dpv2-quote-slider__brand { display: flex; align-items: center; flex-shrink: 0; height: var(--brand-h); height: 2.125rem !important; line-height: 0; }
.dpv2-quote-slider__brand img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.dpv2-quote-slider__divider { display: none; }
.dpv2-quote-slider__author-role { margin: 0; font-family: var(--font-body); font-size: 1.25rem; line-height: 1; color: var(--color-white); }
.dpv2-quote-slider__navigation { position: absolute; bottom: 4.125rem; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.6098125rem; padding: 0; border: 0; transform: translateX(-50%); } .dpv2-quote-slider__dot { position: relative; flex-shrink: 0; width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 62.5rem; background: rgba(255, 255, 255, 0.4); cursor: pointer; overflow: hidden; transition: width 300ms ease; }
.dpv2-quote-slider__dot.is-active { width: 3.125rem; height: 0.5rem; border-radius: 62.5rem; }
.dpv2-quote-slider__dot-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--color-white); }
.dpv2-quote-slider__dot:focus-visible { outline: 0.125rem solid var(--color-hi-vis); outline-offset: 0.125rem; }
/* Staggered content animation — quote first, then logo, then role.
   Line (border-left) is always visible as soon as the slide is active
   (no animation on it). Children start at opacity:0 and have animation:none
   by default so they reset cleanly between slides. The is-active selector
   triggers each child's own @keyframes with staggered delays. */
@keyframes qs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Divider line is constant (no animation) — visible immediately when
   slide becomes active, like the border-left line. Only quote, brand,
   and role text get the staggered fade-in. */
.dpv2-quote-slider__quote,
.dpv2-quote-slider__brand,
.dpv2-quote-slider__author-role { opacity: 0; animation: none; }
.dpv2-quote-slider__slide.is-active .dpv2-quote-slider__quote { animation: qs-fade-in 500ms ease forwards; animation-delay: 0ms; }
.dpv2-quote-slider__slide.is-active .dpv2-quote-slider__brand { animation: qs-fade-in 500ms ease forwards; animation-delay: 250ms; }
.dpv2-quote-slider__slide.is-active .dpv2-quote-slider__author-role { animation: qs-fade-in 500ms ease forwards; animation-delay: 500ms; }
/* DP Difference CSS */
.dpv2-difference { padding: 0; background: var(--color-white); }
.dpv2-difference__container { max-width: 90rem; padding-top: 6.25rem; padding-bottom: 7.5rem; }
.dpv2-difference__inner { display: flex; flex-direction: column; gap: 5rem; }
.dpv2-difference__header { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: start; }
.dpv2-difference__title { margin: 0; padding-right: 3.75rem; }
.dpv2-difference__content { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.dpv2-difference__desc { margin: 0; }
.dpv2-difference__cta { flex-shrink: 0; }
.dpv2-difference__cta:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
.dpv2-difference__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.dpv2-difference__card { display: flex; flex-direction: column; gap: 1.25rem; min-height: 15.375rem; padding: 1.25rem; border-radius: 1.25rem; background: var(--color-sidewalk); }
.dpv2-difference__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; }
.dpv2-difference__icon-img { display: block; max-width: none; }
.dpv2-difference__icon-img--globe { width: 1.408rem; height: 1.408rem; }
.dpv2-difference__icon-img--target { width: 1.461875rem; height: 1.46175rem; }
.dpv2-difference__icon-img--sliders { width: 1.408rem; height: 1.32rem; }
.dpv2-difference__text { display: flex; flex-direction: column; gap: 1.25rem; }
.dpv2-difference__card-title { margin: 0; line-height: 1.3; }
.dpv2-difference__card-desc { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--color-iron); }
/* Content accordion CSS */
.dpv2-content-accordion { padding: 0; background: var(--color-white); }
.dpv2-content-accordion__container { max-width: 90rem; padding-top: 0; padding-bottom: 7.5rem; }
.dpv2-content-accordion__inner { display: flex; flex-direction: column; gap: 5rem; }
.dpv2-content-accordion__header { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: start; }
.dpv2-content-accordion__title { margin: 0; padding-right: 3.75rem; }
.dpv2-content-accordion__desc { margin: 0; }
/* Parallax moved to background-position on this figure itself, per
   request, instead of a transform on the <img> inside it. aspect-ratio is
   set inline (see the PHP template) from the image's own real dimensions,
   replacing the natural-sizing role the visible <img> used to play — the
   <img> is now visually hidden (kept only for its alt text/SEO value, see
   below) rather than driving the box's height itself.
   background-size is NOT set here anymore — it's computed and set inline
   by script.js's updateBackgroundSize(), from the actual rendered
   container size vs. the image's real natural size. A fixed value like
   125% 125% only avoids distorting the photo when the container's own
   aspect ratio happens to match the image's natural ratio; that broke the
   moment a mobile breakpoint forced a squarer container (equal width/
   height percentages there stretched the landscape photo to fill the
   square box instead of zooming in uniformly — visible as a "stretched"
   look). Computing it from real dimensions keeps it correct at any
   container aspect ratio. background-position's Y value is still driven
   by the percentage --dpv2-parallax-shift, scaled in script.js to account
   for background-position's different percentage semantics. */
/* aspect-ratio/background-image both read from CSS custom properties set
   inline by the PHP template (--dpv2-cta-ratio-desktop / --dpv2-cta-bg-
   desktop), rather than literal values — this lets the mobile override
   below swap in the --mobile versions of both instead, so a dedicated
   mobile-cropped photo can be shown with its own correct aspect ratio,
   rather than forcing the desktop (landscape) photo into a mismatched
   square box. */
.dpv2-content-accordion__media { position: relative; margin: 0; width: 100%; aspect-ratio: 1200 / 500; overflow: hidden; border-radius: 1.25rem; }
/* Both <img> tags are real visible images — only the one matching the
   current breakpoint is shown. The visible one is absolutely positioned
   with a %-based overscan top/bottom (not a fixed px value) so JS
   translateY has room to drift without exposing the section background
   behind it — and because it's a percentage of this element's own
   rendered height, it scales correctly at every breakpoint/aspect ratio
   automatically, including the mobile image's own distinct crop, instead
   of needing a separate fixed-px value tuned per breakpoint. checks the
   same breakpoint to decide which one's natural dimensions to read. */
.dpv2-content-accordion__image--mobile { display: none; }
.dpv2-content-accordion__image { position: absolute; top: -40%; bottom: -20%; left: 0; right: 0; width: 100%; object-fit: cover; object-position: center; transform: translateY(var(--dpv2-parallax-shift, 0px)); will-change: transform; }
.dpv2-content-accordion__accordion { width: 100%; }
.dpv2-content-accordion__item { border-top: 0.0625rem solid rgba(63, 60, 58, 0.25); padding: 1.25rem 0.25rem; }
.dpv2-content-accordion__item--last { border-bottom: 0.0625rem solid rgba(63, 60, 58, 0.25); }
.dpv2-content-accordion__heading { margin: 0; font: inherit; }
.dpv2-content-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.dpv2-content-accordion__trigger:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; border-radius: 0.125rem; }
.dpv2-content-accordion__trigger-main { display: flex; flex: 1 1 auto; align-items: center; gap: 0.5rem; min-width: 0; }
.dpv2-content-accordion__trigger-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; }
/* Widened from 1.375rem to 1.5rem — the outer icon box (2rem) already
   matched .dpv2-difference__icon exactly, but the actual icon graphic
   inside was noticeably smaller than that section's icons (1.4-1.46rem),
   which is what was reading as "smaller than the design file." Bumped to
   meet/exceed the largest icon size used there. Height stays unset (auto)
   so each icon keeps its own natural aspect ratio rather than being
   force-stretched to a fixed square, since not all of these icons are
   perfectly square (e.g. the shop icon's own real proportions below). */
.dpv2-content-accordion__trigger-icon-img { display: block; max-width: none; width: 1.5rem; object-fit: contain; }
/* This modifier class was never actually applied by the template at all
   (it only ever outputs the generic .dpv2-content-accordion__trigger-icon-img
   class, with no per-icon variant) — left here in case it's wired up
   later, but it wasn't the cause of the sizing issue and doesn't need
   removing to fix it. */
.dpv2-content-accordion__trigger-icon-img--shop { width: 1.5rem; height: 1.344rem; }
.dpv2-content-accordion__trigger-title { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.3; color: var(--color-data); }
.dpv2-content-accordion__toggle { position: relative; flex-shrink: 0; width: 0.875rem; height: 0.875rem; }
.dpv2-content-accordion__toggle-bar { position: absolute; background: var(--color-iron); border-radius: 0.0625rem; transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; }
.dpv2-content-accordion__toggle-bar--vertical { top: 0; left: 0.375rem; width: 0.0625rem; height: 0.75rem; }
.dpv2-content-accordion__toggle-bar--horizontal { top: 0.344375rem; left: 0; width: 0.8125rem; height: 0.0625rem; }
.dpv2-content-accordion__item.is-open .dpv2-content-accordion__toggle-bar--vertical { opacity: 0; }
.dpv2-content-accordion__panel { height: 0; overflow: hidden; transition: height 300ms ease-in-out; }
.dpv2-content-accordion__panel-inner { display: flex; flex-direction: column; align-items: flex-end; padding-top: 1.25rem; }
.dpv2-content-accordion__panel-text, .dpv2-content-accordion__panel-inner p { width: 100%; max-width: 36rem; margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.5; color: var(--color-iron); }
.dpv2-content-accordion__panel-text:last-child, .dpv2-content-accordion__panel-inner p:last-child { margin-bottom: 0; }
.dpv2-content-accordion__panel-text strong, .dpv2-content-accordion__panel-inner p strong { font-family: var(--font-heading); font-weight: 400; }
.dpv2-content-accordion__cta { display: flex; flex-direction: column; align-items: center; gap: 1.875rem; width: 100%; padding: 2.5rem 1.25rem; border-radius: 1.25rem; background: #eceeff; text-align: center; }
.dpv2-content-accordion__cta-title { margin: 0; max-width: 38.5rem; font-family: var(--font-heading); font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-iron); }
.dpv2-content-accordion__cta-title-mobile { display: none; }
/* align-self: center explicit, not the JS-computed left-anchor used
   elsewhere — that anchoring approach (meant to let hover-growth expand
   rightward without visibly recentering the button) turned out unreliable
   here, showing up off-center in practice. Same fix already applied to
   .plat-deeper__btn for the identical reason. */
.dpv2-content-accordion__cta-btn { flex-shrink: 0; align-self: center; }
.dpv2-content-accordion__cta-btn:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
/* Map Comparison */
.dpv2-map-comparison { padding: 0; background: var(--color-dusk); }
.dpv2-map-comparison__container { max-width: 90rem; padding-top: 6.25rem; padding-bottom: 7.5rem; }
.dpv2-map-comparison__inner { display: flex; align-items: center; gap: 2.5rem; }
.dpv2-map-comparison__content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2.5rem; min-width: 0; padding-right: 3.75rem; }
.dpv2-map-comparison__title { margin: 0; font-family: var(--font-heading); font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.025em; color: #4f1f7a; }
.dpv2-map-comparison__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.dpv2-map-comparison__desc { margin: 0; max-width: 32.5rem; font-size: 1.375rem; line-height: 1.4; color: #4f1f7a; }
.dpv2-map-comparison__cta { flex-shrink: 0; }
.dpv2-map-comparison__cta:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
.dpv2-map-comparison__map-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; flex-shrink: 0; width: 36.25rem; }
.dpv2-map-comparison__map { position: relative; width: 100%; height: 25rem; border-radius: 1.25rem; overflow: hidden; background: var(--color-black); }
.dpv2-map-comparison__map-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 300ms linear; pointer-events: none; }
.dpv2-map-comparison__map-image.is-active { opacity: 1; }
.dpv2-map-comparison__toggle { position: absolute; z-index: 2; left: 12.5625rem; top: 19.9375rem; display: flex; align-items: center; gap: 0; padding: 0.25rem; border: 0.25rem solid var(--color-black); border-radius: 3.125rem; background: rgba(0, 0, 0, 0.65); }
.dpv2-map-comparison__toggle-pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 3.125rem; transition: transform 300ms ease-in-out, width 300ms ease-in-out, background-color 200ms ease-in-out; pointer-events: none; }
.dpv2-map-comparison__toggle-pill--others { background: var(--color-white); }
.dpv2-map-comparison__toggle-pill--dataplor { background: var(--color-data); }
.dpv2-map-comparison__toggle-btn { position: relative; z-index: 1; margin: 0; padding: 0.875rem 1.125rem; border: 0; border-radius: 3.125rem; background: transparent; font-family: var(--font-heading); font-size: 1rem; line-height: 1; color: var(--color-white); white-space: nowrap; cursor: pointer; transition: color 200ms ease; }
.dpv2-map-comparison__toggle-btn--others.is-active { color: var(--color-iron); }
.dpv2-map-comparison__toggle-btn--dataplor.is-active { color: var(--color-white); }
.dpv2-map-comparison__toggle-btn:focus-visible { outline: 0.125rem solid var(--color-white); outline-offset: 0.125rem; }
.dpv2-map-comparison__navigation { display: flex; justify-content: center; width: 100%; }
.dpv2-map-comparison__indicator { display: flex; align-items: center; width: 3.75rem; height: 0.5rem; overflow: hidden; border-radius: 0.625rem; background: #8252ad; }
/* transition duration set inline by script.js (from the same DURATION
   constant driving the actual view-switch timer) rather than hardcoded
   here — this value had drifted out of sync with a later DURATION change
   (2000ms here vs 4000ms in JS), which is exactly what caused the pill to
   visibly fill up and then sit at 100% for the remaining time before the
   view actually switched. No fallback duration needed since JS sets it
   before the fill ever starts. */
.dpv2-map-comparison__indicator-progress { display: block; width: 0; height: 100%; border-radius: 0.625rem; background: var(--color-white); }
.dpv2-map-comparison__status { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* CTA */
.dpv2-cta { position: relative; display: flex; align-items: center; justify-content: center; padding: 8.75rem 0; overflow: hidden; }
.dpv2-cta__media { position: absolute; inset: 0; pointer-events: none; }
.dpv2-cta__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dpv2-cta__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); mix-blend-mode: multiply; }
.dpv2-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.875rem; width: 100%; max-width: 49.875rem; padding: 0 0.9375rem; text-align: center; }
.dpv2-cta__title { margin: 0; font-family: var(--font-heading); font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.025em; color: var(--color-white); }
body .dpv2-cta__btn { flex-shrink: 0; }
body .dpv2-cta__btn:focus-visible { outline: 0.125rem solid var(--color-white); outline-offset: 0.125rem; }
/* Thank you */
.dpv2-thank-you { padding: 0; background: var(--color-white); }
.dpv2-thank-you__container { max-width: 90rem; padding-top: 5rem; padding-bottom: 8.75rem; }
.dpv2-thank-you__inner { display: flex; flex-direction: column; align-items: center; gap: 3.75rem; }
.dpv2-thank-you__image { display: block; flex-shrink: 0; width: 19.5rem; height: 16.875rem; max-width: none; object-fit: contain; }
.dpv2-thank-you__content { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; width: 100%; max-width: 56.25rem; text-align: center; }
.dpv2-thank-you__title { margin: 0; font-family: var(--font-heading); font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.025em; color: var(--color-data); }
.dpv2-thank-you__body { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; width: 100%; max-width: 43.75rem; }
.dpv2-thank-you__description { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: #31302f; }
.dpv2-thank-you__actions { display: flex; justify-content: center; }
.dpv2-thank-you__cta { padding: 0.875rem 1.5625rem; gap: 0.375rem; }
.dpv2-thank-you__cta::after { display: none; }
.dpv2-thank-you__cta-icon { display: block; flex-shrink: 0; width: 1.0625rem; height: 1.0625rem; max-width: none; }
.dpv2-thank-you__cta:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
/* Contact CSS */
.dpv2-contact { padding: 0; background: var(--color-white); }
.dpv2-contact__container { max-width: 90rem; padding-top: 6.25rem; padding-bottom: 5rem; }
.dpv2-contact__inner { display: flex; flex-direction: column; gap: 5rem; }
.dpv2-contact__layout { display: flex; gap: 2.5rem; align-items: flex-start; width: 100%; }
.dpv2-contact__content { display: flex; flex: 1 1 0; flex-direction: column; gap: 2.5rem; min-width: 0; padding-right: 3.75rem; }
.dpv2-contact__heading { margin: 0; font-family: var(--font-heading); font-size: 4.375rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-data); }
.dpv2-contact__description { margin: 0; font-family: var(--font-body); font-size: 1.375rem; line-height: 1.4; color: var(--color-iron); }
.dpv2-contact__form-card { position: relative; flex-shrink: 0; width: 36.25rem; max-width: 100%; padding: 2.8125rem 1.875rem 2.5rem; border-radius: 1.25rem; background: var(--color-sidewalk); }
.dpv2-contact__hubspot { width: 100%; }
/* Loading skeleton — shown while waiting for the real HubSpot form to
   appear (see script.js, which adds/removes this modifier class), so the
   wait doesn't read as an empty, possibly-broken gap. Rough shape guess at
   a few field-sized bars plus a button-sized bar; doesn't need to be
   pixel-perfect since it's replaced the moment the real form renders. */
.dpv2-contact__hubspot--loading { min-height: 26.25rem; position: relative; }
.dpv2-contact__hubspot--loading::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  background:
    linear-gradient(#eee 1.5rem, transparent 0) 0 0,
    linear-gradient(#eee 1.5rem, transparent 0) 0 3.25rem,
    linear-gradient(#eee 1.5rem, transparent 0) 0 6.5rem,
    linear-gradient(#eee 1.5rem, transparent 0) 0 9.75rem,
    linear-gradient(#eee 10rem, transparent 0) 0 13rem,
    linear-gradient(var(--color-data) 3rem, transparent 0) 0 17.5rem;
  background-repeat: no-repeat;
  background-size: 100% 1.5rem, 100% 1.5rem, 100% 1.5rem, 100% 1.5rem, 100% 10rem, 9rem 3rem;
  opacity: 0.6;
  animation: dpv2-contact-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes dpv2-contact-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .dpv2-contact__hubspot--loading::before { animation: none; opacity: 0.6; }
}
.dpv2-contact__hubspot .hbspt-form { width: 100%; }
.dpv2-contact__hubspot form.hs-form { display: flex; flex-direction: column; column-gap: 1.25rem; row-gap: 1.875rem; margin: 0; }
.dpv2-contact__hubspot form.hs-form fieldset { display: contents; margin: 0; padding: 0; border: 0; min-width: 0; }
.dpv2-contact__hubspot form.hs-form fieldset.form-columns-2{ display: flex; justify-content: space-between; width: 100%; max-width: unset; gap: 1.25rem;}
.dpv2-contact__hubspot .hs-form-field { width: 100%; margin: 0; float: none; }
.dpv2-contact__hubspot .hs_email,
.dpv2-contact__hubspot .hs_tell_us_more,
.dpv2-contact__hubspot .hs_recaptcha,
.dpv2-contact__hubspot .hs_submit,
.dpv2-contact__hubspot .hs-form-field[style*="display: none"],
.dpv2-contact__hubspot .hs-form-field.hs-fieldtype-hidden { grid-column: 1 / -1; }
.dpv2-contact__hubspot .hs-form-field > label { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dpv2-contact__hubspot .hs-form-field .input { margin: 0; width: 100%; }
.dpv2-contact__hubspot .hs-input { width: 100% !important; margin: 0; padding: 0 0 0.25rem; border: 0; border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.3); border-radius: 0; background: transparent; font-family: var(--font-body); font-size: 1.125rem; line-height: 1.4; color: #8a8a8a; box-shadow: none; outline: none; transition: color 300ms ease; }
.dpv2-contact__hubspot .hs-input:not(:placeholder-shown),
.dpv2-contact__hubspot .hs-input:focus,
.dpv2-contact__hubspot .hs-input.is-filled { color: #383736; }
.dpv2-contact__hubspot .hs-input::placeholder { color: #8a8a8a; opacity: 1; text-transform: capitalize; }
.dpv2-contact__hubspot textarea.hs-input { min-height: 10rem; padding: 0.625rem; border: 0; border-radius: 0.625rem; background: var(--color-white); resize: vertical; text-transform: none; }
.dpv2-contact__hubspot textarea.hs-input::placeholder { text-transform: none; }
.dpv2-contact__hubspot .hs-error-msgs { padding: 0; margin: 0; list-style: none; clip: rect(0, 0, 0, 0); border: 0; font-size: 0.875rem; color: var(--color-brick);}
.dpv2-contact__hubspot .hs_recaptcha { display: none; }
.dpv2-contact__hubspot .hs_submit { margin: 0; padding: 0; }
.dpv2-contact__hubspot .hs_submit .actions { margin: 0; padding: 0; }
.dpv2-contact__hubspot .hs-button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; padding: 1.125rem 1.375rem; border: 0; border-radius: var(--radius-btn); background: rgba(0, 0, 0, 0.2); font-family: var(--font-heading); font-size: 1rem; line-height: 1; color: var(--color-white); cursor: pointer; transition: background-color 300ms ease, opacity 300ms ease; }
.dpv2-contact--complete .dpv2-contact__hubspot .hs-button.primary { background-color: var(--color-data); }
.dpv2-contact__hubspot .hs-button.primary { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12'%3E%3Cpath fill='white' d='M14.8623 5.95459C15.0439 5.77295 15.0439 5.47412 14.8623 5.29248L9.70605 0.13623C9.52441 -0.0454102 9.22559 -0.0454102 9.04395 0.13623C8.86231 0.317871 8.86231 0.616699 9.04395 0.79834L13.4004 5.15479H0.46875C0.210938 5.15479 0 5.36572 0 5.62354C0 5.88135 0.210938 6.09229 0.46875 6.09229H13.4004L9.04395 10.4487C8.86231 10.6304 8.86231 10.9292 9.04395 11.1108C9.22559 11.2925 9.52441 11.2925 9.70605 11.1108L14.8623 5.95459Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 1.5rem) center; background-size: 0.9375rem 0.703125rem; padding-right: 3rem; transition: 0.3s ease all;}
.dpv2-contact__hubspot .hs-button.primary:hover:not(:disabled) { padding-right: 3.25rem; }
.dpv2-contact__hubspot .hs-button.primary:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
.dpv2-contact__hubspot form.hs-form > p { grid-column: 1 / -1; margin: 0; font-family: var(--font-body); font-size: 0.875rem; line-height: normal; color: rgba(0, 0, 0, 0.3); }
.dpv2-contact__hubspot form.hs-form > p a { color: rgba(0, 0, 0, 0.3); text-decoration: underline; }
.dpv2-contact__submit-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; grid-column: 1 / -1; width: 100%; }
.dpv2-contact__status { display: flex; align-items: center; gap: 0.625rem; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms ease; display: none; }
.dpv2-contact--started .dpv2-contact__status { opacity: 1; visibility: visible; display: flex; }
.dpv2-contact__status-text { font-family: var(--font-heading); font-size: 0.875rem; line-height: 1; color: rgba(0, 0, 0, 0.3); white-space: nowrap; }
.dpv2-contact__status-text--complete { display: none; }
.dpv2-contact--complete .dpv2-contact__status-text--incomplete { display: none; }
.dpv2-contact--complete .dpv2-contact__status-text--complete { display: block; }
.dpv2-contact__status-icon { position: relative; flex-shrink: 0; width: 2.9375rem; height: 2.9375rem; border: 0.125rem solid rgba(0, 0, 0, 0.2); border-radius: 50%; transition: background-color 300ms ease, border-color 300ms ease; }
.dpv2-contact__status-icon::before, .dpv2-contact__status-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.5625rem; height: 1.5625rem; transform: translate(-50%, -50%) scale(1); background-position: center; background-repeat: no-repeat; background-size: contain; transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.dpv2-contact__status-icon::before { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Crect x='17.5423' y='5.52148' width='2' height='17' transform='rotate(45 17.5423 5.52148)' fill='black' fill-opacity='0.2'/%3E%3Crect x='18.5403' y='17.5215' width='2' height='17' transform='rotate(135 18.5403 17.5215)' fill='black' fill-opacity='0.2'/%3E%3C/svg%3E"); }
.dpv2-contact__status-icon::after { opacity: 0; transform: translate(-50%, -50%) scale(.8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' viewBox='0 0 18 20' fill='none'%3E%3Crect x='15.5571' y='4.03906' width='2' height='17.158' transform='rotate(31.6589 15.5571 4.03906)' fill='white'/%3E%3Crect x='7.63327' y='16.9619' width='2' height='7.73355' transform='rotate(121.659 7.63327 16.9619)' fill='white'/%3E%3C/svg%3E"); }
.dpv2-contact--complete .dpv2-contact__status-icon { border-color: transparent; background: var(--color-glass-500); }
.dpv2-contact--complete .dpv2-contact__status-icon::before { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-90deg); }
.dpv2-contact--complete .dpv2-contact__status-icon::after { opacity: 1; transform: translate(-50%, -50%) scale(.8) rotate(0deg); }
.dpv2-contact__logos { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; width: 100%; }
.dpv2-contact__logos-heading-wrap { width: 100%; padding-left: 0; padding-right: 0; }
.dpv2-contact__logos-heading { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; line-height: 1; text-align: center; color: var(--color-iron); }
/* Blog grid */
.dpv2-blog-grid { padding: 0; background: var(--color-white); }
.dpv2-blog-grid__container { max-width: 90rem; padding-top: 1.875rem; padding-bottom: 10rem; }
.dpv2-blog-grid .dpv2-hero__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; width: 100%; padding: 0 0 3.75rem; }
.dpv2-blog-grid .dpv2-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.dpv2-blog-grid .dpv2-hero__tag { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; margin: 0; padding: 0.4375rem 0.875rem; border: 0.0625rem solid var(--color-iron); border-radius: 3.125rem; background: transparent; font-family: var(--font-heading); font-size: 0.875rem; line-height: 1; color: var(--color-iron); white-space: nowrap; cursor: pointer; }
.dpv2-blog-grid .dpv2-hero__tag.is-active { padding: 0.4375rem 0.875rem; border-color: var(--color-data); background: var(--color-data); color: var(--color-white); }
.dpv2-blog-grid .dpv2-hero__tag.is-active .dpv2-hero__tag-dot { display: none; }
.dpv2-blog-grid .dpv2-hero__tag:not(.is-active) { padding: 0.4375rem 0.875rem 0.4375rem 0.625rem; }
.dpv2-blog-grid .dpv2-hero__tag-dot { display: block; flex-shrink: 0; width: 0.5rem; height: 0.5rem; max-width: none; border-radius: 50%; }
.dpv2-blog-grid .dpv2-hero__tag:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
/* Resource single page — category tag pill (matches listing page .dpv2-hero__tag style) */
.resource-category { margin: 0; }
.resource-category > span { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4375rem 0.875rem 0.4375rem 0.625rem; border: 0.0625rem solid var(--color-iron); border-radius: 3.125rem; background: transparent; font-family: var(--font-heading); font-size: 0.875rem; line-height: 1; color: var(--color-iron); white-space: nowrap; }
.resource-category__dot { display: inline-block; flex-shrink: 0; width: 0.5rem; height: 0.5rem; min-width: 0.5rem; min-height: 0.5rem; max-width: none; border-radius: 50%; }
.dpv2-blog-grid .dpv2-hero__search-form { position: relative; flex-shrink: 0; width: 20rem; }
.dpv2-blog-grid .dpv2-hero__search-label { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dpv2-blog-grid .dpv2-hero__search { display: flex; align-items: flex-end; width: 100%; border-bottom: 0.0625rem solid var(--color-iron); padding-bottom: 0.25rem; }
.dpv2-blog-grid .dpv2-hero__search-input { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 1.125rem; line-height: 1.4; color: var(--color-iron); }
.dpv2-blog-grid .dpv2-hero__search-input::placeholder { color: #8a8a8a; opacity: 1; }
.dpv2-blog-grid .dpv2-hero__search-input:focus { outline: none; }
/* .dpv2-blog-grid .dpv2-hero__search-input:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.25rem; border-radius: 0.125rem; } */
.dpv2-blog-grid .dpv2-hero__search-button { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dpv2-hero__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.dpv2-blog-grid__inner { display: flex; flex-direction: column; align-items: center; gap: 3.75rem; width: 100%; }
.dpv2-blog-grid__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; width: 100%; }
.dpv2-blog-grid__grid.empty-grid { grid-template-columns: 1fr; }
.dpv2-blog-grid__item { min-width: 0; }
.dpv2-blog-grid__card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 1.25rem; border-radius: 1.25rem; background: var(--color-sidewalk); overflow: hidden; gap: 2.25rem; transition: box-shadow 200ms ease, transform 200ms ease;}
.dpv2-blog-grid__card:hover,
.dpv2-blog-grid__card:focus-within { box-shadow: 0 8px 32px rgba(0,0,0,0.10); transform: translateY(-2px); }
.dpv2-blog-grid__content { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; flex: 1;}
.dpv2-blog-grid__empty-content{}
.dpv2-blog-grid__meta { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: flex-start; }
.dpv2-blog-grid__category { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4375rem 0.875rem 0.375rem 0.625rem; border: 0.0625rem solid var(--color-iron); border-radius: 3.125rem; font-family: var(--font-heading); font-size: 0.875rem; line-height: 1; color: var(--color-iron); white-space: nowrap; }
.dpv2-blog-grid__category-dot { display: block; flex-shrink: 0; width: 0.5rem; height: 0.5rem; max-width: none; border-radius: 50%;}
.dpv2-blog-grid__title { margin: 0; padding-right: 5rem; font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.3; color: var(--color-iron); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.dpv2-blog-grid__image-wrap { position: relative; flex-shrink: 0; width: 100%; height: 11.25rem; overflow: hidden; border-radius: 0.625rem; cursor: pointer; }
.dpv2-blog-grid__image-link { display: block; width: 100%; height: 100%; }
.dpv2-blog-grid__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.4s ease; }
.dpv2-blog-grid__image-wrap--offset .dpv2-blog-grid__image { position: absolute; left: 0; width: 100%; height: 128.46%; top: -14.23%; max-width: none; }
.dpv2-blog-grid__card:hover .dpv2-blog-grid__image,
.dpv2-blog-grid__card:focus-within .dpv2-blog-grid__image { transform: scale(1.03); }
.dpv2-blog-grid__footer { flex-shrink: 0; }
.dpv2-blog-grid__read { flex-shrink: 0; }
.dpv2-blog-grid__read:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
.dpv2-blog-grid__more { flex-shrink: 0; }
body .dpv2-blog-grid__more::after { content: ""; display: none; }
.dpv2-blog-grid__more:focus-visible { outline: 0.125rem solid var(--color-data); outline-offset: 0.125rem; }
.dpv2-blog-grid-loader { position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(0.25rem); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.dpv2-blog-grid-loader.is-active { opacity: 1; visibility: visible; }
.resource-category span span.resource-category__dot {border: none; padding: 0; }
.dpv2-blog-grid-loader__spinner { width: 3.75rem; height: 3.75rem; border: 0.25rem solid var(--color-white); border-top-color: var(--color-data); border-radius: 50%; animation: dpv2-spin 0.8s linear infinite; }
@keyframes dpv2-spin {
  to { transform: rotate(360deg); }
}
body.dpv2-loading {
  overflow: hidden;
}
/* Platform carousel CSS */
.dp-carousel-section { padding: 0 0 5rem; }
.dp-carousel-wrap { background: #F1EEEC; border-radius: 1.25rem; padding: 1.875rem; overflow: hidden; display: flex; flex-direction: column; gap: 1.875rem; }
.dp-slide { display: flex; gap: 1.875rem; align-items: stretch; }
.dp-slide-text { width: 16rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.25rem; justify-content: space-between;}
/* letter-spacing switched from a fixed -0.02rem to -0.01em: Figma specs
   this as -1%, which (per the convention already used elsewhere in this
   project) converts to an em value so it scales with the element's own
   font-size instead of staying frozen at one fixed px value. At this
   rule's desktop font-size (2rem/32px) the two are identical (-0.01em ×
   32px = -0.32px = the old -0.02rem exactly), so desktop is unchanged —
   but it now scales correctly at the mobile 1.625rem/26px size below too,
   instead of keeping desktop's -0.32px unchanged there. */
.dp-slide-title { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-iron); margin: 0; transition: opacity 200ms ease; }
.dp-slide-title.fading { opacity: 0; }
/* line-height matched to the new mobile-card Figma spec (145%) — this class
   is shared with the desktop cross-fade description too, but 150% vs 145%
   is a small enough difference that using one shared value everywhere is
   fine rather than needing a mobile-only override. */
.dp-slide-desc { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.45; color: var(--color-iron); margin: 0; }
/* min-height raised from 26rem (416px) to match Figma's updated spec of
   532px for this card now that the carousel is down to 3 items — per
   Hardik's comment, the live carousel's height needed to follow the same
   adjustment. Width is left fluid (flex:1) rather than hardcoded to
   Figma's measured 820px, since that number is just how wide this
   particular frame happened to render at — the text column beside it is a
   fixed 16rem, so this stays flexible to fill whatever space remains at
   any viewport width. */
.dp-img-stack { flex: 1; border-radius: 0.75rem; overflow: hidden; position: relative; min-height: 33.25rem; }
.dp-img-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms ease; }
.dp-img-layer.active { opacity: 1; }
.dp-desc-line { display: block; opacity: 0; transform: translateY(0.25rem); transition: opacity 180ms ease, transform 180ms ease; }
.dp-desc-line.visible { opacity: 1; transform: translateY(0); }
.dp-indicators { display: flex; gap: 1.25rem; width: 100%; }
.dp-indicator { flex: 1; cursor: pointer; }
.dp-bar-track { background: rgba(0,0,0,0.15); border-radius: 0.625rem; height: 0.1875rem; overflow: hidden; }
/* Progress color changed from blue (--color-data) to aqua per Figma's
   updated spec: var(--Color---Glass-Glass-500, #00CDC3) maps to this
   project's --color-glass-500 token, same hex value. Height/radius were
   already correct: .dp-bar-track (above) is fixed at 0.1875rem (3px) and
   this fill already inherits that via height:100%; border-radius was
   already 0.625rem (10px). */
/* No CSS transition on width — the JS already drives this via
   requestAnimationFrame every ~16ms (effectively 60fps, already smooth on
   its own). Layering a 50ms CSS transition on top meant every frame's new
   target retriggered/interrupted the previous transition, and that
   fighting was most visible right at the pause→resume boundary (held
   static for 3s, then suddenly rapid updates again) — reading as a visible
   jerk/reset instead of a clean continuous fill. */
.dp-bar-fill { height: 100%; border-radius: 0.625rem; background: var(--color-glass-500, #00CDC3); width: 0%; }
.dp-bar-label { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 400; color: var(--color-iron); margin-top: 0.375rem; line-height: 1.4; transition: opacity 200ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-indicators:hover .dp-bar-label { opacity: 0.4; }
.dp-indicator:hover .dp-bar-label { opacity: 1 !important; }
/* Platform insights CSS */
.insights-section { background: #00524E; padding: 6.25rem 0 7.5rem; display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
/* Was relying on the generic Bootstrap .container class (max-width: 75rem,
   its own 0.9375rem padding, auto margins) — narrower and off-center
   compared to every other section's shared 90rem-max, 7.5rem-gutter
   pattern (.dp-section-container / .plat-datasets__container / etc.),
   which is why this section's left/right edges didn't line up with the
   sections above/below it.

   The first attempt at this fix kept the horizontal gutter on
   .insights-section itself (the full-width outer section) and only added
   max-width/centering to .container — that's NOT equivalent to how
   .plat-datasets__container etc. do it (gutter on the CONTAINER, applied
   AFTER centering the max-width box, section itself full-bleed with no
   horizontal padding). Padding-before-centering vs padding-after-centering
   only produce the same result at one exact viewport width
   (max-width + 2×gutter); at any other width they diverge — which is
   exactly why the two sections still didn't line up after that first
   pass. Moving the gutter here, onto .container, to match
   .plat-datasets__container's own structure exactly (section: no
   horizontal padding; container: max-width + centering + gutter,
   together) is what actually makes the two match at every viewport
   width, not just one. Same restructuring applied to every breakpoint
   override below (each one moves its horizontal values from
   .insights-section to .insights-section .container). */
.insights-section .container { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 7.5rem; }
.insights-header { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; width: 100%; }
.insights-title h2 { color: #00CDC3; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025rem; margin: 0; }
.insights-content p { color: #00CDC3; font-family: var(--font-body); font-size: 1.375rem; font-weight: 400; line-height: 1.4; margin: 0; }
.insights-divider { height: 0.063rem; background: var(--Glass, #00CDC3); margin: 5rem 0 2.5rem; width: 100%; border: none;}
.insights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.75rem 2.5rem; width: 100%; }
.insight-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; width: 100%; }
.insight-icon { width: 2rem; height: 2rem; display: flex; align-items: center; aspect-ratio: 1/1; flex-shrink: 0; }
.insight-icon svg { width: 100%; height: 100%; stroke: #00CDC3; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.insight-icon img { width: 100%; height: 100%; object-fit: contain; }
.insight-card h3 { color: #00CDC3; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; line-height: 1.3; margin: 0; }
.insight-card p { color: #00CDC3; font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.4; margin: 0; }
/* Platform features list CSS */
.fl-section { background: var(--color-white); padding: 5rem 0; }
.fl-container { max-width: 70rem; margin: 0 auto; padding: 0 2.5rem; }
.fl-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding: 2.25rem 0; border-top: 0.0625rem solid var(--color-border-soft); }
.fl-row:last-child { border-bottom: 0.0625rem solid var(--color-border-soft); }
.fl-left { display: flex; align-items: center; gap: 1rem; }
.fl-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; color: var(--color-data-indigo); }
.fl-icon svg { width: 1.5rem; height: 1.5rem; stroke: var(--color-data-indigo); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fl-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) saturate(100%) invert(24%) sepia(90%) saturate(1200%) hue-rotate(225deg) brightness(95%); }
.fl-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--color-data-indigo); margin: 0; letter-spacing: -0.00625em; }
.fl-desc { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.65; color: var(--color-text-slate); margin: 0; }
/* Platform data types CSS */
.dt-section { background: var(--color-data-navy); padding: 6.25rem 0 7.5rem; }
.dt-container { max-width: 80rem; margin: 0 auto; padding: 0 2.5rem; }
.dt-header { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-bottom: 4rem; }
.dt-heading { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.0375em; color: var(--color-white); margin: 0; }
.dt-subheading { font-family: var(--font-body); font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0; padding-top: 0.375rem; }
.dt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.dt-card { border: 0.0625rem solid rgba(255, 255, 255, 0.18); border-radius: 1rem; padding: 2rem 1.75rem 2.25rem; display: flex; flex-direction: column; gap: 0; background: transparent; transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease; cursor: default; }
.dt-card:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); transform: translateY(-0.25rem); }
.dt-card-icon { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; color: rgba(255, 255, 255, 0.7); }
.dt-card-icon svg { width: 1.75rem; height: 1.75rem; stroke: rgba(255, 255, 255, 0.7); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dt-card-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1) opacity(0.7); }
.dt-card-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--color-white); margin: 0 0 1rem; letter-spacing: -0.00625em; }
.dt-card-desc { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin: 0; }

/* ══════════════════════════════════════════════════
   SHARED COMPONENTS — dp-*
   Used on both platform and dataset pages.
   Add dp-hero / dp-cta / dp-section-container etc.
   to your section/element alongside the page-specific
   class — the shared class supplies the base style,
   the page class supplies overrides.
══════════════════════════════════════════════════ */

/* Hero — base (video bg, header overlap) */
.dp-hero { position: relative; margin-top: calc(-1 * var(--dpv2-header-height)); padding: 0; background: var(--color-data-900); overflow: hidden; color: var(--color-white); display: flex; }
.dp-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }
.dp-hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dp-hero__container { position: relative; z-index: 2; width: 100%; max-width: 90rem; margin: 0 auto; padding-top: 15.813rem; padding-bottom: 0; }
/* Same touching-letter issue as the .dpv2-hero h1 fix elsewhere (e.g. "rt"
   in "smarter", "ry" in "Everywhere") — this is a separate shared hero
   component used by the Platform/Dataset pages with its own hardcoded
   letter-spacing, so it needed its own fix; -0.04375rem here works out to
   the same -0.01em ratio already loosened on the other hero, but that
   wasn't quite enough at this size/weight, so this one's loosened further
   still to a touch past normal (positive letter-spacing) per follow-up
   feedback that "normal" alone still felt tight. */
.dp-hero h1 { margin: 0; color: #fff; font-family: var(--font-heading); font-size: 4.375rem; font-weight: 400; line-height: 1.1; letter-spacing: 0.01em; }
.dp-hero__body { margin: 0; font-family: var(--font-body); font-size: 1.375rem; font-weight: 400; line-height: 1.4; color: #fff; }

/* Section container */
.dp-section-container { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 7.5rem; }

/* 2-col split header */
.dp-split-header { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.dp-split-header__heading { margin: 0; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025rem; color: var(--color-iron); }
.dp-split-header__body { display: flex; flex-direction: column; gap: 2.5rem; padding-top: 0; }
.dp-split-header__desc { margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--color-iron); }
.dp-split-header__desc:first-child { font-size: 1.375rem; line-height: 1.4; }

/* Divider */
.dp-divider { height: 0; background: transparent; margin: 5rem 0 0; border-top: 1px solid var(--color-data); }

/* 4-col numbered grid — auto-expands to 5 cols when 5 items present */
.dp-num-grid { display: grid; grid-template-columns: repeat(4,1fr); column-gap: 2.5rem; row-gap: 2.5rem; }
@media (min-width: 901px) {
  .dp-num-grid:has(.dp-num-grid__item:nth-child(5)) { grid-template-columns: repeat(5,1fr); }
}
.dp-num-grid__item {padding-top: 1.875rem; }
.dp-num-grid__num { font-family: var(--font-body); font-size: 1.25rem; font-weight: 400; line-height: 1.1; color: var(--color-data); margin: 0 0 2.5rem; }
.dp-num-grid__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--color-iron); margin: 0 0 0.625rem; }
.dp-num-grid__text { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--color-iron); margin: 0; }

/* CTA banner */
.dp-cta { position: relative; overflow: hidden; padding: 0; background-color: #111; }
.dp-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; pointer-events: none; z-index: 0; }
.dp-cta__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.60); pointer-events: none; }
.dp-cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8.75rem 0; gap: 1.875rem; align-self: stretch;  }
/* Bootstrap's own generic .btn:hover rule (color/background-color/border-color
   driven by --bs-btn-hover-* vars) is loaded elsewhere and still wins for
   those three properties, since our sitewide `body .btn:hover{gap:0.75rem}`
   rule never touches color/background/border — it only animates the gap.
   Locking hover back to this button's own resting colors (dark text on the
   yellow --color-hi-vis fill) neutralizes that Bootstrap rule for this CTA
   specifically, without changing the sitewide .btn:hover behavior other
   buttons rely on. */
.dp-cta__inner .btn:hover { color: #2E3000; background-color: var(--color-hi-vis); border-color: transparent; }
.dp-cta__heading { margin: 0; color: #fff; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025rem; }
.dp-cta__body, .dp-cta__body  p { max-width: 44rem; margin: 0; color: #fff; font-family: var(--font-body); font-size: 1.375rem; font-weight: 400; line-height: 1.4; }
.dp-cta__inner p { font-family: var(--font-body); font-weight: 400; font-style: normal; font-size: 1.375rem; line-height: 140%; letter-spacing: 0; text-align: center; color: #FFFFFF; }
p.dp-cta__body:empty { display: none; }
p:empty { display: none; }
.dp-cta__inner .section-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.875rem;
    align-self: stretch;
}
p.wp-block-paragraph:empty {
    display: none;
}
/* ══════════════════════════════════════════════════
   PLATFORM PAGE — Section Styles
══════════════════════════════════════════════════ */

/* Platform Hero — page-specific overrides (base styles in .dp-hero) */
.plat-hero { min-height: auto; flex-direction: column; justify-content: flex-end; }
/*.plat-hero .dp-hero__video { opacity: 0.35; }*/
.plat-hero .dp-hero__overlay { background: linear-gradient(to top right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 70%); }
.plat-hero .dp-hero__container { padding-left: 7.5rem; padding-right: 0; }
.plat-hero__layout { display: flex; align-items: flex-end; }
.plat-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.875rem; padding-bottom: 5rem; max-width: 38rem; }
.plat-hero__link { color: var(--color-glass-bright); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.plat-hero__visual { align-self: flex-end; line-height: 0; overflow: hidden; position: relative; z-index: 2; }
.plat-hero__img { display: block; width: 100%; height: auto; border-radius: 0.75rem 0.75rem 0 0; object-fit: cover; }

/* Platform Demo — contained video with spacing, no decorative background */
.plat-demo { background: none; padding: 6.25rem 0 2.5rem; }
.plat-demo__container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 2rem; }
.plat-demo__inner { position: relative; line-height: 0; border-radius: 1.25rem; overflow: hidden; }
.plat-demo__video { display: block; width: 100%; height: auto; }
/* Play button — white pill, centered over video */
.plat-demo__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; gap: 0.25rem; padding: 1.5rem 2.25rem; background: var(--color-white); border: 0; border-radius: 4.6875rem; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; line-height: normal; color: var(--color-iron); cursor: pointer; white-space: nowrap; box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.plat-demo__play:hover { transform: translate(-50%,-50%) scale(1.05); box-shadow: 0 0.75rem 2.5rem rgba(0,0,0,0.25); }
.plat-demo__play-label { display: block; }
.plat-demo__play-icon { display: inline-flex; align-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; justify-content: center;}
.plat-demo__play-icon svg{ height: 1.375rem; width: 1.375rem; }
.plat-demo__play--hidden { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }

/* Platform Superpowers — container/header/divider/grid use shared dp-* classes */
.plat-super { background: var(--color-white); padding: 5rem 0 7.5rem; }

/* Platform Capabilities Intro — container/header use shared dp-* classes */
.plat-caps { background: var(--color-white); padding: 0 0 5rem; }
.plat-caps .dp-split-header { gap: 2.5rem; }
.plat-caps .dp-split-header__body { gap: 1.5rem; }
.plat-caps__preview { margin-top: 5rem; }
.plat-caps__preview-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: repeating-linear-gradient(
    -45deg,
    #f8b4cf 0px,
    #f8b4cf 5px,
    #fff 5px,
    #fff 22px
  );
  border-radius: 1.25rem;
  padding: 0 4rem;
}
.plat-caps__preview-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-data);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.plat-caps__preview-badge:first-child { margin-bottom: -1.375rem; }
.plat-caps__preview-badge:last-child  { margin-top: -1.375rem; }
.plat-caps__preview-card {
  width: 100%;
  max-width: 52rem;
  position: relative;
  z-index: 1;
}
.plat-caps .dp-split-header__desc { color: var(--color-iron); font-size: 1.375rem; line-height: 1.4; }
.plat-caps .dp-split-header__body .btn { align-self: flex-start; }
.plat-caps__link { font-family: var(--font-body); font-size: 1.375rem; font-weight: 400; line-height: 1.4; color: var(--color-data); text-decoration: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; }

/* Platform Go Deeper — mint card */
.plat-deeper { padding: 0 0 7.5rem; }
.plat-deeper__card { display: flex; padding: 2.5rem 1.25rem 0; flex-direction: column; align-items: center; gap: 3.75rem; align-self: stretch; border-radius: 1.25rem; background: #CCF5F3; overflow: hidden; }
.plat-deeper__header { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.plat-deeper__title { color: #00524E; text-align: center; font-family: var(--font-heading); font-size: 2rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.02rem; margin: 0; max-width: 50rem; }
/* align-self: center explicitly, not the left-anchored fixed-margin
   positioning used elsewhere (e.g. .dpv2-content-accordion__cta-btn) —
   per feedback, this button should just stay centered in its container,
   even though that means hover's gap growth will visibly recenter it
   ("wiggle") rather than only growing to the right. */
body .plat-deeper__btn { background: #00524E; color: #fff; align-self: center; }
body .plat-deeper__btn:hover { gap: 0.75rem; }
body a.plat-deeper__btn:after {
    content: "";
    width: 0.9375rem;
    height: 0.75rem;
    display: inline-block;
    background: url(data:image/svg+xml,%3Csvg%20width%3D%2715%27%20height%3D%2712%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M14.8623%205.95459C15.0439%205.77295%2015.0439%205.47412%2014.8623%205.29248L9.70605%200.13623C9.52441-0.0454102%209.22559-0.0454102%209.04395%200.13623C8.86231%200.317871%208.86231%200.616699%209.04395%200.79834L13.4004%205.15479H0.46875C0.210938%205.15479%200%205.36572%200%205.62354C0%205.88135%200.210938%206.09229%200.46875%206.09229H13.4004L9.04395%2010.4487C8.86231%2010.6304%208.86231%2010.9292%209.04395%2011.1108C9.22559%2011.2925%209.52441%2011.2925%209.70605%2011.1108L14.8623%205.95459Z%27%20fill%3D%27%23ffffff%27/%3E%3C/svg%3E) center / contain no-repeat;
    color: #fff;
}
/* The yellow CTAs genuinely expand on hover (.btn:hover grows gap, and the
   button's own box grows with it) — that's the correct, intended behavior,
   not something to prevent. This button just needed to expand the SAME
   way: anchored from its left edge so it grows rightward only, instead of
   growing symmetrically around a flexbox-centered point (which is what
   caused the "wiggle" — the whole box visibly re-centering as it grew).
   script.js measures this button's rest position once and switches it from
   flex-centered to a fixed left-anchored position (align-self: flex-start
   + a computed margin-left) that looks identical at rest, so hovering can
   freely grow the box to the right exactly like the yellow buttons do,
   with no recentering shift. No width-locking, no padding compensation —
   just letting it expand like a normal button. */
.plat-deeper__preview { width: 78%; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0; height: 14.375rem;}
.plat-deeper__preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.plat-caps__preview picture {
    display: flex;
    width: 100%;
}

.plat-caps__preview picture img {
    width: 100%;
}

/* Platform Datasets */
.plat-datasets { background: var(--color-white); padding: 0 0 7.5rem; }
.plat-datasets.section-3-col{padding-top: 6.25rem;}
.plat-datasets__container { max-width: 90rem; margin: 0 auto; padding: 0 7.5rem; }
.plat-datasets__header { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-bottom: 3.75rem; }
.plat-datasets__heading { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025rem; color: var(--color-iron); margin: 0; }
.plat-datasets__subheading { font-family: var(--font-body); font-size: 1.375rem; font-weight: 400; line-height: 1.4; color: var(--color-iron); margin: 0; }
.plat-datasets__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; row-gap: 1.25rem; }
.plat-datasets__grid.grid-3 { grid-template-columns: repeat(3,1fr); }
.plat-dataset-card { background: #F1EEEC; border: none; border-radius: 1.25rem; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; flex: 1 0 0; align-self: stretch; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.plat-dataset-card:hover { transform: translateY(-0.25rem); box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.08); }
.plat-dataset-card__icon { width: 2rem; height: 2rem; display: flex; align-items: center; gap: 0.5rem; aspect-ratio: 1/1; flex-shrink: 0; padding: 0.25rem 0.625rem 0.25rem 0; }
.plat-dataset-card__icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.plat-dataset-card__icon svg { width: 100%; height: 100%; stroke: rgba(65,82,243,1); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plat-dataset-card__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--color-iron); margin: 0; }
.plat-dataset-card__desc { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--color-iron); margin: 0; }

/* Platform CTA — uses shared .dp-cta classes */

/* ══════════════════════════════════════════════════
   DATASET PAGE — Section Styles (.ds-*)
══════════════════════════════════════════════════ */

/* Dataset Hero — page-specific overrides (base styles in .dp-hero) */
.ds-hero { min-height: auto; align-items: flex-start; }
.ds-hero .dp-hero__video { opacity: 0.25; }
.ds-hero .dp-hero__overlay { background: radial-gradient(circle at bottom left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 60%); }
.ds-hero .dp-hero__container { padding-left: 7.5rem; padding-right: 7.5rem; }
.ds-hero .dp-hero__body { max-width: 32rem; }
.ds-hero__layout { display: flex; flex-direction: column; align-items: flex-start; }
.ds-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; padding-bottom: 5rem; max-width: 44rem; }
.ds-hero__visual { align-self: flex-end; line-height: 0; overflow: hidden; }
.ds-hero__table-img { display: block; width: 100%; height: auto; border-radius: 0.75rem 0.75rem 0 0; object-fit: cover; }

/* Data Preview Card (used in hero + economy sections) */
.ds-preview-card { background: #0f1225; border-radius: 0.75rem 0.75rem 0 0; overflow: hidden; width: 100%; font-family: var(--font-body); }
.ds-preview-card__topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; border-bottom: 0.0625rem solid rgba(255,255,255,0.07); }
.ds-preview-card__label-wrap { display: flex; align-items: center; gap: 0.625rem; }
.ds-preview-card__icon { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; background: var(--color-data); border-radius: 0.375rem; flex-shrink: 0; }
.ds-preview-card__icon svg { width: 1rem; height: 1rem; stroke: var(--color-white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-preview-card__label { font-family: var(--font-heading); font-size: 0.875rem; color: var(--color-white); }
.ds-preview-card__meta { font-size: 0.75rem; color: rgba(255,255,255,0.45); white-space: nowrap; }
.ds-preview-card__gear { display: flex; align-items: center; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.ds-preview-card__gear svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ds-preview-card__chains { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-bottom: 0.0625rem solid rgba(255,255,255,0.07); overflow-x: auto; scrollbar-width: none; }
.ds-preview-card__chains::-webkit-scrollbar { display: none; }
.ds-chain-chip { display: inline-flex; align-items: center; padding: 0.3125rem 0.75rem; background: rgba(255,255,255,0.07); border: 0.0625rem solid rgba(255,255,255,0.12); border-radius: 3.125rem; font-family: var(--font-body); font-size: 0.75rem; color: rgba(255,255,255,0.6); cursor: pointer; white-space: nowrap; transition: background 0.15s ease; }
.ds-chain-chip--active { background: rgba(255,255,255,0.15); color: var(--color-white); border-color: rgba(255,255,255,0.25); }
.ds-preview-table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
.ds-preview-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; min-width: 38rem; }
.ds-preview-table thead th { padding: 0.625rem 1rem; text-align: left; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.35); border-bottom: 0.0625rem solid rgba(255,255,255,0.07); white-space: nowrap; }
.ds-preview-table tbody tr { border-bottom: 0.0625rem solid rgba(255,255,255,0.05); transition: background 0.1s; }
.ds-preview-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.ds-preview-table tbody td { padding: 0.625rem 1rem; font-family: var(--font-body); font-size: 0.8125rem; color: rgba(255,255,255,0.75); white-space: nowrap; }
.ds-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 0.25rem; font-size: 0.6875rem; font-family: var(--font-body); letter-spacing: 0.02em; white-space: nowrap; }
.ds-badge--7eleven { background: rgba(255,102,0,0.2); color: #ff9040; }
.ds-badge--wholefoods { background: rgba(0,100,0,0.25); color: #5dd87c; }
.ds-badge--naturalgrocers { background: rgba(0,140,60,0.2); color: #5dd87c; }
.ds-badge--circlek { background: rgba(180,0,0,0.2); color: #ff7070; }
.ds-badge--sprouts { background: rgba(30,130,60,0.2); color: #5dd87c; }
.ds-badge--traderjoes { background: rgba(150,30,30,0.2); color: #ff7070; }
.ds-status { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: 3.125rem; font-size: 0.6875rem; font-family: var(--font-body); }
.ds-status--open { background: rgba(0,200,100,0.15); color: #4de88e; }
.ds-status--closed { background: rgba(220,50,50,0.15); color: #ff7070; }
.ds-preview-card__footer { padding: 0.75rem 1.25rem; font-size: 0.75rem; color: rgba(255,255,255,0.35); border-top: 0.0625rem solid rgba(255,255,255,0.07); }

/* Dataset Teams + Roles — mirrors .plat-super structure */
.ds-teams { background: var(--color-white); padding: 2.5rem 0 7.5rem; }

/* Dataset Roles — merged into .ds-teams section (no separate section needed) */

/* Dataset Economy — container/header use shared dp-* classes */
.ds-economy { background: var(--color-white); }
.ds-economy .dp-split-header { margin-bottom: 3.75rem; }
.ds-economy__preview { width: 100%; margin: 0; }
.ds-economy__preview-img { display: block; width: 100%; height: auto; border-radius: 0.75rem 0.75rem 0 0; }

/* Dataset Feature list */
.ds-features { background: var(--color-white); padding: 0 0 6.25rem; }
.ds-features__container { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 7.5rem; }
.ds-features__list { display: flex; flex-direction: column; }
.ds-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: flex-start; padding: 22px 4px 24px 4px; border-top: 1px solid rgba(63, 60, 58, 0.25); }
.ds-feature:last-child { border-bottom: 1px solid rgba(63, 60, 58, 0.25); }
.ds-feature__left { display: flex; align-items: center; gap: 0.5rem; }
.ds-feature__icon { display: flex; align-items: center; justify-content: center;}
.ds-feature__icon svg { width: 1rem; height: 1rem; stroke: var(--color-glass-bright); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-feature__icon img { width: 100%; height: 100%; object-fit: contain; }
.ds-feature__title { font-family: var(--font-heading); font-size: 1.25rem; font-style: normal; font-weight: 400; color: var(--color-data); text-decoration: none; line-height: 1.3; }
.ds-feature__desc { margin: 0; font-family: var(--font-body); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.5; color: #3F3C3A; }

/* Dataset Data Types — dark variant */
.ds-datatypes { background: var(--color-data-navy); padding: 6.25rem 0 7.5rem; }
.ds-datatypes__container { max-width: 90rem; margin: 0 auto; padding: 0 7.5rem; }
.ds-datatypes__header { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-bottom: 4rem; }
.ds-datatypes__heading { font-family: var(--font-heading); font-size: 2.5rem; font-style: normal; font-weight: 400; line-height: 1.15; letter-spacing: -0.4px; color: #B3BAFA; margin: 0; }
.ds-datatypes__subheading { font-family: var(--font-body); font-size: 1.375rem; line-height: 1.4; color: #B3BAFA; margin: 0; padding-top: 0; }
.ds-datatypes__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.ds-datatype-card { border: 1px solid #B3BAFA; border-radius: 1.25rem; padding: 1.25rem; display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease; }
.ds-datatype-card:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); transform: translateY(-0.25rem); }
.ds-datatype-card__icon { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.ds-datatype-card__icon svg { width: 1.75rem; height: 1.75rem; stroke: rgba(255,255,255,0.6); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-datatype-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.ds-datatype-card__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; line-height: 1.1; color: #B3BAFA; margin: 0 0 0.875rem; }
.ds-datatype-card__desc { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.4; color: #B3BAFA; margin: 0; }

@media (min-width: 1200px) {
  .dp-slide-desc .dp-desc-line { display: inline; }
.dp-slide-desc .dp-desc-line::after { content: " "; }
}
/* Dataset CTA — uses shared .dp-cta classes */
@media (max-width: 1100px) {
  .ds-datatypes__grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .ds-hero h1 { font-size: 3rem; }
  .ds-hero .dp-hero__body { font-size: 1.125rem; }
  .ds-hero .dp-hero__container { padding-left: 2.5rem; padding-right: 2.5rem; }
  .ds-hero__layout { grid-template-columns: 1fr; }
  .ds-hero__visual { display: none; }
  .ds-hero__intro { padding-bottom: 3rem; }
  .ds-teams .dp-section-container, .ds-economy .dp-section-container, .ds-features__container, .ds-datatypes__container { padding-left: 2.5rem; padding-right: 2.5rem; }
  .ds-teams .dp-split-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .ds-teams .dp-num-grid { grid-template-columns: repeat(2,1fr); gap: 2rem; }
  .ds-economy .dp-split-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .ds-feature { grid-template-columns: 1fr; gap: 0.75rem; }
  .ds-datatypes__header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
  .ds-datatypes__grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
  .dp-cta__inner { padding: 5rem 2rem; }
}

@media (max-width: 640px) {
  .ds-hero h1 { font-size: 2.25rem; letter-spacing: -0.025rem; }
  .ds-hero .dp-hero__body { font-size: 1rem; }
  .ds-hero .dp-hero__container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .ds-teams { padding-top: 3.5rem; }
  .ds-teams .dp-section-container, .ds-economy .dp-section-container, .ds-features__container, .ds-datatypes__container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .ds-teams .dp-num-grid { grid-template-columns: 1fr; }
  .ds-datatypes__grid { grid-template-columns: 1fr; }
  .dp-cta__inner { padding: 4rem 1.5rem; }
}
/* Platform Our Approach section CSS */
.plat-approach { background: var(--color-sidewalk); padding: 6.25rem 0 7.5rem; }
.plat-approach__container { max-width: 80rem; margin: 0 auto; padding: 0 7.5rem; }
.plat-approach__header { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.plat-approach__heading { margin: 0; padding-right: 3.75rem; font-family: var(--font-heading); font-size: clamp(2rem, 2.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.025em; color: var(--color-iron); }
.plat-approach__lead { margin: 0; padding-top: 0.375rem; font-family: var(--font-body); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; color: var(--color-iron); }
.plat-approach__cards { display: flex; gap: 1.875rem; margin-top: 5rem; }
.plat-approach__card { flex: 1; background: var(--color-white); border-radius: 1.25rem; overflow: hidden; padding: 0.75rem 0.75rem 1.875rem; display: flex; flex-direction: column; gap: 1.25rem; }
.plat-approach__card-hero { position: relative; height: 10.625rem; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; flex-shrink: 0; }
.plat-approach__card-hero--platform { background: var(--color-glass-500); border-radius: 1rem; }
/* Same fix as .dpv2-header__mega-card--dataset — corrected from
   0.625rem to 1rem to match its platform sibling and the Figma spec. */
.plat-approach__card-hero--dataset { background: var(--color-data); border-radius: 1rem; }
.plat-approach__card-hero-graphic { position: absolute; right: 1rem; bottom: 1rem; width: 17.3125rem; height: auto; pointer-events: none; }
.plat-approach__card-title { position: relative; z-index: 1; margin: 0; font-family: var(--font-heading); font-size: 2rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
.plat-approach__card-hero--platform .plat-approach__card-title { color: var(--color-glass-900); }
.plat-approach__card-hero--dataset .plat-approach__card-title { color: var(--color-white); }
.plat-approach__card-sub { position: relative; z-index: 1; margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.4; max-width: 11.25rem; }
.plat-approach__card-hero--platform .plat-approach__card-sub { color: var(--color-glass-900); }
.plat-approach__card-hero--dataset .plat-approach__card-sub { color: var(--color-white); }
.plat-approach__dataset-tags { position: absolute; right: -0.5rem; top: -0.625rem; z-index: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6875rem; pointer-events: none; }
.plat-approach__dataset-tags-row { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0.6875rem; }
.plat-approach__dataset-tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.8125rem 0.8125rem 0.625rem; border: 0.0625rem solid var(--color-white); border-radius: 0.4125rem; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.02; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-white); white-space: nowrap; }
.plat-approach__card-body { display: flex; flex-direction: column; gap: 2.5rem; padding: 0 1.25rem; flex: 1; }
.plat-approach__features { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; padding: 0; }
.plat-approach__feature { display: flex; align-items: center; gap: 0.75rem; min-height: 1.75rem; }
.plat-approach__feature-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; object-fit: contain; }
.plat-approach__feature-text { font-family: var(--font-body); font-size: 1rem; line-height: 1.4; color: var(--color-iron); }
.plat-approach__card-cta { align-self: flex-start; margin-top: auto; }

/* Media queries */
@media (max-width: 1200px) {
  .insights-grid { gap: 2.5rem; }
  .insights-header { gap: 2rem; }
}
@media (max-width: 1100px) {
  .dt-grid { grid-template-columns: repeat(2, 1fr); }
  .dp-split-header__heading br{display: none;}
  .dp-num-grid__num{
      margin: 0 0 1.5rem;
  }
  .dp-num-grid:has(.dp-num-grid__item:nth-child(5)) {
      grid-template-columns: repeat(5, 1fr);
      row-gap: 1.5rem;
      column-gap: 1.5rem;
  }
  
}
@media (max-width: 1024px) {
  /* Variables */
  :root { --dpv2-header-height: 4.5rem; }
  /* Header */
  .dpv2-header__container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-header__logo { width: 6.75rem; }
  .dpv2-header__logo-img { width: 6.75rem; height: 1.75rem; }
  .dpv2-header__toggle { display: flex; }
  .dpv2-header__nav-link--solutions,
  .dpv2-header__nav-item--has-children > .dpv2-header__nav-link { display: none; }
  .dpv2-header__nav-trigger { display: inline-flex; justify-content: space-between; }
  .dpv2-header__nav-trigger::after { display: none; }
  .dpv2-header__nav-item--has-children { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 0; transition: gap 380ms ease; }
  /* Tied to is-content-visible (not is-open) on purpose: is-content-visible
     is removed the instant a close starts (same moment the height/content
     animations begin), whereas is-open only gets removed 380ms later at the
     very end. Gap needs to shrink in step with those, not after them, or the
     siblings below (Ground Truth, About us) do two separate motions instead
     of one smooth one — that trailing snap was the remaining "choppy" bit. */
  .dpv2-header__nav-item--has-children.is-content-visible { gap: 1.875rem; }
  .dpv2-header__nav-item--has-children > .dpv2-header__mega { display: none; position: static; top: auto; left: auto; right: auto; width: 100%; height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; transition: height 380ms ease; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega { display: block; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards > * { opacity: 0; transform: translateY(-0.75rem); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards > *:nth-child(1) { transition-delay: 0.08s; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards > *:nth-child(2) { transition-delay: 0s; }
  .dpv2-header__nav-item--has-children.is-open.is-content-visible > .dpv2-header__mega .dpv2-header__mega-cards > * { opacity: 1; transform: translateY(0); }
  .dpv2-header__nav-item--has-children.is-open.is-content-visible > .dpv2-header__mega .dpv2-header__mega-cards > *:nth-child(1) { transition-delay: 0s; }
  .dpv2-header__nav-item--has-children.is-open.is-content-visible > .dpv2-header__mega .dpv2-header__mega-cards > *:nth-child(2) { transition-delay: 0.08s; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-container { padding: 0; max-width: none; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards { flex-direction: column; gap: 1.25rem; padding-left: 0; }
  /* Card height increased from 12.5rem → 14rem to match Figma proportions (Mobile 1 flow).
     Figma shows cards taller with more breathing room between title and desc. */
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card { position: relative; height: 14rem; min-height: 14rem; padding: 1.25rem; gap: 0.75rem; justify-content: flex-start; }
  /* Lottie card now mirrors the DESKTOP implementation exactly: canvas sits
     in normal flow below title+desc (not absolutely pinned to a guessed
     fixed card height) — same rules as .dpv2-header__mega-card--lottie /
     .dpv2-header__mega-card-lottie further up this file, minus the parts
     the mobile layout needs (padding, colors, title size). height:auto lets
     the card grow to fit title + desc + the full canvas at its native
     561/170 ratio, so it's naturally taller here than the 14rem base card
     height — no more guessed rem value, it just grows like desktop does.
     padding stays 0 (same as desktop) — these two cards currently have no
     title/desc content at all (see header-light.php: those <p> tags are
     conditional on ACF fields that are empty for both Solutions items),
     so the card is canvas-only and padding would just add unwanted dead
     space around the animation instead of letting it fill the card. */
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card--lottie { height: 14rem; min-height: 14rem; padding: 1.25rem; overflow: hidden; border-radius: 0.75rem; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card--lottie .dpv2-header__mega-card-title { font-size: 1.625rem; letter-spacing: -0.01625em; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card-lottie { position: absolute;
        left: 48%;
        right: 0;
        top: -50px;
        bottom: 0;
        display: block;
        pointer-events: none;
        width: 70%;}
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards > .dpv2-header__mega-menu-item:nth-child(2) .dpv2-header__mega-card-lottie { transform: scale(1.1);
        top: -40px; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card--platform { display: flex; flex-direction: column; gap: 1.25rem; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card--platform .dpv2-header__mega-card-title { font-size: 1.75rem; letter-spacing: -0.0175em; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card-desc { max-width: 14rem; font-size: 1.125rem; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card--platform .dpv2-header__mega-card-desc, .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card--dataset .dpv2-header__mega-card-desc { line-height: 1.45; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card-graphic--platform { right: -0.5rem; bottom: -1.5rem; width: 13.375rem; height: 7.6875rem; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card-graphic--platform img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-tags { right: -3.5rem; bottom: -2.5rem; align-items: center; gap: 0.464375rem; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-tags-row { justify-content: flex-end; gap: 0.464375rem; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-tag { padding: 0.556875rem 0.556875rem 0.4175rem; border-width: 0.0464375rem; border-radius: 0.2784375rem; font-size: 0.696125rem; letter-spacing: 0.0696125em; }
  /* Instant background + faded content (previous fix) killed the ghosting
     but reads as a "jerk" — the white panel just pops into existence with
     no motion at all, then only the text eases in. What's needed is
     something that moves smoothly AND never exposes a semi-transparent
     blend of hero + menu at the same time.

     clip-path does both: instead of fading the background's opacity, the
     panel's visible REGION grows from 0 to full height (a top-down
     "curtain" reveal). At any instant mid-transition, the revealed portion
     is 100% opaque white — never partially see-through — and the
     not-yet-revealed portion is simply clipped away entirely, not faded.
     There's no point in the animation where hero content and menu content
     are both partially visible in the same spot, so nothing to ghost
     against, while still being a smooth eased motion rather than a snap.
     The nav content still gets its own quick opacity fade (slightly
     delayed) on top of that, so text doesn't just appear the instant the
     curtain passes over it. */
  .dpv2-header__menu { position: fixed; top: calc(var(--dpv2-header-height) - 1px); left: 0; right: 0; height: calc(100dvh - var(--dpv2-header-height)); max-height: calc(100dvh - var(--dpv2-header-height)); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; background-color: var(--color-white); visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path 0.4s ease, visibility 0s linear 0.4s; overflow: hidden; z-index: 1000; }
  .dpv2-header__menu.is-open { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0% 0); transition: clip-path 0.4s ease, visibility 0s linear 0s; }
  .dpv2-header__menu-panel { display: none; position: relative; flex: 1; width: 100%; min-height: 0; height: 100%; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; }
  .dpv2-header__menu-panel.is-active { display: block; }
  .dpv2-header__menu.is-open .dpv2-header__menu-panel.is-active { opacity: 1; transition: opacity 0.3s ease 0.15s; }
  .dpv2-header__menu-scroll { height: 100%; overflow-x: hidden; overflow-y: auto; padding: 3.75rem 1.5rem; -webkit-overflow-scrolling: touch; }
  .dpv2-header__nav-list { flex-direction: column; align-items: flex-start; gap: 3.125rem; width: 100%; }
  .dpv2-header__nav-link { width: 100%; min-height: auto; font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-iron); padding: 0; }
  .dpv2-header__actions { position: absolute; right: 0; bottom: 0; left: 0; z-index: 10; width: 100%; padding: 1.25rem 1.5rem 2.5rem; margin-top: 0; justify-content: flex-start; background-color: transparent; pointer-events: none; }
  body .dpv2-header__cta { width: auto; justify-content: center; pointer-events: auto; padding: 1.125rem 1.375rem; }
  body.dpv2-header-menu-open { overflow: hidden; }
  /* Footer */
  .dpv2-footer__container { gap: 3.75rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-footer__main { flex-direction: column; gap: 3.75rem; }
  .dpv2-footer__links { align-items: flex-start; max-width: none; width: 100%; gap: 2.5rem; justify-content: space-between; flex-wrap: wrap;}
  .dpv2-footer__col { flex: none; width: 47%; }
  .dpv2-footer__col--split { gap: 2.5rem; }
  .dpv2-footer__bottom{margin-top: 2.5rem;}
  .dpv2-footer__bottom-container{padding-left: 1.5rem;padding-right: 1.5rem;}
  /* Hero — padding-top trimmed by 1rem/16px per feedback on the gap
     between the header and "Make faster, smarter decisions" on mobile
     (was matching desktop's calc(header-height + 5rem) exactly; now 4rem
     on mobile only, desktop unchanged). */
  .dpv2-hero__container { padding-top: calc(var(--dpv2-header-height) + 4rem); padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-hero__layout { gap: 3.75rem; }
  .dpv2-hero__intro { max-width: none; gap: 1.25rem; }
  .dpv2-hero__visual { width: calc(100% + 2.5rem); margin-right: -2.5rem; }
  .dpv2-hero__visual-img { aspect-ratio: auto; object-position: left center; }
  /* aspect-ratio: 3024/1964 (the STATIC FALLBACK IMAGE's own pixel
     dimensions, borrowed here) forced the actual <video> into that same
     box shape too. The video's real recorded resolution has no reason to
     match the image's dimensions exactly, so object-fit: cover was
     cropping the video to fit a box shape that didn't match its own frame
     — cutting off the on-screen captions ("Where to next?", "hardest",
     "location", etc.) that sit close to the video's own edges. Desktop
     never had this problem because .dpv2-hero__visual-video's base rule
     (further up this file) has no forced aspect-ratio at all — height:
     auto there just follows the video's real intrinsic ratio, so cover
     has nothing to crop. aspect-ratio: auto here does the same thing on
     mobile: the box takes the video's own shape, so nothing gets cut. */
  .dpv2-hero__visual-video { border-radius: 0.5rem 0 0 0.5rem; aspect-ratio: auto; object-position: center top; }
  .dpv2-hero__trust { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .dpv2-hero__logos-set { gap: 3.28125rem; margin-right: 3.28125rem; height: 5.15625rem; }
  .dpv2-hero__logo-item { height: 3.75rem; max-width: 7.5rem; }
  /* Class names corrected to match the actual rendered markup exactly
     (each logo's real class is suffixed "-logo", e.g.
     dpv2-hero__logo-item--doordash-logo, not --doordash — and the
     neighbourlytics one is actually --white-neighbour-lytics). None of
     these hand-tuned per-logo overrides were matching anything before, so
     every logo was silently falling back to the one generic rule above,
     each sized purely by its own natural aspect ratio instead of these
     intentionally-tuned values — which is exactly what was producing the
     visibly inconsistent sizes. --sitezeus removed entirely: no logo with
     that name exists in the actual slider content at all. */
  /* Per-logo width overrides — heights intentionally removed so every logo
     inherits the consistent 3.75rem from the base .dpv2-hero__logo-item rule
     above. Only width + max-width: none are set here; max-width: none is
     needed for logos whose intended width exceeds the base 7.5rem cap. */
  .dpv2-hero__logo-item--doordash-logo { width: 6.5625rem; }
  .dpv2-hero__logo-item--accenture-logo { width: 9.375rem; max-width: none; }
  .dpv2-hero__logo-item--coca-cola-logo { width: 6.5625rem; }
  .dpv2-hero__logo-item--sysco-logo { width: 4.074625rem; }
  .dpv2-hero__logo-item--tensorflight-logo { width: 8.4375rem; max-width: none; }
  .dpv2-hero__logo-item--pwc-logo { width: 3.75rem; }
  .dpv2-hero__logo-item--wolt-logo { width: 3.9994375rem; }
  .dpv2-hero__logo-item--white-neighbour-lytics { width: 10.3125rem; max-width: none; }
  .dpv2-hero__logo-item--globe-logo { width: 6.5625rem; }
  .dpv2-hero.dpv2-hero--gt{background:transparent;}
  .dpv2-hero--gt .dpv2-hero__container { padding-top: 3.75rem; }
  .dpv2-hero--gt .dpv2-hero__content { max-width: none; gap: 2.5rem; padding-bottom: 0; }
  .dpv2-hero--gt .dpv2-hero__title { font-size: 2.5rem; letter-spacing: -0.01em; }
  .dpv2-hero--gt .dpv2-hero__description { font-size: 1.125rem; line-height: 1.45; }
  .dpv2-hero--gt .dpv2-hero__description br{display: none;}
  /* Approach */
  .dpv2-approach__container { padding-top: 3.75rem; padding-bottom: 0; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-approach__header { grid-template-columns: 1fr; gap: 2.5rem; }
  .dpv2-approach__header h2 { padding-right: 0;}
  .dpv2-approach__body { margin-top: 2.5rem; min-height: 0; padding-bottom: 0; border-top: none; }
  .dpv2-approach__stats { grid-template-columns: 1fr; gap: 2.5rem; }
  .dpv2-approach__stat-value { min-height: 5.5rem; }
  .dpv2-approach__visual { margin-top: -5rem; }
  /* Approach cards */
  .dpv2-approach-cards__container { padding-top: 3.75rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-approach-cards__header { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3.75rem; }
  .dpv2-approach-cards__header h2 { padding-right: 0; }
  .dpv2-approach-cards__grid { grid-template-columns: 1fr; gap: 1.875rem; }
  .dpv2-approach-cards__card-hero { min-height: 6rem; gap: 1.25rem; justify-content: flex-start; height: 6rem; }
  /* Desktop base rule is now 0.75rem/12px too (matches Figma), so this
     mobile override is redundant but left explicit for clarity. */
  .dpv2-approach-cards__card-hero--platform { border-radius: 0.75rem; }
  .dpv2-approach-cards__card-hero--dataset { border-radius: 0.75rem; }
  .dpv2-approach-cards__card-graphic-wrap { right: 0; top: auto; bottom: 0; width: 13.375rem; }
  .dpv2-approach-cards__card-graphic { width: 13.375rem; height: 7.6875rem; }
  /* No lottie-specific override here anymore — the single unified rule
     at the base .dpv2-approach-cards__card-hero--lottie definition now
     covers every breakpoint (see comment there). */
  .dpv2-approach-cards__features { padding: 0 0.875rem; }
  .dpv2-approach-cards__cta { margin: 1.25rem 0.875rem 0; }
  .dpv2-approach-cards__tags { right: -1.5rem; top: unset; bottom: -2rem; align-items: flex-end; max-width: 12rem; }
  .dpv2-approach-cards__tags-row { justify-content: flex-end; }
  .dpv2-approach-cards__tag { font-size: 0.5625rem; padding: 0.375rem 0.375rem 0.25rem; border-radius: 0.25rem; }
  /* Testimonial/quote slider */
  .dpv2-quote-slider { --quote-slider-inner-pt: 3.75rem; --quote-slider-inner-pb: 6.9375rem; }
  .dpv2-quote-slider__inner { display: flex; flex-direction: column; gap: 3.75rem; padding-top: 3.75rem; padding-bottom: 2.5rem; }
  .dpv2-quote-slider__navigation { position: static; transform: none; }
  .dpv2-quote-slider__panel { padding-right: 1.5rem; padding-left: 1.5rem; }
  .dpv2-quote-slider__content { max-width: none; padding-left: 2rem; }
  .dpv2-quote-slider__quote p { font-size: 1.75rem; line-height: 1.3; }
  /* !important on --brand-h specifically: this custom property is also
     set inline per-slide (york-v2-home-testimonials.php writes
     style="--brand-h:...px" from the logo_height ACF field whenever a
     slide has one). An inline style — even just a custom property —
     always beats a normal stylesheet rule regardless of selector
     specificity or media query, so without !important here, any slide
     with a desktop-tuned custom logo_height keeps that same (often
     oversized) height at every breakpoint, mobile included, ignoring
     this override entirely. A stylesheet !important rule is the one
     thing that still wins over an inline style — same pattern already
     established elsewhere in this project for exactly this class of bug. */
  /* height !important directly (not just --brand-h) — the base rule now
     sets height: 3rem !important as a literal value rather than
     height: var(--brand-h), so changing the custom property alone no
     longer has anything reading it. Setting height itself here is what
     actually overrides the base rule at this breakpoint. */
  .dpv2-quote-slider__brand { height: 2.5rem !important; max-height: 3rem; }
  /* Difference */
  .dpv2-difference__container { padding-top: 3.75rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-difference__inner { gap: 2.5rem; }
  .dpv2-difference__header { grid-template-columns: 1fr; gap: 2.5rem; }
  .dpv2-difference__title { padding-right: 0; font-size: 2rem; letter-spacing: -0.02em; }
  .dpv2-difference__content { gap: 1.25rem; }
  .dpv2-difference__desc { font-size: 1.125rem; line-height: 1.45; }
  .dpv2-difference__grid { grid-template-columns: 1fr; }
  .dpv2-difference__card { min-height: 0; }
  .dpv2-difference__text { gap: 1rem; }
  .dpv2-difference__card-title { line-height: 1.25; }
  /* Content accordion */
  .dpv2-content-accordion__container { padding-top: 0; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-content-accordion__inner { gap: 2.5rem; }
  .dpv2-content-accordion__header { grid-template-columns: 1fr; gap: 2.5rem; }
  .dpv2-content-accordion__title { padding-right: 3.75rem; font-size: 2rem; letter-spacing: -0.02em; }
  .dpv2-content-accordion__desc { font-size: 1.125rem; line-height: 1.45; }
  /* Swaps to the dedicated mobile image + its own real aspect ratio
     (--dpv2-cta-bg-mobile / --dpv2-cta-ratio-mobile, set inline by the PHP
     template) instead of the earlier forced aspect-ratio: 1/1 on the
     desktop (landscape) photo — that approach mathematically cropped the
     wrong image into a mismatched shape, which is exactly what a properly
     mobile-composed photo avoids needing at all. Falls back to the
     desktop image/ratio if section_image_2 wasn't set for a given
     instance of this block (see the PHP template's fallback). */
  .dpv2-content-accordion__media {
    aspect-ratio: var(--dpv2-cta-ratio-mobile, var(--dpv2-cta-ratio-desktop, auto));
  }
  .dpv2-content-accordion__image--desktop { display: none; }
  /* No top/bottom/transform override needed anymore — the base rule's
     overscan is %-based now, so it already scales correctly to this
     image's own (mobile-specific) rendered height instead of assuming a
     fixed desktop-sized box. Parallax keeps working on mobile without
     the white-gap bug the old fixed-px overscan caused here. */
  .dpv2-content-accordion__image--mobile { display: block; top: 0;
    bottom: auto;}
  .dpv2-content-accordion__trigger { gap: 1.25rem; }
  .dpv2-content-accordion__trigger-main { gap: 0.25rem; }
  /* Icon left-justified within its 2rem box on mobile specifically, per
     feedback — base rule keeps it centered for desktop. */
  .dpv2-content-accordion__trigger-icon { justify-content: flex-start; }
  .dpv2-content-accordion__trigger-title { line-height: 1.25; }
  .dpv2-content-accordion__panel-inner { align-items: stretch; }
  .dpv2-content-accordion__panel-text { max-width: none; }
  .dpv2-content-accordion__cta-title { max-width: none; font-size: 1.625rem; letter-spacing: -0.01625em; }
  .dpv2-content-accordion__cta-title br{display: none;}
  .dpv2-content-accordion__cta-title-line, .dpv2-content-accordion__cta-title-break { display: none; }
  .dpv2-content-accordion__cta-title-mobile { display: inline; }
  /* Map comparison */
  .dpv2-map-comparison__container { padding-top: 3.75rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-map-comparison__inner { flex-direction: column; align-items: stretch; gap: 2.5rem; }
  .dpv2-map-comparison__content { padding-right: 0; gap: 2.5rem; }
  .dpv2-map-comparison__title { font-size: 2rem; letter-spacing: -0.02em; }
  .dpv2-map-comparison__desc { max-width: 100%; font-size: 1.125rem; line-height: 1.45; }
  .dpv2-map-comparison__copy { gap: 1.25rem; }
  .dpv2-map-comparison__map-wrap { width: 100%; margin-left: auto; margin-right: auto; }
  .dpv2-map-comparison__toggle { left: 50%; top: 19.9375rem; transform: translateX(-50%); }
  /* CTA */
  .dpv2-cta { padding: 7.5rem 1.5rem; }
  .dpv2-cta__media { overflow: hidden; }
  .dpv2-cta__image { inset: auto; height: 136.46%; left: -45.04%; top: -36.46%; width: 211.88%; }
  .dpv2-cta__inner { max-width: none; padding: 0 1.75rem; }
  .dpv2-cta__title { font-size: 2rem; letter-spacing: -0.01em; }
  .dpv2-thank-you__container { padding-top: 5rem; padding-bottom: 8.75rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-thank-you__image { width: 18.0625rem; height: 15.625rem; }
  .dpv2-thank-you__content { max-width: none; }
  .dpv2-thank-you__title { font-size: 2rem; letter-spacing: -0.01em; }
  .dpv2-thank-you__description { line-height: 1.45; }
  /* Contact */
  .dpv2-contact__container { padding-top: 3.75rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-contact__inner { gap: 5rem; }
  .dpv2-contact__layout { flex-direction: column; gap: 2.5rem; }
  .dpv2-contact__content { padding-right: 0; gap: 2.5rem; }
  .dpv2-contact__heading { font-size: 2.5rem; letter-spacing: -0.01em; }
  .dpv2-contact__description { font-size: 1.125rem; line-height: 1.45; }
  .dpv2-contact__form-card { width: 100%; padding: 2.5rem 1.25rem; }
  .dpv2-contact__hubspot form.hs-form { grid-template-columns: 1fr; row-gap: 1.875rem; }
  .dpv2-contact__hubspot .hs_firstname,
  .dpv2-contact__hubspot .hs_lastname,
  .dpv2-contact__hubspot .hs_jobtitle,
  .dpv2-contact__hubspot .hs-form-field[class*="hs-0-2"] { grid-column: 1 / -1; }
  .dpv2-contact__hubspot .hs-input { font-size: 1rem; line-height: 1.45; }
  .dpv2-contact__hubspot textarea.hs-input { min-height: 12.5rem; }
  .dpv2-contact__logos-heading { font-size: 1rem; }
  /* Blog grid */
  .dpv2-blog-grid__container { padding-top: 1.875rem; padding-bottom: 6.25rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  .dpv2-blog-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dpv2-blog-grid__title { padding-right: 0; line-height: 1.25; }
  .dpv2-blog-grid .dpv2-hero__toolbar { flex-direction: column; align-items: stretch; gap: 1.875rem; padding-bottom: 1.875rem; }
  .dpv2-blog-grid__inner{padding-top: 1.875rem;}
  .dpv2-blog-grid .dpv2-hero__search-form { width: 100%; }
  /* Platform approach */
  .plat-approach__container { padding-left: 2.5rem; padding-right: 2.5rem; }
  .plat-approach__heading { padding-right: 0; }
  .mobile-hidden{display: none;}
  .plat-hero .dp-hero__container, .plat-demo__container, .dp-section-container, .plat-datasets__container, .insights-section .container, .dp-section-container {padding-left: 1.5rem; padding-right: 1.5rem;}
  .plat-super {padding: 5.25rem 0 6.5rem;}
  .dp-split-header{gap: 2rem;}
  .plat-deeper, .plat-datasets { padding: 0px 0 5.5rem; }
  .plat-datasets__grid{grid-template-columns: repeat(2, 1fr);}
  .ab-hero__visual {
    margin-right: calc(-1 * max(1.5rem, (100vw - 90rem) / 2 + 7.5rem));
  }

  
}
@media (max-width: 900px) {
  /* Shared dp-* - 900px */
  .dp-section-container { padding: 0 2.5rem; }
  .dp-split-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .dp-num-grid, .dp-num-grid:has(.dp-num-grid__item:nth-child(5)) { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .dp-divider { margin: 3rem 0 1.5rem; }
  .dp-cta__inner { padding: 5rem 2rem; gap: 1.5rem; }
  /* Platform hero */
  .plat-hero h1 { font-size: 3rem; }
  .plat-hero .dp-hero__body { font-size: 1.125rem; }
  .plat-hero .dp-hero__container { padding-left: 2.5rem; padding-right: 2.5rem; }
  .plat-hero__layout { grid-template-columns: 1fr; gap: 2rem; align-items: end; }
  .plat-hero__intro { max-width: 100%; padding-bottom: 2rem; }
  .plat-hero__visual { display: none; }
  .plat-hero .dp-hero__video { object-position: center center; }
  /* The overlay's gradient stops (0/35/65/100%) are tuned for a wide,
     short desktop box — on a narrow, tall mobile viewport the same
     percentages cover proportionally much more vertical space, so the
     near-opaque dark portion near the top reads as a big flat, textureless
     patch instead of a subtle top-corner tint. Simplest fix: drop the
     overlay gradient entirely on mobile rather than trying to retune it. */
  .plat-hero .dp-hero__overlay { background: none; }
  /* Dataset hero */
  .ds-hero .dp-hero__overlay { background: none; }
  .ds-hero .dp-hero__container, .dp-section-container { padding-left: 1.5rem; padding-right: 1.5rem; }
  /* Demo */
  .plat-demo { padding: 2.5rem 0 0; }
  .plat-demo__container { padding: 0 1.5rem; }
  /* Superpowers / Teams */
  .plat-super { padding: 3.75rem 0 4rem; }
  .ds-teams { padding: 0 0 4rem; }
  /* Caps / Economy */
  .plat-caps { padding: 2.5rem 0 4rem; }
  .plat-caps .dp-split-header { gap: 1.5rem; }
  .ds-economy { padding: 2.5rem 0 4rem; }
  /* Go Deeper */
  .plat-deeper { padding: 0 0 4rem; }
  .plat-deeper__card { height: auto; gap: 2.5rem; padding: 2.5rem 1.25rem 0; }
  .plat-deeper__title { font-size: 1.5rem; }
  /* Datasets */
  .plat-datasets { padding: 0 0 5rem; }
  .plat-datasets__container { padding: 0 2.5rem; }
  .plat-datasets__header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
  .plat-datasets__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .plat-datasets__grid.grid-3 { grid-template-columns: repeat(1,1fr); }
  /* Approach */
  .plat-approach { padding: 4rem 0 5rem; }
  .plat-approach__container { padding-left: 1.75rem; padding-right: 1.75rem; }
  .plat-approach__cards { margin-top: 3rem; }
  /* Carousel */
  .dp-carousel-section { padding: 0 0 4rem; }
  .dp-slide { flex-direction: column; gap: 1.5rem; }
  .dp-slide-text { width: 100%; }
  .dp-slide-title { font-size: 1.625rem; }
  .dp-img-stack { flex: none; width: 100%; min-height: 18rem; }
  .dp-bar-label { font-size: 0.6875rem; }
  /* Insights */
  .insights-section { padding: 3.5rem 0 4rem; }
  .insights-section .container { padding: 0 2.5rem; }
  .insights-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .insights-grid { grid-template-columns: 1fr; gap: 2rem; }
  .insight-card h3 { font-size: 1.125rem; }
  /* Feature list */
  .fl-container { padding: 0 28px; }
  .fl-row { gap: 32px; padding: 30px 0; }
  .fl-title { font-size: 18px; }
  .dt-section { padding: 80px 0; }
  .dt-container { padding: 0 28px; }
  .dt-header { gap: 40px; margin-bottom: 48px; }
  .plat-deeper__preview{width:100%; height: 10rem;}
  .ab-hero__visual { width: 100%; margin-top: 0; }
}
@media (max-width: 767px) {
  /* Shared dp-* - 767px */
  .dp-section-container { padding: 0 1.5rem 1rem; overflow: hidden;}
  .plat-caps__preview {
      width: calc(100% + 15rem);
      box-shadow: 0 4px 12px 1px rgba(0, 0, 0, 0.30);
      overflow: hidden;
      border-radius: 8px;
      background: #0A0A0A;
  }
  .plat-caps{
    padding: 2rem 0 2rem;
  }
  .dp-num-grid, .dp-num-grid:has(.dp-num-grid__item:nth-child(5)) { grid-template-columns: 1fr; gap: 0; }
  .dp-num-grid__item { padding-top: 2.5rem; }
  /* Platform hero */
  .plat-hero { min-height: auto; }
  .plat-hero h1 { font-size: 2.5rem;
      letter-spacing: -0.4px; }
  .plat-hero h1 br{display: none;}
  .plat-hero .dp-hero__body { font-size: 1.125rem; }
  .plat-hero .dp-hero__container { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 4rem; }
  .plat-hero__intro { gap: 1.875rem; padding-bottom: 0; }
  /* Demo — closer to square on phone to match Figma mobile crop, instead
     of inheriting the wide desktop 16:9 video ratio. object-fit: cover
     keeps the poster/video frame centered without distorting it. */
  .plat-demo__video { aspect-ratio: 1 / 1; object-fit: cover; }
  /* Headings */
  .dp-split-header__heading { font-size: 2rem; }
  .dp-split-header__heading br{display: none;}
  .ds-feature__left{gap: 0.5rem;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: baseline;}
  .dp-num-grid__num{margin: 0 0 1.25rem;}
  .dp-split-header__desc:first-child {font-size: 1.125rem; line-height: 1.4;}
  /* Caps body text */
  .plat-caps .dp-split-header__desc {font-size: 1.125rem; line-height: 145%; }
  /* Go Deeper */
  .plat-deeper__title { font-size: 1.375rem; }
  /* Datasets */
  .plat-datasets__grid { grid-template-columns: 1fr; gap: 1rem; }
  .plat-datasets__heading { font-size: 1.875rem; }
  .plat-datasets__subheading { font-size: 1rem; }
  .plat-dataset-card__icon {width: 2rem; height: 2rem;}
  /* Approach */
  .plat-approach__header { grid-template-columns: 1fr; gap: 1.25rem; }
  .plat-approach__cards { flex-direction: column; gap: 1.875rem; }
  .plat-approach__card-hero { height: 12.5rem; }
  .plat-approach__card-title { font-size: 1.75rem; }
  .plat-approach__feature-text { font-size: 0.875rem; }
  /* Carousel - mobile horizontal slider */
  .dp-carousel-section { padding: 0 0 3rem; }
  /* Scoped override, just for this section's own .dp-section-container
     instance — the shared rule above (padding: 0 1.5rem 1rem; overflow:
     hidden) is exactly what was clipping the cards short of the true
     screen edges. Padding/overflow removed here so the track underneath
     can bleed edge to edge; the track's own padding-left/padding-right
     below take over the job of aligning card 1 to the left margin and
     the last card to the right margin, instead of the container doing it. */
  .dp-carousel-section .dp-section-container { padding-left: 0; padding-right: 0; overflow: visible; }
  .dp-carousel-wrap { background: transparent; border-radius: 0; padding: 0; gap: 1.25rem; overflow: hidden; }
  .dp-slide { display: none; }
  .dp-slide-title { font-size: 1.625rem; }
  /* padding-left raised to 1.5rem (from 1.25rem) to exactly match the
     standard content margin used elsewhere on mobile (.dp-section-
     container's own removed padding), so card 1 lines up with the same
     left margin as headings/body text above it. padding-right added (it
     had none before) so the LAST card has a real right-margin position to
     snap to — see the updateTrack() special-case for the final card in
     script.js, which now targets this padding specifically. */
  .dp-mobile-track { display: flex; gap: 0.75rem; padding-left: 1.25rem; padding-right: 1.5rem; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; }
  /* Widened slightly (calc(...) + 15px) per explicit "add 10-20px if it's
     not looking right" — a small buffer to make the last card's edge
     land closer to flush against the right margin in practice, given the
     exact math (viewport width ÷ card width ÷ gaps) doesn't always divide
     out perfectly on its own. */
  /* padding/gap updated to match the new Figma mobile-card spec exactly:
     20px top/right/left, 30px bottom, 30px gap between the text block and
     image (was a uniform 20px padding + 16px gap). border-radius (20px)
     and background were already correct. */
  .dp-mobile-card { flex: 0 0 calc(85% - 0.375rem + 15px); background: #F1EEEC; border-radius: 1.25rem; padding: 1.25rem 1.25rem 1.875rem 1.25rem; display: flex; flex-direction: column; gap: 1.875rem; overflow: hidden;}
  /* margin-right was a leftover desktop-oriented formula
     (max(7.5rem, (100vw - 90rem)/2 + 7.5rem)) that only actually varies
     above a 1440px viewport — inside this mobile-only media query (max
     767px) it always resolved to a flat -7.5rem (-120px), pulling the
     image edge way past the card's own boundary. Reduced to a small,
     fixed -1.25rem — exactly the card's own padding-right — so the image
     bleeds back out flush with the card edge instead of overshooting far
     past it. */
  /* border-radius only on the left corners (matches Figma's chat_image
     layer, which only lists top-left/bottom-left radius) — the right
     corners sit flush/square since the image bleeds past the card's own
     right edge there; rounding them would look like an odd cut instead of
     a clean bleed. */
  .dp-mobile-card__img {height: 21.25rem; border-radius: 1.25rem 0 0 1.25rem; overflow: hidden; flex-shrink: 0; margin-right: -1.25rem;}
  .dp-mobile-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
  .dp-indicators { gap: 0.625rem; overflow-x: auto; padding: 0 1.25rem 4px; scrollbar-width: none; display: none;}
  .dp-indicators::-webkit-scrollbar { display: none; }
  .dp-indicator { flex: 0 0 auto; min-width: 72px; }
  .dp-bar-label { font-size: 0.625rem; white-space: normal; }
  /* Insights */
  .insights-section { padding: 2.5rem 0 3rem; }
  .insights-header { grid-template-columns: 1fr; gap: 1.25rem; }
  .insights-divider { margin: 2.5rem 0 1.25rem; }
  .insights-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .insights-title h2 { font-size: 1.875rem; }
  .insights-content p { font-size: 1rem; }
  .insights-section .container {
      max-width: 100%;
      padding: 0 1.5rem;
  }
  /* CTA */
  .dp-cta__inner { padding: 7.5rem 1.5rem; gap: 1.25rem; }
  .dp-cta__heading { font-size: 1.875rem; }
  .dp-cta__body { font-size: 1rem; }
  /* Dataset page - 767px */
  .ds-hero { min-height: 580px; }
  .ds-economy .dp-split-header { margin-bottom: 1.75rem; }
  .ds-features { padding-bottom: 3rem; }
  .ds-feature { padding: 1.25rem 0; gap: 1rem; }
  .ds-datatypes { padding: 3.5rem 0 4rem; }
  .ds-datatypes__heading { font-size: 2rem; line-height: 1.15; letter-spacing: -0.32px; }
  .ds-datatypes__header { margin-bottom: 1.75rem; }
  .ds-datatypes__subheading { font-size: 1.25rem; line-height: 1.25; }
  .plat-caps__preview { margin-top: 2.5rem; }
  .plat-caps__preview-inner { padding: 0 1.25rem; }
  .plat-deeper__preview{width:100%; height: 6.313rem;}
  .dp-cta__bg{object-position: center;}
  /* Contact page */
  .dpv2-contact__hubspot form.hs-form fieldset.form-columns-2{flex-direction: column;gap: 1.875rem;}
  .dpv2-contact__hubspot form.hs-form fieldset.form-columns-2 div{width: 100%;}
  /* Blog grid */
  .dpv2-blog-grid__grid { grid-template-columns: 1fr; }
  /* Approach */
  .dpv2-approach__visual { margin-top: -2rem; }
  /* Footer */
  .dpv2-footer__links{flex-direction: column;}
  .dpv2-footer__col{width: 100%;}
  .dpv2-footer__legal { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .dpv2-footer__legal-item--copyright { order: 3; }
  .dpv2-footer__legal-item:nth-child(2) { order: 1; }
  .dpv2-footer__legal-item:nth-child(3) { order: 2; }
  .plat-demo__play {
      font-size: 1.125rem;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      padding: 1.125rem 1.688rem;
  }

  .plat-demo__play-icon {
      width: 1.313rem;
      height: 1.313rem;
      padding: 0.2rem;
  }
  .dp-section-container{padding: 0 1.5rem;}
  /* Testimonial/Quote Slider — column layout is already the default;
     only mobile-specific overrides remain here. */
  .dpv2-quote-slider__brand { max-width: 9.6875rem; }
  /* Second slide's logo needs no width cap — the general 9.6875rem max-width
     above was squeezing/clipping it specifically.
     nth-of-type(2), not nth-child(2): inside .dpv2-quote-slider__track, the
     .dpv2-quote-slider__media divs (one per slide with a background image)
     plus a single .dpv2-quote-slider__overlay div all come BEFORE the
     .dpv2-quote-slider__slide <article> elements in the DOM (see
     york-v2-home-testimonials.php) — so a .dpv2-quote-slider__slide is
     never actually the 2nd child of track, and the nth-child(2) version of
     this rule tried previously could never match anything. nth-of-type
     counts only by tag name among siblings (every .dpv2-quote-slider__slide
     is an <article>, nothing else in track is), so it correctly finds the
     2nd slide regardless of how many divs precede it. */
  .dpv2-quote-slider__track .dpv2-quote-slider__slide:nth-of-type(2) .dpv2-quote-slider__brand { max-width: none; }
  .dpv2-quote-slider__author-role { font-size: 1rem; }
      .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card-lottie {
        position: absolute;
        left: 28%;
        right: auto;
        top: auto;
        bottom: -30px;
        display: block;
        pointer-events: none;
        width: 100%;
    }
    .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards > .dpv2-header__mega-menu-item:nth-child(2) .dpv2-header__mega-card-lottie {
        transform: scale(1.1);
        top: auto;
        bottom: -40px;
    }
}
@media (max-width: 640px) {
  /* Shared dp-* - 640px */
  .dp-divider { margin: 2rem 0 1rem; }
  /* Sections */
  .plat-super { padding: 0 0 3rem; margin-top: 2.75rem;}
  .ds-teams { padding: 0 0 3rem; }
  .plat-caps { padding: 2rem 0 2rem; }
  .ds-economy { padding: 2rem 0 3rem; }
  .plat-datasets { padding: 3rem 0 4rem; }
  .plat-datasets__container { padding: 0 1.5rem; }
  /* Go Deeper */
  .plat-deeper { padding: 0 0 3rem; }
  .plat-deeper__card { border-radius: 1rem; gap: 2rem; }
  .plat-deeper__title { font-size: 1.375rem; }
  /* Approach */
  .plat-approach { padding: 3.75rem 0 5rem; }
  .plat-approach__container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .plat-approach__cards { margin-top: 2.5rem; }
  .plat-approach__card-body { padding: 0 0.875rem; gap: 2rem; }
  .plat-approach__dataset-tags { right: -1rem; top: unset; bottom: -2rem; align-items: flex-end; }
  /* Insights */
  .insights-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Feature list / Data types */
  .fl-section { padding: 56px 0; }
  .fl-container { padding: 0 20px; }
  .fl-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .fl-title { font-size: 17px; }
  .fl-desc { font-size: 15px; }
  .dt-section { padding: 60px 0; }
  .dt-container { padding: 0 20px; }
  .dt-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .dt-grid { grid-template-columns: 1fr; gap: 16px; }
  .dt-card { padding: 24px 22px 28px; }
  /* Dataset page - 640px */
  .ds-features { padding-bottom: 2.5rem; }
  .ds-feature { padding: 1rem 0; }
  .ds-datatypes { padding: 2.5rem 0 3rem; }
  .ds-datatypes__header { margin-bottom: 1.25rem; }
  .ds-datatype-card { padding: 1rem; }
  .ds-datatype-card__icon { margin-bottom: 0.875rem; }
  .ds-datatype-card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .ds-datatype-card__desc { font-size: 0.875rem; line-height: 1.4; }
  /* Approach cards — phone only */
  .dpv2-approach-cards__card-hero { height: auto; min-height: 14.5rem; gap: 1rem; }
  /* Lottie variant specifically: box size matched to the mobile Solutions
     submenu's own mega-card buttons (.dpv2-header__mega-card--lottie,
     height: 14rem, padding: 1.25rem) so these two "Platform"/"Dataset"
     patterns stay consistent across the site instead of each having their
     own one-off mobile size. Fixed height (not aspect-ratio) to match that
     reference exactly. */
  .dpv2-approach-cards__card-hero.dpv2-approach-cards__card-hero--lottie {
    width: 100%;
    height: 14rem;
    min-height: 14rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .dpv2-approach-cards__card-title { font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.01625rem; margin: 0; }
  .dpv2-approach-cards__card-desc { max-width: 50%; font-size: 0.875rem; line-height: 1.4;}
}
@media (max-width: 480px) {
  .insights-grid { gap: 1.75rem; }
  .dpv2-contact__submit-row{flex-direction: column-reverse; align-items: flex-start;}
}
@media (max-width: 380px) {
  .dp-mobile-card__img { height: 180px; }
  .dp-slide-title { font-size: 20px; }
  .dp-indicator { min-width: 60px; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-tags{right: -4rem; bottom: -2.8125rem; scale: 0.85;}
}
@media (min-width: 1025px) {
  :root { --dpv2-header-mega-duration: 0.32s; --dpv2-header-mega-ease: cubic-bezier(0.4, 0, 0.6, 1); }
  .dpv2-header { transition: background-color var(--dpv2-header-mega-duration) var(--dpv2-header-mega-ease); }
  .dpv2-header--mega-open { background-color: var(--color-white); }
  .dpv2-header--mega-open .dpv2-header__logo-img--inverse { display: none; }
  .dpv2-header--mega-open .dpv2-header__logo-img--default { display: block; }
  .dpv2-header--mega-open .dpv2-header__toggle-bar { background-color: var(--color-iron); }
  .dpv2-header--mega-open .dpv2-header__nav-link { color: var(--color-iron); transition: color var(--dpv2-header-mega-duration) var(--dpv2-header-mega-ease); }
  .dpv2-header__menu-panel--solutions,
  .dpv2-header__menu-panel--submenu { display: none !important; }
  .desktop-hidden{display: none;}
}
@media (min-width: 1440px) {
  .dpv2-header__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-header__mega-container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-footer__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-footer__bottom-container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-hero__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-hero--gt .dpv2-hero__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-approach__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-approach-cards__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-difference__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-content-accordion__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-map-comparison__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-blog-grid__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-thank-you__container { padding-left: 7.5rem; padding-right: 7.5rem; }
  .dpv2-contact__container { padding-left: 7.5rem; padding-right: 7.5rem; }
}
@media (min-width: 1600px) {
  html { font-size: 1vw; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-slide-title, .dp-img-layer, .dp-desc-line, .dp-bar-fill, .dp-mobile-track, .insight-card, .fl-row, .anim-fade-up, .anim-fade-left, .anim-fade-right, .dpv2-content-accordion__panel, .dpv2-content-accordion__toggle-bar, .dpv2-map-comparison__map-image, .dpv2-map-comparison__indicator-progress, .dpv2-blog-grid__image, .dpv2-contact__status, .dpv2-contact__status-icon, .dpv2-contact__status-icon::before, .dpv2-contact__status-icon::after, .dpv2-contact__hubspot .hs-input, .dpv2-contact__hubspot .hs-button.primary, .dpv2-quote-slider__slide, .dpv2-quote-slider__dot, .dpv2-quote-slider__dot-fill, .dpv2-header__mega, .dpv2-header__backdrop, .dpv2-header__nav-item--has-children, .dpv2-header__nav-item--has-children .dpv2-header__mega-cards > *, .dpv2-map-comparison__toggle-pill, .dpv2-map-comparison__toggle-btn { transition: none !important; }
  .insight-card { transform: none; }
  .anim-fade-up, .anim-fade-left, .anim-fade-right { opacity: 1 !important; transform: none !important; }
  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards > * { opacity: 1 !important; transform: none !important; }
  .dpv2-quote-slider__inner, .dpv2-cta__inner, .dp-cta__inner, .ab-cta__inner { transition: none !important; opacity: 1 !important; transform: none !important; }
  .dpv2-quote-slider__quote, .dpv2-quote-slider__brand, .dpv2-quote-slider__author-role { animation: none !important; opacity: 1 !important; }
  .dpv2-hero__logos-track { animation: none; }
  .dpv2-hero::before { animation: none; }
}

/* ══════════════════════════════════════════════════
   ABOUT PAGE — ab-* component styles
   1rem = 16px | borders/letter-spacing use px only
══════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────── */
.ab-hero {
  background: var(--color-white);
  padding:5.25rem 0 0;
  overflow-x: clip;
}
.ab-hero .dp-section-container { overflow: visible; }
.ab-hero__layout {
  display: grid;
  /* heading occupies col 1 row 1, text occupies col 1 row 2,
     visual spans both rows in col 2 — same visual result as before
     but heading is now a direct grid child so mobile can reorder it. */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2.5rem;
}
.ab-hero__layout > .ab-hero__heading {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-right: 3.75rem;
}
.ab-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  padding-right: 3.75rem;
  grid-column: 1;
  grid-row: 2;
}
.ab-hero__visual {
  grid-column: 2;
  grid-row: 1 / 3;
}
.ab-hero__heading {
  color: var(--color-data);
  font-family: var(--font-heading);
  font-size: 4.375rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.7px;
  margin: 0;
}
.ab-hero__body--lead {
  color: var(--color-iron);
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}
.ab-hero__body {
  color: var(--color-iron);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
.ab-hero__visual {
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  margin-top: 11.625rem;
  margin-right: calc(-1 * max(7.5rem, (100vw - 90rem) / 2 + 7.5rem));
}
.ab-hero__illustration {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom left;
}

/* ── VALUES ──────────────────────────────────────── */
.ab-values { padding: 5rem 0 7.5rem; background: var(--color-white); }
.ab-values__header { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-bottom: 5rem; }
.ab-values__heading { margin: 0; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025rem; color: var(--color-iron); }
.ab-values__body { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 0.375rem; }
.ab-values__intro { color: var(--color-iron); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; margin: 0; }
.ab-values__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; }
.ab-value { border-top: 1px solid var(--color-data); padding-top: 1.875rem; }
.ab-value__num { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--color-data); margin: 0 0 2.5rem; letter-spacing: 0.02em; }
.ab-value__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; color: var(--color-iron); margin: 0 0 0.75rem; }
.ab-value__desc { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: var(--color-concrete); line-height: 1.6; margin: 0; }

/* ── FULL-WIDTH PHOTO (parallax) ─────────────────── */
/* Image extends 60px beyond container on each side (top:-60px, height:calc(100%+120px))
   so the JS translateY has room to drift without revealing empty space.
   Using px not % because the parent height comes from aspect-ratio, not an
   explicit height, so percentage heights on absolutely-positioned children
   would resolve to auto/0. JS multiplier = 0.9 for a strong drift. */
.ab-photo { width: 100%; aspect-ratio: 16/7; overflow: hidden; display: block; margin-bottom: 5rem; position: relative; }
.ab-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom center; display: block; transform: translateY(var(--ab-photo-parallax, 0px)); will-change: transform; }
@media (max-width: 767px) {
  .ab-photo img { object-position: bottom center; }
}

/* ── STORY ───────────────────────────────────────── */
.ab-story { padding: 6rem 0; background: var(--color-white); }
.ab-story__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.ab-story__heading { margin: 0; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025rem; color: var(--color-iron); }
/* Both paragraphs now use the same 1.5rem bottom margin (was 1.25rem for
   the first paragraph, 1.5rem via margin-top on the last one instead) —
   per feedback preferring the larger of the two inconsistent gaps for
   both. Simplified to one consistent margin-bottom on every paragraph
   rather than relying on the last paragraph's margin-top and standard
   margin collapsing to produce the right visual gap, which is more
   straightforward to reason about and less prone to being affected by
   collapsing edge cases. */
/* margin-bottom corrected to 2.5rem (40px) — confirmed against the Figma
   spec directly (Frame 76's own layout gap: 2.5rem between these two text
   blocks), not the 1.5rem this was set to on the earlier "prefer the
   larger of the two gaps" guess. */
.ab-story__text { color: var(--color-iron); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; margin: 0 0 2.5rem; }
.ab-story__text:last-of-type { margin-bottom: 0; }

/* ── BELIEVERS ───────────────────────────────────── */
/* max-width + margin: 0 auto added to match .dp-section-container (which
   .ab-story and every other section on this page use to wrap their
   content) — without it, this section had no width cap at all, so on
   viewports wider than 90rem + 15rem of padding it just hugged 7.5rem from
   the actual browser edge instead of being centered the same way as
   everything above/below it, landing further left/right than "Our story". */
.ab-believers { display: grid; justify-content: center; align-items: flex-start; gap: 2.5rem; align-self: stretch; width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 7.5rem 6.25rem; background: var(--color-white); grid-template-columns: 1fr 1fr; align-items: start;}
.ab-believers__heading { margin: 0; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025rem; color: var(--color-iron); flex: 0 0 50%; }
.ab-believers__list { list-style: none; padding: 0; margin: 0; flex: 1; }
.ab-believers__item { display: flex; padding: 1.25rem 0.25rem; justify-content: space-between; align-items: center; align-self: stretch; border-top: 1px solid rgba(63, 60, 58, 0.25); background: var(--color-white); }
.ab-believers__item:last-child { border-bottom: 1px solid rgba(63, 60, 58, 0.25); }
.ab-believers__link { display: flex; align-items: center; justify-content: space-between; width: 100%; text-decoration: none; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--color-iron); transition: color 0.2s ease; }
.ab-believers__link:hover { color: var(--color-data); }
.ab-believers__link svg { flex-shrink: 0; color: var(--color-concrete); transition: color 0.2s ease, transform 0.2s ease; width: 1.5rem; height: 1.5rem; padding: 0.188rem;}
.ab-believers__link:hover svg { color: var(--color-data); transform: translate(2px, -2px); }

/* ── CTA ─────────────────────────────────────────── */
.ab-cta { position: relative; padding: 7rem 0; overflow: hidden; text-align: center; }
.ab-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ab-cta__overlay { position: absolute; inset: 0; background: rgba(10, 12, 35, 0.82); z-index: 1; }
.ab-cta__inner { position: relative; z-index: 2; max-width: 42rem; margin: 0 auto; padding: 0 1rem; }
.ab-cta__heading { color: var(--color-white); font-family: var(--font-heading); font-size: clamp(1.75rem, 1.5rem + 1.06vw, 2.5rem); font-weight: 400; line-height: 1.15; margin: 0 0 2rem; }
/* Yellow button variant — same background as base .btn but explicit,
   used for platform hero / "Book a Demo" modals. */
.btn--yellow { background: var(--color-hi-vis); color: #2E3000; }

/* ── ABOUT RESPONSIVE ───────────────────────────── */
@media (max-width: 1199px) {
  
  .ab-believers{ padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* ── tablet ≤ 1023px ─── */
@media (max-width: 1023px) {
  /* hero */  
  .ab-hero { padding: 3rem 0 0; }
  .ab-hero__layout { display: flex; flex-direction: column; gap: 2.5rem; }
  .ab-hero__layout > .ab-hero__heading { padding-right: 0; }
  .ab-hero__text { padding-right: 0; gap: 1.5rem; }
  
  .ab-hero__heading { font-size: 3rem; }
  .ab-hero__body--lead { font-size: 1.25rem; }

  /* values */
  .ab-values { padding: 4rem 0 5rem; }
  .ab-values__header { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
  .ab-values__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  /* photo */
  .ab-photo { aspect-ratio: 16/7; margin-bottom: 3rem; width: calc(100% + 1.5rem); margin-right: -1.5rem; }

  /* story */
  .ab-story { padding: 4rem 0; }
  .ab-story__layout { grid-template-columns: 1fr; gap: 2rem; }

  /* believers */
  .ab-believers { flex-direction: column; grid-template-columns: 1fr; align-items: stretch; padding: 0 2.5rem 4rem; gap: 2rem; padding-left: 1.5rem; padding-right: 1.5rem;}
  .ab-believers__heading { flex: none; }

  /* cta */
  .ab-cta { padding: 5rem 0; }
  .ab-hero__visual { width: calc(100% + 1.5rem); margin-top: 0; margin-right: -1.5rem;}
}

/* ── mobile ≤ 767px ─── */
@media (max-width: 767px) {
  /* hero */
  .ab-hero { padding: 2rem 0 0; }
  /* Reorder on mobile: heading → illustration → copy */
  .ab-hero__layout { gap: 1.5rem; }
  .ab-hero__layout > .ab-hero__heading { order: 1; }
  .ab-hero__visual { order: 2; }
  .ab-hero__text { order: 3; gap: 1rem; }
  .ab-hero__heading { font-size: 2.5rem; letter-spacing: -0.4px; }
  .ab-hero__body--lead { font-size: 1.125rem; }
  .ab-hero__body { font-size: 0.9375rem; }

  /* values */
  .ab-values { padding: 3rem 0 4rem; }
  .ab-values__heading { font-size: 2rem; }
  .ab-values__header { gap: 1rem; margin-bottom: 2rem; }
  .ab-values__grid { grid-template-columns: 1fr; gap: 0; }
  .ab-value { padding-top: 1.25rem; padding-bottom: 1.25rem; border-top: 1px solid var(--color-data); border-bottom: none; }
  .ab-value:last-child { border-bottom: 1px solid var(--color-data); }
  .ab-value__num { margin-bottom: 0.75rem; }

  /* photo */
  .ab-photo { aspect-ratio: 3/2; margin-bottom: 0; width: 100%; margin-right: 0; }

  /* story */
  .ab-story { padding: 3rem 0; }
  .ab-story__heading { font-size: 2rem; }

  /* believers */
  .ab-believers { padding: 0 1.5rem 3rem; gap: 1.5rem; }
  .ab-believers__heading { font-size: 2rem; }
  .ab-believers__link { font-size: 1rem; }
  .ab-believers__item { padding: 1rem 0.25rem; }

  /* cta */
  .ab-cta { padding: 4rem 0; }
  .ab-cta__inner { padding: 0 1.5rem; }
  .ab-cta__heading { margin-bottom: 1.5rem; }
  .ab-hero__visual { width: calc(100% + 1.5rem); margin-top: 0; margin-right: -1.5rem; }

}

/* ══════════════════════════════════════════════════
   POPUP FORM MODAL — self-contained, no Bootstrap JS
   dependency. Powers every popup form on the site that
   uses the shared data-bs-toggle="modal" / data-bs-target /
   data-bs-dismiss="modal" markup convention (Book a demo,
   Talk to Us, blog CTA popups, etc. — see script.js for the
   matching JS). Written from scratch rather than relying on
   Bootstrap's modal CSS/JS, since Bootstrap's JS bundle isn't
   reliably loaded on every page here — the popup was rendering
   as plain inline content instead of an overlay because of that.
══════════════════════════════════════════════════ */
/* No separate backdrop element — matches production's exact approach
   (confirmed live via DevTools: .cta-form.show carries the dim background
   directly, z-index: 9999 !important, no sibling .modal-backdrop div at
   all). Putting the dark tint straight on .modal itself means the dialog/
   content inside it can never end up on the wrong side of a cross-element
   z-index fight — there's only one element's stacking to worry about. */
/* !important throughout this block: Bootstrap's own CSS is loaded from a
   CDN in york-block.php, and its default .modal/.modal-dialog/.modal-content
   rules have the exact same specificity as these (single class selectors),
   so whichever one loads later in the page wins by source order alone —
   which was silently overriding these with Bootstrap's un-centered,
   plain-white defaults. !important removes source order from the equation
   entirely. (Production's own CSS does the same thing for the same reason
   — see .cta-form.show { z-index: 9999 !important; } confirmed live.) */
/* Direct flex-centering on .modal itself, rather than the nested
   min-height + align-items trick on .modal-dialog (Bootstrap's own
   approach) — that combination wasn't actually centering vertically in
   practice. Centering the dialog directly on the outer, guaranteed-full-
   viewport-height .modal element is simpler and has fewer edge cases.

   margin: auto on the dialog itself, NOT align-items: center on .modal —
   align-items: center combined with a scrollable overflow container has a
   well-known issue where content taller than the viewport gets centered by
   pushing its top edge out of reach instead of leaving it scrollable,
   which is exactly the "title hidden behind the header" cut-off seen live.
   margin: auto on a flex child centers the same way but safely clamps so
   the start edge stays reachable by scrolling when content overflows. */
.modal { display: flex !important; position: fixed !important; inset: 0 !important; z-index: 9999 !important; overflow-y: auto !important; outline: 0 !important; padding: 1.75rem 1rem !important; background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(0) !important; -webkit-backdrop-filter: blur(0) !important; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out, visibility 0s linear 0.3s; }
.modal.dpv2-modal-open { display: flex !important; justify-content: center !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; backdrop-filter: blur(1.875rem) !important; -webkit-backdrop-filter: blur(1.875rem) !important; transition: opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out, visibility 0s linear 0s !important; }
.modal-dialog { position: relative !important; width: 100% !important; margin: auto !important; max-width: 31.25rem !important; }
/* Settled at 50rem/800px — a DevTools computed-style dump of production
   confirmed this is Bootstrap's actual --bs-modal-width for .modal-lg
   (@media min-width: 992px), the real ground truth after several rounds
   of guessing at this value from visual comparison alone (62.5rem, then
   48rem, then 68.75rem — all wrong). */
.modal-dialog.modal-lg { max-width: 46.25rem !important; }
.modal-dialog.modal-dialog-centered { display: block !important; }
.single-post .modal.fade .modal-dialog { top: 50%; transform: translate(0, -40%); }
.modal-content { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; pointer-events: auto !important; background: var(--color-white) !important; background-clip: padding-box !important; border-radius: 0.75rem !important; outline: 0 !important; box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.25) !important; }
.modal-header { display: flex !important; align-items: center !important; justify-content: flex-end !important; padding: 1rem 1rem 0 !important; border: 0 !important; }
.modal-body { position: relative !important; flex: 1 1 auto !important; padding: 0 2rem 2rem !important; }
.modal-body h3 { margin: 0 0 1.5rem; }
.modal .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: 0.5; cursor: pointer; }
.modal .btn-close:hover { opacity: 0.75; }
body.dpv2-modal-open-body { overflow: hidden; }
/* Matches production's defensive stacking (confirmed live): while a modal
   is open, explicitly demote main/footer's own stacking so nothing inside
   them — regardless of whatever z-index they might carry internally —
   can ever render above the modal's z-index: 9999, even if some element
   in there has an unusually high z-index of its own. */
body.dpv2-modal-open-body main { overflow: visible; position: relative; z-index: 2; }
body.dpv2-modal-open-body footer { position: relative; z-index: 0; }
@media (max-width: 640px) {
  .modal-dialog, .modal-dialog.modal-lg { max-width: 100%; margin: 3rem auto 1rem; }
  .modal-body { padding: 0 1.25rem 1.5rem; }
}

/* .cta-form skin — clean card look matching the Contact page form card
   (var(--color-sidewalk) background, 1.25rem border-radius, no blue border chrome).
   Previously used a blue #4357ee outer frame; now matches the dpv2-contact
   form card style per design request. */
.cta-form { text-align: left !important; }
.cta-form .cta-form-box .hs_submit { margin-top: 0 !important; }
/* No outer chrome — transparent container so only the inner card shows */
.cta-form .modal-content { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.cta-form .modal-header { height: 0 !important; border: 0 !important; position: absolute !important; width: 100% !important; top: 0 !important; padding: 0 !important; }
/* Close button — sits inside the top-right corner of the modal card */
.cta-form button.btn-close {
  position: absolute !important;
  right: 0.75rem !important;
  top: 0.75rem !important;
  background-color: transparent !important;
  opacity: 0.35 !important;
  border-radius: 0 !important;
  background-size: 0.75rem !important;
  padding: 0.7rem;
  z-index: 9;
}
.single-post .cta-form button.btn-close { filter: inherit; }
/* Heading inside the card */
.cta-form h3 { font-size: 1.5rem !important; font-style: normal !important; font-weight: 700 !important; line-height: 1.875rem !important; margin-bottom: 1.5625rem !important; color: var(--color-iron) !important; text-transform: lowercase; }
.cta-form h3::first-letter { text-transform: uppercase; }
.cta-form .cta-form-box { min-height: 6.25rem !important; }
/* Skeleton loader — fills the modal body while HubSpot fetches form fields.
   :not(:has(.hbspt-form)) is true until HubSpot injects its wrapper div,
   at which point the skeleton vanishes automatically with no JS needed.
   Uses the same shimmer keyframes as the Contact page loading state. */
.cta-form .cta-form-box:not(:has(.hbspt-form)) {
  min-height: 18rem !important;
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: dpv2-contact-skeleton-pulse 1.5s ease infinite;
}
/* Card body — sidewalk background + rounded corners matching Contact page card */
.cta-form .modal-body { border-radius: 1.25rem !important; background: var(--color-sidewalk) !important; padding: 2.5rem 1.875rem 2.5rem !important; font-family: var(--font-body); }
.cta-form .modal-body h3 { font-family: var(--font-heading); }
/* Field labels and placeholders in title case; textarea uses sentence case */
.cta-form .modal-content .hs-form-field > label { text-transform: capitalize; }
.cta-form .modal-content .hs-input::placeholder { text-transform: capitalize; }
.cta-form .modal-content .hs-fieldtype-textarea.hs-input::placeholder { text-transform: none; }
.cta-form .modal-content .hs-input { font-family: var(--font-body) !important; }
.cta-form .modal-content .hs-submit .actions input[type="submit"] { font-family: var(--font-heading) !important; }
@media (max-width: 640px) {
  .cta-form button.btn-close { right: 0.75rem !important; top: 0.75rem !important; }
  .cta-form .modal-body { padding: 1.5rem !important; }
}

/* Popup form field styling — given scoped to .banner-section (the older
   hero block's section class), but this modal now lives as a direct child
   of <body> (see the re-parenting fix in script.js, needed to escape a
   transformed ancestor), so it's no longer nested inside .banner-section
   at all. Scoping from .cta-form .modal-content instead, which is present
   regardless of where in the page the modal originated. */
/* Verified via a live DevTools computed-style dump of production: the
   winning cascade there combines border-bottom (underline) with a white
   background AND 11px padding on top/right/bottom (only padding-left is
   overridden back to 0) — not the padding: 0 0 0.25rem this had before. */
.cta-form .modal-content input.hs-input {
  border: 0;
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  width: 100% !important;
  box-sizing: border-box;
  font-size: 1.125rem;
  color: #383736;
  min-width: auto;
  background: transparent;
  padding: 0.6875rem 0 0.6875rem 0;
}
.cta-form .modal-content input.hs-input:focus {
  border: 0;
  outline: none;
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.3);
}
.cta-form .modal-content .hs-form-field .input {
    margin-right: 0 !important;
}
.cta-form .modal-content .hbspt-form .hs-form-private { display: block; }
/* Labels hidden — matches HubSpot's own injected per-form-instance style
   (.hbspt-form .hs-form-field > label { display: none }) confirmed via
   the same DevTools dump; the "First Name*" text visible on production
   is the input's placeholder attribute, not a separate visible label. */
.cta-form .modal-content .hs-form-field > label { display: none; }
/* !important added throughout this block — HubSpot injects its own
   per-form-instance <style> tag at render time (scoped to that exact form
   ID) which sets fieldset { margin: 0 } directly; a plain margin-bottom
   here wasn't taking effect against that. Targeting .hs-form-field too,
   not just the fieldset, as a second layer of insurance in case this
   form's actual field-wrapper nesting differs from what was assumed.
   margin-bottom reverted to 1.25rem/20px — verified via the DevTools
   dump (was widened to 2.5rem/40px for an earlier "needs more spacing"
   request, but the actual production value is 20px, achieved partly via
   this margin and partly via the input's own 11px padding above). */
/* Uniform row spacing on every fieldset — keeps gap identical between
   2-column rows (First/Last) and 1-column rows (Email, Job title, etc.) */
.cta-form .modal-content fieldset { margin-bottom: 0 !important; }
.cta-form .modal-content fieldset:last-of-type { margin-bottom: 0 !important; }
.cta-form .modal-content fieldset.form-columns-2 {
  max-width: initial !important;
  display: flex;
  gap: 1.875rem;
}
.cta-form .modal-content .form-columns-1 { max-width: initial !important; width: 100% !important; }
/* Inner .input wrapper must also be full width so the input reaches the right margin */
.cta-form .modal-content .form-columns-1 .hs-form-field .input { width: 100%; }
.cta-form .modal-content .hs-form-field { margin-bottom: 1.25rem !important;}
/* Boxed style (light tinted background + border) instead of a plain
   underline — matches the reference popup on dataplor.com's main
   "Talk to Us" modal, where the message textarea is visually distinct
   from the underlined text inputs above it. */
.cta-form .modal-content .hs-fieldtype-textarea.hs-input {
  border: 0;
  border-radius: 0.625rem !important;
  background: var(--color-white);
  padding: 0.625rem 0.75rem !important;
  width: 100% !important;
  font-size: 1.125rem;
  color: #383736;
  font-weight: 400;
  min-height: 7rem;
  resize: vertical;
  text-transform: none;
}
.cta-form .modal-content .hs-fieldtype-textarea.hs-input:focus {
  border: 0;
  outline: none;
}
/* reCAPTCHA badge hidden entirely — matches the reference popup, which
   shows no visible reCAPTCHA badge at all (Google still requires the
   underlying verification to run for spam protection; only the visible
   badge UI is hidden here, same pattern already used for the separate
   contact-page form via .dpv2-contact__hubspot .hs_recaptcha). */
.cta-form .modal-content .hs_recaptcha.hs-recaptcha.field.hs-form-field { display: none !important; }
.cta-form .modal-content .hs_submit.hs-submit { display: flex; justify-content: start; }
.cta-form .modal-content .grecaptcha-badge { margin-left: auto; }
/* Submit button — matches the site's standard .btn-blue look (pill shape,
   blue fill, white arrow) instead of a custom yellow sliding-fill button.
   Can't literally reuse .btn's own ::after arrow here because this is an
   <input type="submit">, not an <a> — input elements are replaced elements
   and don't render ::before/::after generated content in any browser.
   Using a background-image arrow instead is the exact same technique this
   site already relies on for this exact problem elsewhere — see
   .dpv2-contact__hubspot .hs-button.primary further up this file, which
   solves the identical "make an <input> look like .btn" case the same way. */
.cta-form .modal-content .actions {
  display: inline-flex;
  width: auto;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  position: static;
}
.cta-form .modal-content .actions::before { display: none; }
.cta-form .modal-content input.hs-button.primary.large {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 1.125rem 1.375rem;
  padding-right: 3rem;
  border: 0;
  border-radius: var(--radius-btn);
  background-color: var(--color-data);
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2715%27%20height%3D%2712%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M14.8623%205.95459C15.0439%205.77295%2015.0439%205.47412%2014.8623%205.29248L9.70605%200.13623C9.52441-0.0454102%209.22559-0.0454102%209.04395%200.13623C8.86231%200.317871%208.86231%200.616699%209.04395%200.79834L13.4004%205.15479H0.46875C0.210938%205.15479%200%205.36572%200%205.62354C0%205.88135%200.210938%206.09229%200.46875%206.09229H13.4004L9.04395%2010.4487C8.86231%2010.6304%208.86231%2010.9292%209.04395%2011.1108C9.22559%2011.2925%209.52441%2011.2925%209.70605%2011.1108L14.8623%205.95459Z%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat;
  background-position: calc(100% - 1.375rem) center;
  background-size: 0.9375rem 0.75rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s ease all;
}
.cta-form .modal-content input.hs-button.primary.large:hover { padding-right: 3.25rem; }

/* Yellow variant — used by popups triggered from a plain yellow .btn CTA
   (e.g. the Platform hero's "Book a Demo" button) rather than a .btn-blue
   one, matching production's own Platform-page popup (confirmed via
   screen recording: its submit button is yellow, not blue, unlike the
   homepage's popup). Add class="cta-form--yellow" alongside .cta-form on
   the modal to opt into this instead of the default blue submit button. */
.cta-form--yellow .modal-content input.hs-button.primary.large {
  background-color: var(--color-hi-vis);
  color: #2E3000;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2715%27%20height%3D%2712%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M14.8623%205.95459C15.0439%205.77295%2015.0439%205.47412%2014.8623%205.29248L9.70605%200.13623C9.52441-0.0454102%209.22559-0.0454102%209.04395%200.13623C8.86231%200.317871%208.86231%200.616699%209.04395%200.79834L13.4004%205.15479H0.46875C0.210938%205.15479%200%205.36572%200%205.62354C0%205.88135%200.210938%206.09229%200.46875%206.09229H13.4004L9.04395%2010.4487C8.86231%2010.6304%208.86231%2010.9292%209.04395%2011.1108C9.22559%2011.2925%209.52441%2011.2925%209.70605%2011.1108L14.8623%205.95459Z%27%20fill%3D%27%232E3000%27%2F%3E%3C%2Fsvg%3E") !important;
}

/* Error messages / submitted confirmation */
.cta-form .modal-content ul.hs-error-msgs { list-style: none; padding: 0; margin: 0;}
.cta-form .modal-content .hbspt-form .hs-form-private p { font-size: 0.875rem !important; margin-bottom: 0; }
/* font-size added — previously unset, so it inherited HubSpot's default,
   which rendered as large as the field labels themselves (per feedback,
   too big for an inline validation message). */
.cta-form .modal-content ul.hs-error-msgs label.hs-error-msg.hs-main-font-element { display: block !important; color: #ff0000; max-width: 20rem; font-size: 0.8125rem; margin-top: 0.25rem; }
.cta-form .modal-content .hs-form-private > .hs_error_rollup { display: none; }
.cta-form .modal-content .submitted-message.hs-main-font-element { color: #333; border: 0.0625rem solid #333; padding: 0.3125rem 0.625rem; border-radius: 0.25rem; }

/* Responsive: stack the two-column fieldset (first/last name) into one
   column, and keep the submit button/recaptcha from overflowing the
   narrower modal width.
   NOTE: these @media blocks must come AFTER all desktop .cta-form rules
   so they win the cascade (same specificity, later source order wins). */
@media (max-width: 1024px) {
  .cta-form .modal-body { padding: 2rem 1.5rem 2rem !important; }
  .cta-form button.btn-close { right: 0.75rem !important; top: 0.75rem !important; }
  .cta-form .modal-content fieldset.form-columns-2 { flex-direction: column; gap: 0; margin-bottom: 0; }
  .cta-form .modal-content .form-columns-2 .hs-form-field { width: 100% !important; }
  .cta-form .modal-content .form-columns-2 .hs-form-field .input { width: 100% !important; }
  .cta-form .modal-content .hs_submit.hs-submit { justify-content: flex-start; }
  .cta-form .modal-content input.hs-button.primary.large { width: auto; justify-content: center; }
}
@media (max-width: 640px) {
  .cta-form .modal-content fieldset.form-columns-2 { flex-direction: column; gap: 0; margin-bottom: 0; }
  .cta-form .modal-content .form-columns-2 .hs-form-field { width: 100% !important; }
  .cta-form .modal-content .form-columns-2 .hs-form-field .input { width: 100% !important; }
  .cta-form .modal-content .hs_submit.hs-submit { justify-content: flex-start; }
  .cta-form .modal-content .grecaptcha-badge { margin: 0 auto; }
  .cta-form .modal-content input.hs-button.primary.large { width: auto; justify-content: center; padding: 1.125rem 1.375rem; padding-right: 3rem; }
  .cta-form .modal-content .actions { width: auto; }
  .cta-form .modal-body { padding: 1.5rem !important; }
}

/* =============================================
   Blog / Resource Detail & Listing CSS
   ============================================= */

/* Resource listing */
.resource-list { padding: 60px 0; }
.resource-list .single-resouece { box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); height: 100%; transition: 0.5s; }
.resource-list .single-resouece:hover { box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.11); }
.resource-list .single-resouece img { transition: 0.5s; }
.resource-list .single-resouece:hover img { transform: scale(1.010); transition: 0.5s; }
.resource-list a { text-decoration: none; }
.resource-list .resource-content { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 150px); }
.resource-list img.resource-img { width: 100%; height: 150px; object-fit: cover; }
.resource-list span.resource-date { font-size: 14px; font-weight: 700; color: #363C44; }
.resource-list .resource-content h3 { color: #363C44; font-size: 22px; font-weight: 700; line-height: 28px; margin-top: 10px; }
.resource-list .resource-tags { margin-top: 16px; color: #363C44; margin-bottom: 0; }
.resource-list .resource-tags span { font-size: 14px; font-weight: 400; border-radius: 6px; background: #ecf2ff; padding: 8px 7px; }
.resource-list .col-lg-4.col-md-6 { margin-bottom: 30px; }
.resource-list .resouece-no-img .col-lg-12 { margin-bottom: 30px; }
.resource-list .resouece-no-img { margin-bottom: 40px; }
.resource-list .resouce-filter { display: flex; justify-content: space-between; margin-bottom: 0; }
.resource-list .resouce-filter .search-box { position: relative; }
.resource-list .resouce-filter img.search-icon { position: absolute; left: 10px; top: 16px; }
.resource-list .resouce-filter input.form-control { padding: 11px; padding-left: 36px; min-width: 350px; border-radius: 4px; border-color: #c4c4c4; }
.resource-list .resouce-filter input.form-control::placeholder { color: #959595; }
.resource-list .resouce-filter select.form-select { padding: 10px 40px 10px 10px; border-radius: 4px; border-color: #d9d9d9; }
.resource-list nav { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.resource-list nav span, .resource-list nav a { padding: 3px 10px; border: 1px solid transparent; transition: 0.5s; border-radius: 4px; }
.resource-list nav a { color: #3444ba; }
.resource-list nav a:hover { background: #3444ba; color: #fff !important; }
.resource-list nav span { color: #363C44; border: 1px solid #bfbfbf; background: rgba(255, 255, 255, 0.07); }
.resource-list span.page-numbers.dots { border: 0; }
.search-filter-results .resource-list .single-resouece { border-radius: 0.625rem; }
.search-filter-results .resource-list .single-resouece .resource-img { border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; }

/* Blog detail banner */
.resource-detail { height: 300px; padding: 0 !important; }
.resource-detail h1 { position: absolute; left: 0; width: 42%; text-align: left !important; bottom: 0; padding: 34px; font-size: 38px; font-weight: 700; line-height: 46px; background: rgba(22, 22, 22, 0.6); margin: 0; }
.resource-detail .owl-stage-outer.owl-height { height: 300px !important; z-index: 0; }
.single-post .dp-cta__inner{max-width: 49%; margin: 0 auto;}
.single-post {transform: inherit; min-height: inherit;}
.single-post .cta-form .cta-form-box:not(:has(.hbspt-form)){min-height: inherit; border-radius: inherit; background: inherit; background-size: unset; animation: initial;}
/* Blog detail content */
.resource-detail-box { padding: 30px 0; }
.resource-detail-box .resourse-content h1, .resource-detail-box .resourse-content h2 { font-size: 2.375rem; font-weight: 700; line-height: normal; margin: 10px 0 20px 0; }
.resource-detail-box .resourse-content p { font-size: 16px; font-weight: 400; line-height: 24px; color: #363C44; }
.resource-detail-box .resourse-content p b { font-size: 20px; line-height: 24px; }
.resource-detail-box .resourse-content .resource-date { margin-bottom: 0; font-size: 14px; font-weight: 700; line-height: normal; }
.resource-detail-box .resourse-content .resource-date span { font-weight: 400; }
.resource-detail-box .resourse-content p.resource-tags { margin-bottom: 35px; }
.resource-detail-box .resourse-content p.resource-tags span { font-size: 14px; font-weight: 400; border-radius: 6px; background: #ecf2ff; padding: 8px 7px; }
.resource-detail-box .resource-content-top { display: flex; justify-content: space-between; }
.resource-detail-box .resource-content-top .resouce-share { display: flex; gap: 5px; }
.resource-detail-box .col-lg-9.resourse-content { padding-right: 40px; }
.resource-detail-box .resource-might-like h2 { font-size: 14px; font-weight: 700; line-height: normal; margin-bottom: 15px; }
.resource-detail-box .resource-might-like a { text-decoration: none; color: #2c3ba9; font-size: 14px; font-weight: 700; line-height: normal; margin-bottom: 20px; display: block; }
.resource-detail-box .resourse-content p a { color: #4152f3; text-decoration: none; border-bottom: 1px solid #4152f3; }

/* Blog detail HubSpot form */
.resource-detail-row .hs-form-private { display: flex; align-items: self-start; gap: 20px; }
.resource-detail-row .hs_email.hs-email.hs-fieldtype-text.field.hs-form-field label { display: none; }
.resource-detail-row .actions { display: inline-block; padding: 0; margin-top: 20px; background-color: #f0c22d; overflow: hidden; position: relative; border-radius: 4px; width: max-content; }
.resource-detail-row .actions input.hs-button.primary.large { background: transparent; border: 0; padding: 16px 20px; font-size: 16px; font-weight: 700; color: #363C44; border-radius: 6px; position: relative; z-index: 1; transition: 0.5s; margin-left: 0; width: 100%; }
.resource-detail-row .actions:before { content: ""; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: 0 50%; width: 100%; height: 100%; background: #1f286e; transition: all 0.475s; border-radius: 2px !important; }
.resource-detail-row .actions:hover::before { transform: scaleX(1); border-radius: 6px; }
.resource-detail-row .actions:hover input.hs-button.primary.large { color: #fff; }
.resource-detail-row ul.hs-error-msgs { list-style: none; padding: 0; }
.resource-detail-row ul.hs-error-msgs label.hs-error-msg.hs-main-font-element { display: block !important; color: #ff0000; max-width: 320px; }
.resource-detail-row .hs-form-private > .hs_error_rollup { display: none; }
.resource-detail-row .submitted-message.hs-main-font-element { color: #333; border: 1px solid #333; padding: 5px 10px; border-radius: 4px; }
.resource-detail-row input.hs-input { background: #F3F6F980 !important; border: 1px solid #D4DAE180; padding: 5px 12px !important; color: #363C44; font-family: "eina", sans-serif; font-weight: 400; font-size: 16px; line-height: 34px; border-radius: 7px !important; width: 100% !important; }
.resource-detail-row .hbspt-form .hs-form-private { display: block; }
.resource-detail-row fieldset.form-columns-2 { max-width: initial !important; margin-bottom: 0; display: flex; gap: 20px; }
.resource-detail-row .form-columns-1 { max-width: initial !important; }
.resource-detail-row input.hs-input:focus { border: 0; outline: none; border-bottom: 1px solid #e0e7f5; }
.resource-detail-row .hs-fieldtype-textarea.hs-input { border: 0; border-bottom: 1px solid #e0e7f5; border-radius: 0; padding-left: 0; width: 100% !important; font-size: 14px; color: #363C44; }
.resource-detail-row .hs-fieldtype-textarea.hs-input:focus { border: 0; outline: none; border-bottom: 1px solid #e0e7f5; }
.resource-detail-row .hs_recaptcha.hs-recaptcha.field.hs-form-field { margin: 30px 0; }
.resource-detail-row .hs_submit.hs-submit { display: flex; justify-content: start; }
.resource-detail-row .grecaptcha-badge { margin-left: auto; }
.resource-detail-row input.hs-button.primary.large { padding: 16px 50px; }
.resource-detail-row .form-columns-2 .hs-error-msgs { margin-bottom: 0; }
.resource-detail-row input:not([type="submit"])::placeholder { text-transform: capitalize; }
.resource-detail-sec h6 {
    font-family: var(--font-body) !important;
}
/* Blog detail responsive */
@media screen and (max-width: 1399px) {
  .resource-detail-sec { max-width: 735px; }
  .social-share.is-sticky { left: 110px !important; }
  .social-share { left: 70px !important; }
}
@media screen and (max-width: 1199px) {
  .resource-detail-row { flex-wrap: wrap; justify-content: flex-start; }
  .social-share { position: static !important; display: flex; gap: 20px; order: 1; width: 100% !important; }
  .resource-detail-sec { padding-left: 0; width: 100%; max-width: inherit; }
}
@media screen and (max-width: 991px) {
  .resource-detail-sec { max-width: 600px; }
  .resource-detail-row { flex-wrap: wrap; justify-content: flex-start; }
  .social-share { position: static !important; display: flex; gap: 20px; order: 1; }
  .single-post .dp-cta__inner {max-width: 99%; margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  .resource-detail-row fieldset.form-columns-2 { flex-wrap: wrap; gap: 0; }
  .single-post .dp-cta__inner{max-width: 100%; margin: 0 auto;}

    body.single-post .resource-list.resource-related .container{
    	padding-right: calc(var(--bs-gutter-x) * .5) !important;
    	padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
}
@media (max-width: 640px) {
  .social-share { position: relative !important; top: unset !important; margin-top: 0; display: flex; gap: 10px; }
	  .dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card--platform {
	    width: 100%;
	    height: 14rem;
	    min-height: 14rem;
	    padding: 1.25rem;
	    border-radius: 0.75rem;
	    overflow: hidden;
	    gap: 1rem;
	    aspect-ratio: inherit;
	}

	.dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-card-lottie {
	    position: absolute;
	    top: auto;
	    right: -90px;
	    left: auto;
	    width: 80%;
	    height: auto;
	    aspect-ratio: unset;
	    transform: scale(1.4);
	    transform-origin: right center;
	    pointer-events: none;
	    bottom: -20px;
	}

	.dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-cards > .dpv2-header__mega-menu-item:nth-child(2) .dpv2-header__mega-card-lottie {
	    top: auto;
	    width: 80%;
	    bottom: -38px;
	    transform: scale(1.4);
	}
}

/* ==============================================
   CTA Section CSS
   Source: scss/style.css, custom-2.css, scss/responsive.css
   ============================================== */

/* CTA base */
.cta {
  padding: 78px 0;
  background: #3444ba;
  position: relative;
  overflow: hidden;
}
.cta img.cta-bg {
  position: absolute;
  left: 0px;
  top: 0;
  z-index: 0;
}
.cta .container {
  position: relative;
}
.cta h2 {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  height: auto;
  text-align: left;
}
.cta p {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  padding-top: 5px;
}

/* CTA with background image */
.cta.cta_bg_img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 8.5625rem 0;
}
.cta.cta_bg_img p {
  padding-top: 1rem;
}
.cta.cta_bg_img .heading-center p {
  text-align: center;
}

/* Posts CTA — now uses .dp-cta structure, no overrides needed */

/* btn-blue animated button */
.icon-follow { padding-left: 3px; }
.icon-follow img { margin-top: -3px; }
.btn-blue .btn_secondary,
.btn-blue .btn_primary { display: inline-block; font-weight: 600; }
.btn-blue .btn-has-icon::before { content: none; }
.btn-blue .btn-has-icon .icon-follow {
  line-height: 18px;
  width: 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -9px;
  opacity: 0;
  transition: all .45s cubic-bezier(.25,1,.33,1);
}
.btn-blue .btn-has-icon {
  display: inline-block;
  padding-left: 40px !important;
  padding-right: 35px !important;
  transition: all .45s cubic-bezier(.25,1,.33,1);
}
.btn-blue .btn-label {
  left: 0;
  display: inline-block;
  transform: translateX(0);
  transition: opacity .45s cubic-bezier(.25,1,.33,1), transform .45s cubic-bezier(.25,1,.33,1);
  position: relative;
}
.btn-blue .btn-has-icon:hover .btn-label { transform: translateX(-16px) !important; }
.btn-blue .btn-has-icon:hover .icon-follow { opacity: 1; right: 26px; }
.btn-blue .btn-has-icon.btn_primary:hover .btn-label { color: #363C44 !important; }

/* CTA responsive */
@media screen and (max-width: 991px) and (min-width: 768px) {
  .cta_bg_img .section-header p {
    padding: 1rem 2rem 0;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .cta {
    padding: 30px 0;
  }
  .cta h2 {
    text-align: center;
    display: block;
  }
  .cta .btn_primary,
  .cta .btn_secondary {
    min-width: 244px;
    text-align: center;
  }
}
@media screen and (min-width: 320px) and (max-width: 780px) {
  .cta p {
    text-align: center;
  }
}
.single-post .modal.fade .modal-dialog p {
    font-size: .875rem !important;
}
.single-post .cta-form button.btn-close, .single-post .cta-form button.btn-close:focus {
    filter: inherit;
    border: none;
    outline: none;
    box-shadow: none;
}
.dpv2-header__mega[hidden] {
    display: block !important;
}