/* ========================================================================== UNICUS MARKETING — CAPABILITIES PAGE STYLESHEET File: /assets/css/capabilities.css Version: 1.1 ========================================================================== PURPOSE Presentation rules unique to capabilities.php. This file must load after /assets/css/global.css and requires . POSITIONING This is not a generic services menu. It presents the strategic, creative, marketing, technical, and production arsenal Unicus can deploy individually or combine while implementing broader business growth programs. ARCHITECTURE - Every selector is scoped beneath .page-capabilities. - Shared resets, navigation, footer, buttons, and reveal behavior remain in global.css. - Primary copper is inherited from --primary (#d7793b). - No embedded styles or page-specific JavaScript are required. CONTENTS 01. Page Foundation 02. Global Markup Compatibility 03. Hero 04. Positioning 05. Capability Index 06. Capability Arsenal 07. Connected Execution 08. Final CTA 09. Responsive Rules 10. Reduced Motion ========================================================================== */ /* ========================================================================== 01. Page Foundation ========================================================================== */ .page-capabilities .page { overflow: hidden; background: var(--black); color: var(--white); } .page-capabilities .page h1, .page-capabilities .page h2, .page-capabilities .page h3 { text-transform: uppercase; } .page-capabilities .page section, .page-capabilities .capabilities-index { scroll-margin-top: 96px; } .page-capabilities .delay-1 { transition-delay: 100ms; } /* ========================================================================== 02. Global Markup Compatibility global.css uses section-inner, hero-eyebrow, and btn-* class names. The current PHP follows the approved What We Do markup pattern, so these scoped aliases reproduce the same global values without changing shared files. ========================================================================== */ .page-capabilities .wrap { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: var(--site-gutter); } .page-capabilities .eyebrow { display: inline-flex; align-items: center; gap: 15px; margin-bottom: 24px; color: var(--primary); font-family: var(--font-body); font-size: var(--hero-eyebrow-size); font-weight: 700; letter-spacing: var(--hero-eyebrow-spacing); line-height: 1; text-transform: uppercase; } .page-capabilities .eyebrow::before { content: ""; flex: 0 0 42px; width: 42px; height: 1px; background: currentColor; } .page-capabilities .cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border: 1px solid var(--primary); border-radius: 0; background: var(--primary); color: var(--black-light); cursor: pointer; font-family: var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background-color var(--transition-standard), border-color var(--transition-standard), color var(--transition-standard), transform var(--transition-standard); } .page-capabilities .cta-button:hover, .page-capabilities .cta-button:focus-visible { border-color: var(--primary-light); background: var(--primary-light); color: var(--black-light); transform: translateY(-1px); } .page-capabilities .cta-button-outline { border-color: rgba(var(--white-rgb), .24); background: transparent; color: var(--white); } .page-capabilities .cta-button-outline:hover, .page-capabilities .cta-button-outline:focus-visible { border-color: rgba(var(--white-rgb), .55); background: rgba(var(--white-rgb), .04); color: var(--white); } /* ========================================================================== 03. Hero ========================================================================== */ .page-capabilities .capabilities-hero { position: relative; min-height: 760px; display: flex; align-items: flex-end; isolation: isolate; background: radial-gradient(circle at 77% 37%, rgba(var(--primary-rgb), .13), transparent 24%), linear-gradient(135deg, #050505 0%, #0a0a0a 52%, #101010 100%); } .page-capabilities .capabilities-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(var(--black-rgb), .98) 0%, rgba(var(--black-rgb), .82) 48%, rgba(var(--black-rgb), .35) 100%), linear-gradient(0deg, var(--black) 0%, transparent 36%); pointer-events: none; } .page-capabilities .capabilities-hero::after { content: "ARSENAL"; position: absolute; right: -1.5vw; bottom: -5vw; z-index: -1; color: rgba(var(--white-rgb), .025); font: 700 clamp(190px, 25vw, 410px)/.76 var(--font-display); letter-spacing: -.045em; pointer-events: none; white-space: nowrap; } .page-capabilities .capabilities-hero-art { position: absolute; top: 17%; right: clamp(25px, 7vw, 120px); z-index: -1; width: clamp(310px, 36vw, 600px); aspect-ratio: 1; opacity: .72; transform: rotate(-8deg); background: linear-gradient(90deg, transparent 49.85%, rgba(var(--primary-rgb), .34) 50%, transparent 50.15%), linear-gradient(transparent 49.85%, rgba(var(--primary-rgb), .34) 50%, transparent 50.15%), repeating-radial-gradient(circle, transparent 0 42px, rgba(var(--white-rgb), .07) 43px 44px); -webkit-mask-image: linear-gradient(145deg, transparent 4%, #000 34%, #000 74%, transparent 96%); mask-image: linear-gradient(145deg, transparent 4%, #000 34%, #000 74%, transparent 96%); pointer-events: none; } .page-capabilities .capabilities-hero-art::before, .page-capabilities .capabilities-hero-art::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(var(--primary-rgb), .42); transform: rotate(45deg); } .page-capabilities .capabilities-hero-art::after { inset: 30%; border-color: rgba(var(--white-rgb), .18); } .page-capabilities .capabilities-hero-inner { width: 100%; padding-top: 170px; padding-bottom: 76px; } .page-capabilities .capabilities-hero-copy { max-width: 1240px; } .page-capabilities .capabilities-hero h1 { max-width: 1060px; margin: 0 0 34px; color: var(--white); font-family: var(--font-display); font-size: var(--hero-heading-size); font-weight: 400; letter-spacing: var(--hero-heading-spacing); line-height: var(--hero-heading-line); } .page-capabilities .capabilities-hero h1 span { display: block; color: var(--primary); } .page-capabilities .capabilities-hero-foot { display: grid; grid-template-columns: minmax(0, 780px) auto; gap: clamp(35px, 6vw, 90px); align-items: end; max-width: 1240px; padding-top: 27px; border-top: 1px solid rgba(var(--primary-rgb), .48); } .page-capabilities .capabilities-hero-foot > p { margin: 0; color: var(--light-gray); font-size: var(--hero-copy-size); line-height: var(--hero-copy-line); } .page-capabilities .capabilities-hero-actions, .page-capabilities .capabilities-close-actions { display: flex; flex-wrap: wrap; gap: 12px; } .page-capabilities .capabilities-hero-bg-image { position: absolute; inset: 0; z-index: -4; background-image: url("../images/capabilities-hero-background.png"); background-position: center center; background-size: cover; background-repeat: no-repeat; filter: saturate(.72) contrast(1.1); } /* ========================================================================== 04. Positioning ========================================================================== */ .page-capabilities .capabilities-position { position: relative; padding: 135px 0; background: #0b0b0b; } .page-capabilities .capabilities-position::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 1px; background: linear-gradient(transparent, rgba(var(--white-rgb), .07) 18%, rgba(var(--white-rgb), .07) 82%, transparent); pointer-events: none; } .page-capabilities .capabilities-position-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr); gap: clamp(70px, 9vw, 145px); align-items: center; } .page-capabilities .capabilities-position-copy h2, .page-capabilities .capabilities-arsenal-head h2, .page-capabilities .capabilities-connected-copy h2, .page-capabilities .capabilities-close h2 { margin: 0; color: var(--white); font-family: var(--font-display); font-size: clamp(52px, 5.3vw, 86px); font-weight: 400; letter-spacing: -.035em; line-height: .89; } .page-capabilities .capabilities-position-copy h2 span, .page-capabilities .capabilities-arsenal-head h2 span, .page-capabilities .capabilities-connected-copy h2 span, .page-capabilities .capabilities-close h2 span { display: block; color: var(--primary); } .page-capabilities .capabilities-position-copy > p:not(.eyebrow) { max-width: 720px; margin: 22px 0 0; color: rgba(var(--white-rgb), .62); font-size: 16px; line-height: 1.75; } .page-capabilities .capabilities-position-copy .capabilities-position-lead { color: rgba(var(--white-rgb), .88); font-size: clamp(18px, 1.45vw, 22px); line-height: 1.65; } .page-capabilities .capabilities-position-options { display: grid; gap: 14px; } .page-capabilities .capabilities-position-card { position: relative; padding: 34px 35px 37px; border: 1px solid rgba(var(--white-rgb), .10); background: rgba(var(--white-rgb), .025); transition: border-color var(--transition-standard), background-color var(--transition-standard), transform var(--transition-standard); } .page-capabilities .capabilities-position-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 54px; height: 2px; background: rgba(var(--white-rgb), .34); } .page-capabilities .capabilities-position-card:hover { border-color: rgba(var(--primary-rgb), .42); background: rgba(var(--white-rgb), .04); transform: translateX(-4px); } .page-capabilities .capabilities-position-card-featured { border-color: rgba(var(--primary-rgb), .46); background: linear-gradient(115deg, rgba(var(--primary-rgb), .13), transparent 72%), rgba(var(--white-rgb), .025); } .page-capabilities .capabilities-position-card-featured::before { background: var(--primary); } .page-capabilities .capabilities-position-card > span { display: block; margin-bottom: 13px; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; } .page-capabilities .capabilities-position-card h3 { margin: 0 0 11px; color: var(--white); font: 400 clamp(30px, 2.7vw, 42px)/1 var(--font-display); letter-spacing: .005em; } .page-capabilities .capabilities-position-card p { margin: 0; color: rgba(var(--white-rgb), .60); font-size: 14px; line-height: 1.65; } /* ========================================================================== 05. Capability Index ========================================================================== */ .page-capabilities .capabilities-index { position: relative; z-index: 3; border-top: 1px solid rgba(var(--white-rgb), .08); border-bottom: 1px solid rgba(var(--white-rgb), .08); background: #080808; } .page-capabilities .capabilities-index-inner { display: grid; grid-template-columns: 195px minmax(0, 1fr); gap: 40px; align-items: stretch; } .page-capabilities .capabilities-index-label { display: flex; align-items: center; padding: 28px 28px 28px 0; border-right: 1px solid rgba(var(--primary-rgb), .34); color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .19em; line-height: 1.45; text-transform: uppercase; } .page-capabilities .capabilities-index-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .page-capabilities .capabilities-index-links a { min-height: 93px; display: flex; gap: 10px; align-items: flex-start; padding: 24px 16px; border-left: 1px solid rgba(var(--white-rgb), .055); color: rgba(var(--white-rgb), .58); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.45; text-decoration: none; text-transform: uppercase; transition: background-color var(--transition-fast), color var(--transition-fast); } .page-capabilities .capabilities-index-links a:nth-child(n + 6) { border-top: 1px solid rgba(var(--white-rgb), .055); } .page-capabilities .capabilities-index-links a span { flex: 0 0 auto; color: var(--primary); font-size: 8px; letter-spacing: .10em; } .page-capabilities .capabilities-index-links a:hover, .page-capabilities .capabilities-index-links a:focus-visible { background: rgba(var(--primary-rgb), .09); color: var(--white); } /* ========================================================================== 06. Capability Arsenal ========================================================================== */ .page-capabilities .capabilities-arsenal { position: relative; padding: 145px 0 135px; background: linear-gradient(180deg, #060606 0%, #090909 48%, #060606 100%); } .page-capabilities .capabilities-arsenal::before { content: ""; position: absolute; top: 0; right: 0; width: 42vw; height: 42vw; background: radial-gradient(circle at top right, rgba(var(--primary-rgb), .065), transparent 67%); pointer-events: none; } .page-capabilities .capabilities-arsenal-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .65fr); gap: clamp(50px, 8vw, 120px); align-items: end; margin-bottom: 88px; } .page-capabilities .capabilities-arsenal-head .eyebrow, .page-capabilities .capabilities-arsenal-head h2 { grid-column: 1; } .page-capabilities .capabilities-arsenal-head .eyebrow { margin-bottom: -22px; } .page-capabilities .capabilities-arsenal-head > p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 4px 0 4px 27px; border-left: 1px solid rgba(var(--primary-rgb), .5); color: rgba(var(--white-rgb), .63); font-size: 16px; line-height: 1.72; } .page-capabilities .capabilities-groups { border-top: 1px solid rgba(var(--white-rgb), .12); } .page-capabilities .capabilities-group { position: relative; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(0, 1.1fr); gap: clamp(55px, 8vw, 130px); padding: 76px 0 82px; border-bottom: 1px solid rgba(var(--white-rgb), .12); } .page-capabilities .capabilities-group::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--primary); transition: width 600ms var(--ease-standard); } .page-capabilities .capabilities-group:hover::after { width: 100%; } .page-capabilities .capabilities-group-heading { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 25px; align-items: start; } .page-capabilities .capabilities-group-number { padding-top: 7px; color: var(--primary); font: 400 clamp(45px, 4.3vw, 68px)/.9 var(--font-display); letter-spacing: .02em; } .page-capabilities .capabilities-group-title > span { display: block; margin-bottom: 11px; color: rgba(var(--white-rgb), .42); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .page-capabilities .capabilities-group-title h3 { max-width: 530px; margin: 0 0 18px; color: var(--white); font: 400 clamp(35px, 3.25vw, 52px)/.96 var(--font-display); letter-spacing: -.012em; } .page-capabilities .capabilities-group-title p { max-width: 560px; margin: 0; color: rgba(var(--white-rgb), .56); font-size: 14px; line-height: 1.7; } .page-capabilities .capabilities-tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-content: start; margin: 0; padding: 0; list-style: none; } .page-capabilities .capabilities-tool-list li { position: relative; min-height: 47px; display: flex; align-items: center; padding: 12px 10px 12px 21px; border-bottom: 1px solid rgba(var(--white-rgb), .075); color: rgba(var(--white-rgb), .76); font-size: 14px; line-height: 1.45; transition: color var(--transition-fast), padding-left var(--transition-fast); } .page-capabilities .capabilities-tool-list li::before { content: ""; position: absolute; left: 0; width: 6px; height: 6px; border: 1px solid var(--primary); transform: rotate(45deg); } .page-capabilities .capabilities-tool-list li:hover { padding-left: 25px; color: var(--white); } /* ========================================================================== 07. Connected Execution ========================================================================== */ .page-capabilities .capabilities-connected { position: relative; overflow: hidden; padding: 135px 0 145px; isolation: isolate; background: radial-gradient(circle at 84% 34%, rgba(var(--primary-rgb), .14), transparent 24%), #101010; } .page-capabilities .capabilities-connected::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .36; background-image: linear-gradient(rgba(var(--white-rgb), .035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--white-rgb), .035) 1px, transparent 1px); background-size: 68px 68px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000); mask-image: linear-gradient(90deg, transparent, #000 40%, #000); } .page-capabilities .capabilities-connected-word { position: absolute; left: 50%; bottom: -8%; z-index: -1; transform: translateX(-50%); color: rgba(var(--white-rgb), .025); font: 700 clamp(160px, 23vw, 360px)/.8 var(--font-display); letter-spacing: -.045em; pointer-events: none; white-space: nowrap; } .page-capabilities .capabilities-connected-inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); gap: clamp(60px, 9vw, 145px); align-items: center; } .page-capabilities .capabilities-connected-copy > p:last-child { max-width: 700px; margin: 28px 0 0; padding-left: 25px; border-left: 2px solid var(--primary); color: rgba(var(--white-rgb), .67); font-size: 16px; line-height: 1.75; } .page-capabilities .capabilities-connected-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(var(--primary-rgb), .48); border-left: 1px solid rgba(var(--white-rgb), .10); } .page-capabilities .capabilities-connected-stats > div { min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; border-right: 1px solid rgba(var(--white-rgb), .10); border-bottom: 1px solid rgba(var(--white-rgb), .10); background: rgba(var(--black-rgb), .20); transition: background-color var(--transition-standard), transform var(--transition-standard); } .page-capabilities .capabilities-connected-stats > div:hover { background: rgba(var(--primary-rgb), .09); transform: translateY(-3px); } .page-capabilities .capabilities-connected-stats strong { display: block; margin-bottom: 9px; color: var(--white); font: 400 clamp(44px, 4.3vw, 68px)/.9 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; } .page-capabilities .capabilities-connected-stats span { color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .17em; line-height: 1.45; text-transform: uppercase; } /* ========================================================================== 08. Final CTA ========================================================================== */ .page-capabilities .capabilities-close { position: relative; padding: 128px 0 138px; overflow: hidden; background: var(--primary); color: var(--black-light); text-align: center; } .page-capabilities .capabilities-close::before { content: "CAPABILITY"; position: absolute; top: -3%; left: 50%; transform: translateX(-50%); color: rgba(var(--black-rgb), .055); font: 700 clamp(190px, 29vw, 460px)/.8 var(--font-display); letter-spacing: -.05em; pointer-events: none; white-space: nowrap; } .page-capabilities .capabilities-close-inner { position: relative; max-width: 1140px; margin-inline: auto; } .page-capabilities .capabilities-close .eyebrow { color: #3c2112; } .page-capabilities .capabilities-close .eyebrow::before { background: currentColor; } .page-capabilities .capabilities-close h2 { color: var(--black-light); font-size: clamp(58px, 7vw, 112px); } .page-capabilities .capabilities-close h2 span { color: var(--white); } .page-capabilities .capabilities-close > .wrap > p:not(.eyebrow):not(.capabilities-close-brand) { max-width: 760px; margin: 28px auto 0; color: rgba(var(--black-rgb), .72); font-size: 18px; line-height: 1.7; } .page-capabilities .capabilities-close-actions { justify-content: center; margin-top: 38px; } .page-capabilities .capabilities-close .cta-button { border-color: var(--black-light); background: var(--black-light); color: var(--white); } .page-capabilities .capabilities-close .cta-button:hover, .page-capabilities .capabilities-close .cta-button:focus-visible { border-color: var(--white); background: var(--white); color: var(--black-light); } .page-capabilities .capabilities-close .cta-button-outline { background: transparent; color: var(--black-light); } .page-capabilities .capabilities-close .cta-button-outline:hover, .page-capabilities .capabilities-close .cta-button-outline:focus-visible { border-color: var(--black-light); background: var(--black-light); color: var(--white); } .page-capabilities .capabilities-close-brand { margin: 31px auto 0; color: var(--black-light); font: 400 clamp(22px, 2.25vw, 35px)/1.2 var(--font-display); letter-spacing: .015em; text-transform: uppercase; } /* ========================================================================== 09. Responsive Rules ========================================================================== */ @media (max-width: 1180px) { .page-capabilities .wrap { padding-inline: var(--site-gutter-tablet); } .page-capabilities .capabilities-hero-foot, .page-capabilities .capabilities-arsenal-head, .page-capabilities .capabilities-connected-inner { grid-template-columns: 1fr; } .page-capabilities .capabilities-hero-actions { justify-content: flex-start; } .page-capabilities .capabilities-position-grid { gap: 70px; } .page-capabilities .capabilities-index-inner { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; } .page-capabilities .capabilities-index-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-capabilities .capabilities-index-links a:nth-child(n + 3) { border-top: 1px solid rgba(var(--white-rgb), .055); } .page-capabilities .capabilities-group { grid-template-columns: minmax(350px, .85fr) minmax(0, 1.15fr); gap: 60px; } .page-capabilities .capabilities-arsenal-head .eyebrow, .page-capabilities .capabilities-arsenal-head h2, .page-capabilities .capabilities-arsenal-head > p:last-child { grid-column: auto; grid-row: auto; } .page-capabilities .capabilities-arsenal-head .eyebrow { margin-bottom: -24px; } .page-capabilities .capabilities-arsenal-head > p:last-child { max-width: 760px; } .page-capabilities .capabilities-connected-stats { max-width: 850px; } } @media (max-width: 900px) { .page-capabilities .capabilities-position::before { display: none; } .page-capabilities .capabilities-position-grid, .page-capabilities .capabilities-group { grid-template-columns: 1fr; } .page-capabilities .capabilities-position-grid { gap: 58px; } .page-capabilities .capabilities-position-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-capabilities .capabilities-group { gap: 47px; } .page-capabilities .capabilities-group-heading { max-width: 760px; } .page-capabilities .capabilities-tool-list { gap: 0 50px; } } @media (max-width: 680px) { .page-capabilities .wrap { padding-inline: var(--site-gutter-mobile); } .page-capabilities .capabilities-hero { min-height: 880px; } .page-capabilities .capabilities-hero-inner { padding-top: 145px; padding-bottom: 68px; } .page-capabilities .capabilities-hero h1 { font-size: clamp(59px, 18vw, 88px); } .page-capabilities .capabilities-hero-art { top: 12%; right: -38%; width: 112vw; opacity: .42; } .page-capabilities .capabilities-hero-actions, .page-capabilities .capabilities-close-actions { flex-direction: column; align-items: stretch; } .page-capabilities .capabilities-hero-actions .cta-button, .page-capabilities .capabilities-close-actions .cta-button { width: 100%; } .page-capabilities .capabilities-position, .page-capabilities .capabilities-arsenal, .page-capabilities .capabilities-connected, .page-capabilities .capabilities-close { padding-top: 92px; padding-bottom: 96px; } .page-capabilities .capabilities-position-copy h2, .page-capabilities .capabilities-arsenal-head h2, .page-capabilities .capabilities-connected-copy h2, .page-capabilities .capabilities-close h2 { font-size: clamp(47px, 13.6vw, 70px); } .page-capabilities .capabilities-position-options, .page-capabilities .capabilities-connected-stats { grid-template-columns: 1fr; } .page-capabilities .capabilities-position-card { padding: 29px 27px 31px; } .page-capabilities .capabilities-index-inner { display: block; padding-top: 0; padding-bottom: 0; } .page-capabilities .capabilities-index-label { padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(var(--primary-rgb), .34); } .page-capabilities .capabilities-index-links { grid-template-columns: 1fr; } .page-capabilities .capabilities-index-links a, .page-capabilities .capabilities-index-links a:nth-child(n + 3) { min-height: auto; padding: 17px 4px; border-top: 0; border-left: 0; border-bottom: 1px solid rgba(var(--white-rgb), .055); } .page-capabilities .capabilities-arsenal-head { gap: 42px; margin-bottom: 58px; } .page-capabilities .capabilities-arsenal-head .eyebrow { margin-bottom: -12px; } .page-capabilities .capabilities-group { gap: 38px; padding: 61px 0 65px; } .page-capabilities .capabilities-group-heading { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; } .page-capabilities .capabilities-group-number { font-size: 43px; } .page-capabilities .capabilities-group-title h3 { font-size: clamp(35px, 10.5vw, 48px); } .page-capabilities .capabilities-tool-list { grid-template-columns: 1fr; } .page-capabilities .capabilities-connected-copy > p:last-child { padding-left: 20px; } .page-capabilities .capabilities-connected-stats > div { min-height: 150px; padding: 26px; } .page-capabilities .capabilities-close > .wrap > p:not(.eyebrow):not(.capabilities-close-brand) { font-size: 16px; } } @media (max-width: 420px) { .page-capabilities .capabilities-group-heading { display: block; } .page-capabilities .capabilities-group-number { margin-bottom: 17px; } } /* ========================================================================== 10. Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .page-capabilities .capabilities-hero-art, .page-capabilities .capabilities-position-card, .page-capabilities .capabilities-group::after, .page-capabilities .capabilities-tool-list li, .page-capabilities .capabilities-connected-stats > div { transition: none; } }