/* ============================================================
Page CSS — Forms (Apply, Contact, Thank You)
============================================================ */
/* ---------- Forms hero (Apply, Contact, Get Relief, Become an ISO) ----
Canonical .ds-inner-hero (main.css) now provides background, padding,
d-mark watermark, h1 sizing, __sub, __inner max-width, and .ds-eyebrow
color. Only keep the forms-specific h1 clamp and breadcrumb tweak.
The duplicate ::before watermark was removed in favor of the canonical
::after on .ds-inner-hero (no two-watermark pile-up).
--------------------------------------------------------------- */
.ds-inner-hero--forms .ds-inner-hero__inner { max-width: 1280px; }
.ds-inner-hero--forms h1 {
font-size: clamp(44px, 6.4vw, 84px);
line-height: 0.98;
margin-top: 0;
}
.ds-inner-hero--forms .ds-inner-hero__sub {
font-size: 20px;
margin-top: 28px;
max-width: 780px;
}
.ds-inner-hero--forms .ds-breadcrumbs {
font-size: 12px;
color: var(--ds-muted);
margin-bottom: 24px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ---------- Apply ---------- */
.ds-apply {
background: var(--ds-paper);
padding: 40px 60px 96px;
}
.ds-apply__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: start;
}
.ds-apply__form-card {
padding: 48px 56px;
background: #fff;
border-radius: 24px;
border: 1px solid var(--ds-line);
}
.ds-apply__form-card .ds-form {
background: transparent;
padding: 0;
border-radius: 0;
}
.ds-apply__benefits {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ds-apply__benefits-card {
position: relative;
padding: 32px;
background: var(--ds-ink);
color: #fff;
border-radius: 20px;
overflow: hidden;
}
.ds-apply__benefits-card::after {
content: "";
position: absolute;
right: -30px;
bottom: -20px;
width: 180px;
height: 240px;
background: url('../images/ico-delancey.svg') no-repeat center / contain;
opacity: 0.05;
filter: brightness(0) invert(1);
pointer-events: none;
z-index: 0;
}
.ds-apply__benefits-card > * { position: relative; z-index: 1; }
.ds-apply__benefits-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 14px;
}
.ds-apply__benefits-icon {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 184, 240, 0.12);
color: var(--ds-cyan);
}
.ds-apply__benefits-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.ds-apply__benefits-list li {
display: grid;
grid-template-columns: 42px 1fr;
gap: 16px;
align-items: flex-start;
}
.ds-apply__benefits-list .n {
font-size: 20px;
font-weight: 900;
color: var(--ds-cyan);
line-height: 1;
}
.ds-apply__benefits-list .t {
font-size: 14px;
font-weight: 800;
color: #fff;
margin-bottom: 4px;
}
.ds-apply__benefits-list .s {
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, .7);
font-weight: 500;
}
.ds-apply__trust-card {
padding: 22px 24px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 16px;
}
.ds-apply__trust-card--row {
display: flex;
align-items: center;
gap: 14px;
}
.ds-apply__trust-card .icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ds-paper-2);
color: var(--ds-cyan-deep);
display: grid;
place-items: center;
flex: 0 0 44px;
}
.ds-apply__trust-card .h {
font-size: 13px;
font-weight: 800;
color: var(--ds-ink);
}
.ds-apply__trust-card .s {
font-size: 12px;
color: var(--ds-muted);
font-weight: 500;
line-height: 1.5;
margin-top: 2px;
}
.ds-apply__phone-num {
font-size: 22px;
font-weight: 900;
color: var(--ds-ink);
}
.ds-apply__call-card {
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 16px;
padding: 22px 24px;
display: flex;
flex-direction: column;
text-align: left;
}
.ds-apply__call-card-eyebrow {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.ds-apply__call-card-phone {
font-size: 24px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.01em;
display: block;
margin-bottom: 6px;
text-decoration: none;
line-height: 1.1;
}
.ds-apply__call-card-phone:hover { color: var(--ds-cyan); }
.ds-apply__call-card-hours {
font-size: 12px;
color: var(--ds-ink-3);
font-weight: 500;
line-height: 1.4;
}
.ds-apply__stats {
margin-top: 64px;
padding: 40px 48px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.ds-apply__stat {
text-align: center;
padding: 0 16px;
border-right: 1px solid var(--ds-line);
}
.ds-apply__stat:last-child { border-right: 0; }
.ds-apply__stat .n {
font-size: 36px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: -0.02em;
line-height: 1;
}
.ds-apply__stat .l {
font-size: 11px;
font-weight: 800;
color: var(--ds-ink-2);
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* ---------- Contact ---------- */
.ds-contact-channels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1280px;
margin: 0 auto;
}
.ds-contact-channel {
padding: 36px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.ds-contact-channel--primary {
background: var(--ds-ink);
color: #fff;
border-color: var(--ds-ink);
}
.ds-contact-channel__icon {
width: 54px;
height: 54px;
border-radius: 14px;
background: var(--ds-paper-2);
color: var(--ds-cyan-deep);
display: grid;
place-items: center;
margin-bottom: 24px;
}
.ds-contact-channel--primary .ds-contact-channel__icon {
background: var(--ds-cyan);
color: #fff;
}
.ds-contact-channel__label {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 10px;
}
.ds-contact-channel__value {
font-size: 26px;
font-weight: 900;
letter-spacing: -0.01em;
margin-bottom: 14px;
color: inherit;
}
.ds-contact-channel__sub {
font-size: 14px;
line-height: 1.6;
font-weight: 500;
color: var(--ds-ink-3);
}
.ds-contact-channel--primary .ds-contact-channel__sub {
color: rgba(255, 255, 255, .85);
}
.ds-contact-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: start;
max-width: 1280px;
margin: 0 auto;
}
.ds-contact-form-card {
padding: 32px;
background: #fff;
border-radius: 18px;
border: 1px solid var(--ds-line);
margin-top: 32px;
}
.ds-contact-form-card .ds-form {
background: transparent;
padding: 0;
border-radius: 0;
}
.ds-contact-offices {
display: flex;
flex-direction: column;
gap: 24px;
}
.ds-contact-office {
padding: 28px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 18px;
display: grid;
grid-template-columns: 72px 1fr;
gap: 20px;
align-items: flex-start;
}
.ds-contact-office__icon {
width: 72px;
height: 72px;
border-radius: 14px;
background: var(--ds-paper-2);
color: var(--ds-cyan-deep);
display: grid;
place-items: center;
}
.ds-contact-office h3 {
font-size: 20px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 8px;
text-transform: uppercase;
}
.ds-contact-office p {
font-size: 13px;
line-height: 1.55;
color: var(--ds-ink-3);
margin: 0 0 12px;
font-weight: 500;
white-space: pre-line;
}
.ds-contact-office__meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 12px;
color: var(--ds-ink-2);
font-weight: 700;
}
.ds-contact-office__meta .hours { color: var(--ds-muted); }
.ds-contact-office__meta a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ds-ink);
}
.ds-contact-office__meta a:hover { color: var(--ds-cyan); }
/* ---------- Contact: corner D watermark on light sections ---------- */
.ds-list-section--watermark {
position: relative;
overflow: hidden;
}
.ds-list-section--watermark > .ds-list-section__inner {
position: relative;
z-index: 2;
}
.ds-list-section__watermark {
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%) rotate(-12deg);
height: 280px;
width: auto;
opacity: 0.04;
pointer-events: none;
z-index: 1;
user-select: none;
}
/* ---------- Contact: contact-channel hover, primary card pattern ---------- */
.ds-contact-channel {
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.ds-contact-channel:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(15, 26, 45, 0.10);
border-color: var(--ds-cyan);
}
.ds-contact-channel--primary:hover {
border-color: var(--ds-ink);
box-shadow: 0 14px 32px rgba(15, 26, 45, 0.30);
}
.ds-contact-channel__icon,
.ds-contact-channel__label,
.ds-contact-channel__value,
.ds-contact-channel__sub {
position: relative;
z-index: 2;
}
.ds-contact-channel__d-pattern {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 45%;
opacity: 0.08;
pointer-events: none;
z-index: 1;
background-image: radial-gradient(circle at 30% 30%, #fff 1.5px, transparent 2px);
background-size: 22px 22px;
}
.ds-contact-channel__value a {
color: inherit;
text-decoration: none;
transition: color 160ms ease;
}
.ds-contact-channel__value a:hover { color: var(--ds-cyan); }
.ds-contact-channel--primary .ds-contact-channel__value a:hover { color: var(--ds-cyan); }
/* Contact-page closing CTA was a one-off (.ds-contact-cta-band) with
its own dot-grid pattern, font sizes, and button variants. Replaced
with the canonical .ds-mca-final-cta in page-contact.php so contact
matches the rest of the site. The mobile-only override for
.ds-list-section__watermark is preserved below. */
@media (max-width: 640px) {
.ds-list-section__watermark { height: 200px; right: -60px; opacity: 0.03; }
}
/* ---------- Thank You ---------- */
.ds-thankyou {
padding: 96px 60px;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
}
.ds-thankyou__inner {
max-width: 880px;
width: 100%;
text-align: center;
}
.ds-thankyou__check {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--ds-cyan);
display: inline-grid;
place-items: center;
margin-bottom: 32px;
color: #fff;
}
.ds-thankyou__kicker {
font-size: 14px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 16px;
}
.ds-thankyou h1 {
font-size: clamp(56px, 9vw, 96px);
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.025em;
text-transform: uppercase;
margin: 0;
line-height: 1;
}
.ds-thankyou__sub {
font-size: 21px;
line-height: 1.55;
color: var(--ds-ink-3);
margin: 28px auto 0;
font-weight: 500;
max-width: 640px;
}
.ds-thankyou__nextcard {
margin-top: 48px;
padding: 32px;
background: var(--ds-paper);
border-radius: 20px;
text-align: left;
}
.ds-thankyou__nextcard-h {
font-size: 11px;
font-weight: 800;
color: var(--ds-ink-2);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 18px;
text-align: center;
}
.ds-thankyou__nextcard-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.ds-thankyou__nextcard-grid a {
padding: 18px 20px;
background: #fff;
border-radius: 12px;
}
.ds-thankyou__nextcard-grid .h {
font-size: 14px;
font-weight: 800;
color: var(--ds-ink);
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ds-thankyou__nextcard-grid .s {
font-size: 12px;
line-height: 1.5;
color: var(--ds-ink-3);
font-weight: 500;
}
.ds-thankyou__phoneline {
margin-top: 32px;
font-size: 14px;
color: var(--ds-ink-3);
font-weight: 500;
}
.ds-thankyou__phoneline a { color: var(--ds-cyan); font-weight: 800; }
/* ---------- Get Relief Today ---------- */
.ds-relief {
padding: 40px 60px 72px;
background: #fff;
}
.ds-relief__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: start;
}
.ds-relief__col { min-width: 0; }
.ds-relief-steps {
list-style: none;
padding: 0;
margin: 40px 0 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.ds-relief-steps li {
display: flex;
gap: 20px;
padding: 24px 26px;
background: var(--ds-paper);
border-radius: 14px;
}
.ds-relief-steps__n {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--ds-cyan);
color: #fff;
display: grid;
place-items: center;
font-size: 18px;
font-weight: 900;
flex-shrink: 0;
}
.ds-relief-steps__t {
font-size: 18px;
font-weight: 800;
color: var(--ds-ink);
margin-bottom: 6px;
}
.ds-relief-steps__d {
font-size: 14px;
line-height: 1.6;
color: var(--ds-ink-3);
font-weight: 500;
}
.ds-relief-confidential {
margin-top: 36px;
padding: 22px 26px;
border-radius: 14px;
background: var(--ds-ink);
color: #fff;
display: flex;
align-items: center;
gap: 18px;
}
.ds-relief-confidential .t {
font-size: 14px;
font-weight: 800;
margin-bottom: 3px;
}
.ds-relief-confidential .s {
font-size: 13px;
opacity: .8;
font-weight: 500;
line-height: 1.5;
}
.ds-relief__form { position: sticky; top: 100px; }
.ds-relief__form-card {
padding: 28px 26px;
border-radius: 18px;
background: #fff;
border: 1px solid var(--ds-line);
box-shadow: 0 6px 24px rgba(15, 26, 45, .06);
}
.ds-relief__form-card .ds-form {
background: transparent;
padding: 0;
border-radius: 0;
}
/* Compact callback form — tighter row gap and softer textarea than the
standard wizard since the page advertises a 30-minute callback. */
.ds-relief__callback {
gap: 12px;
}
.ds-relief__callback .ds-form__field { gap: 0; }
.ds-relief__callback textarea {
min-height: 88px;
padding: 12px 14px;
line-height: 1.45;
resize: vertical;
}
.ds-relief__optional {
font-size: 10px;
font-weight: 700;
color: var(--ds-muted, #8A95A6);
letter-spacing: 0.06em;
margin-left: 4px;
text-transform: none;
}
.ds-relief__hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
/* ---------- ISO Guide pages (referral program / brokers) ---------- */
.ds-guide-hero {
padding: 56px 60px 40px;
background: #fff;
}
.ds-guide-hero__inner {
max-width: 920px;
margin: 0 auto;
}
.ds-guide-hero__inner > .ds-breadcrumbs { margin-bottom: 28px; }
.ds-guide-hero__chips {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
}
.ds-guide-hero h1 + .ds-guide-hero__sub,
.ds-guide-hero__sub { margin-top: 22px; }
.ds-guide-hero__chip-cyan {
padding: 5px 12px;
background: var(--ds-cyan);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
}
.ds-guide-hero__meta {
font-size: 12px;
color: var(--ds-muted);
font-weight: 600;
}
.ds-guide-hero h1 {
font-size: 62px;
line-height: 1;
letter-spacing: -0.025em;
font-weight: 900;
margin: 0;
text-transform: uppercase;
color: var(--ds-ink);
text-wrap: balance;
}
.ds-guide-hero__sub {
font-size: 20px;
line-height: 1.55;
color: var(--ds-ink-3);
margin-top: 20px;
font-weight: 500;
max-width: 780px;
}
.ds-guide {
padding: 40px 60px 72px;
background: #fff;
}
.ds-guide__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 64px;
}
.ds-guide__toc {
position: sticky;
top: 120px;
align-self: start;
}
.ds-guide__toc-kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 18px;
}
.ds-guide__toc-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.ds-guide__toc-list li { font-size: 13px; font-weight: 600; line-height: 1.45; }
.ds-guide__toc-list a {
color: var(--ds-ink-2);
display: flex;
gap: 10px;
}
.ds-guide__toc-list a:hover { color: var(--ds-cyan); }
.ds-guide__toc-list .n {
color: var(--ds-cyan);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.ds-guide__toc-cta {
margin-top: 28px;
padding: 24px 22px 22px;
background: var(--ds-ink);
color: #fff;
border-radius: 18px;
position: relative;
overflow: hidden;
}
.ds-guide__toc-cta::before {
content: "";
position: absolute;
top: -30px;
right: -30px;
width: 140px;
height: 140px;
border-radius: 50%;
background: var(--ds-cyan);
opacity: 0.12;
pointer-events: none;
}
.ds-guide__toc-cta > * { position: relative; }
.ds-guide__toc-cta .kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 12px;
}
.ds-guide__toc-cta .t {
font-size: 20px;
font-weight: 900;
line-height: 1.15;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 10px;
color: #fff;
}
.ds-guide__toc-cta .t span { color: var(--ds-cyan); }
.ds-guide__toc-cta p {
font-size: 13px;
line-height: 1.55;
color: rgba(255,255,255,.72);
margin: 0 0 16px;
font-weight: 500;
}
.ds-guide__toc-cta a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 46px;
padding: 0 20px;
border-radius: 999px;
background: var(--ds-cyan);
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: var(--ds-shadow-cta);
transition: transform .2s var(--ds-ease), box-shadow .2s var(--ds-ease);
}
.ds-guide__toc-cta a:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: var(--ds-shadow-cta-hover);
}
.ds-guide__toc-cta a svg { transition: transform .2s var(--ds-ease); }
.ds-guide__toc-cta a:hover svg { transform: translateX(3px); }
.ds-guide__article {
max-width: 720px;
font-size: 18px;
line-height: 1.75;
color: var(--ds-ink-2);
}
.ds-guide__intro p { margin: 0 0 22px; font-weight: 500; }
.ds-guide__section { margin-top: 56px; }
.ds-guide__section:first-of-type { margin-top: 8px; }
.ds-guide__section h2 {
font-size: 32px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 18px;
letter-spacing: -0.015em;
text-transform: uppercase;
}
.ds-guide__section h2 .n {
display: inline-block;
font-size: 13px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
margin-right: 14px;
font-variant-numeric: tabular-nums;
}
.ds-guide__section p {
margin: 0 0 22px;
font-weight: 500;
}
/* Body content lists inside guide article (the_content + section bodies).
Base CSS resets ul/ol globally; restore visible markers for prose. */
.ds-guide__article ul,
.ds-guide__intro ul,
.ds-guide__section ul {
list-style: none;
padding-left: 24px;
margin: 0 0 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-guide__article ul li,
.ds-guide__intro ul li,
.ds-guide__section ul li {
position: relative;
padding-left: 18px;
font-size: 17px;
line-height: 1.7;
color: var(--ds-ink-2);
font-weight: 500;
}
.ds-guide__article ul li::before,
.ds-guide__intro ul li::before,
.ds-guide__section ul li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ds-cyan);
}
.ds-guide__article > ol,
.ds-guide__intro > ol,
.ds-guide__section > ol {
list-style: decimal-leading-zero;
padding-left: 36px;
margin: 0 0 22px;
}
.ds-guide__article > ol > li,
.ds-guide__intro > ol > li,
.ds-guide__section > ol > li {
font-size: 17px;
line-height: 1.7;
color: var(--ds-ink-2);
font-weight: 500;
padding-left: 6px;
margin-bottom: 8px;
}
.ds-guide__article > ol > li::marker {
color: var(--ds-cyan);
font-weight: 800;
}
/* Reset for checklist (don't double-mark): no decimal counter, no padding-left on ol. */
.ds-guide__checklist ol {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
/* Inline links inside guide article body */
.ds-guide__article a {
color: var(--ds-cyan);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
font-weight: 600;
transition: color 120ms ease, text-decoration-thickness 120ms ease;
}
.ds-guide__article a:hover {
color: var(--ds-cyan-deep);
text-decoration-thickness: 2px;
}
.ds-guide__article a:focus-visible {
outline: 2px solid var(--ds-cyan);
outline-offset: 2px;
border-radius: 2px;
}
/* ---------- Become an ISO ---------- */
.ds-iso-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--ds-line);
max-width: 1280px;
margin: 0 auto;
}
.ds-iso-stats > div {
padding: 34px 28px;
border-right: 1px solid var(--ds-line);
text-align: center;
}
.ds-iso-stats > div:last-child { border-right: 0; }
.ds-iso-stats .n {
font-size: 48px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: -0.02em;
line-height: 1;
}
.ds-iso-stats .l {
font-size: 12px;
color: var(--ds-ink-2);
font-weight: 700;
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.ds-iso-lede {
font-size: 17px;
line-height: 1.65;
color: var(--ds-ink-3);
font-weight: 500;
max-width: 720px;
margin: 0 0 36px;
}
.ds-iso-benefits {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.ds-iso-benefit {
padding: 36px;
background: var(--ds-paper);
border-radius: 18px;
position: relative;
}
.ds-iso-benefit__num {
font-size: 14px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: 0.14em;
margin-bottom: 12px;
}
.ds-iso-benefit__kicker {
display: flex;
flex-direction: column;
margin-bottom: 14px;
}
.ds-iso-benefit__kicker .k {
font-size: 28px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: -0.02em;
line-height: 1;
}
.ds-iso-benefit__kicker .s {
font-size: 12px;
color: var(--ds-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 6px;
}
.ds-iso-benefit h3 {
font-size: 22px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.15;
}
.ds-iso-benefit p {
font-size: 15px;
line-height: 1.65;
color: var(--ds-ink-2);
margin: 0;
font-weight: 500;
}
.ds-iso-support {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.ds-iso-support__item {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
padding: 24px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 16px;
}
.ds-iso-support__check {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ds-cyan);
color: #fff;
display: grid;
place-items: center;
flex-shrink: 0;
}
.ds-iso-support__item h3 {
font-size: 16px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 6px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.ds-iso-support__item p {
font-size: 14px;
line-height: 1.6;
color: var(--ds-ink-3);
margin: 0;
font-weight: 500;
}
.ds-iso-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.ds-iso-step {
padding: 32px 28px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 18px;
}
.ds-iso-step__num {
font-size: 36px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 16px;
}
.ds-iso-step h3 {
font-size: 20px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.ds-iso-step p {
font-size: 14.5px;
line-height: 1.6;
color: var(--ds-ink-3);
margin: 0;
font-weight: 500;
}
.ds-iso-send {
padding: 36px;
background: var(--ds-ink);
color: #fff;
border-radius: 20px;
}
.ds-iso-send__kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 12px;
}
.ds-iso-send h3 {
font-size: 24px;
font-weight: 900;
margin: 0 0 18px;
text-transform: uppercase;
letter-spacing: -0.01em;
line-height: 1.2;
}
.ds-iso-send h3 a { color: var(--ds-cyan); }
.ds-iso-send__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-iso-send__list li {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
font-size: 15px;
color: rgba(255, 255, 255, .85);
font-weight: 500;
}
.ds-iso-send__list .n {
font-weight: 900;
color: var(--ds-cyan);
}
.ds-iso-audience {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.ds-iso-audience__item {
padding: 28px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 18px;
}
.ds-iso-audience__item h3 {
font-size: 17px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 8px;
text-transform: uppercase;
}
.ds-iso-audience__item p {
font-size: 14px;
line-height: 1.6;
color: var(--ds-ink-3);
margin: 0;
font-weight: 500;
}
.ds-iso-apply {
padding: 96px 60px;
background: var(--ds-paper);
}
.ds-iso-apply__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.ds-iso-apply__intro h2 {
font-size: clamp(36px, 5vw, 54px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 12px 0 18px;
color: var(--ds-ink);
}
.ds-iso-apply__intro p {
font-size: 17px;
line-height: 1.65;
color: var(--ds-ink-3);
font-weight: 500;
margin: 0 0 32px;
}
.ds-iso-apply__contacts {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.ds-iso-apply__contacts li {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: center;
padding: 18px 22px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 14px;
}
.ds-iso-apply__contacts svg { color: var(--ds-cyan); }
.ds-iso-apply__contacts a, .ds-iso-apply__contacts strong {
font-size: 16px;
font-weight: 800;
color: var(--ds-ink);
display: block;
}
.ds-iso-apply__contacts span {
font-size: 12px;
color: var(--ds-muted);
font-weight: 600;
margin-top: 2px;
}
.ds-iso-apply__form-card {
padding: 36px 32px;
background: #fff;
border: 1px solid var(--ds-line);
border-radius: 24px;
}
.ds-iso-apply__form-card .ds-form {
background: transparent;
padding: 0;
border-radius: 0;
}
.ds-iso-apply__form-kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
}
.ds-iso-apply__form-h {
font-size: 28px;
font-weight: 900;
color: var(--ds-ink);
text-transform: uppercase;
letter-spacing: -0.01em;
margin-bottom: 20px;
}
.ds-iso-apply__legal {
font-size: 12px;
color: var(--ds-muted);
font-weight: 500;
line-height: 1.5;
margin-top: 14px;
max-width: 70ch;
}
/* ---------- Apply progress + form head ---------- */
.ds-apply__progress {
display: flex;
gap: 8px;
margin-bottom: 36px;
}
.ds-apply__progress span {
flex: 1;
height: 6px;
border-radius: 999px;
background: var(--ds-line);
}
.ds-apply__progress span.is-on { background: var(--ds-cyan); }
.ds-apply__form-head { margin-bottom: 28px; }
.ds-apply__form-h {
font-size: 30px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: -0.015em;
line-height: 1.05;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.ds-apply__form-sub {
font-size: 15px;
color: var(--ds-ink-3);
margin: 0;
font-weight: 500;
line-height: 1.55;
overflow-wrap: anywhere;
}
/* ---------- Get Relief form headers ---------- */
.ds-relief__form-kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
}
.ds-relief__form-h {
font-size: 24px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.015em;
margin: 0 0 10px;
line-height: 1.05;
text-transform: uppercase;
}
.ds-relief__form-sub {
font-size: 13px;
line-height: 1.55;
color: var(--ds-ink-3);
font-weight: 500;
margin: 0 0 20px;
}
/* ---------- ISO Apply (dark variant) ---------- */
.ds-iso-apply--dark { background: var(--ds-ink); color: #fff; }
.ds-iso-apply--dark .ds-iso-apply__intro h2 { color: #fff; }
.ds-iso-apply--dark .ds-iso-apply__intro p { color: rgba(255, 255, 255, .78); }
.ds-iso-apply--dark .ds-iso-apply__contacts li {
background: transparent;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .12);
border-radius: 0;
padding: 14px 0;
grid-template-columns: 1fr;
}
.ds-iso-apply--dark .ds-iso-apply__contacts li svg { display: none; }
.ds-iso-apply--dark .ds-iso-apply__contacts a,
.ds-iso-apply--dark .ds-iso-apply__contacts strong {
color: #fff;
font-size: 18px;
font-weight: 800;
letter-spacing: -0.005em;
}
.ds-iso-apply--dark .ds-iso-apply__contacts span {
color: rgba(255, 255, 255, .55);
font-weight: 600;
letter-spacing: 0.06em;
margin-top: 4px;
}
.ds-iso-apply--dark .ds-iso-apply__form-card {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .12);
border-radius: 24px;
}
.ds-iso-apply--dark .ds-iso-apply__form-kicker { color: var(--ds-cyan); }
.ds-iso-apply--dark .ds-iso-apply__form-h { color: #fff; }
.ds-iso-apply--dark .ds-iso-apply__legal { color: rgba(255, 255, 255, .5); }
.ds-iso-apply--dark .ds-iso-apply__form-card label,
.ds-iso-apply--dark .ds-iso-apply__form-card .gfield_label {
color: rgba(255, 255, 255, .6);
}
.ds-iso-apply--dark .ds-iso-apply__form-card input,
.ds-iso-apply--dark .ds-iso-apply__form-card select,
.ds-iso-apply--dark .ds-iso-apply__form-card textarea {
background: rgba(255, 255, 255, .06);
border: 1.5px solid rgba(255, 255, 255, .18);
color: #fff;
}
.ds-iso-apply--dark .ds-iso-apply__form-card input::placeholder,
.ds-iso-apply--dark .ds-iso-apply__form-card textarea::placeholder {
color: rgba(255, 255, 255, .4);
}
/* ---------- ISO Guide hero metabar ---------- */
.ds-guide-hero__metabar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
padding: 14px 0;
border-top: 1px solid var(--ds-line);
border-bottom: 1px solid var(--ds-line);
margin-top: 24px;
font-size: 12px;
color: var(--ds-ink-3);
font-weight: 600;
}
.ds-guide-hero__metabar .dot {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ds-ink);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 11px;
}
.ds-guide-hero__metabar .dot .d {
width: 6px;
height: 6px;
border-radius: 50%;
background: #0AC97A;
box-shadow: 0 0 0 4px rgba(10, 201, 122, .16);
}
.ds-guide-hero__metabar .sep {
width: 1px;
height: 14px;
background: var(--ds-line);
}
.ds-guide-hero__metabar strong { color: var(--ds-ink); }
/* ---------- ISO Guide TOC jump ---------- */
.ds-guide__toc-jump {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--ds-line);
}
.ds-guide__toc-jump ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-guide__toc-jump a {
font-size: 13px;
font-weight: 600;
color: var(--ds-ink-2);
}
.ds-guide__toc-jump a:hover { color: var(--ds-cyan); }
/* ---------- ISO Guide TL;DR ---------- */
.ds-guide__tldr {
margin: 0 0 32px;
padding: 28px 32px;
background: var(--ds-paper);
border-radius: 18px;
border: 1px solid var(--ds-line);
}
.ds-guide__tldr-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 12px;
background: var(--ds-ink);
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 16px;
}
.ds-guide__tldr-tag span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ds-cyan);
}
.ds-guide__tldr ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ds-guide__tldr li {
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
align-items: baseline;
font-size: 15px;
line-height: 1.55;
color: var(--ds-ink-2);
font-weight: 500;
}
.ds-guide__tldr .n {
font-variant-numeric: tabular-nums;
font-weight: 900;
color: var(--ds-cyan);
font-size: 13px;
letter-spacing: -0.01em;
}
/* ---------- ISO Guide pull-quote ---------- */
.ds-guide__quote {
margin: 40px 0;
padding: 40px 0 32px;
border-top: 2px solid var(--ds-cyan);
border-bottom: 1px solid var(--ds-line);
position: relative;
}
.ds-guide__quote .mark {
font-size: 72px;
font-weight: 900;
color: var(--ds-cyan);
line-height: 0.7;
font-family: Georgia, "Times New Roman", serif;
margin-bottom: 8px;
user-select: none;
}
.ds-guide__quote blockquote {
margin: 0;
font-size: 24px;
line-height: 1.35;
font-weight: 700;
color: var(--ds-ink);
letter-spacing: -0.01em;
text-wrap: balance;
}
/* ---------- ISO Guide checklist ---------- */
.ds-guide__checklist {
margin: 48px 0;
padding: 36px 40px;
background: #fff;
border: 2px solid var(--ds-ink);
border-radius: 20px;
}
.ds-guide__checklist-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 12px;
background: var(--ds-ink);
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
}
.ds-guide__checklist-tag span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ds-cyan);
}
.ds-guide__checklist h3 {
font-size: 24px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 22px;
line-height: 1.15;
}
.ds-guide__checklist ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.ds-guide__checklist li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 16px;
align-items: flex-start;
}
.ds-guide__checklist .ck {
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--ds-cyan);
color: #fff;
display: grid;
place-items: center;
margin-top: 1px;
}
.ds-guide__checklist .t {
font-size: 15.5px;
line-height: 1.55;
color: var(--ds-ink-2);
font-weight: 600;
}
/* ---------- ISO Guide FAQs ---------- */
.ds-guide__faqs { margin: 48px 0 16px; }
.ds-guide__faqs-kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.ds-guide__faqs h3 {
font-size: 32px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.015em;
text-transform: uppercase;
margin: 0 0 20px;
line-height: 1.05;
}
.ds-guide__faqs-list {
border-top: 1px solid var(--ds-line);
}
.ds-guide__faq {
border-bottom: 1px solid var(--ds-line);
}
.ds-guide__faq summary {
list-style: none;
cursor: pointer;
padding: 20px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.ds-guide__faq summary::-webkit-details-marker { display: none; }
.ds-guide__faq .q {
font-size: 17px;
font-weight: 800;
color: var(--ds-ink);
letter-spacing: -0.005em;
flex: 1;
}
.ds-guide__faq .ic {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ds-paper);
color: var(--ds-ink);
display: grid;
place-items: center;
font-size: 18px;
font-weight: 900;
flex-shrink: 0;
position: relative;
transition: 0.2s;
}
.ds-guide__faq .ic::before,
.ds-guide__faq .ic::after {
content: "";
position: absolute;
background: currentColor;
border-radius: 2px;
}
.ds-guide__faq .ic::before { width: 12px; height: 2px; }
.ds-guide__faq .ic::after { width: 2px; height: 12px; }
.ds-guide__faq[open] .ic { background: var(--ds-cyan); color: #fff; }
.ds-guide__faq[open] .ic::after { display: none; }
.ds-guide__faq .a {
padding: 0 4px 24px;
font-size: 15.5px;
line-height: 1.65;
color: var(--ds-ink-2);
font-weight: 500;
max-width: 680px;
}
/* ---------- ISO Guide callout ---------- */
.ds-guide__callout {
margin-top: 40px;
padding: 36px 40px;
background: var(--ds-paper);
border-radius: 20px;
border-left: 3px solid var(--ds-cyan);
}
.ds-guide__callout .kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.ds-guide__callout h3 {
font-size: 24px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0;
line-height: 1.1;
}
.ds-guide__callout p {
font-size: 14px;
line-height: 1.6;
color: var(--ds-ink-3);
font-weight: 500;
margin: 12px 0 20px;
}
.ds-guide__callout .ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.ds-guide__callout .ctas a {
height: 46px;
padding: 0 22px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ds-guide__callout .primary { background: var(--ds-cyan); color: #fff; }
.ds-guide__callout .secondary {
background: #fff;
color: var(--ds-ink);
border: 1.5px solid var(--ds-line);
}
.ds-guide__callout .secondary:hover { border-color: var(--ds-cyan); color: var(--ds-cyan); }
/* ---------- ISO Guide author box ---------- */
.ds-guide__author {
margin: 48px 0 0;
padding: 28px 32px;
background: var(--ds-paper);
border-radius: 20px;
display: grid;
grid-template-columns: 72px 1fr;
gap: 20px;
align-items: center;
}
.ds-guide__author-img {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--ds-cyan);
display: grid;
place-items: center;
color: #fff;
font-weight: 900;
font-size: 22px;
letter-spacing: -0.01em;
overflow: hidden;
}
.ds-guide__author-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ds-guide__author-kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ds-guide__author-name {
font-size: 18px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.005em;
}
.ds-guide__author-role {
font-size: 13px;
color: var(--ds-ink-3);
font-weight: 600;
margin-top: 2px;
}
.ds-guide__author-note {
font-size: 12px;
color: var(--ds-muted);
font-weight: 600;
margin-top: 10px;
line-height: 1.5;
}
.ds-guide__author-note strong { color: var(--ds-ink-2); }
/* ---------- ISO Guide related cards ---------- */
.ds-guide-related {
padding: 56px 60px;
background: var(--ds-paper);
}
.ds-guide-related__inner {
max-width: 1180px;
margin: 0 auto;
}
.ds-guide-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 36px;
}
.ds-guide-related__card {
padding: 24px 26px;
background: #fff;
border-radius: 14px;
border: 1px solid var(--ds-line);
display: block;
transition: border-color .15s ease;
}
.ds-guide-related__card:hover { border-color: var(--ds-cyan); }
.ds-guide-related__card .tag {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 10px;
}
.ds-guide-related__card .title {
font-size: 18px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.005em;
line-height: 1.2;
}
.ds-guide-related__card .meta {
font-size: 12px;
color: var(--ds-muted);
font-weight: 600;
margin-top: 12px;
}
@media (max-width: 1100px) {
.ds-apply__inner { grid-template-columns: 1fr; }
.ds-apply__benefits { position: static; }
.ds-contact-channels { grid-template-columns: 1fr; }
.ds-contact-grid { grid-template-columns: 1fr; gap: 40px; }
.ds-apply__stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ds-apply__stat { border-right: 0; }
.ds-relief__inner { grid-template-columns: 1fr; gap: 40px; }
.ds-relief__form { position: static; }
.ds-guide__inner { grid-template-columns: 1fr; gap: 40px; }
.ds-guide__toc { position: static; }
.ds-iso-benefits { grid-template-columns: 1fr; }
.ds-iso-support { grid-template-columns: 1fr; }
.ds-iso-steps { grid-template-columns: 1fr; }
.ds-iso-audience { grid-template-columns: 1fr 1fr; }
.ds-iso-apply__inner { grid-template-columns: 1fr; gap: 40px; }
.ds-iso-stats { grid-template-columns: 1fr 1fr; }
.ds-iso-stats > div:nth-child(2) { border-right: 0; }
.ds-guide-related__grid { grid-template-columns: 1fr; }
}
/* MOBQC-C: apply stats card padding tighten + 1-col stack at narrow widths */
@media (max-width: 700px) {
.ds-apply__stats { padding: 28px 22px; gap: 20px; grid-template-columns: 1fr; }
.ds-apply__stat { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--ds-line); }
.ds-apply__stat:last-child { border-bottom: 0; padding-bottom: 0; }
.ds-apply__stat .n { font-size: 28px; }
}
@media (max-width: 800px) {
.ds-apply { padding: 32px 20px 64px; }
.ds-apply__form-card { padding: 28px 22px; }
.ds-thankyou { padding: 64px 20px; }
.ds-thankyou__nextcard-grid { grid-template-columns: 1fr; }
.ds-contact-channel { padding: 28px 22px; }
.ds-contact-channel__value { font-size: 22px; }
.ds-relief { padding: 32px 20px 56px; }
.ds-guide-hero { padding: 40px 20px 24px; }
.ds-guide-hero h1 { font-size: 40px; }
.ds-guide { padding: 24px 20px 56px; }
.ds-iso-audience { grid-template-columns: 1fr; }
.ds-iso-apply { padding: 56px 20px; }
.ds-iso-stats { grid-template-columns: 1fr; }
.ds-iso-stats > div { border-right: 0; border-bottom: 1px solid var(--ds-line); }
.ds-iso-stats > div:last-child { border-bottom: 0; }
.ds-guide__tldr { padding: 22px 22px; }
.ds-guide__checklist { padding: 28px 24px; }
.ds-guide__faqs h3 { font-size: 26px; }
.ds-guide__callout { padding: 28px 24px; }
.ds-guide__author { padding: 22px 22px; grid-template-columns: 56px 1fr; gap: 16px; }
.ds-guide__author-img { width: 56px; height: 56px; }
.ds-guide-related { padding: 40px 20px; }
.ds-guide-hero__metabar { gap: 12px; }
.ds-apply__form-h { font-size: 24px; }
}
/* ---------- Forms hero responsive ---------- */
@media (max-width: 800px) {
.ds-inner-hero--forms { padding: 40px 22px 48px; }
.ds-inner-hero--forms h1 { font-size: 40px; line-height: 1; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.ds-inner-hero--forms .ds-inner-hero__sub { font-size: 17px; margin-top: 22px; overflow-wrap: anywhere; }
.ds-inner-hero--forms .ds-inner-hero__kicker,
.ds-inner-hero--forms .ds-eyebrow { overflow-wrap: anywhere; word-break: break-word; }
}
/* MOBQC-C: Forms hero at very narrow phones (~414) — additional shrink */
@media (max-width: 480px) {
.ds-inner-hero--forms { padding: 32px 16px 40px; }
.ds-inner-hero--forms h1 { font-size: 32px; }
.ds-inner-hero--forms .ds-inner-hero__sub { font-size: 15px; margin-top: 18px; }
}
/* ---------- ISO Apply form (custom inline) ---------- */
.ds-form--iso textarea {
height: auto;
min-height: 92px;
padding: 12px 14px;
resize: vertical;
line-height: 1.5;
}
.ds-form--iso .ds-form__pill-row--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 520px) {
.ds-form--iso .ds-form__pill-row--4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
Become an ISO — pixel-fidelity rebuild (Apr 30 2026)
============================================================ */
/* ---------- Hero (background pattern + faded mark) ---------- */
.ds-iso-hero { position: relative; overflow: hidden; }
.ds-iso-hero__pattern {
position: absolute;
top: -40px;
right: -60px;
width: 480px;
height: 340px;
opacity: 0.07;
pointer-events: none;
background-image: radial-gradient(circle at 30% 30%, var(--ds-cyan) 1.5px, transparent 2px);
background-size: 22px 22px;
transform: rotate(15deg);
}
.ds-iso-hero__mark {
position: absolute;
right: 80px;
bottom: -20px;
height: 160px;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
/* ISO hero paints its own __pattern + __mark, so suppress the canonical
.ds-inner-hero::after watermark on this section. */
.ds-iso-hero.ds-inner-hero::after { display: none; }
/* ---------- Decorative top-of-section rule with logo (paper sections) ---------- */
.ds-iso-rule {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(1280px, 100% - 120px);
display: flex;
align-items: center;
gap: 14px;
padding-top: 24px;
pointer-events: none;
z-index: 1;
}
.ds-iso-rule img {
height: 18px;
opacity: 0.5;
display: block;
}
.ds-iso-rule span {
flex: 1 1 0%;
height: 1px;
background: var(--ds-line);
display: block;
}
/* Background watermark mark (white sections) */
.ds-iso-bg-mark {
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%) rotate(-12deg);
height: 280px;
opacity: 0.04;
pointer-events: none;
z-index: 0;
}
.ds-iso-pattern {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40%;
pointer-events: none;
opacity: 0.06;
background-image: radial-gradient(circle at 30% 30%, var(--ds-cyan) 1.5px, transparent 2px);
background-size: 22px 22px;
}
/* Section padding override to match snapshot (96px 60px) */
.ds-iso-why,
.ds-iso-support-wrap,
.ds-iso-steps-wrap,
.ds-iso-audience-wrap {
padding: 96px 60px;
}
/* ---------- Stats ---------- */
.ds-iso-stats-wrap { padding-top: 70px; padding-bottom: 56px; }
.ds-iso-stats-wrap .ds-list-section__inner { position: relative; z-index: 2; }
.ds-iso-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--ds-line);
}
.ds-iso-stats > div {
padding: 34px 28px;
border-right: 1px solid var(--ds-line);
text-align: center;
}
.ds-iso-stats > div:last-child { border-right: 0; }
.ds-iso-stats .n {
font-size: 42px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ds-iso-stats .l {
font-size: 11px;
color: var(--ds-ink);
font-weight: 700;
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
/* ---------- Section heads (split title + lede on right) ---------- */
.ds-iso-head {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 64px;
align-items: end;
margin-bottom: 56px;
position: relative;
z-index: 2;
}
.ds-iso-head--stack {
display: block;
max-width: 780px;
margin-bottom: 48px;
}
.ds-iso-head__copy { max-width: 820px; }
.ds-iso-head__copy .ds-eyebrow,
.ds-iso-head--stack .ds-eyebrow {
font-size: 13px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 18px;
display: block;
}
.ds-iso-head .ds-section-title,
.ds-iso-head--stack .ds-section-title {
font-size: clamp(36px, 5vw, 54px);
line-height: 1.04;
letter-spacing: -0.02em;
font-weight: 800;
color: var(--ds-ink);
margin: 0;
text-transform: uppercase;
text-wrap: balance;
}
.ds-iso-head__lede {
font-size: 17px;
line-height: 1.65;
color: var(--ds-ink-3);
margin: 0;
font-weight: 500;
}
.ds-iso-head--stack .ds-iso-head__lede {
margin-top: 20px;
line-height: 1.6;
}
@media (max-width: 900px) {
.ds-iso-head { grid-template-columns: 1fr; gap: 24px; }
}
/* ---------- Benefits grid (2x2) ---------- */
.ds-iso-benefits {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
position: relative;
z-index: 2;
}
.ds-iso-benefit {
padding: 36px 36px 32px;
background: var(--ds-paper);
border-radius: 20px;
border: 1px solid var(--ds-line);
position: relative;
overflow: hidden;
}
.ds-iso-benefit__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
}
.ds-iso-benefit__num {
font-size: 48px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: -0.03em;
line-height: 1;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
margin-bottom: 0;
}
.ds-iso-benefit__kicker {
display: flex;
flex-direction: column;
text-align: right;
margin-bottom: 0;
}
.ds-iso-benefit__kicker .k {
font-size: 30px;
font-weight: 900;
color: var(--ds-ink);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ds-iso-benefit__kicker .s {
font-size: 10px;
color: var(--ds-muted);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-top: 6px;
}
.ds-iso-benefit h3 {
font-size: 22px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: -0.005em;
line-height: 1.2;
}
.ds-iso-benefit p {
font-size: 15px;
line-height: 1.65;
color: var(--ds-ink-2);
margin: 0;
font-weight: 500;
}
@media (max-width: 800px) {
.ds-iso-benefits { grid-template-columns: 1fr; }
}
/* ---------- Support grid (3-col, check above) ---------- */
.ds-iso-support {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
position: relative;
z-index: 2;
}
.ds-iso-support__item {
padding: 28px;
background: #fff;
border-radius: 16px;
border: 1px solid var(--ds-line);
display: flex;
flex-direction: column;
gap: 12px;
}
.ds-iso-support__check {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(0, 184, 240, 0.12);
color: var(--ds-cyan);
display: grid;
place-items: center;
flex-shrink: 0;
}
.ds-iso-support__check svg { display: block; }
.ds-iso-support__item h4 {
font-size: 17px;
font-weight: 900;
color: var(--ds-ink);
margin: 0;
letter-spacing: -0.005em;
line-height: 1.25;
}
.ds-iso-support__item p {
font-size: 14px;
line-height: 1.6;
color: var(--ds-ink-2);
margin: 0;
font-weight: 500;
}
@media (max-width: 900px) {
.ds-iso-support { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.ds-iso-support { grid-template-columns: 1fr; }
}
/* ---------- Steps (3-col, no card bg, vertical dividers) ---------- */
.ds-iso-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
position: relative;
z-index: 2;
}
.ds-iso-step {
padding: 40px 36px 36px;
background: transparent;
border: 0;
border-radius: 0;
border-right: 1px solid var(--ds-line);
position: relative;
}
.ds-iso-step:last-child { border-right: 0; }
.ds-iso-step:first-child { padding-left: 0; }
.ds-iso-step__head {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 18px;
}
.ds-iso-step__num {
font-size: 54px;
font-weight: 900;
color: var(--ds-cyan);
letter-spacing: -0.03em;
line-height: 1;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
margin-bottom: 0;
}
.ds-iso-step__rule {
flex: 1 1 0%;
height: 1px;
background: var(--ds-line);
}
.ds-iso-step h3 {
font-size: 22px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: -0.005em;
line-height: 1.2;
}
.ds-iso-step p {
font-size: 15px;
line-height: 1.65;
color: var(--ds-ink-2);
margin: 0;
font-weight: 500;
}
@media (max-width: 900px) {
.ds-iso-steps { grid-template-columns: 1fr; }
.ds-iso-step { border-right: 0; border-bottom: 1px solid var(--ds-line); padding-left: 0; padding-right: 0; }
.ds-iso-step:last-child { border-bottom: 0; }
}
/* ---------- "What to send" dark band ---------- */
.ds-iso-send {
margin-top: 48px;
padding: 40px;
background: var(--ds-ink);
color: #fff;
border-radius: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 2;
}
.ds-iso-send__copy { display: block; }
.ds-iso-send__kicker {
font-size: 12px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 14px;
}
.ds-iso-send h3 {
font-size: 30px;
font-weight: 900;
color: #fff;
margin: 0;
letter-spacing: -0.015em;
line-height: 1.2;
text-transform: uppercase;
text-wrap: balance;
}
.ds-iso-send h3 .ds-emph { color: var(--ds-cyan); }
.ds-iso-send__list {
display: flex;
flex-direction: column;
gap: 14px;
}
.ds-iso-send__row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.ds-iso-send__row .n {
font-size: 13px;
font-weight: 900;
color: var(--ds-cyan);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
white-space: nowrap;
margin: 0;
}
.ds-iso-send__row .t {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.92);
line-height: 1.5;
font-weight: 600;
}
.ds-iso-send__cta {
margin-top: 6px;
align-self: stretch;
justify-content: center;
}
@media (max-width: 900px) {
.ds-iso-send { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
.ds-iso-send h3 { font-size: 24px; }
}
/* ---------- Audience (2-col layout: title left, 2x2 cards right) ---------- */
.ds-iso-audience-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 64px;
align-items: start;
position: relative;
z-index: 2;
}
.ds-iso-audience-grid > .ds-iso-head__copy { max-width: 820px; }
.ds-iso-audience-grid .ds-eyebrow {
font-size: 13px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 18px;
display: block;
}
.ds-iso-audience-grid .ds-section-title {
font-size: clamp(36px, 5vw, 54px);
line-height: 1.04;
letter-spacing: -0.02em;
font-weight: 800;
color: var(--ds-ink);
margin: 0;
text-transform: uppercase;
text-wrap: balance;
}
.ds-iso-audience-grid .ds-iso-head__lede {
margin-top: 20px;
font-size: 17px;
line-height: 1.6;
}
.ds-iso-audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.ds-iso-audience__item {
padding: 24px 26px;
background: #fff;
border-radius: 16px;
border: 1px solid var(--ds-line);
}
.ds-iso-audience__item h4 {
font-size: 17px;
font-weight: 900;
color: var(--ds-ink);
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.ds-iso-audience__item p {
font-size: 14px;
line-height: 1.6;
color: var(--ds-ink-2);
margin: 0;
font-weight: 500;
}
@media (max-width: 900px) {
.ds-iso-audience-grid { grid-template-columns: 1fr; gap: 32px; }
.ds-iso-audience { grid-template-columns: 1fr; }
}
/* ---------- Apply (dark) section override ---------- */
.ds-iso-apply--dark {
padding: 96px 60px;
background: var(--ds-ink);
color: #fff;
}
.ds-iso-apply--dark .ds-iso-apply__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.ds-iso-apply--dark .ds-iso-apply__intro h2 {
font-size: clamp(40px, 5vw, 60px);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.025em;
margin: 0 0 24px;
text-transform: uppercase;
color: #fff;
text-wrap: balance;
}
.ds-iso-apply--dark .ds-iso-apply__intro h2 .ds-emph { color: var(--ds-cyan); }
.ds-iso-apply--dark .ds-iso-apply__intro p {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 36px;
font-weight: 500;
max-width: 480px;
}
.ds-iso-apply--dark .ds-eyebrow--rule {
font-size: 13px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.ds-iso-apply--dark .ds-eyebrow--rule::before {
content: "";
width: 32px;
height: 1px;
background: var(--ds-cyan);
display: inline-block;
}
.ds-iso-apply--dark .ds-iso-apply__form-card {
padding: 36px 36px 32px;
background: rgba(255, 255, 255, 0.04);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.ds-iso-apply--dark .ds-iso-apply__form-kicker {
font-size: 11px;
font-weight: 800;
color: var(--ds-cyan);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
}
.ds-iso-apply--dark .ds-iso-apply__form-h {
font-size: 24px;
font-weight: 900;
color: #fff;
margin: 0 0 24px;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.ds-iso-apply--dark .ds-iso-apply__legal {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
margin: 14px 0 0;
line-height: 1.55;
font-weight: 500;
}
/* Form fields on dark */
.ds-iso-apply--dark .ds-form label {
font-size: 11px;
font-weight: 800;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 8px;
}
.ds-iso-apply--dark .ds-form input[type="text"],
.ds-iso-apply--dark .ds-form input[type="email"],
.ds-iso-apply--dark .ds-form input[type="tel"],
.ds-iso-apply--dark .ds-form input[type="number"],
.ds-iso-apply--dark .ds-form input[type="url"],
.ds-iso-apply--dark .ds-form select {
width: 100%;
height: 48px;
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 0 14px;
font-size: 15px;
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-family: inherit;
font-weight: 500;
outline: none;
box-sizing: border-box;
}
.ds-iso-apply--dark .ds-form textarea {
width: 100%;
min-height: 96px;
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 12px 14px;
font-size: 15px;
line-height: 1.5;
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-family: inherit;
font-weight: 500;
outline: none;
box-sizing: border-box;
resize: vertical;
}
.ds-iso-apply--dark .ds-form input::placeholder,
.ds-iso-apply--dark .ds-form textarea::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.ds-iso-apply--dark .ds-form select option { color: #000; }
.ds-iso-apply--dark .ds-form input:focus,
.ds-iso-apply--dark .ds-form select:focus,
.ds-iso-apply--dark .ds-form textarea:focus {
border-color: var(--ds-cyan);
background: rgba(255, 255, 255, 0.10);
box-shadow: 0 0 0 3px rgba(0, 184, 240, 0.18);
}
.ds-iso-apply--dark .ds-form__submit {
width: 100%;
height: 54px;
border-radius: 999px;
background: var(--ds-cyan);
color: #fff;
border: 0;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 6px;
}
/* Apply contacts (3 stacked rows w/ top border) */
.ds-iso-apply--dark .ds-iso-apply__contacts {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.ds-iso-apply--dark .ds-iso-apply__contacts li {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 0;
background: transparent;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0;
grid-template-columns: 1fr;
}
.ds-iso-apply--dark .ds-iso-apply__contacts li > div { flex: 1 1 0%; }
.ds-iso-apply--dark .ds-iso-apply__contacts a,
.ds-iso-apply--dark .ds-iso-apply__contacts strong {
font-size: 18px;
font-weight: 800;
color: #fff;
letter-spacing: -0.005em;
display: block;
text-decoration: none;
}
.ds-iso-apply--dark .ds-iso-apply__contacts span {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
font-weight: 600;
letter-spacing: 0.06em;
margin-top: 4px;
display: block;
}
@media (max-width: 900px) {
.ds-iso-apply--dark .ds-iso-apply__inner { grid-template-columns: 1fr; gap: 40px; }
.ds-iso-apply--dark { padding: 64px 24px; }
}
/* ---------- Mobile padding adjustments ---------- */
@media (max-width: 800px) {
.ds-iso-why,
.ds-iso-support-wrap,
.ds-iso-steps-wrap,
.ds-iso-audience-wrap {
padding: 64px 24px;
}
}
/* MOBQC-C: ISO stats progressive collapse — 1100→2-col, 700→1-col so
narrow phones (viewport ~500) don't get stat boxes that clip labels.
Replaces the prior 800/480 pair which conflicted with the earlier
1100/800 rules at lines 1846/1863 (later rule won, blocking 1-col). */
@media (max-width: 1100px) {
.ds-iso-stats { grid-template-columns: repeat(2, 1fr); }
.ds-iso-stats > div:nth-child(2n) { border-right: 0; }
.ds-iso-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--ds-line); }
}
@media (max-width: 700px) {
.ds-iso-stats { grid-template-columns: 1fr; }
.ds-iso-stats > div { border-right: 0; border-bottom: 1px solid var(--ds-line); padding: 26px 22px; }
.ds-iso-stats > div:last-child { border-bottom: 0; }
.ds-iso-stats .n { font-size: 32px; }
.ds-iso-stats .l { font-size: 11px; }
}
/* ====================================================================
Apply wizard (page-apply.php) — 4-step Continue / Back interaction
==================================================================== */
.ds-apply-wizard {
background: transparent;
padding: 0;
border-radius: 0;
display: block;
}
.ds-apply-wizard.ds-form { /* override .ds-form base */
background: transparent;
padding: 0;
border-radius: 0;
}
/* Each step is a panel. Default = visible (no-JS fallback). When JS adds
`data-apply-wizard-active` to the form, only `.is-active` shows. */
.ds-apply-step {
display: block;
}
.ds-apply-wizard[data-apply-wizard-active] .ds-apply-step {
display: none;
}
.ds-apply-wizard[data-apply-wizard-active] .ds-apply-step.is-active {
display: block;
animation: ds-apply-step-in 240ms ease;
}
@keyframes ds-apply-step-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* When all steps are visible (no-JS), put visual breathing room between them */
.ds-apply-wizard:not([data-apply-wizard-active]) .ds-apply-step + .ds-apply-step {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--ds-line);
}
.ds-apply-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.ds-apply-options--grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ds-apply-option {
appearance: none;
-webkit-appearance: none;
font-family: inherit;
padding: 18px 22px;
text-align: left;
border-radius: 12px;
border: 1.5px solid var(--ds-line);
background: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: var(--ds-ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.ds-apply-option:hover {
border-color: var(--ds-cyan);
background: var(--ds-paper-2, #e7f3fa);
}
.ds-apply-option:focus-visible {
outline: 2px solid var(--ds-cyan);
outline-offset: 2px;
}
.ds-apply-option.is-selected,
.ds-apply-option[aria-checked="true"] {
border-color: var(--ds-cyan);
background: var(--ds-paper-2, #e7f3fa);
}
.ds-apply-option__label {
flex: 1 1 auto;
}
.ds-apply-option__arrow {
display: inline-flex;
color: var(--ds-cyan-deep, var(--ds-cyan));
flex: 0 0 auto;
}
.ds-apply-option__badge {
font-size: 10px;
font-weight: 800;
color: #fff;
background: #E04A4A;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.1em;
text-transform: uppercase;
flex: 0 0 auto;
white-space: nowrap;
}
/* Checkbox cards (step 2) */
.ds-apply-check {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
border-radius: 12px;
border: 1.5px solid var(--ds-line);
background: #fff;
cursor: pointer;
font-size: 15px;
font-weight: 700;
color: var(--ds-ink);
transition: border-color 160ms ease, background 160ms ease;
}
.ds-apply-check:hover { border-color: var(--ds-cyan); }
.ds-apply-check input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
.ds-apply-check__box {
width: 22px;
height: 22px;
border-radius: 6px;
border: 1.5px solid var(--ds-line);
background: #fff;
flex: 0 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: border-color 160ms ease, background 160ms ease;
}
.ds-apply-check__box::after {
content: "";
width: 12px;
height: 6px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
opacity: 0;
}
.ds-apply-check input:checked ~ .ds-apply-check__box {
background: var(--ds-cyan);
border-color: var(--ds-cyan);
}
.ds-apply-check input:checked ~ .ds-apply-check__box::after { opacity: 1; }
.ds-apply-check:has(input:checked) {
border-color: var(--ds-cyan);
background: var(--ds-paper-2, #e7f3fa);
}
.ds-apply-check input:focus-visible ~ .ds-apply-check__box {
outline: 2px solid var(--ds-cyan);
outline-offset: 2px;
}
.ds-apply-check__label { flex: 1 1 auto; }
/* Step navigation (back / continue / submit) */
.ds-apply-step__nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 28px;
}
.ds-apply-back {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 0;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: var(--ds-muted);
cursor: pointer;
letter-spacing: 0.02em;
}
.ds-apply-back:hover { color: var(--ds-ink); }
.ds-apply-continue,
.ds-apply-submit {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Step 4 contact fields */
.ds-apply-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 18px;
}
.ds-apply-field { display: flex; flex-direction: column; }
.ds-apply-field label {
font-size: 12px;
font-weight: 800;
color: var(--ds-ink);
letter-spacing: 0.10em;
margin-bottom: 6px;
text-transform: uppercase;
}
.ds-apply-field input,
.ds-apply-field select {
width: 100%;
height: 48px;
border: 1.5px solid var(--ds-line);
background: #fff;
color: var(--ds-ink);
border-radius: 10px;
padding: 0 14px;
font-size: 15px;
font-family: inherit;
font-weight: 600;
transition: border-color 160ms ease;
}
.ds-apply-field input::placeholder { color: var(--ds-muted); font-weight: 500; }
.ds-apply-field input:focus,
.ds-apply-field select:focus {
outline: 2px solid var(--ds-cyan);
outline-offset: 0;
border-color: var(--ds-cyan);
}
.ds-apply__consent {
margin-top: 18px;
font-size: 12px;
color: var(--ds-muted);
}
/* Mobile */
@media (max-width: 720px) {
.ds-apply-options--grid { grid-template-columns: 1fr; }
.ds-apply-fields { grid-template-columns: 1fr; }
.ds-apply-option { font-size: 15px; padding: 16px 18px; }
.ds-apply-step__nav { flex-wrap: wrap; }
}
/* ============================================================
AQC7 mobile fixes (additive — see /tmp/aqc7-report.md)
============================================================ */
/* Fix 5: contact channels collapse 3 → 2 → 1 instead of 3 → 1 at <1100.
Insert the 2-col intermediate at 800-1100 (iPad landscape). The
existing 1-col rule at <1100 continues to fire below 800. */
@media (min-width: 801px) and (max-width: 1100px) {
.ds-contact-channels { grid-template-columns: repeat(2, 1fr) !important; }
.ds-contact-channels .ds-contact-channel--primary { grid-column: 1 / -1; }
}
/* ============================================================
F-Contact-Team: page-contact uses .ds-list-section/__inner/--paper
classes whose canonical definitions live in pages-lists.css. The
contact page only enqueues pages-forms.css, so without these
additive rules the contact-page sections lose their padding,
1280px container, and paper-background variant.
============================================================ */
.ds-list-section {
padding: 72px 60px 96px;
background: #fff;
position: relative;
overflow: hidden;
}
.ds-list-section--paper { background: var(--ds-paper); }
.ds-list-section--ink { background: var(--ds-ink); color: #fff; }
.ds-list-section__inner { max-width: 1280px; margin: 0 auto; position: relative; }
@media (max-width: 720px) {
.ds-list-section { padding: 56px 20px 64px; }
}
/* F-Contact-Team: #delanceygotyou hashtag pill on the consultation
portrait inside the cyan CTA band — matches the snapshot's white
pill anchored to the top-center of the portrait. */
.ds-contact-cta-band__hashtag {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background: #fff;
color: var(--ds-ink, #0f1a2d);
border-radius: 999px;
font-size: 18px;
font-weight: 900;
letter-spacing: -0.01em;
white-space: nowrap;
z-index: 3;
box-shadow: 0 8px 24px rgba(10, 18, 31, 0.18);
}
.ds-contact-cta-band__hashtag span {
text-decoration: underline solid 2px;
text-underline-offset: 3px;
}
@media (max-width: 640px) {
.ds-contact-cta-band__hashtag { font-size: 14px; padding: 8px 16px; top: 18px; }
}
/* ============================================================
D-watermark on cyan / dark CTA bands and dark form sections
(forms playbook task #41/#42 — d-tile mask at 0.06 opacity,
white-inverted on dark/cyan grounds, 240x320px)
============================================================ */
.ds-iso-send,
.ds-iso-apply--dark,
.ds-cta-band--ink,
.ds-contact-cta-band {
position: relative;
}
.ds-iso-send::after,
.ds-iso-apply--dark::after,
.ds-cta-band--ink::after,
.ds-contact-cta-band::after {
content: "";
position: absolute;
right: -40px;
bottom: -60px;
width: 240px;
height: 320px;
background: url('../images/ico-delancey.svg') no-repeat center / contain;
opacity: 0.06;
filter: brightness(0) invert(1);
pointer-events: none;
z-index: 0;
}
/* Keep band content above the watermark */
.ds-iso-send > *,
.ds-iso-apply--dark > .ds-iso-apply__inner,
.ds-cta-band--ink > *,
.ds-contact-cta-band > .ds-contact-cta-band__inner {
position: relative;
z-index: 2;
}
/* ============================================================
Thank-you page — full-width d-pattern watermark behind content
so the confirmation page reads as part of the brand system
============================================================ */
.ds-thankyou {
position: relative;
overflow: hidden;
}
.ds-thankyou::before {
content: "";
position: absolute;
top: 50%;
right: -80px;
transform: translateY(-50%) rotate(-12deg);
width: 360px;
height: 480px;
background: url('../images/ico-delancey.svg') no-repeat center / contain;
opacity: 0.04;
pointer-events: none;
z-index: 0;
}
.ds-thankyou::after {
content: "";
position: absolute;
top: 0;
left: -10%;
width: 60%;
height: 320px;
pointer-events: none;
opacity: 0.05;
background-image: radial-gradient(circle at 30% 30%, var(--ds-cyan) 1.5px, transparent 2px);
background-size: 22px 22px;
z-index: 0;
}
.ds-thankyou__inner { position: relative; z-index: 1; }
/* Centered section-mark variant used inside the thank-you next-card */
.ds-section-mark--center {
justify-content: center;
margin-bottom: 18px;
}
.ds-section-mark--center .ds-section-mark__rule {
flex: 1;
max-width: 60px;
height: 1px;
background: rgba(15, 26, 45, .12);
}
@media (max-width: 800px) {
.ds-thankyou::before { right: -160px; width: 280px; height: 380px; }
.ds-thankyou::after { display: none; }
}
/* ============================================================
AQC8 mobile fixes (375px viewport — additive)
Page-apply + page-contact narrow-phone polish
============================================================ */
@media (max-width: 480px) {
/* Apply: form card padding tighten (was 28px 22px @<800) */
.ds-apply__form-card { padding: 22px 16px; }
.ds-apply { padding: 24px 16px 56px; }
/* Apply: shrink form-h further so it fits 375px without crowding */
.ds-apply__form-h { font-size: 21px; line-height: 1.2; }
.ds-apply__form-sub { font-size: 14px; }
/* Apply: option/check pads more compact */
.ds-apply-option { padding: 14px 16px; font-size: 14px; }
.ds-apply-check { padding: 14px 16px; font-size: 14px; }
/* Apply: fix step nav so back/continue have breathing room */
.ds-apply-step__nav { gap: 12px; }
.ds-apply-continue,
.ds-apply-submit { width: 100%; justify-content: center; margin-left: 0; }
.ds-apply-back { order: 2; }
/* Apply benefits card tighten */
.ds-apply__benefits-card { padding: 24px 22px; }
.ds-apply__benefits-list li { grid-template-columns: 32px 1fr; gap: 12px; }
/* Contact: channel padding tighten (was 28px 22px @<800) */
.ds-contact-channel { padding: 22px 18px; }
.ds-contact-channel__value { font-size: 19px; }
.ds-contact-channel__icon { width: 44px; height: 44px; margin-bottom: 18px; }
/* Contact: office card padding + icon */
.ds-contact-office { padding: 20px 18px; grid-template-columns: 56px 1fr; gap: 14px; }
.ds-contact-office__icon { width: 56px; height: 56px; }
.ds-contact-office h3 { font-size: 17px; }
/* Contact: form card padding (was 32px) */
.ds-contact-form-card { padding: 22px 18px; }
}
/* ============================================================
UX CRITIQUE FIXES (May 1, 2026)
Conversion focus, form clarity, friction reduction,
trust signal elevation, error/loading affordances,
button hierarchy. Applied across 4 form-heavy pages.
============================================================ */
/* ---------- 1) APPLY: stronger picker affordance + CTA hierarchy ---------- */
/* Selected/hover state on radio-pickers — current visual is too subtle.
Bumps border weight, adds left accent bar for scannable progress. */
.ds-apply-option {
position: relative;
transition: border-color 180ms ease, background 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}
.ds-apply-option:hover {
border-color: var(--ds-cyan);
background: rgba(0, 184, 240, 0.04);
transform: translateX(2px);
}
.ds-apply-option[aria-checked="true"],
.ds-apply-option.is-selected {
border-color: var(--ds-cyan);
background: rgba(0, 184, 240, 0.06);
box-shadow: inset 4px 0 0 var(--ds-cyan), 0 4px 16px rgba(0, 184, 240, .08);
}
.ds-apply-option:focus-visible {
outline: 3px solid rgba(0, 184, 240, .35);
outline-offset: 2px;
}
/* Continue/submit primary button — bolder hierarchy vs. ghost back link */
.ds-apply-continue,
.ds-apply-submit {
min-height: 52px;
padding: 0 28px;
font-weight: 800;
letter-spacing: 0.02em;
box-shadow: 0 6px 20px rgba(0, 184, 240, .28);
transition: transform 140ms ease, box-shadow 200ms ease, background 180ms ease;
}
.ds-apply-continue:hover,
.ds-apply-submit:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 184, 240, .38);
}
.ds-apply-continue:disabled,
.ds-apply-submit:disabled {
opacity: .55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Loading state for submit button (data-loading="true") */
.ds-apply-submit[data-loading="true"],
.ds-form__submit[data-loading="true"],
.gform_button[data-loading="true"] {
pointer-events: none;
opacity: .85;
position: relative;
color: transparent !important;
}
.ds-apply-submit[data-loading="true"]::after,
.ds-form__submit[data-loading="true"]::after,
.gform_button[data-loading="true"]::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
border: 2.5px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
border-radius: 50%;
animation: ds-form-spin 720ms linear infinite;
}
@keyframes ds-form-spin { to { transform: rotate(360deg); } }
/* Step progress: animated fill emphasis on active step bar */
.ds-apply__progress span.is-on {
background: linear-gradient(90deg, var(--ds-cyan) 0%, var(--ds-cyan-deep, #0091c0) 100%);
box-shadow: 0 0 0 2px rgba(0, 184, 240, .14);
}
/* Sticky benefits card lift on scroll for trust elevation */
.ds-apply__benefits-card {
box-shadow: 0 12px 36px rgba(15, 26, 45, .14);
}
.ds-apply__trust-card {
background: linear-gradient(180deg, #fff 0%, var(--ds-paper-2, #f6f8fb) 100%);
border-color: rgba(0, 184, 240, .25);
}
/* ---------- 2) CONTACT: error/required affordance + channel hover ---------- */
/* Required-field star indicator + inline error pattern (works with .is-error) */
.ds-contact-form-card label .ds-req,
.ds-form label .ds-req {
color: #d6332c;
margin-left: 3px;
font-weight: 800;
}
.ds-form .ds-form__field.is-error input,
.ds-form .ds-form__field.is-error select,
.ds-form .ds-form__field.is-error textarea,
.gfield_error input,
.gfield_error select,
.gfield_error textarea {
border-color: #d6332c !important;
background: #fef5f5;
box-shadow: 0 0 0 3px rgba(214, 51, 44, .12);
}
.ds-form .ds-form__error,
.gfield_error .gfield_validation_message,
.gfield_error .validation_message {
display: block;
margin-top: 6px;
font-size: 12px;
font-weight: 700;
color: #d6332c;
letter-spacing: 0.01em;
}
/* Contact channel cards: clearer hover affordance on the 3 entry points */
.ds-contact-channel {
cursor: pointer;
}
.ds-contact-channel:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(15, 26, 45, .10);
border-color: var(--ds-cyan) !important;
}
.ds-contact-channel:focus-within {
outline: 3px solid rgba(0, 184, 240, .35);
outline-offset: 3px;
}
/* Office cards: subtle elevation + accent rule on hover */
.ds-contact-office {
transition: border-color 200ms ease, box-shadow 200ms ease;
border-left: 3px solid transparent;
}
.ds-contact-office:hover {
border-left-color: var(--ds-cyan);
box-shadow: 0 8px 24px rgba(15, 26, 45, .06);
}
/* ---------- 3) GET RELIEF: friction-reduction + confidential trust boost ---------- */
/* Sidebar form: tighter, scannable input rhythm */
.ds-relief__form-card .ds-form input,
.ds-relief__form-card .ds-form select,
.ds-relief__form-card .ds-form textarea {
height: 46px;
font-size: 14px;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ds-relief__form-card .ds-form textarea {
height: auto;
}
.ds-relief__form-card .ds-form input:focus,
.ds-relief__form-card .ds-form select:focus,
.ds-relief__form-card .ds-form textarea:focus {
border-color: var(--ds-cyan);
box-shadow: 0 0 0 3px rgba(0, 184, 240, .14);
outline: none;
}
/* Confidential badge: stronger visual lockup with shield motif */
.ds-relief-confidential {
border-color: rgba(0, 184, 240, .28);
background: linear-gradient(180deg, #fff 0%, rgba(0, 184, 240, .04) 100%);
}
.ds-relief-confidential .h {
color: var(--ds-cyan-deep, #0091c0);
}
/* Submit button on relief form — clear primary action */
.ds-relief__form-card .ds-form__submit,
.ds-relief__form-card button[type="submit"] {
width: 100%;
min-height: 52px;
font-weight: 800;
letter-spacing: 0.02em;
box-shadow: 0 6px 20px rgba(0, 184, 240, .28);
transition: transform 140ms ease, box-shadow 200ms ease;
}
.ds-relief__form-card .ds-form__submit:hover,
.ds-relief__form-card button[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 184, 240, .38);
}
/* "What happens next" 3-step cards: numbered ribbon for scanability */
.ds-relief__steps .ds-relief__step,
.ds-relief__plan .ds-relief__plan-item {
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.ds-relief__steps .ds-relief__step:hover,
.ds-relief__plan .ds-relief__plan-item:hover {
border-color: var(--ds-cyan);
box-shadow: 0 6px 20px rgba(15, 26, 45, .06);
}
/* ---------- 4) ISO: field grouping + dark-bg focus visibility ---------- */
/* Visible focus on dark backgrounds — current style relies on border alone */
.ds-iso-apply--dark .ds-iso-apply__form-card input:focus,
.ds-iso-apply--dark .ds-iso-apply__form-card select:focus,
.ds-iso-apply--dark .ds-iso-apply__form-card textarea:focus {
border-color: var(--ds-cyan);
background: rgba(0, 184, 240, .08);
box-shadow: 0 0 0 3px rgba(0, 184, 240, .25);
outline: none;
}
/* ISO submit button: full-width, bold hierarchy */
.ds-iso-apply__form-card .ds-form__submit,
.ds-iso-apply__form-card button[type="submit"] {
width: 100%;
min-height: 54px;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 8px 24px rgba(0, 184, 240, .32);
transition: transform 140ms ease, box-shadow 200ms ease;
}
.ds-iso-apply__form-card .ds-form__submit:hover,
.ds-iso-apply__form-card button[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(0, 184, 240, .42);
}
/* Contact strip in ISO sidebar: stronger visual hierarchy on dark */
.ds-iso-apply--dark .ds-iso-apply__contacts li {
transition: padding-left 180ms ease, border-color 180ms ease;
}
.ds-iso-apply--dark .ds-iso-apply__contacts li:hover {
padding-left: 8px;
border-top-color: var(--ds-cyan);
}
/* ISO form trust strip — visible "encrypted/secure" cue under submit */
.ds-iso-apply__legal {
display: flex;
align-items: flex-start;
gap: 8px;
padding-top: 14px;
border-top: 1px solid var(--ds-line);
}
.ds-iso-apply--dark .ds-iso-apply__legal {
border-top-color: rgba(255, 255, 255, .12);
}
.ds-iso-apply__legal::before {
content: "";
flex: 0 0 14px;
width: 14px;
height: 14px;
margin-top: 2px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: .55;
}
/* ---------- 5) GLOBAL: success state + reduced-motion respect ---------- */
.ds-form .ds-form__success,
.gform_confirmation_message {
padding: 18px 22px;
background: rgba(34, 167, 91, .08);
border: 1.5px solid rgba(34, 167, 91, .35);
border-radius: 12px;
color: #156a37;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.ds-form .ds-form__success::before,
.gform_confirmation_message::before {
content: "";
flex: 0 0 18px;
width: 18px; height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.ds-apply-option,
.ds-apply-continue,
.ds-apply-submit,
.ds-contact-channel,
.ds-contact-office,
.ds-relief__form-card .ds-form__submit,
.ds-relief__form-card button[type="submit"],
.ds-iso-apply__form-card .ds-form__submit,
.ds-iso-apply__form-card button[type="submit"],
.ds-iso-apply--dark .ds-iso-apply__contacts li {
transition: none !important;
transform: none !important;
}
.ds-apply-submit[data-loading="true"]::after,
.ds-form__submit[data-loading="true"]::after,
.gform_button[data-loading="true"]::after {
animation: none;
border-top-color: rgba(255, 255, 255, .85);
}
}