.primary-nav .nav-search { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.search-mark { display:inline-block; position:relative; width:14px; height:14px; border:1.5px solid currentColor; border-radius:50%; flex-shrink:0; margin-right:3px; }
.search-mark::after { content:''; position:absolute; width:6px; height:1.5px; background:currentColor; transform:rotate(45deg); right:-5px; bottom:-2px; }
.footer-utility { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; }
@media (min-width:1120px) { .site-header .primary-nav { gap:20px; } }
@media (min-width:1120px) and (max-width:1279px) { .site-header .primary-nav { gap:16px; font-size:14px; } .site-header .nav-quote { padding-inline:16px; } }
/* Company navigation shares the native details behaviour of the product menu. */
:is(.company-menu, .applications-menu) { position:relative; }
:is(.company-menu, .applications-menu)>summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding-block:14px; color:var(--ink); }
:is(.company-menu, .applications-menu)>summary::-webkit-details-marker { display:none; }
:is(.company-menu, .applications-menu)[open]>summary { color:var(--action); }
:is(.company-menu, .applications-menu)[open] .chevron { transform:rotate(225deg) translate(-2px,-1px); }
.company-submenu { position:absolute; top:calc(100% + 12px); right:0; width:284px; background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--action); border-radius:0 0 8px 8px; padding:12px; box-shadow:0 12px 24px #172b3a14; }
.company-submenu a { display:block; padding:12px; text-decoration:none; border-radius:4px; }
.company-submenu a:hover { color:var(--action); background:var(--soft); }
@media(max-width:1119px) {
:is(.company-menu, .applications-menu)>summary { padding-block:16px; }
.company-submenu { position:static; width:100%; box-shadow:none; border:0; border-left:2px solid var(--action); border-radius:0; padding:0 0 0 8px; margin-bottom:12px; }
}
@font-face {
font-family:'IBM Plex Sans';
src:url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
font-style:normal;
font-weight:400;
font-display:swap}
@font-face {
font-family:'IBM Plex Sans';
src:url('fonts/IBMPlexSans-Medium.woff2') format('woff2');
font-style:normal;
font-weight:500;
font-display:swap}
@font-face {
font-family:'IBM Plex Sans';
src:url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
font-style:normal;
font-weight:600;
font-display:swap}
:root {
--bg:#F5F7F8;
--surface:#FFF;
--ink:#172B3A;
--text:#334655;
--muted:#596B78;
--action:#2459A6;
--action-hover:#1B4787;
--action-active:#153769;
--soft:#EAF1F8;
--line:#D9E1E6;
--control:#7B8994;
--on-dark:#C8D5DF;
--font:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
--container:1280px;
--header-height:80px}
*,*::before,*::after {
box-sizing:border-box}
html {
scroll-behavior:smooth;
scroll-padding-top:104px}
body {
margin:0;
background:var(--surface);
color:var(--text);
font-family:var(--font);
font-size:18px;
line-height:1.6667;
-webkit-font-smoothing:antialiased}
button,input,select,textarea {
font:inherit}
button,a {
-webkit-tap-highlight-color:transparent}
a {
color:inherit;
text-decoration-thickness:1px;
text-underline-offset:4px}
button {
cursor:pointer}
h1,h2,h3,h4,p {
margin:0}
h1,h2,h3,h4 {
color:var(--ink);
font-weight:600}
h1 {
font-size:56px;
line-height:64px;
letter-spacing:-.02em}
h2 {
font-size:36px;
line-height:44px;
letter-spacing:-.02em}
h3 {
font-size:24px;
line-height:32px}
p+p {
margin-top:16px}
ul,ol {
margin:0;
padding:0}
button {
border:0}
a:focus-visible,button:focus-visible,summary:focus-visible {
outline:3px solid var(--action);
outline-offset:4px}
section[id],article[id] {
scroll-margin-top:104px}
main:focus,section[tabindex='-1']:focus,article[tabindex='-1']:focus {
outline:none}
.container {
max-width:calc(var(--container) + 80px);
padding-inline:40px;
margin-inline:auto}
.section {
padding-block:88px}
.eyebrow {
color:var(--action);
font-size:14px;
line-height:22px;
font-weight:500;
margin-bottom:16px}
.eyebrow-line {
display:inline-block;
width:28px;
height:2px;
background:var(--action);
vertical-align:middle;
margin-right:12px}
.arrow {
display:inline-block;
font-size:20px;
line-height:1;
font-weight:400;
flex-shrink:0;
transition:transform 160ms}
.button {
min-height:48px;
padding:12px 20px;
border:1px solid transparent;
border-radius:6px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:16px;
font-size:16px;
line-height:24px;
font-weight:600;
text-decoration:none;
transition:background 160ms,border-color 160ms;
color:var(--ink)}
.button-primary {
background:var(--action);
color:#fff}
.button-primary:hover {
background:var(--action-hover)}
.button-primary:active {
background:var(--action-active)}
.button-secondary {
background:transparent;
border-color:var(--control);
color:var(--action)}
.button-secondary:hover {
background:var(--soft);
border-color:var(--action)}
.button-light {
background:#fff;
color:var(--action)}
.button-light:hover {
background:var(--soft)}
.text-link {
display:inline-flex;
align-items:center;
gap:16px;
font-weight:500;
font-size:16px;
line-height:24px;
color:var(--action);
padding-block:8px}
.text-link:hover .arrow,.button:hover .arrow {
transform:translate(2px,-2px)}
.actions {
display:flex;
flex-wrap:wrap;
gap:12px}
.media-slot {
background:var(--bg);
border:1px solid var(--line);
border-radius:8px;
overflow:hidden}
.skip-link {
position:fixed;
top:12px;
left:16px;
z-index:1000;
transform:translateY(-160%);
padding:10px 20px;
background:#fff;
color:var(--action);
border:2px solid var(--action);
border-radius:6px}
.skip-link:focus {
transform:translateY(0)}
/* Shared header: text brand until the media phase. */
.site-header {
position:sticky;
top:0;
z-index:30;
background:#fff;
border-bottom:1px solid var(--line)}
.header-inner {
height:var(--header-height);
display:flex;
align-items:center;
justify-content:space-between;
gap:32px;
position:relative}
.brand {
display:inline-flex;
flex-direction:column;
flex-shrink:0;
text-decoration:none;
color:var(--ink);
font-size:28px;
font-weight:600;
line-height:32px;
letter-spacing:-.02em}
.brand-caption {
font-size:12px;
font-weight:400;
letter-spacing:0;
line-height:18px;
color:var(--muted)}
.primary-nav {
display:flex;
align-items:center;
gap:28px;
font-size:16px;
line-height:24px;
font-weight:500}
.primary-nav>a:not(.button) {
text-decoration:none;
padding-block:14px}
.primary-nav>a:not(.button):hover {
color:var(--action)}
.product-menu>summary {
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
padding-block:14px;
color:var(--ink)}
.product-menu>summary::-webkit-details-marker {
display:none}
.chevron {
display:inline-block;
width:7px;
height:7px;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-2px);
transition:transform 160ms}
.product-menu[open] .chevron {
transform:rotate(225deg) translate(-2px,-1px)}
.product-menu[open]>summary {
color:var(--action)}
.mega-menu {
position:absolute;
left:40px;
right:40px;
top:calc(100% - 1px);
background:#fff;
border:1px solid var(--line);
border-top:2px solid var(--action);
border-radius:0 0 8px 8px;
padding:32px;
box-shadow:0 12px 24px #172b3a14}
.mega-heading {
display:flex;
justify-content:space-between;
padding-bottom:20px;
border-bottom:1px solid var(--line)}
.mega-heading>a {
color:var(--action);
font-weight:500;
display:flex;
align-items:center;
gap:16px}
.mega-groups {
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
padding-top:24px}
.menu-group-label {
font-size:14px;
color:var(--muted);
margin-bottom:12px}
.mega-item {
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 12px;
margin-inline:-12px;
border-radius:6px;
text-decoration:none;
min-height:44px}
.mega-item:hover {
background:var(--soft);
color:var(--action)}
.mega-note {
font-size:14px;
font-weight:400;
line-height:22px;
color:var(--muted);
margin-top:24px;
padding-top:16px;
border-top:1px solid var(--line)}
.menu-toggle {
display:none}
.nav-quote {
white-space:nowrap}
/* Homepage */
.hero {
padding-top:56px}
.hero-grid {
display:grid;
grid-template-columns:1.05fr 1fr;
gap:72px;
align-items:center}
.hero-copy h1 {
max-width:18ch}
.hero-lead {
max-width:49ch;
font-size:18px;
line-height:30px;
margin-top:24px}
.hero-copy .actions {
margin-top:32px}
.media-hero {
aspect-ratio:16/10}
.hero-location {
display:flex;
justify-content:space-between;
gap:24px;
margin-top:20px;
font-size:14px;
line-height:22px;
color:var(--muted)}
.hero-location strong {
font-size:16px;
line-height:26px;
font-weight:500;
color:var(--ink)}
.hero-facts {
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
margin-top:48px;
padding-block:22px}
.hero-facts p {
font-size:16px;
line-height:24px;
color:var(--ink);
margin:0;
display:flex;
align-items:center;
gap:16px}
.hero-facts p+p {
border-left:1px solid var(--line);
padding-left:40px}
.hero-facts span {
font-size:12px;
color:var(--muted);
font-variant-numeric:tabular-nums}
.section-heading {
display:flex;
align-items:end;
justify-content:space-between;
gap:40px;
margin-bottom:40px}
.section-heading>p {
max-width:37ch;
color:var(--muted);
font-size:18px;
line-height:30px}
.category-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px}
.category-card {
border:1px solid var(--line);
border-radius:8px;
padding:24px;
display:flex;
flex-direction:column;
transition:border-color 160ms;
background:#fff;
min-width:0}
.category-card:hover {
border-color:var(--control)}
.category-top {
display:flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom:24px;
gap:24px}
.category-index {
font-size:12px;
color:var(--muted);
font-variant-numeric:tabular-nums}
.media-category {
width:60%;
aspect-ratio:4/3}
.category-card h3 {
font-size:20px;
line-height:28px;
max-width:24ch}
.category-card>p {
font-size:16px;
line-height:24px;
color:var(--muted);
margin-top:12px;
margin-bottom:20px;
max-width:36ch}
.category-card .text-link {
margin-top:auto;
font-size:14px;
line-height:22px;
gap:10px;
justify-content:space-between}
.range-note {
display:flex;
gap:24px;
justify-content:space-between;
align-items:center;
margin-top:32px;
font-size:14px;
line-height:22px}
.range-note>span {
color:var(--muted)}
.range-note a {
color:var(--action);
display:inline-flex;
align-items:center;
gap:12px}
.selection-section {
background:var(--bg);
border-block:1px solid var(--line)}
.selection-grid {
display:grid;
grid-template-columns:4fr 7fr;
gap:calc(100% / 12)}
.selection-intro>p:not(.eyebrow) {
margin-top:24px;
max-width:33ch}
.selection-intro .text-link {
margin-top:24px}
.task-list {
border-top:1px solid var(--line)}
.task-row {
display:grid;
grid-template-columns:24px 1fr 24px;
gap:24px;
border-bottom:1px solid var(--line);
padding:24px 0;
text-decoration:none}
.task-number {
font-size:14px;
color:var(--muted);
padding-top:4px;
font-variant-numeric:tabular-nums}
.task-row h3 {
font-size:20px;
line-height:28px}
.task-row p {
margin-top:8px;
color:var(--muted);
font-size:16px;
line-height:24px;
max-width:52ch}
.task-row>.arrow {
padding-top:6px;
color:var(--action)}
.task-row:hover h3 {
color:var(--action)}
.task-row:hover>.arrow {
transform:translate(2px,-2px)}
.factory-grid {
display:grid;
grid-template-columns:1.05fr 1fr;
gap:72px;
align-items:center}
.media-factory {
aspect-ratio:4/3}
.visual-footnote {
font-size:14px;
line-height:22px;
margin-top:16px;
color:var(--muted)}
.factory-copy h2 {
margin-bottom:24px}
.factory-copy p:not(.eyebrow) {
max-width:48ch}
.factory-locations {
display:flex;
gap:24px;
flex-wrap:wrap;
margin-top:24px;
padding-block:16px;
border-block:1px solid var(--line);
font-size:14px;
line-height:22px;
color:var(--muted)}
.factory-copy .button {
margin-top:28px}
.support-section {
padding-top:0}
.support-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:72px;
border-top:1px solid var(--line);
padding-top:72px}
.support-intro {
max-width:45ch;
margin-top:24px}
.support-grid .text-link {
margin-top:24px}
.support-panel {
border-top:1px solid var(--line)}
.support-row {
padding-block:24px;
border-bottom:1px solid var(--line)}
.support-row:first-child {
padding-top:20px}
.support-label {
font-size:14px;
line-height:22px;
color:var(--action)}
.support-row h3 {
font-size:20px;
line-height:28px;
margin-top:8px}
.support-row p {
font-size:16px;
line-height:24px;
color:var(--muted);
max-width:52ch;
margin-top:8px}
.process-section {
background:var(--bg);
border-top:1px solid var(--line)}
.process-list {
display:grid;
grid-template-columns:repeat(5,1fr);
list-style:none;
border-top:1px solid var(--control)}
.process-list li {
padding:28px 24px 0 0;
position:relative}
.process-list li:before {
content:'';
position:absolute;
top:-4px;
left:0;
width:7px;
height:7px;
background:var(--action)}
.step-number {
font-size:14px;
line-height:22px;
color:var(--action);
font-variant-numeric:tabular-nums}
.process-list h3 {
font-size:20px;
line-height:28px;
margin-top:16px}
.process-list p {
font-size:16px;
line-height:24px;
color:var(--muted);
margin-top:12px;
max-width:23ch}
.contact-section {
background:var(--ink);
color:#fff;
padding-block:80px}
.contact-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:calc(100% / 12)}
.contact-section .eyebrow {
color:var(--on-dark)}
.contact-section h2 {
color:#fff;
font-size:44px;
line-height:52px}
.contact-grid>div>p:not(.eyebrow) {
color:var(--on-dark);
max-width:46ch;
margin-top:24px}
.contact-grid .button {
margin-top:32px}
.contact-options {
padding-top:4px}
.contact-option {
border-bottom:1px solid #ffffff38;
padding-bottom:24px;
margin-bottom:24px;
display:flex;
flex-direction:column;
align-items:flex-start}
.contact-option>span:first-child {
font-size:14px;
line-height:22px;
color:var(--on-dark);
margin-bottom:8px}
.contact-value {
font-size:24px;
line-height:32px;
text-decoration:none;
font-weight:500;
overflow-wrap:anywhere}
.contact-value:hover {
text-decoration:underline}
.copy-email,.contact-small-link {
padding:8px 0;
background:none;
color:var(--on-dark);
font-size:14px;
line-height:22px;
text-decoration:underline;
text-underline-offset:4px}
.contact-small-link {
display:inline-flex;
align-items:center;
gap:16px}
.copy-feedback {
font-size:14px;
line-height:22px;
color:#fff;
min-height:0}
.copy-feedback:empty {
display:none}
.contact-visit {
font-size:14px;
line-height:22px;
color:var(--on-dark);
max-width:45ch}
.contact-section a:focus-visible,.contact-section button:focus-visible {
outline-color:#fff}
.site-footer {
background:#fff;
padding-top:64px}
.footer-grid {
display:grid;
grid-template-columns:1.2fr 1.25fr 1fr 1.1fr;
gap:40px;
padding-bottom:48px}
.footer-about p {
font-size:16px;
line-height:24px;
margin-top:20px}
.footer-about>span {
display:block;
font-size:14px;
line-height:22px;
color:var(--muted);
margin-top:16px}
.footer-links {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
min-width:0}
.footer-links h2 {
font-size:14px;
line-height:22px;
font-weight:600;
letter-spacing:0;
margin-bottom:8px}
.footer-links a {
font-size:14px;
line-height:22px;
text-decoration:none;
padding-block:3px}
.footer-links a:hover {
text-decoration:underline;
color:var(--action)}
.footer-contact a {
overflow-wrap:anywhere}
.footer-contact p {
font-size:14px;
line-height:22px;
color:var(--muted);
margin-top:16px}
.footer-bottom {
border-top:1px solid var(--line);
padding-block:24px;
display:flex;
justify-content:space-between;
gap:24px;
font-size:12px;
line-height:20px;
color:var(--muted)}
.footer-bottom a {
text-decoration:none;
font-size:14px;
line-height:22px;
white-space:nowrap}
.footer-bottom a span {
margin-left:12px}
@media(max-width:1199px) {
body {
font-size:17px;
line-height:28px}
h1 {
font-size:44px;
line-height:52px}
h2 {
font-size:32px;
line-height:40px}
.container {
padding-inline:32px}
.section {
padding-block:64px}
.hero-grid,.factory-grid,.support-grid {
gap:40px}
.hero {
padding-top:40px}
.hero-lead {
font-size:18px;
line-height:30px}
.primary-nav {
gap:20px}
.hero-facts p+p {
padding-left:24px}
.selection-grid {
gap:48px}
.category-card {
padding:20px}
.section-heading {
gap:32px}
.section-heading>p {
max-width:31ch}
.support-section {
padding-top:0}
.support-grid {
padding-top:56px}
.process-list {
gap:12px}
.process-list li {
padding-right:8px}
.process-list h3 {
font-size:18px;
line-height:26px}
.footer-grid {
grid-template-columns:1fr 1.2fr 1fr 1fr;
gap:24px}
.mega-menu {
left:32px;
right:32px}
}
@media(max-width:1119px) {
.header-inner {
gap:24px}
.js .menu-toggle {
display:inline-flex;
align-items:center;
gap:12px;
min-width:80px;
min-height:48px;
background:#fff;
color:var(--ink);
font-size:16px;
font-weight:500;
padding:12px 0 12px 12px}
.menu-lines {
position:relative;
display:inline-block;
width:18px;
height:12px;
border-top:1.5px solid currentColor;
border-bottom:1.5px solid currentColor}
.menu-toggle[aria-expanded=true] .menu-lines {
height:0;
border-bottom:0;
transform:rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-lines:after {
content:'';
position:absolute;
width:18px;
height:1.5px;
background:currentColor;
top:-1.5px;
left:0;
transform:rotate(90deg)}
.js .primary-nav {
display:none}
.js .menu-is-open .primary-nav {
display:flex}
.primary-nav {
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
padding:16px 32px 24px;
flex-direction:column;
align-items:stretch;
gap:0;
border-bottom:1px solid var(--line);
max-height:calc(100dvh - var(--header-height));
overflow-y:auto}
.primary-nav>a:not(.button) {
padding:16px 0;
border-bottom:1px solid var(--line)}
.primary-nav .nav-quote {
margin-top:20px;
align-self:flex-start}
.product-menu>summary {
min-height:52px;
justify-content:space-between}
.mega-menu {
position:static;
border:0;
border-radius:0;
padding:0 0 16px;
box-shadow:none}
.mega-heading {
display:none}
.mega-groups {
grid-template-columns:1fr 1fr;
gap:32px;
padding-top:12px}
.mega-note {
margin-top:16px}
.mega-item {
font-size:15px}
.nav-is-open {
overflow:hidden}
html:not(.js) .header-inner {
height:auto;
min-height:80px;
flex-wrap:wrap;
padding-block:16px}
html:not(.js) .primary-nav {
position:static;
display:flex;
padding:0;
max-height:none;
width:100%;
border:0}
html:not(.js) .mega-menu {
position:static}
.category-grid {
grid-template-columns:repeat(2,1fr)}
.media-category {
width:50%}
.footer-grid {
grid-template-columns:repeat(2,1fr);
gap:40px}
.footer-about {
grid-row:1}
.process-list {
grid-template-columns:repeat(3,1fr);
row-gap:32px}
.process-list li:nth-child(n+4) {
border-top:1px solid var(--control)}
}
@media(max-width:900px) {
.hero-grid {
gap:32px;
grid-template-columns:1.1fr 1fr}
.hero-location {
flex-direction:column;
gap:12px}
.hero-facts p {
font-size:14px;
gap:10px}
.hero-facts p+p {
padding-left:16px}
.factory-grid {
gap:32px}
.selection-grid {
grid-template-columns:1fr 1.4fr;
gap:32px}
.contact-grid {
gap:40px}
.contact-value {
font-size:20px;
line-height:28px}
}
@media(max-width:767px) {
:root {
--header-height:68px}
body {
font-size:16px;
line-height:26px}
h1 {
font-size:34px;
line-height:42px}
h2 {
font-size:28px;
line-height:36px}
h3 {
font-size:20px;
line-height:28px}
.container {
padding-inline:20px}
.section {
padding-block:48px}
.brand {
font-size:24px;
line-height:28px}
.brand-caption {
font-size:11px;
line-height:16px}
.primary-nav {
padding-inline:20px}
.mega-groups {
grid-template-columns:1fr;
gap:20px}
.mega-item {
font-size:16px;
min-height:44px}
.mega-note {
max-width:38ch}
.hero {
padding-top:32px}
.hero-grid {
grid-template-columns:1fr;
gap:32px}
.hero-copy h1 {
max-width:20ch}
.eyebrow {
font-size:14px;
line-height:22px;
margin-bottom:16px}
.hero-lead {
font-size:18px;
line-height:30px;
max-width:42ch;
margin-top:20px}
.hero-copy .actions {
margin-top:24px}
.actions {
gap:12px}
.actions .button {
padding-inline:16px}
.media-hero {
aspect-ratio:2/1}
.hero-location {
flex-direction:row;
gap:20px;
margin-top:12px;
font-size:12px;
line-height:20px}
.hero-location strong {
font-size:14px;
line-height:22px}
.hero-facts {
grid-template-columns:1fr;
margin-top:28px;
padding-block:14px;
gap:8px}
.hero-facts p {
font-size:14px;
line-height:22px}
.hero-facts p+p {
padding-left:0;
border:0}
.hero-facts span {
width:16px}
.section-heading {
display:block;
margin-bottom:28px}
.section-heading>p {
font-size:16px;
line-height:26px;
max-width:43ch;
margin-top:16px}
.category-grid {
grid-template-columns:1fr;
gap:16px}
.category-card {
padding:20px}
.category-top {
margin-bottom:20px}
.media-category {
width:46%;
max-width:180px}
.category-card>p {
max-width:45ch;
margin-bottom:16px}
.category-card h3 {
max-width:none}
.category-card .text-link {
font-size:16px;
line-height:24px;
min-height:44px}
.range-note {
display:block;
margin-top:24px}
.range-note a {
margin-top:12px;
line-height:24px;
min-height:44px}
.selection-grid,.factory-grid,.support-grid,.contact-grid {
grid-template-columns:1fr;
gap:32px}
.selection-intro>p:not(.eyebrow) {
max-width:44ch;
margin-top:16px}
.selection-intro .text-link {
margin-top:16px}
.task-row {
padding-block:20px;
gap:16px;
grid-template-columns:20px 1fr 20px}
.task-row p {
font-size:16px;
line-height:24px}
.desktop-break {
display:none}
.media-factory {
aspect-ratio:4/3}
.factory-copy h2 {
margin-bottom:16px}
.factory-locations {
gap:12px 24px}
.factory-copy .button {
margin-top:24px}
.support-section {
padding-top:0}
.support-grid {
padding-top:40px}
.support-intro {
margin-top:16px}
.support-grid .text-link {
margin-top:16px}
.support-row {
padding-block:20px}
.process-list {
grid-template-columns:1fr;
border-top:0;
gap:0;
margin-left:3px}
.process-list li {
padding:0 0 28px 28px;
border-left:1px solid var(--control)}
.process-list li:nth-child(n+4) {
border-top:0}
.process-list li:last-child {
padding-bottom:0}
.process-list li:before {
left:-4px;
top:7px}
.process-list h3 {
display:inline;
font-size:20px;
line-height:28px;
margin:0 0 0 12px}
.process-list p {
max-width:40ch;
margin-top:8px}
.contact-section {
padding-block:48px}
.contact-section h2 {
font-size:34px;
line-height:42px}
.contact-grid>div>p:not(.eyebrow) {
margin-top:20px}
.contact-value {
font-size:22px;
line-height:30px}
.contact-option {
padding-bottom:20px;
margin-bottom:20px}
.copy-email,.contact-small-link {
min-height:44px;
display:inline-flex;
align-items:center}
.site-footer {
padding-top:40px}
.footer-grid {
gap:32px 24px;
padding-bottom:32px}
.footer-about {
grid-column:1/-1;
grid-row:auto}
.footer-links a {
min-height:40px;
padding-block:8px}
.footer-contact {
grid-column:1/-1}
.footer-bottom {
display:block;
padding-block:20px;
font-size:12px;
line-height:20px}
.footer-bottom a {
display:inline-flex;
align-items:center;
min-height:44px;
margin-top:8px}
.footer-contact p {
margin-top:8px}
section[id],article[id] {
scroll-margin-top:88px}
}
@media(max-width:359px) {
.container {
padding-inline:16px}
.primary-nav {
padding-inline:16px}
.hero-copy .actions {
align-items:stretch}
.hero-copy .button {
flex:1 0 auto}
.footer-grid {
grid-template-columns:1fr}
.footer-contact {
grid-column:auto}
.footer-about {
grid-column:auto}
.contact-value {
font-size:20px}
.hero-facts p {
font-size:14px}
}
.media-document {
width:160px;
aspect-ratio:4/3;
margin-top:24px}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto}
*,*::before,*::after {
transition:none!important;
animation:none!important}
}