so component-styled
paragraphs (stats, labels, meta) keep their own tight spacing. */
.dgs-page p:not([class]) + p:not([class]) {
margin-top: var(--flow);
}
/* Emphasis + inline meta text kept on-scale */
.dgs-page strong,
.dgs-page b {
font-weight: 700;
}
.dgs-page small {
font-size: var(--fs-small);
line-height: var(--line-normal);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.dgs-page * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.dgs-page a:focus-visible,
.dgs-page button:focus-visible,
.dgs-page input:focus-visible,
.dgs-page textarea:focus-visible,
.dgs-page select:focus-visible {
outline: 3px solid var(--accent-yellow);
outline-offset: 2px;
}
/* Global grid: the navbar (.dgs-nav) is the master horizontal alignment
reference for the whole site. These gutters and breakpoints are copied
exactly from .dgs-nav's own padding steps (1rem / 2rem / 3.5rem), and the
cap is intentionally removed to match .dgs-nav's own max-width: 100% —
every section's content edges land on the same vertical lines as the
logo/nav links at every viewport width. */
.dgs-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.dgs-container {
padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.dgs-container {
padding: 0 3.5rem;
}
}
.dgs-container--narrow {
max-width: var(--max-width-narrow);
}
.dgs-section {
padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.dgs-section--lg {
padding: clamp(5rem, 11vw, 9.5rem) 0;
}
.dgs-hero:not(.dgs-service-hero) {
padding-top: clamp(9.5rem, 13vw, 12rem) !important;
}
/* ─── DUOTONE HERO BACKDROP ─── */
.dgs-hero-duotone {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
isolation: isolate;
mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 70%, transparent 98%);
-webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 70%, transparent 98%);
}
.dgs-hero-duotone::before,
.dgs-hero-duotone::after {
content: '';
position: absolute;
inset: 0;
}
.dgs-hero-duotone::before {
background-image: var(--dgs-duotone-img);
background-size: cover;
background-position: center;
filter: grayscale(1) contrast(1.15) brightness(0.72);
opacity: 0.5;
}
.dgs-hero-duotone::after {
background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
mix-blend-mode: color;
}
.dgs-hero-scrim {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(to bottom, rgba(10, 31, 51, 0.72) 0%, rgba(10, 31, 51, 0.55) 45%, rgba(10, 31, 51, 0.92) 100%);
}
/* ─── SERVICE HERO BADGE ─── */
.dgs-service-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display, var(--font-heading));
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1affeb; /* brighter teal for dark mode contrast, matches .dgs-pill--teal */
background: rgba(0, 179, 159, 0.15);
border: 1px solid rgba(0, 179, 159, 0.4);
border-radius: var(--radius-full, 9999px);
padding: 0.45rem 1rem;
margin-bottom: 1.25rem;
}
.dgs-section--dark,
.dgs-section--darker {
background: #0A1F33 !important; /* Solid Deep Navy */
color: var(--text-light-primary);
position: relative;
overflow: clip; /* clips decorative overflow without creating a scroll container, so position: sticky descendants (e.g. .dgs-csr-sticky) still work */
}
.dgs-section--dark::after,
.dgs-section--darker::after {
content: '';
position: absolute;
bottom: -150px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 300px;
background: radial-gradient(circle at 50% 100%, rgba(0, 179, 159, 0.08) 0%, transparent 70%);
filter: blur(50px);
pointer-events: none;
z-index: 0;
border-radius: 50%;
}
.dgs-section--dark > .dgs-container,
.dgs-section--darker > .dgs-container {
position: relative;
z-index: 2;
}
.dgs-section--teal {
background: var(--bg-teal);
color: var(--text-light-primary);
}
.dgs-section--light {
background: var(--bg-white);
color: var(--text-dark-primary);
}
.dgs-section--light p,
.dgs-section--light h2,
.dgs-section--light h3,
.dgs-section--light h4,
.dgs-section--light span,
.dgs-section--light li {
color: var(--text-dark-primary);
}
.dgs-text-center {
text-align: center;
}
.dgs-eyebrow {
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 600;
line-height: var(--line-normal);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--action-teal);
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-bottom: var(--space-xs);
}
/* Eyebrow icon/marker sits on the text baseline-center at a fixed size */
.dgs-eyebrow svg,
.dgs-eyebrow img,
.dgs-eyebrow i {
flex-shrink: 0;
width: var(--icon-sm);
height: var(--icon-sm);
}
.dgs-section-head {
max-width: 56.25rem;
margin-bottom: var(--space-lg);
}
.dgs-section-head--center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.dgs-section-head h2 {
font-size: clamp(1.85rem, 4vw, 2.8rem);
line-height: var(--line-heading);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-sm);
color: var(--text-light-primary);
}
.dgs-section--light .dgs-section-head h2 {
color: var(--text-dark-primary);
}
.dgs-section--teal .dgs-section-head h2 {
color: var(--text-light-primary);
}
.dgs-section-head h2 .dgs-text-accent {
color: var(--action-teal);
}
.dgs-section-head p {
color: var(--text-light-muted);
font-size: var(--fs-body);
line-height: var(--line-relaxed);
}
.dgs-section--light .dgs-section-head p {
color: var(--text-dark-muted);
}
.dgs-section--teal .dgs-section-head p {
color: var(--text-light-muted);
}
.dgs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.7rem 1.5rem;
border-radius: var(--radius-lg);
text-transform: none;
letter-spacing: normal;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
border: 2px solid transparent;
cursor: pointer;
margin: 0.5rem 0;
transition:
transform var(--duration-fast) var(--ease-out),
background var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
text-decoration: none;
white-space: nowrap;
}
.dgs-btn:hover {
transform: translateY(-2px);
}
.dgs-btn--primary {
background: var(--accent-yellow);
color: var(--text-dark-primary) !important;
box-shadow: none;
border: none !important;
overflow: hidden;
}
.dgs-btn--primary:hover {
background: color-mix(in srgb, var(--accent-yellow) 85%, black 15%) !important;
color: var(--text-dark-primary) !important;
box-shadow: none;
}
.dgs-btn--primary-accent {
background: var(--accent-yellow);
color: var(--text-dark-primary) !important;
border-radius: var(--radius-lg);
font-weight: 600;
padding: 0.7rem 1.6rem;
box-shadow: none;
border: none !important;
overflow: hidden;
}
.dgs-btn--primary-accent span {
color: var(--text-dark-primary) !important;
background: transparent !important;
}
.dgs-btn--primary-accent:hover {
background: color-mix(in srgb, var(--accent-yellow) 85%, black 15%) !important;
color: var(--text-dark-primary) !important;
box-shadow: none;
}
.dgs-btn--primary-accent:hover span {
color: var(--text-dark-primary) !important;
background: transparent !important;
}
.dgs-btn--secondary {
background: transparent;
color: var(--text-white) !important;
border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
}
.dgs-btn--secondary:hover {
border-color: var(--action-teal) !important;
color: var(--action-teal) !important;
background: rgba(0, 179, 159, 0.08);
}
.dgs-btn--outline-dark {
background: transparent;
border-color: var(--bg-deep-navy);
color: var(--bg-deep-navy);
}
.dgs-btn--outline-dark:hover {
background: var(--bg-deep-navy);
color: var(--bg-white);
}
.dgs-btn--block {
width: 100%;
}
.dgs-btn--lg {
padding: 0.8rem 1.9rem;
font-size: 1rem;
border-radius: var(--radius-lg);
}
.dgs-btn--lg.dgs-btn--primary-accent {
padding: 0.8rem 1.9rem;
}
.dgs-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
border-radius: 0;
background: transparent !important;
color: currentColor !important;
flex-shrink: 0;
transition: transform var(--duration-fast) var(--ease-out);
}
.dgs-nav-cta-group .dgs-btn {
margin: 0 !important;
}
.dgs-btn--primary-accent .dgs-btn-icon {
background: transparent !important;
color: var(--text-dark-primary) !important;
width: auto;
height: auto;
border-radius: 0;
}
.dgs-btn-icon svg {
width: 16px;
height: 16px;
transition: transform var(--duration-fast) var(--ease-out);
}
@keyframes dgs-btn-bounce {
0%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-3px);
}
50% {
transform: translateY(-3px);
}
70% {
transform: translateY(0);
}
}
@keyframes dgs-btn-icon-bounce {
0%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-3px);
}
50% {
transform: translateY(-3px);
}
70% {
transform: translateY(0);
}
}
.dgs-btn:hover>* {
animation: dgs-btn-bounce 0.45s ease-in-out;
}
.dgs-btn:hover .dgs-btn-icon svg {
animation: dgs-btn-icon-bounce 0.45s ease-in-out;
}
@media (max-width: 640px) {
.dgs-btn {
font-size: 0.9rem;
padding: 0.6rem 1.3rem;
}
.dgs-btn--lg {
padding: 0.6rem 1.5rem;
font-size: 0.94rem;
}
.dgs-btn--lg.dgs-btn--primary-accent,
.dgs-btn--primary-accent {
padding: 0.6rem 1.5rem;
}
.dgs-btn-icon {
width: auto;
height: auto;
}
.dgs-btn-icon svg {
width: 15px;
height: 15px;
}
}
.dgs-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 100;
background: transparent;
border-bottom: 1px solid transparent;
transition: border-color var(--duration-slow) var(--ease-out);
/* Entrance on page load, same on mobile and desktop. Animates
opacity + margin-top (not transform) deliberately — the scroll
hide/reveal behavior further down (.dgs-header--hidden) already owns
`transform`, and a forwards-filling animation on that same property
would keep overriding it after this animation finishes. */
animation: dgsHeaderIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes dgsHeaderIn {
from {
opacity: 0;
margin-top: -18px;
}
to {
opacity: 1;
margin-top: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.dgs-header {
animation: none;
}
}
.dgs-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 30rem;
height: 30rem;
background: radial-gradient(circle at 0% 0%, rgba(0, 179, 159, 0.10) 0%, transparent 55%);
pointer-events: none;
}
.dgs-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
gap: var(--space-sm);
background-color: transparent;
border: 1px solid transparent;
border-radius: 0;
max-width: 100%;
margin: 0 auto;
width: 100%;
transition: all 0.4s var(--ease-out);
}
@media (min-width: 768px) {
.dgs-nav {
padding: 1rem 2rem;
}
}
@media (min-width: 1024px) {
.dgs-nav {
padding: 1.15rem 3.5rem;
}
}
.dgs-header:hover,
.dgs-header.is-scrolled {
background-color: #0A1F33 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* ─── Premium Dropdown Megamenu (Linear App Style) ─── */
.dgs-nav-item {
position: relative;
display: inline-block;
}
.dgs-dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 0.3rem;
cursor: pointer;
}
.dgs-dropdown-arrow {
width: 10px;
height: 10px;
stroke-width: 3px;
transition: transform var(--duration-fast) var(--ease-out);
}
.dgs-dropdown-trigger:hover .dgs-dropdown-arrow {
transform: rotate(180deg);
}
.dgs-dropdown-megamenu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(15px);
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: var(--radius-xl) !important;
padding: 1.25rem !important;
display: grid;
grid-template-columns: repeat(3, max-content) !important;
gap: 1.5rem !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
z-index: 1000;
width: max-content !important; /* Hug its content! */
}
/* 2 column variant layout */
.dgs-dropdown-megamenu.dgs-dropdown-2-col {
grid-template-columns: repeat(2, max-content) !important;
}
.dgs-dropdown-trigger:hover .dgs-dropdown-megamenu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(6px);
}
.dgs-dropdown-column {
display: flex;
flex-direction: column;
gap: 0.6rem;
text-align: left;
}
.dgs-dropdown-column:not(:last-child) {
border-right: 1px solid rgba(0, 0, 0, 0.06);
padding-right: 1.5rem;
}
.dgs-dropdown-col-title {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
color: rgba(5, 17, 36, 0.45) !important; /* Muted gray for white background */
letter-spacing: 0.05em;
margin-bottom: 0.2rem;
}
.dgs-dropdown-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0.75rem !important;
padding: 0.6rem 0.75rem !important;
border-radius: var(--radius-lg) !important;
transition: background 0.2s var(--ease-out);
border: none !important;
text-decoration: none !important;
}
.dgs-dropdown-item::after {
display: none !important;
}
.dgs-dropdown-item:hover {
background: rgba(0, 0, 0, 0.02) !important;
}
.item-text-wrap {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.dgs-dropdown-item .item-title {
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 500 !important; /* Muted boldness */
color: #0A1F33 !important; /* Deep navy text */
transition: color 0.2s;
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
line-height: 1.2;
}
/* Icon Container Box: default muted teal, hover solid navy */
.item-icon-box {
width: 36px; /* Matched to height of nav links title + desc */
height: 36px;
border-radius: var(--radius-md);
background: rgba(0, 179, 159, 0.08) !important; /* Muted teal background by default */
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--duration-fast) var(--ease-out);
}
.dgs-dropdown-item:hover .item-icon-box {
background: #0A1F33 !important; /* Navy background on hover */
}
.item-icon-box svg {
width: 16px !important;
height: 16px !important;
stroke: #00B39F !important; /* Growth Teal icon color by default */
stroke-width: 2px !important;
fill: none !important;
flex-shrink: 0;
transition: all var(--duration-fast) var(--ease-out);
}
.dgs-dropdown-item:hover .item-icon-box svg {
stroke: #00B39F !important; /* Remains Teal icon color on hover */
}
.dgs-dropdown-item:hover .item-title {
color: #00B39F !important; /* Growth Teal hover */
}
.dgs-dropdown-item .item-desc {
font-family: var(--font-body);
font-size: 0.75rem;
color: rgba(5, 17, 36, 0.6) !important;
line-height: 1.25;
padding-left: 0 !important; /* Sits naturally inside text wrapper */
}
.dgs-logo {
order: 1;
}
.dgs-nav-links {
order: 2;
}
.dgs-nav-cta-group {
order: 3;
}
.dgs-nav-toggle {
order: 4;
display: none; /* hidden by default — shown only below 1024px via media query */
}
.dgs-logo {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--text-white) !important;
letter-spacing: -0.01em;
text-decoration: none;
flex-shrink: 0;
}
/* Replace text logo with DGS LOGO.png in header and mobile menu */
.dgs-header .dgs-logo,
.dgs-mobile-menu-head .dgs-logo {
gap: 0;
width: 10rem;
height: 2.75rem;
background: url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a5f1fbc9c9b37b5fd51bdd5.png') no-repeat left center / contain;
color: transparent !important;
font-size: 0;
overflow: hidden;
}
.dgs-header .dgs-logo .dgs-logo-mark,
.dgs-mobile-menu-head .dgs-logo .dgs-logo-mark {
display: none;
}
.dgs-logo-mark {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--gradient-teal);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 0.85rem;
color: var(--text-white);
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0, 179, 159, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.dgs-nav-links {
display: none;
gap: 2.25rem;
align-items: center;
}
.dgs-nav-links a,
.dgs-dropdown-toggle,
.dgs-dropdown-item,
.dgs-mobile-links a {
font-family: var(--font-body) !important;
color: var(--text-white);
font-size: 0.95rem; /* Slightly larger navigations */
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
transition: color var(--duration-fast) var(--ease-out);
text-decoration: none;
position: relative;
padding: 0.55rem 0;
border: 2px solid transparent;
}
.dgs-nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--action-teal);
border-radius: var(--radius-xs);
transition: width 0.3s var(--ease-out);
}
.dgs-nav-links a:hover::after,
.dgs-nav-links a.is-active::after {
width: 100%;
}
.dgs-nav-links a:hover,
.dgs-nav-links a.is-active {
color: var(--action-teal);
}
.dgs-nav-cta {
display: none;
}
.dgs-nav-cta-group {
display: none;
}
@media (min-width: 1024px) {
.dgs-nav-cta-group {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
}
}
.dgs-btn--nav,
.dgs-btn--secondary.dgs-btn--nav {
padding: 0.55rem 1.25rem;
gap: 0.5rem;
font-size: 0.85rem;
border-width: 2px;
border-style: solid;
border-color: transparent;
}
.dgs-nav-cta.dgs-btn--nav {
padding: 0.35rem 1rem;
}
.dgs-nav-cta-group .dgs-btn--nav.dgs-btn--secondary {
color: var(--text-white) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
}
.dgs-nav-cta-group .dgs-btn--nav.dgs-btn--secondary:hover {
color: var(--action-teal) !important;
border-color: var(--action-teal) !important;
}
.dgs-btn--nav .dgs-btn-icon {
width: auto;
height: auto;
}
.dgs-btn--nav .dgs-btn-icon svg {
width: 14px;
height: 14px;
}
.dgs-nav-toggle {
background: none;
border: none;
color: var(--text-white);
padding: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 201;
}
/* ─── ANIMATED HAMBURGER ↔ X ICON ─── */
.dgs-nav-toggle-bars {
position: relative;
width: 22px;
height: 15px;
display: inline-block;
}
.dgs-nav-toggle-bars span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: var(--radius-xs);
background: currentColor;
transition: transform var(--duration-base) var(--ease-out),
opacity var(--duration-base) var(--ease-out),
top var(--duration-base) var(--ease-out);
}
.dgs-nav-toggle-bars span:nth-child(1) {
top: 0;
}
.dgs-nav-toggle-bars span:nth-child(2) {
top: 6.5px;
}
.dgs-nav-toggle-bars span:nth-child(3) {
top: 13px;
}
.dgs-nav-toggle[aria-expanded="true"] .dgs-nav-toggle-bars span:nth-child(1) {
top: 6.5px;
transform: rotate(45deg);
}
.dgs-nav-toggle[aria-expanded="true"] .dgs-nav-toggle-bars span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.dgs-nav-toggle[aria-expanded="true"] .dgs-nav-toggle-bars span:nth-child(3) {
top: 6.5px;
transform: rotate(-45deg);
}
/* ─── OFF-CANVAS BACKDROP ─── */
.dgs-mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(4, 8, 20, 0.62);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-slow) var(--ease-out), visibility var(--duration-slow) var(--ease-out);
z-index: 150;
}
.dgs-mobile-backdrop.is-open {
opacity: 1;
visibility: visible;
}
/* ─── PREMIUM OFF-CANVAS MOBILE DRAWER ─── */
.dgs-mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100dvh;
width: 100%;
background: linear-gradient(180deg, #0d1630 0%, #080e21 100%);
/* Wipe reveal: the panel stays put and its visible region expands
top-down (clip-path), rather than the whole panel sliding into
place — a curtain dropping, not a slide. */
clip-path: inset(0 0 100% 0);
visibility: hidden;
pointer-events: none;
/* Slow-start, settle-at-the-end curve (easeInOutQuint-ish) instead of a
fast-out-slow-in ease — the wipe holds back for a beat before it
commits, rather than shooting down immediately. */
transition: clip-path 0.55s cubic-bezier(0.83, 0, 0.17, 1), visibility 0.55s cubic-bezier(0.83, 0, 0.17, 1);
z-index: 200;
display: flex;
flex-direction: column;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
.dgs-mobile-menu.is-open {
clip-path: inset(0 0 0 0);
visibility: visible;
pointer-events: auto;
}
/* Nav items animate in one by one, not all at once — hidden by default,
only staggered (via transition-delay, set below) once the drawer opens.
Closing skips the delay entirely (base rule has none) so it doesn't
linger on the way out. */
.dgs-mobile-links > a,
.dgs-mobile-links > button.dgs-mobile-link-toggle,
.dgs-mobile-links > .dgs-mobile-nav-buttons {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.dgs-mobile-menu.is-open .dgs-mobile-links > a,
.dgs-mobile-menu.is-open .dgs-mobile-links > button.dgs-mobile-link-toggle,
.dgs-mobile-menu.is-open .dgs-mobile-links > .dgs-mobile-nav-buttons {
opacity: 1;
transform: translateY(0);
}
/* Stagger by fixed DOM position: Home, About, [submenu], Solutions,
[submenu], Industries, [submenu], Growth Hub, [submenu], Contact,
CTA button — same structure on every page (includes/navbar.html). */
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(1) { transition-delay: 0.08s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(2) { transition-delay: 0.14s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(4) { transition-delay: 0.20s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(6) { transition-delay: 0.26s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(8) { transition-delay: 0.32s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(10) { transition-delay: 0.38s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(11) { transition-delay: 0.44s; }
@media (prefers-reduced-motion: reduce) {
.dgs-mobile-menu,
.dgs-mobile-links > a,
.dgs-mobile-links > button.dgs-mobile-link-toggle,
.dgs-mobile-links > .dgs-mobile-nav-buttons {
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
}
.dgs-mobile-menu-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.5rem 1.25rem;
border-bottom: 1px solid var(--surface-border);
flex-shrink: 0;
background: #0d1630;
position: sticky;
top: 0;
z-index: 2;
}
.dgs-mobile-menu-head .dgs-logo {
order: 1 !important;
}
.dgs-mobile-close {
order: 2 !important;
background: transparent;
border: none;
color: var(--text-white);
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.dgs-mobile-close:hover {
color: var(--action-teal);
transform: rotate(90deg);
}
.dgs-mobile-close svg {
width: 20px;
height: 20px;
}
.dgs-mobile-links {
display: flex;
flex-direction: column;
gap: 0;
padding: 0.5rem 1.5rem 1rem;
}
.dgs-mobile-links>a,
.dgs-mobile-links>button.dgs-mobile-link-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
color: var(--text-light);
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 600;
padding: 0.8rem 0.15rem;
border-bottom: 1px solid var(--surface-border);
text-decoration: none;
background: transparent;
border-left: none;
border-right: none;
border-top: none;
text-align: left;
cursor: pointer;
transition: color var(--duration-base) var(--ease-out), padding-left var(--duration-base) var(--ease-out);
}
.dgs-mobile-links>a:last-of-type {
border-bottom: none;
}
.dgs-mobile-link-arrow {
width: 16px;
height: 16px;
color: var(--action-teal);
opacity: 0;
transform: translateX(-6px);
flex-shrink: 0;
transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.dgs-mobile-links>a:focus-visible,
.dgs-mobile-links>a.is-active,
.dgs-mobile-links>button.dgs-mobile-link-toggle:focus-visible,
.dgs-mobile-links>button.dgs-mobile-link-toggle.is-active {
color: var(--action-teal);
padding-left: 0.5rem;
}
.dgs-mobile-links>a:focus-visible .dgs-mobile-link-arrow,
.dgs-mobile-links>a.is-active .dgs-mobile-link-arrow {
opacity: 1;
transform: translateX(0);
}
/* :hover only for pointers that can actually hover (mouse/trackpad).
On touch devices, :hover has no "unhover" moment — a tapped link stays
painted in this same teal until something else is tapped, which reads
as if the tap had marked it the current page. Real current-page state
is .is-active (set by updateActiveNavLinks in main.js), untouched by
this query. */
@media (hover: hover) {
.dgs-mobile-links>a:hover,
.dgs-mobile-links>button.dgs-mobile-link-toggle:hover {
color: var(--action-teal);
padding-left: 0.5rem;
}
.dgs-mobile-links>a:hover .dgs-mobile-link-arrow {
opacity: 1;
transform: translateX(0);
}
}
/* ─── Mobile nav accordion (About / Solutions / Industries / Growth Hub) ─── */
.dgs-mobile-links>button.dgs-mobile-link-toggle .dgs-dropdown-arrow {
width: 14px;
height: 14px;
color: var(--action-teal);
flex-shrink: 0;
transition: transform var(--duration-base) var(--ease-out);
}
.dgs-mobile-links>button.dgs-mobile-link-toggle[aria-expanded="true"] .dgs-dropdown-arrow {
transform: rotate(180deg);
}
.dgs-mobile-submenu {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows var(--duration-base) var(--ease-out);
}
.dgs-mobile-submenu.is-open {
grid-template-rows: 1fr;
}
.dgs-mobile-submenu>div {
min-height: 0;
overflow: hidden;
}
.dgs-mobile-submenu a {
display: block;
color: var(--text-light-muted);
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
padding: 0.6rem 0.15rem 0.6rem 1rem;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.dgs-mobile-submenu a:focus-visible,
.dgs-mobile-submenu a.is-active {
color: var(--action-teal);
}
@media (hover: hover) {
.dgs-mobile-submenu a:hover {
color: var(--action-teal);
}
}
/* Category label inside a mobile submenu (e.g. Transform / Enable /
Elevate under Solutions) — same role as .dgs-dropdown-col-title in
the desktop megamenu, restyled for the dark drawer background. */
.dgs-mobile-submenu-label {
display: block;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--action-teal);
opacity: 0.8;
padding-left: 1rem;
margin: 0.85rem 0 0.3rem;
}
.dgs-mobile-nav-buttons {
margin-top: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.dgs-mobile-nav-buttons .dgs-btn {
width: 100% !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 0.85rem 1.5rem !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
border-radius: var(--radius-lg) !important;
box-sizing: border-box !important;
display: inline-flex !important;
}
.dgs-mobile-nav-buttons .dgs-btn-saas {
width: 100% !important;
padding: 0.65rem 1.5rem !important;
font-weight: 700 !important;
}
.dgs-mobile-nav-buttons .dgs-btn--secondary {
border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
background: transparent !important;
color: var(--text-white) !important;
}
.dgs-mobile-nav-buttons .dgs-btn--secondary:hover {
border-color: var(--action-teal) !important;
background: rgba(0, 179, 159, 0.08) !important;
}
html.dgs-menu-open,
body.dgs-menu-open {
overflow: hidden;
}
/* Safety net for the fixed-inside-transformed-header bug (see
openMobileMenu/updateHeaderScroll in main.js): even if the hide
transform ever lands on .dgs-header while the drawer is open, it's
neutralized here so the "fixed" .dgs-mobile-menu can't be dragged
off the viewport with it. */
html.dgs-menu-open .dgs-header.dgs-header--hidden {
transform: none !important;
}
@media (max-width: 1023px) {
.dgs-nav-links,
.dgs-nav-cta-group {
display: none !important;
}
.dgs-nav-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #ffffff !important;
z-index: 205 !important;
cursor: pointer !important;
}
.dgs-nav-toggle-bars span {
background-color: #ffffff !important;
}
.dgs-mobile-menu {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100dvh !important;
width: 100% !important;
z-index: 9999 !important;
}
.dgs-mobile-backdrop {
z-index: 9998 !important;
}
}
@media (min-width: 1024px) {
.dgs-nav-links {
display: flex !important;
}
.dgs-nav-cta-group {
display: flex !important;
}
.dgs-nav-toggle {
display: none !important;
}
/* Do NOT set display:none on .dgs-mobile-menu — it uses
clip-path+visibility for its open/close animation. Setting
display:none would break .is-open and lock the drawer shut.
The drawer is visually absent because clip-path: inset(0 0 100% 0)
clips it to nothing on all viewports; only .is-open reveals it. */
.dgs-mobile-backdrop {
display: none !important;
}
}
.dgs-hero {
background: var(--bg-white);
color: var(--bg-deep-navy);
padding: 6rem 0 7rem;
overflow: hidden;
position: relative;
border-bottom: 1px solid var(--surface-border-neutral);
}
@media (min-width: 768px) {
.dgs-hero {
padding: 10rem 0 13rem;
}
}
.dgs-hero::after {
display: none;
}
.dgs-hero-content {
position: relative;
z-index: 2;
}
.dgs-hero h1 {
font-size: clamp(2.2rem, 5.5vw, 3.8rem);
margin-bottom: var(--space-sm);
max-width: 62.5rem;
color: var(--bg-deep-navy);
}
.dgs-hero-gradient-text {
background: linear-gradient(135deg, #0A1F33 0%, #00B39F 35%, #2D7FF9 48%, #2D7FF9 52%, #00B39F 65%, #0A1F33 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: dgs-gradient-rotation 8s linear infinite;
display: inline-block;
padding-bottom: 0.15em;
margin-bottom: -0.15em;
}
@keyframes dgs-gradient-rotation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.dgs-hero-sub {
font-size: 1.08rem;
color: var(--text-dark-muted);
max-width: 45rem;
margin-bottom: var(--space-md);
line-height: 1.7;
}
.dgs-hero-note {
font-size: 0.82rem;
color: var(--text-muted);
}
.dgs-pill--sm {
font-size: 0.72rem;
padding: 0.3rem 0.65rem;
font-weight: 500;
}
.dgs-form-tabs {
display: flex;
justify-content: center;
gap: 1rem;
}
.dgs-form-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
padding: 0.85rem 1.5rem;
border: 1.5px solid rgba(0, 0, 0, 0.15);
border-radius: var(--radius-lg);
background: transparent;
cursor: pointer;
transition: all 0.25s ease;
opacity: 0.55;
min-width: 180px;
}
.dgs-form-tab:hover {
border-color: var(--action-teal);
background: rgba(0, 179, 159, 0.06);
opacity: 1;
}
.dgs-form-tab.is-active {
border-color: var(--action-teal);
background: rgba(0, 179, 159, 0.08);
opacity: 1;
}
.dgs-form-tab-label {
display: block;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bg-deep-navy);
}
.dgs-form-tab-desc {
display: block;
font-size: 0.72rem;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.3;
}
.dgs-icon-cards {
display: grid;
gap: var(--space-sm);
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.dgs-icon-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.dgs-icon-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.dgs-cards-4 {
display: grid;
gap: var(--space-sm);
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.dgs-cards-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.dgs-cards-4 {
grid-template-columns: repeat(4, 1fr);
}
}
.dgs-year-timeline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
overflow-x: auto;
padding-bottom: var(--space-sm);
position: relative;
}
.dgs-year-timeline::before {
content: '';
position: absolute;
top: 22px;
left: 0;
right: 0;
height: 2px;
background: rgba(0, 179, 159, 0.2);
}
.dgs-year-step {
text-align: center;
flex: 0 0 auto;
min-width: 8rem;
position: relative;
}
.dgs-year-dot {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--action-teal);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-xs);
position: relative;
z-index: 2;
}
.dgs-year-dot svg {
width: 14px;
height: 14px;
color: var(--text-white);
}
.dgs-year-label {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
color: var(--action-teal);
text-transform: uppercase;
letter-spacing: 0.04em;
display: block;
margin-bottom: 0.3rem;
}
.dgs-year-step h4 {
font-size: 0.95rem;
margin-bottom: 0.3rem;
color: var(--text-white);
}
.dgs-year-step p {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.5;
}
.dgs-value-card {
padding: var(--space-md);
}
.dgs-value-card-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
background: rgba(0, 179, 159, 0.12);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
color: var(--action-teal);
}
.dgs-value-card-icon svg {
width: 24px;
height: 24px;
}
.dgs-value-card h3 {
font-size: 1.05rem;
margin-bottom: 0.4rem;
color: var(--text-white);
}
.dgs-value-card p {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
}
.dgs-pullquote {
border-left: 3px solid var(--action-teal);
padding-left: var(--space-sm);
font-size: 1.02rem;
font-style: italic;
color: var(--text-light);
margin: var(--space-md) 0;
}
@media (min-width: 860px) {
.dgs-split--wide-left {
grid-template-columns: 1.3fr 0.7fr;
}
.dgs-split--wide-right {
grid-template-columns: 0.8fr 1.2fr;
}
}
.dgs-testimonial-cards {
display: grid;
gap: var(--space-sm);
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.dgs-testimonial-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.dgs-testimonial-cards {
grid-template-columns: repeat(4, 1fr);
}
}
.dgs-testimonial-card {
background: var(--surface-navy-card);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
padding: var(--space-md);
}
.dgs-testimonial-card-quote {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.65;
margin-bottom: var(--space-sm);
}
.dgs-testimonial-card-author {
font-size: 0.8rem;
color: var(--text-muted);
font-style: italic;
}
/* --- PREMIUM FAQ LAYOUT (sticky left rail) --- */
.dgs-premium-faq-layout {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: start;
}
@media (min-width: 900px) {
.dgs-premium-faq-layout {
grid-template-columns: 1fr 1.6fr;
gap: 4.5rem;
}
.dgs-faq-sticky {
position: sticky;
top: 8.75rem;
}
}
/* --- FAQ ACCORDION --- */
.dgs-faq-list {
width: 100%;
}
.dgs-faq-item {
border-bottom: 1px solid var(--surface-border);
}
.dgs-section--light .dgs-faq-item {
border-bottom-color: #E4E8EA;
}
.dgs-faq-question {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 1.35rem 0;
display: flex;
align-items: center;
gap: 1.1rem;
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 600;
color: var(--text-white);
transition: color var(--duration-fast) var(--ease-out);
cursor: pointer;
}
.dgs-faq-question:hover {
color: var(--action-mint-hover);
}
.dgs-section--light .dgs-faq-question {
color: var(--bg-deep-navy);
}
.dgs-faq-question-text {
flex-grow: 1;
}
.dgs-faq-number {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1.5px solid rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 700;
color: #4a5568;
transition:
border-color var(--duration-base) var(--ease-out),
background var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out);
}
.dgs-section--darker .dgs-faq-number {
border-color: rgba(255,255,255,0.12);
color: var(--action-teal);
}
.dgs-faq-item.is-open .dgs-faq-number {
background: #f5a623 !important;
border-color: #f5a623 !important;
color: #ffffff !important;
}
.dgs-faq-item.is-open .dgs-faq-question {
color: var(--action-mint-hover);
}
.dgs-section--light .dgs-faq-item.is-open .dgs-faq-question {
color: var(--bg-deep-navy);
}
.dgs-faq-toggle {
font-family: var(--font-body);
color: #4a5568;
font-size: 1.3rem;
margin-left: auto;
transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
flex-shrink: 0;
}
.dgs-section--darker .dgs-faq-toggle {
color: var(--action-teal);
}
.dgs-faq-item.is-open .dgs-faq-toggle {
transform: rotate(45deg);
color: #000000 !important;
}
.dgs-section--darker .dgs-faq-item.is-open .dgs-faq-toggle {
color: var(--action-teal) !important;
}
.dgs-faq-answer {
max-height: 0;
overflow: hidden;
padding-left: 2.95rem;
transition: max-height var(--duration-base) var(--ease-out);
}
.dgs-faq-answer p {
padding-bottom: var(--space-sm);
color: var(--text-muted);
font-size: 0.96rem;
line-height: 1.7;
}
.dgs-section--light .dgs-faq-answer p {
color: var(--text-dark-muted) !important;
}
.dgs-cta-banner {
text-align: center;
padding: calc(var(--space-2xl) * 0.85) 3.5rem;
background:
radial-gradient(circle at 8% 30%, rgba(0, 179, 159, 0.18) 0%, transparent 45%),
radial-gradient(circle at 92% 70%, rgba(245, 166, 35, 0.12) 0%, transparent 45%),
var(--bg-deep-navy) !important;
background-color: var(--bg-deep-navy) !important;
position: relative;
overflow: hidden;
}
.dgs-cta-banner::before {
display: none;
}
.dgs-cta-banner h2 {
font-size: clamp(1.9rem, 4.5vw, 3rem);
margin-bottom: var(--space-md);
color: var(--text-white);
max-width: 50rem;
margin-left: auto;
margin-right: auto;
}
.dgs-cta-banner h2 .dgs-text-accent {
color: var(--action-teal);
}
.dgs-cta-banner p {
color: var(--text-secondary);
max-width: 35rem;
margin: 0 auto var(--space-md);
font-size: 1rem;
}
@media (max-width: 640px) {
.dgs-cta-banner {
padding: 2.5rem 1.5rem;
}
}
.dgs-cta-note {
font-size: 0.82rem;
color: var(--text-muted);
margin-top: var(--space-xs);
}
.dgs-footer {
background:
radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
#0A1F33;
color: var(--text-tertiary);
padding: 5rem 0 3rem;
font-size: 0.88rem;
position: relative;
width: 100%;
overflow: hidden;
border-top: 1px solid var(--surface-border);
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.dgs-footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(900px, 90%);
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(0, 179, 159, 0.55) 50%, transparent 100%);
}
.dgs-footer::after {
content: '';
position: absolute;
bottom: -40%;
left: 50%;
transform: translateX(-50%);
width: 70%;
aspect-ratio: 1 / 0.5;
background: radial-gradient(ellipse at center, rgba(245, 166, 35, 0.10) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.dgs-footer>.dgs-container {
position: relative;
z-index: 2;
}
.dgs-page main {
position: relative;
background: var(--bg-deep-navy);
margin-bottom: 0 !important;
}
.dgs-footer-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 3rem;
margin-bottom: 3rem;
}
.dgs-footer-brand-col {
flex: 1.2;
min-width: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dgs-footer-tagline {
font-family: var(--font-heading);
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
font-weight: 700;
color: #ffffff;
line-height: 1.35;
margin: 1.5rem 0 0 0;
max-width: 440px;
}
.dgs-footer-newsletter {
flex: 1.5;
min-width: 280px;
max-width: 540px;
align-self: flex-start;
}
.dgs-footer-newsletter-title {
font-family: var(--font-heading);
font-size: 1.15rem;
color: #ffffff;
margin: 0 0 0.5rem 0;
font-weight: 700;
line-height: 1.4;
}
.dgs-footer-newsletter-sub {
font-size: 0.88rem;
color: var(--text-secondary);
margin: 0 0 1.25rem 0;
font-family: var(--font-body);
}
.dgs-footer-newsletter-iframe {
width: 100%;
border: none;
border-radius: 8px;
display: block;
}
.dgs-footer-grid {
display: grid;
gap: var(--space-lg) var(--space-md);
margin-bottom: var(--space-lg);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.dgs-footer-col a.dgs-footer-link--sm {
padding: 0.15rem 0;
font-size: 0.82rem;
}
.dgs-footer-legal-copy {
font-family: var(--font-body);
font-size: 0.82rem;
color: var(--text-tertiary);
line-height: 1.6;
display: inline-block;
}
.dgs-footer-brand {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 0.85rem;
width: 10.5rem;
height: 2.75rem;
background: url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a5f1fbc9c9b37b5fd51bdd5.png') no-repeat left center / contain;
overflow: hidden;
}
.dgs-footer-brand .dgs-logo-mark {
display: none;
}
.dgs-footer-brand span {
display: none;
}
.dgs-footer-desc {
max-width: 18.75rem;
color: var(--text-tertiary);
font-size: 0.85rem;
line-height: 1.6;
}
.dgs-footer-col h4 {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
.dgs-footer-col a {
display: block;
padding: 0.3rem 0;
color: var(--text-tertiary);
font-size: 0.85rem;
transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
text-decoration: none;
position: relative;
width: fit-content;
}
.dgs-footer-col a::after {
content: '';
position: absolute;
left: 0;
bottom: 0.1rem;
width: 0;
height: 1px;
background: var(--action-teal);
transition: width var(--duration-base) var(--ease-out);
}
.dgs-footer-col a:hover {
color: var(--text-white);
transform: translateX(2px);
}
.dgs-footer-col a:hover::after {
width: 100%;
}
.dgs-footer-social {
display: flex;
gap: 0.5rem;
margin-top: var(--space-sm);
}
.dgs-footer-social a {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
border: 1px solid var(--surface-border);
background: rgba(255, 255, 255, 0.02);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
transition: all var(--duration-base) var(--ease-out);
padding: 0;
}
.dgs-footer-social a:hover {
border-color: var(--action-teal);
color: var(--action-teal);
background: rgba(0, 179, 159, 0.1);
box-shadow: 0 4px 16px rgba(0, 179, 159, 0.22);
transform: translateY(-2px);
}
.dgs-footer-social svg {
width: 16px;
height: 16px;
}
.dgs-footer-bottom {
border-top: 1px solid var(--surface-border);
padding-top: var(--space-md);
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
letter-spacing: 0.01em;
}
.dgs-footer-bottom a {
color: var(--text-tertiary);
transition: color var(--duration-fast) var(--ease-out);
text-decoration: none;
}
.dgs-footer-bottom a:hover {
color: var(--text-white);
}
.dgs-footer-bottom {
margin-top: 3.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
}
.dgs-footer-legal {
display: flex;
gap: var(--space-md);
}
.dgs-footer-watermark {
position: absolute;
bottom: -2.5rem;
left: 0;
right: 0;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.2rem, 13.5vw, 13.5rem);
line-height: 1;
text-align: center;
letter-spacing: -0.03em;
pointer-events: none;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-transform: none;
z-index: 1;
max-width: 100%;
-webkit-text-stroke: 1px rgba(245, 166, 35, 0.035);
background: linear-gradient(180deg, rgba(245, 166, 35, 0.06) 0%, transparent 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%),
linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
-webkit-mask-composite: source-in;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image:
linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%),
linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
mask-composite: intersect;
mask-repeat: no-repeat;
mask-size: 100% 100%;
}
@media (max-width: 768px) {
.dgs-footer-watermark {
display: none !important;
}
}
/* thank-you.html only: the hero runs straight into the footer on that
page (no section in between), so the sitewide top hairline just reads
as a stray line between two navy blocks, drop it there only. Kept as
a scoped exception here rather than in dgs-thank-you.css, so every
rule touching the shared footer lives in this one global sheet. */
.dgs-thankyou-page .dgs-footer {
border-top: none;
}
.dgs-reveal {
opacity: 0;
transform: translateY(28px);
will-change: transform, opacity;
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
/* Auto-stagger: main.js sets --dgs-reveal-i on grouped siblings so a grid or
list cascades in sequence instead of appearing all at once. */
transition-delay: calc(var(--dgs-reveal-i, 0) * 0.08s);
}
.dgs-reveal.is-visible {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
/* Drop the compositor hint once settled so long pages don't keep hundreds of
promoted layers alive (keeps scrolling smooth). */
will-change: auto;
}
/* Reusable reveal directions — opt in with data-reveal="fade|left|right|scale".
Defaults (no attribute) keep the existing rise-up motion. */
.dgs-reveal[data-reveal="fade"] { transform: none; }
.dgs-reveal[data-reveal="left"] { transform: translateX(-28px); }
.dgs-reveal[data-reveal="right"] { transform: translateX(28px); }
.dgs-reveal[data-reveal="scale"] { transform: scale(0.965); }
/* Respect users who ask for less motion: show everything, no slide/blur. */
@media (prefers-reduced-motion: reduce) {
.dgs-reveal,
.dgs-reveal.is-visible {
opacity: 1 !important;
transform: none !important;
filter: none !important;
visibility: visible !important;
transition: none !important;
}
}
/* ============================================================
INTERACTION POLISH — consistent, GPU-friendly micro-motion.
Additive only: unifies focus + form-focus timing across the
site without changing any component's resting appearance.
============================================================ */
/* Unified, accessible focus ring for keyboard users (mouse clicks are
unaffected thanks to :focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--action-teal);
outline-offset: 2px;
}
/* Smooth form-field focus feedback — only paints/composites (border, shadow,
background), never properties that force layout. */
input,
textarea,
select {
transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
input,
textarea,
select {
transition: none;
}
}
.dgs-cta-card {
background: radial-gradient(circle at 90% 10%, rgba(0, 179, 159, 0.16) 0%, var(--surface-navy-card) 60%);
border: 1px solid var(--surface-border);
border-radius: var(--radius-lg);
padding: var(--space-xl) var(--space-md);
text-align: center;
position: relative;
overflow: hidden;
transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.dgs-cta-card:hover {
border-color: rgba(0, 179, 159, 0.3);
box-shadow: 0 12px 40px rgba(0, 179, 159, 0.08);
}
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
.dgs-page h1 {
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.04em;
font-size: clamp(2.8rem, 6vw, 4.8rem) !important;
}
.dgs-page h2 {
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
}
.dgs-card-visual-zone {
width: 100%;
height: 13.75rem;
background: radial-gradient(circle at center, rgba(10, 31, 51, 0.4) 0%, var(--bg-navy-darkest) 100%);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--surface-border);
position: relative;
overflow: hidden;
}
.dgs-visual-placeholder {
width: 80%;
height: 70%;
border: 1px dashed rgba(0, 179, 159, 0.2);
border-radius: var(--radius-lg);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.dgs-visual-placeholder::after {
content: 'GRAPHIC ASSET';
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.15em;
color: var(--text-dark-muted);
}
.dgs-visual-placeholder::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: var(--radius-xl);
}
.dgs-reveal {
visibility: hidden;
}
.dgs-carousel-container {
position: relative;
width: 100%;
}
.dgs-carousel-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 1rem 0.25rem;
}
.dgs-carousel-track::-webkit-scrollbar {
display: none;
}
.dgs-carousel-card {
flex: 0 0 calc(33.333% - 1rem);
scroll-snap-align: start;
background: #FFFFFF;
border: 1px solid var(--surface-border-neutral);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 4px 24px rgba(10, 31, 51, 0.03);
transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.dgs-carousel-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 179, 159, 0.25);
box-shadow: 0 12px 32px rgba(10, 31, 51, 0.08);
}
@media (max-width: 1024px) {
.dgs-carousel-card {
flex: 0 0 calc(50% - 0.75rem);
}
}
@media (max-width: 768px) {
.dgs-carousel-card {
flex: 0 0 85%;
}
}
.dgs-carousel-visual {
width: 100%;
height: 13.75rem;
background-size: cover;
background-position: center;
border-bottom: 1px solid var(--surface-border-neutral);
position: relative;
}
.dgs-carousel-badge {
position: absolute;
top: 1rem;
left: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--action-teal);
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
font-family: var(--font-display);
}
.dgs-carousel-content {
padding: 1.75rem 1.5rem;
}
.dgs-carousel-content h3 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
font-weight: 700;
color: var(--bg-deep-navy);
line-height: 1.3;
}
.dgs-carousel-content p {
margin: 0;
font-size: 0.88rem;
color: var(--text-dark-muted);
line-height: 1.5;
}
.dgs-carousel-controls {
display: flex;
gap: 0.75rem;
align-items: center;
}
.dgs-carousel-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid var(--surface-border-neutral);
color: var(--bg-deep-navy);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
}
.dgs-carousel-arrow:hover {
background: var(--action-teal);
border-color: var(--action-teal);
color: var(--text-light-primary);
}
/* ─── MODULAR GRID PATTERN OVERLAYS ─── */
.dgs-hero-pattern,
.dgs-cta-pattern {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
display: flex;
justify-content: space-between;
}
.dgs-hero-pattern span,
.dgs-cta-pattern span {
flex: 1;
height: 100%;
border-right: 1px solid rgba(255, 255, 255, 0.035);
}
.dgs-hero-pattern span:last-child,
.dgs-cta-pattern span:last-child {
border-right: none;
}
/* ─── SERVICES: PREMIUM ANIMATED CLICKABLE ROW LIST (Shared Component) ─── */
.dgs-services-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin-top: var(--space-xl);
border-top: none;
}
@media (min-width: 768px) {
.dgs-services-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.dgs-services-list {
grid-template-columns: repeat(3, 1fr);
}
}
.dgs-service-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
padding: 2.25rem 2rem;
border: 1px solid var(--surface-border-neutral);
border-radius: var(--radius-xl) var(--radius-md) var(--radius-xl) var(--radius-xl);
text-decoration: none;
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--bg-white);
transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.dgs-service-row:hover {
transform: translateY(-5px);
border-color: var(--bg-deep-navy);
box-shadow: 0 16px 36px rgba(11, 19, 62, 0.08);
}
/* Sweep background on hover */
.dgs-service-row::before {
content: '';
position: absolute;
inset: 0;
background: var(--bg-deep-navy);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.4s var(--ease-out);
z-index: 0;
}
.dgs-service-row:hover::before,
.dgs-service-row:focus-visible::before {
transform: scaleY(1);
}
.dgs-service-row-icon {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 3.25rem;
display: flex;
align-items: center;
color: var(--action-teal);
transition: color var(--duration-base) var(--ease-out), transform 0.4s var(--ease-out);
}
.dgs-service-row-icon svg {
stroke: var(--action-teal);
transition: stroke var(--duration-base) var(--ease-out);
width: 28px;
height: 28px;
}
.dgs-service-row:hover .dgs-service-row-icon,
.dgs-service-row:focus-visible .dgs-service-row-icon {
color: var(--action-mint-hover);
transform: scale(1.08);
}
.dgs-service-row:hover .dgs-service-row-icon svg,
.dgs-service-row:focus-visible .dgs-service-row-icon svg {
stroke: var(--action-mint-hover);
}
.dgs-service-row-content {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.dgs-service-row-title {
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(1.1rem, 2vw, 1.35rem);
line-height: 1.3;
color: var(--bg-deep-navy);
transition: color var(--duration-base) var(--ease-out);
}
.dgs-service-row:hover .dgs-service-row-title,
.dgs-service-row:focus-visible .dgs-service-row-title {
color: var(--text-white);
}
.dgs-service-row-benefit {
font-size: 0.9rem;
color: var(--text-dark-muted);
line-height: 1.45;
transition: color var(--duration-base) var(--ease-out);
}
.dgs-service-row:hover .dgs-service-row-benefit,
.dgs-service-row:focus-visible .dgs-service-row-benefit {
color: rgba(255, 255, 255, 0.88);
}
.dgs-service-row-arrow {
position: relative;
z-index: 1;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid var(--surface-border-neutral);
display: flex;
align-items: center;
justify-content: center;
color: var(--action-teal);
margin-top: 0.5rem;
transition: all 0.4s var(--ease-out);
}
.dgs-service-row-arrow svg {
width: 16px;
height: 16px;
}
.dgs-service-row:hover .dgs-service-row-arrow,
.dgs-service-row:focus-visible .dgs-service-row-arrow {
border-color: rgba(255, 255, 255, 0.3);
color: var(--text-white);
transform: translateX(4px);
}
@media (max-width: 640px) {
.dgs-service-row {
padding: 1.75rem 1.5rem;
}
.dgs-hero-actions {
flex-direction: column !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
}
.dgs-hero-actions .dgs-btn {
width: auto !important;
text-align: center !important;
justify-content: center !important;
margin: 0 !important;
display: inline-flex !important;
}
}
/* Timeline step content card — teal outline at every breakpoint;
the connector line (mobile: vertical, desktop: horizontal) is drawn
on .dgs-timeline-step itself and sits behind this box (z-index 1 vs 2). */
.dgs-timeline-content {
position: relative;
z-index: 2;
border: 1px solid rgba(0, 179, 159, 0.45);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
}
@media (max-width: 767px) {
.dgs-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 3.5rem !important;
}
.dgs-timeline-step {
position: relative;
text-align: center;
}
.dgs-timeline-step:not(:last-child)::after {
content: '' !important;
position: absolute !important;
top: calc(var(--space-lg) + 22px) !important;
bottom: calc(-3.5rem - var(--space-lg) - 22px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 2px !important;
background: rgba(0, 179, 159, 0.4) !important;
z-index: 1 !important;
border: none !important;
}
.dgs-timeline-content {
background: var(--surface-navy-card) !important;
color: #ffffff !important;
}
.dgs-timeline-content h3,
.dgs-timeline-content .dgs-step-title {
color: #ffffff !important;
}
.dgs-timeline-content p,
.dgs-timeline-content .dgs-step-desc {
color: rgba(255, 255, 255, 0.82) !important;
}
}
/* Center-aligned subtle breathing gradients for narrative flow sections */
#dgs-pain-and-vision,
#dgs-process,
#dgs-audit-why {
background:
radial-gradient(circle at 50% 50%, rgba(0, 179, 159, 0.15) 0%, transparent 60%),
radial-gradient(circle at 100% 100%, rgba(245, 166, 35, 0.05) 0%, transparent 40%),
var(--bg-navy-darkest) !important;
}
/* ─────────────────────────────────────────────
THREE ENGINES SECTION (shared across pages)
───────────────────────────────────────────── */
.dgs-engines-section {
background: var(--bg-white);
padding: var(--space-xl) 0;
}
.dgs-engines-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 1024px) {
.dgs-engines-grid {
grid-template-columns: 1fr;
gap: 2.75rem;
}
}
.dgs-engines-heading h2 {
font-size: clamp(1.9rem, 3.8vw, 2.55rem);
color: var(--bg-deep-navy);
margin-bottom: var(--space-sm);
line-height: 1.15;
}
.dgs-engines-heading h2 .dgs-text-accent {
color: var(--action-teal);
}
.dgs-engines-rule {
width: 3.25rem;
height: 4px;
border-radius: var(--radius-full);
background: var(--accent-yellow);
margin-bottom: var(--space-md);
}
.dgs-engines-explore {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bg-deep-navy);
}
.dgs-engines-explore svg {
width: 15px;
height: 15px;
transition: transform var(--duration-fast) var(--ease-out);
}
.dgs-engines-explore:hover {
color: var(--action-teal);
}
.dgs-engines-explore:hover svg {
transform: translateX(3px);
}
.dgs-engine-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
position: relative;
}
.dgs-engine-icon {
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--action-teal);
}
.dgs-engine-icon svg {
width: 100%;
height: 100%;
}
.dgs-engine-card h3 {
font-size: 1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--bg-deep-navy);
}
.dgs-engine-card p {
font-size: 0.94rem;
line-height: 1.6;
color: var(--text-dark-muted);
}
/* Dividers between engine cards (desktop) */
.dgs-engines-grid .dgs-engine-card:nth-of-type(2)::after,
.dgs-engines-grid .dgs-engine-card:nth-of-type(3)::after {
content: '';
position: absolute;
top: 1rem;
bottom: 0.25rem;
right: -1.5rem;
width: 1px;
background: rgba(10, 31, 51, 0.18);
}
@media (max-width: 1024px) {
.dgs-engines-grid .dgs-engine-card::after {
display: none;
}
}
/* ─── TEXT LINK WITH UNDERLINE (secondary CTA style) ─── */
.dgs-launch-link {
display: inline-flex;
flex-direction: column;
gap: 0.35rem;
color: inherit;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: color var(--duration-base) var(--ease-out);
}
.dgs-launch-link span.dgs-underline {
display: block;
width: 100%;
height: 2px;
background: var(--action-teal);
transition: background var(--duration-base) var(--ease-out);
}
.dgs-launch-link:hover {
color: var(--action-teal);
}
.dgs-launch-link:hover span.dgs-underline {
background: var(--action-teal);
}
/* --- MOBILE MENU SOCIALS --- */
.dgs-mobile-socials {
display: flex;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--surface-border);
margin-top: 1.25rem;
}
.dgs-mobile-socials a {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--surface-border);
background: rgba(255, 255, 255, 0.02);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
transition: all var(--duration-base) var(--ease-out);
}
.dgs-mobile-socials a:hover {
border-color: var(--action-teal);
color: var(--action-teal);
background: rgba(0, 179, 159, 0.1);
}
.dgs-mobile-socials svg {
width: 18px;
height: 18px;
}
/* ============================================================
FRAMEWORK 3.0 - NAVIGATION GLASS STATE + READABILITY MEASURE
Appended layer: these rules intentionally resolve last.
============================================================ */
/* Scrolled navigation state (toggled by js/modules/nav.js at 50px):
at rest the header is solid Deep Navy (heroes are white, so the bar
must always carry its own contrast); once scrolled it becomes a
translucent navy glass with a 12px backdrop blur. Only paint-level
properties transition (background-color, border-color, box-shadow),
and the header is promoted to its own compositor layer, so the
effect runs at 60fps with zero layout shift. */
.dgs-header {
background-color: transparent;
border-bottom: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: translateY(0);
transition: background-color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
will-change: transform;
}
/* Scroll-direction reveal: slide the header up out of view */
.dgs-header--hidden {
transform: translateY(-100%) !important;
}
.dgs-header:hover,
.dgs-header.is-scrolled {
background-color: #0A1F33 !important; /* Solid Navy Dark */
border-bottom: none !important; /* Remove the white line/border */
box-shadow: none !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
.dgs-header--scrolled {
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
.dgs-header::before,
.dgs-header::after {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
.dgs-header,
.dgs-header::before,
.dgs-header::after {
transition: none;
}
}
/* Readability measure: running copy capped at 60-68ch (tokens in :root) */
.dgs-page :where(p) {
max-inline-size: var(--measure-max);
}
/* Centered compositions keep their axis when the cap applies */
.dgs-page :where(.dgs-text-center, .dgs-section-head--center, .dgs-cta-banner, .dgs-year-step, .dgs-timeline-step, [class*="--center"], [style*="text-align: center"], [style*="text-align:center"]) p,
.dgs-page :where(.dgs-cta-banner)>p {
margin-inline: auto;
}
.dgs-measure {
max-inline-size: var(--measure-max) !important;
}
.dgs-measure--tight {
max-inline-size: var(--measure-min) !important;
}
/* ── Framework 3.0 button system: accent text link (reference: "Explore Solutions →") ── */
.dgs-launch-link {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
color: var(--dgs-amber);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: color var(--duration-base) var(--ease-out);
}
.dgs-launch-link span.dgs-underline {
display: none;
}
.dgs-launch-link::after {
content: '\2192';
transition: transform var(--duration-fast) var(--ease-out);
}
.dgs-launch-link:hover {
color: var(--dgs-amber-hover);
}
.dgs-launch-link:hover::after {
transform: translateX(3px);
}
/* On light (white hero) sections amber text fails contrast: navy label, amber arrow */
.dgs-hero .dgs-launch-link {
color: var(--text-dark-primary);
}
/* ============================================================
SAAS CTA BUTTON (canonical) — moved here from dgs-index.css so
every page (solutions, etc.) shares the exact homepage button.
Reference: index.html hero + nav + final CTA.
============================================================ */
.dgs-btn-saas {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.6rem;
border-radius: var(--radius-xl);
font-family: var(--font-body);
font-weight: 650;
font-size: 0.95rem;
letter-spacing: 0.005em;
text-decoration: none;
cursor: pointer;
transition: background-color var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
box-sizing: border-box;
}
/* Larger size for hero / final CTA */
.dgs-btn-saas.dgs-btn-saas--lg {
padding: 1rem 2rem;
font-size: 1.02rem;
border-radius: var(--radius-lg);
}
/* Stopwatch / slot-machine label flip on hover */
.dgs-btn-flip {
position: relative;
display: inline-flex;
align-items: flex-start;
overflow: hidden;
height: 1.4em;
line-height: var(--line-tight);
}
/* Global reset to remove drop-shadow / filter / heavy box shadows on photos and images */
img,
[role="img"],
.dgs-hero-visual-frame,
.dgs-exec-media,
.dgs-partner-photo,
.dgs-founder-portrait,
.dgs-sol-split-media,
.dgs-csr-media,
.dgs-sol-figure {
filter: none !important;
box-shadow: none !important;
}
/* ─── IMAGE LOAD FADE-IN (site-wide) ───
Every starts hidden and fades to full opacity once main.js confirms
it has actually finished loading (or is already cached), instead of
popping in the instant the network delivers it. Opt out per-image with
.dgs-no-fade. */
img {
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-img-loaded,
.dgs-no-fade {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
img {
opacity: 1 !important;
transition: none !important;
}
}
.dgs-btn-flip-track {
display: flex;
flex-direction: column;
transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}
.dgs-btn-flip-line {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 1.4em;
white-space: nowrap;
}
.dgs-btn-saas:hover .dgs-btn-flip-track,
.dgs-btn-saas:focus-visible .dgs-btn-flip-track {
transform: translateY(-50%);
}
.dgs-btn-saas:hover .dgs-btn-flip-line .dgs-btn-icon svg {
transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
.dgs-btn-flip-track {
transition: none;
}
.dgs-btn-saas:hover .dgs-btn-flip-track,
.dgs-btn-saas:focus-visible .dgs-btn-flip-track {
transform: none;
}
}
.dgs-btn-saas--primary {
background-color: var(--dgs-amber) !important;
color: #0A1F33 !important;
border: 1px solid var(--dgs-amber) !important;
}
.dgs-btn-saas--primary:hover {
background-color: #e0961f !important;
border-color: #e0961f !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(245, 166, 35, 0.28);
}
.dgs-btn-saas--secondary {
background-color: transparent !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.dgs-btn-saas--secondary:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
/* ============================================================
GLOBAL BRAND PROMISE LINK STYLE (.dgs-promise-link)
Teal underline text link component with animated arrow icon
============================================================ */
.dgs-promise-link {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 650;
color: var(--action-teal) !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
position: relative;
align-self: flex-start;
transition: color var(--duration-base, 0.2s) var(--ease-out, ease);
}
.dgs-promise-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--action-teal);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-base, 0.2s) var(--ease-out, ease);
}
.dgs-promise-link:hover::after {
transform: scaleX(1);
}
.dgs-promise-link .dgs-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: currentColor;
transition: transform var(--duration-base, 0.2s) var(--ease-out, ease);
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
.dgs-promise-link .dgs-btn-icon svg {
width: 14px;
height: 14px;
stroke-width: 2.5px;
}
.dgs-promise-link:hover .dgs-btn-icon {
transform: translateX(4px);
}
/* ============================================================
GLOBAL WHY DIGITAL GROWTHSCALE CARD SYSTEM (.dgs-why-card)
Balanced line-height and tight spacing to eliminate awkward wraps
============================================================ */
.dgs-why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem 2rem;
}
@media (min-width: 600px) {
.dgs-why-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.dgs-why-grid {
grid-template-columns: repeat(4, 1fr);
gap: 3rem 2rem;
}
}
.dgs-why-card {
position: relative;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
transition: transform 0.4s var(--ease-out, ease);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dgs-why-card:hover {
transform: translateY(-5px);
}
.dgs-why-icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: var(--radius-lg);
background: linear-gradient(150deg, rgba(0, 179, 159, 0.16) 0%, rgba(45, 127, 249, 0.1) 100%);
border: 1px solid rgba(0, 179, 159, 0.22);
color: var(--action-teal, #00B39F);
margin-bottom: 1.15rem;
transition: all 0.35s ease;
}
.dgs-why-icon-box svg {
width: 26px;
height: 26px;
transition: transform 0.35s ease;
}
.dgs-why-card:hover .dgs-why-icon-box {
border-color: rgba(0, 179, 159, 0.5);
box-shadow: 0 0 18px rgba(0, 179, 159, 0.22);
}
.dgs-why-card:hover .dgs-why-icon-box svg {
transform: scale(1.08);
}
.dgs-why-title {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
color: var(--text-white, #ffffff);
margin: 0 0 0.65rem 0;
line-height: 1.25;
letter-spacing: -0.015em;
}
.dgs-why-desc {
font-family: var(--font-body);
font-size: 0.93rem;
line-height: 1.55;
color: var(--text-light-muted, rgba(255, 255, 255, 0.68));
margin: 0;
}
.dgs-case-note {
margin-top: 3.25rem !important;
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.6;
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
text-align: center;
}
/* ─────────────────────────────────────────
GLOBAL: Modernized reduced border-radius & zero drop-shadows sitewide
───────────────────────────────────────── */
/* 1. All cards, panels, containers, and modules: sharp modern radius (8-10px max) */
.dgs-card,
.dgs-panel,
.dgs-challenge-card,
.dgs-challenge-stage,
.dgs-outcome-card,
.dgs-case-card,
.dgs-stat-card,
.dgs-metric-card,
.dgs-resource-card,
.dgs-service-card,
.dgs-industry-card,
.dgs-hub-card,
.dgs-feature-card,
.dgs-step-card,
.dgs-next-step-card,
.dgs-process-card,
.dgs-pillar-card,
.dgs-diff-card,
.dgs-tag-card,
.dgs-waiver-banner,
.dgs-ghl-placeholder-box,
.dgs-fsol-card,
.dgs-hero-stats-panel,
.dgs-contact-form-single,
.dgs-ghl-placeholder-box,
[class*="-card"],
[class*="-panel"]:not(nav):not(.dgs-ghl-panel) {
border-radius: var(--radius-xl) !important;
box-shadow: none !important;
}
/* 2. All images, photo frames, and media containers */
img,
.dgs-hero-visual-frame,
.dgs-panel-media,
.dgs-panel-media img,
.dgs-case-img,
.dgs-case-img img,
.dgs-outcome-img,
.dgs-outcome-img img,
.dgs-photo-frame,
.dgs-img-wrap,
.dgs-fsol-card-bg img {
border-radius: var(--radius-lg) !important;
box-shadow: none !important;
}
/* 3. Sitewide shadow removal for all components, hover states, and overlays */
*,
*::before,
*::after {
box-shadow: none !important;
}
/* ============================================================
DESIGN SYSTEM 3.1 — ICON ALIGNMENT, RHYTHM & RESPONSIVE POLISH
Appended last so it resolves after component sheets, but kept
low-specificity and additive (`:where()` = 0 specificity) so
every tuned component keeps its identity. Covers the genuinely
global concerns: inline-icon alignment, opt-in text roles, and
responsive rhythm step-downs.
============================================================ */
/* ── Inline icon alignment ──────────────────────────────────
An inline SVG that accompanies text now sits optically centered
on that text instead of dropping to the baseline. Ignored inside
flex rows (where components already center their icons), so this
only corrects stray inline glyphs in prose, links, and pills. */
.dgs-page :where(p, span, a, li, h1, h2, h3, h4, h5, h6) > svg {
vertical-align: -0.125em;
}
/* Icons inside buttons / links never shrink away from their label. */
.dgs-page :where(a, button) svg {
flex-shrink: 0;
}
/* ── Opt-in text-role utilities ─────────────────────────────
New markup can adopt the system without inventing new sizes;
existing markup is unaffected (these classes aren't in use yet). */
.dgs-lead {
font-size: var(--fs-lead);
line-height: var(--line-relaxed);
font-weight: 400;
}
.dgs-caption {
font-size: var(--fs-caption);
line-height: var(--line-normal);
color: var(--text-tertiary);
}
.dgs-label {
font-family: var(--font-body);
font-size: var(--fs-label);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
line-height: var(--line-normal);
}
/* ── Responsive rhythm step-downs ───────────────────────────
Keep vertical rhythm proportional as the viewport narrows:
tighten section-head spacing and scale the eyebrow down. */
@media (max-width: 768px) {
.dgs-section-head {
margin-bottom: var(--space-md);
}
.dgs-eyebrow {
font-size: 0.95rem;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.dgs-eyebrow {
font-size: 0.85rem;
}
}
/* ============================================================
GLOBAL SERVICE HERO LAYOUT
============================================================ */
.dgs-service-hero > .dgs-container {
position: relative;
z-index: 5;
}
.dgs-svc-hero-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.dgs-service-hero .dgs-hero-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 1140px;
margin: 0 auto;
text-align: center;
}
.dgs-service-hero h1 {
font-family: var(--font-heading, "Manrope", sans-serif);
font-size: clamp(2.2rem, 5vw, 4.5rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.03em;
color: #ffffff;
margin: 0 auto 1.5rem;
max-width: 1140px;
text-align: center;
}
@media (max-width: 480px) {
.dgs-service-hero h1,
.dgs-hero--premium-split h1 {
font-size: clamp(1.8rem, 7.5vw, 2.25rem) !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
}
.dgs-service-hero .dgs-hero-sub {
color: rgba(255, 255, 255, 0.9);
max-width: 720px;
font-size: 1.125rem;
line-height: 1.75;
margin: 0 auto;
text-align: center;
}
.dgs-service-hero .dgs-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 2.5rem;
}
/* ============================================================
GLOBAL HERO TYPOGRAPHY & PILLS
============================================================ */
.dgs-hero-title-main {
background: linear-gradient(to bottom, #ffffff 55%, #cfd8e3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.dgs-hero-teal-text {
color: var(--action-teal, #00b39f) !important;
-webkit-text-fill-color: var(--action-teal, #00b39f) !important;
background: none !important;
display: inline;
}
.dgs-hero-dot {
color: var(--action-teal, #00b39f) !important;
-webkit-text-fill-color: var(--action-teal, #00b39f) !important;
display: inline;
}
.dgs-value-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.dgs-pill {
padding: 0.35rem 0.85rem;
border-radius: var(--radius-full, 9999px);
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
}
.dgs-pill.dgs-pill--teal {
background: rgba(0, 179, 159, 0.15);
border: 1px solid rgba(0, 179, 159, 0.4);
color: #1affeb; /* brighter teal for dark mode contrast */
}
/* Global removal of background grids across hero sections and CTA sections */
.dgs-hero-mesh-overlay,
.dgs-service-hero .dgs-hero-mesh-overlay,
.final-cta-bg-grid {
display: none !important;
background-image: none !important;
}
/* ============================================================
GLOBAL FINAL CTA BLOCK (.dgs-sol-final-cta)
============================================================ */
.dgs-sol-final-cta {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--bg-navy-darkest, #0A1F33) !important;
-webkit-mask-image: none !important;
mask-image: none !important;
padding: clamp(5rem, 11vw, 9.5rem) 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dgs-sol-final-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
opacity: 0.38;
mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 75%, transparent 98%);
-webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 75%, transparent 98%);
pointer-events: none;
}
.dgs-sol-final-cta::before {
content: none;
}
.final-cta-giant-bg-text {
font-family: var(--font-heading);
font-size: 22vw;
line-height: 0.85;
font-weight: 900;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 1px rgba(245, 166, 35, 0.035);
background: linear-gradient(180deg, rgba(245, 166, 35, 0.05) 0%, transparent 60%);
-webkit-background-clip: text;
background-clip: text;
position: absolute !important;
top: 78%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
user-select: none;
white-space: nowrap;
display: none;
}
/* Only show on index — JS adds .dgs-scale-enabled on homepage sections */
.dgs-scale-enabled .final-cta-giant-bg-text {
display: block;
}
.dgs-sol-final-cta.has-dom-giant-text::before,
.cinematic-cta-wrapper.has-dom-giant-text::before {
display: none !important;
}
.dgs-sol-final-cta::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 70vw;
height: 50vh;
transform: translate(-50%, -50%);
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
background: radial-gradient(circle at 50% 50%,
rgba(0, 179, 159, 0.12) 0%,
rgba(45, 127, 249, 0.12) 40%,
transparent 70%);
animation: dgs-sol-cta-breathe 8s ease-in-out infinite alternate;
}
@keyframes dgs-sol-cta-breathe {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.85; }
}
.dgs-sol-final-cta > *:not(.dgs-sol-final-bg) {
position: relative;
z-index: 2;
}
.dgs-sol-final-cta h2 {
max-width: 66rem;
font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
line-height: 1.22;
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
margin: 0 auto 1.5rem auto;
}
.dgs-sol-final-cta h2 .dgs-text-accent {
-webkit-text-fill-color: var(--action-teal);
filter: none;
}
.dgs-sol-final-cta p {
max-width: 42rem;
margin: 0 auto 3rem auto;
color: rgba(255, 255, 255, 0.88);
font-size: 1.125rem;
font-weight: 500;
line-height: 1.6;
}
.dgs-sol-final-ctas {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.dgs-sol-final-cta {
padding: 3.5rem 1.25rem !important;
}
.dgs-sol-final-cta h2 {
font-size: clamp(1.4rem, 5vw, 1.85rem) !important;
line-height: 1.3 !important;
word-break: break-word !important;
margin-bottom: 1rem !important;
}
.dgs-sol-final-cta p {
font-size: 0.98rem !important;
line-height: 1.6 !important;
margin-bottom: 2rem !important;
padding: 0 0.5rem !important;
}
.dgs-sol-final-cta::before {
font-size: 35vw !important;
}
}
@media (max-width: 480px) {
.dgs-sol-final-ctas,
.dgs-hero-actions,
.dgs-cta-actions,
.dgs-mobile-nav-buttons {
flex-direction: column !important;
width: 100% !important;
gap: 0.75rem !important;
}
.dgs-sol-final-ctas > a,
.dgs-sol-final-ctas > .dgs-btn-saas,
.dgs-sol-final-ctas > .dgs-btn,
.dgs-hero-actions > a,
.dgs-hero-actions > .dgs-btn-saas,
.dgs-hero-actions > .dgs-btn,
.dgs-cta-actions > a,
.dgs-cta-actions > .dgs-btn-saas,
.dgs-cta-actions > .dgs-btn {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: inline-flex !important;
justify-content: center !important;
text-align: center !important;
}
}
/* ════════════════════════════════════════════════════════════
UNIFIED BUTTON CORNER ROUNDING (Matches solutions.html)
Enforces consistent 8px corner rounding (var(--radius-lg))
across all button variants, navbar CTAs, forms, and footer.
════════════════════════════════════════════════════════════ */
.dgs-btn,
.dgs-btn-saas,
.dgs-btn-saas--primary,
.dgs-btn-saas--secondary,
.dgs-btn-saas--lg,
.dgs-btn--primary,
.dgs-btn--secondary,
.dgs-btn--primary-accent,
.dgs-btn--outline,
.dgs-btn--outline-teal,
.dgs-btn--outline-dark,
.dgs-btn--nav,
.dgs-btn--lg,
#dgs-nav-cta,
.dgs-newsletter-form button,
.dgs-mobile-nav-buttons .dgs-btn,
.dgs-mobile-nav-buttons .dgs-btn-saas,
button.dgs-btn-saas,
a.dgs-btn-saas,
a.dgs-btn,
.dgs-header .dgs-btn-saas,
.dgs-footer .dgs-btn-saas {
border-radius: var(--radius-lg, 6px) !important;
}
/* ════════════════════════════════════════════════════════════
MOBILE NAVBAR COMPACT PADDING
Reduces left/right inset space on mobile viewports.
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.dgs-header .dgs-nav,
.dgs-container.dgs-nav,
header .dgs-nav {
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
}
/* ════════════════════════════════════════════════════════════
CLIENT SUCCESS — "What this looks like in practice."
Side-by-side text-based metric showcase with clean top rules,
bold stat figures, teal units, and editorial description copy.
Shared across all solution and industry detail pages.
════════════════════════════════════════════════════════════ */
/* Sizes/margins matched to the industries-page Client Success grid
(.dgs-cs-* in dgs-industries-detail.css) so both templates read the
same scale. */
.dgs-case-carousel {
position: relative;
width: 100%;
max-width: 84rem;
margin: 3rem auto 2.25rem;
}
.dgs-case-carousel-card {
position: relative;
z-index: 1;
background: transparent;
border-radius: 0;
box-shadow: none;
overflow: visible;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 768px) {
.dgs-case-carousel-card {
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
}
}
.dgs-case-carousel-slide {
display: flex !important;
flex-direction: column;
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding-top: 2rem;
opacity: 1 !important;
transform: none !important;
}
.dgs-section--light .dgs-case-carousel-slide {
border-top-color: rgba(10, 31, 51, 0.15);
}
.dgs-case-carousel-stat {
min-width: 0;
padding: 0;
background: transparent;
display: flex;
flex-direction: column;
}
.dgs-case-carousel-figure {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.6rem;
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(3.25rem, 6vw, 4.5rem);
line-height: 1;
color: #FFFFFF;
letter-spacing: -0.02em;
margin-bottom: 0.85rem;
}
.dgs-section--light .dgs-case-carousel-figure {
color: var(--bg-deep-navy);
}
.dgs-case-carousel-figure small {
display: inline-block;
/* Independent size (matches .dgs-cs-unit on industries pages), not a
relative em off the big number — keeps the label the same visual
weight regardless of how long/short the figure itself is. */
font-size: clamp(1.3rem, 2.3vw, 1.75rem);
font-weight: 700;
color: var(--action-teal, #00B39F);
letter-spacing: -0.01em;
}
.dgs-case-carousel-figure--text {
font-size: clamp(1.85rem, 3.2vw, 2.5rem);
line-height: 1.15;
}
.dgs-case-carousel-caption {
display: block;
margin-top: 0;
margin-bottom: 0.9rem;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
color: var(--action-teal, #00B39F);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.dgs-case-carousel-progress {
display: none !important;
}
.dgs-case-carousel-quote {
min-width: 0;
padding: 0;
border: none;
}
.dgs-case-carousel-mark {
display: none !important;
}
.dgs-case-carousel-text {
font-family: var(--font-body);
font-size: 1.02rem;
line-height: 1.7;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 2.5rem !important;
max-width: 42ch;
}
.dgs-section--light .dgs-case-carousel-text {
color: var(--text-dark-muted);
}
/* Dedicated Scope Pill Tag */
.dgs-case-scope {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 1.05rem 0.4rem 0.4rem;
border: 1px solid rgba(0, 179, 159, 0.35);
border-radius: 999px;
width: fit-content;
max-width: 100%;
}
.dgs-case-scope-label {
display: inline-block;
background: var(--action-teal, #00B39F);
color: #0A1F33;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.32rem 0.7rem;
border-radius: 999px;
flex-shrink: 0;
line-height: 1;
}
.dgs-case-scope-val {
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.01em;
}
.dgs-section--light .dgs-case-scope {
border-color: rgba(0, 179, 159, 0.35);
}
.dgs-section--light .dgs-case-scope-val {
color: var(--text-dark-primary);
}
.dgs-case-carousel-nav {
display: none !important;
}
/* ============================================================
CAREER DETAIL HERO GLOW
Same soft radial teal/blue glow used on the legal and growth
article hero sections. Apply `.dgs-career-hero` alongside the
existing inline navy hero on /careers/*.html detail pages.
============================================================ */
.dgs-career-hero {
position: relative;
overflow: hidden;
isolation: isolate;
}
.dgs-career-hero::before {
content: '';
position: absolute;
left: 50%;
top: -18%;
width: 56vw;
height: 22rem;
min-width: 26rem;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
filter: blur(70px);
pointer-events: none;
z-index: 0;
}
.dgs-career-hero > .dgs-container {
position: relative;
z-index: 1;
}
/* NAV TYPOGRAPHY: Inter, not Sora (2026-08-24 user request) — every
element inside the header/nav (desktop links, dropdown megamenu,
mobile drawer, buttons) reads in the body font, not the display font. */
.dgs-header,
.dgs-header * {
font-family: var(--font-body) !important;
}
/* ════════════════════════════════════════════════════════════════
GHL-SAFE ISOLATION LAYER (2026-09-04)
Why this exists: almost every rule above this point is scoped
under `.dgs-page` on