.pro-doc{--doc-glass:rgba(255,255,255,.72);--doc-glass-strong:rgba(255,255,255,.86);--doc-border:rgba(255,255,255,.9);--doc-shadow:0 18px 44px rgba(8,53,107,.09),inset 0 1px 0 rgba(255,255,255,.95);--doc-radius:24px;--doc-sticky:232px;position:relative;isolation:isolate;padding:28px 0 64px;overflow:clip}
.pro-doc__backdrop{position:absolute;z-index:-1;inset:0;pointer-events:none;background:
radial-gradient(1100px 520px at 12% -6%,rgba(0,113,223,.16),transparent 62%),
radial-gradient(900px 600px at 96% 8%,rgba(122,201,98,.16),transparent 60%),
radial-gradient(800px 700px at 50% 70%,rgba(0,113,223,.07),transparent 70%),
linear-gradient(180deg,#eef7ff 0%,#f6fbff 38%,#fbfdff 100%)}
.pro-doc__backdrop::before{content:"";position:absolute;inset:0 0 auto;height:520px;background:url(//www.progenion.nl/wp-content/themes/progenion-nieuw/assets/hero-spring.webp) center 30%/cover no-repeat;opacity:.22;filter:blur(18px) saturate(.9);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)} .pro-doc-hero{position:relative;padding:22px 0 26px}
.pro-doc-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:0 0 14px;font-size:.84rem;color:var(--muted)}
.pro-doc-breadcrumb a{color:var(--blue);text-decoration:none;font-weight:650}
.pro-doc-breadcrumb a:hover{text-decoration:underline}
.pro-doc-breadcrumb [aria-current]{color:var(--ink);font-weight:650}
.pro-doc-hero h1{max-width:20ch;margin:0 0 12px;font-family:"Nunito Sans","Segoe UI Variable Text","Segoe UI",sans-serif;font-weight:900;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.03em;color:var(--navy);overflow-wrap:break-word;hyphens:auto}
.pro-doc-hero__lead{max-width:62ch;margin:0 0 14px;font-size:1.12rem;line-height:1.6;color:var(--ink)}
.pro-doc-hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pro-doc-hero__meta span{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--doc-border);border-radius:999px;background:var(--doc-glass);box-shadow:0 6px 16px rgba(8,53,107,.06);font-size:.8rem;font-weight:700;color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .pro-doc-layout{display:block}
.pro-doc-layout.has-toc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.pro-doc-content{display:grid;gap:18px;min-width:0} .pro-doc-card,.pro-doc-toc__box,.pro-doc-help{position:relative;border:1px solid var(--doc-border);border-radius:var(--doc-radius);background:var(--doc-glass);box-shadow:var(--doc-shadow);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.pro-doc-card{padding:34px clamp(22px,4vw,48px) 30px;scroll-margin-top:var(--doc-sticky)}
.pro-doc-card--intro{background:var(--doc-glass-strong)}
.pro-doc-card__number{position:absolute;top:22px;right:24px;font:800 .78rem/1 "Nunito Sans","Segoe UI",sans-serif;letter-spacing:.08em;color:rgba(0,113,223,.55)}
.pro-doc-card h2{max-width:34ch;margin:0 0 16px;padding-right:36px;font-family:"Nunito Sans","Segoe UI Variable Text","Segoe UI",sans-serif;font-weight:850;font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.2;letter-spacing:-.02em;color:var(--navy)}
.pro-doc-card__top{display:inline-flex;gap:6px;margin-top:18px;font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:none}
.pro-doc-card__top:hover{color:var(--blue)} .pro-doc-prose{max-width:72ch;font-size:1.0625rem;line-height:1.75;color:#1d3b5f;overflow-wrap:break-word}
.pro-doc-prose>*:first-child{margin-top:0}.pro-doc-prose>*:last-child{margin-bottom:0}
.pro-doc-prose p{margin:0 0 1.05em;text-align:left}
.pro-doc-prose h3,.pro-doc-prose h4{margin:1.6em 0 .5em;font-family:"Nunito Sans","Segoe UI",sans-serif;font-weight:800;font-size:1.12rem;line-height:1.3;letter-spacing:-.01em;color:var(--navy)}
.pro-doc-prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.pro-doc-prose strong,.pro-doc-prose b{color:var(--navy);font-weight:750}
.pro-doc-prose ul,.pro-doc-prose ol{margin:0 0 1.1em;padding-left:1.3em}
.pro-doc-prose li{margin:.35em 0;padding-left:.2em}
.pro-doc-prose ul li::marker{color:var(--blue)}
.pro-doc-prose ol li::marker{color:var(--blue);font-weight:800}
.pro-doc-prose img,.pro-doc-prose video,.pro-doc-prose iframe{max-width:100%;height:auto;border-radius:16px}
.pro-doc-prose figure{margin:1.2em 0}
.pro-doc-prose blockquote{margin:1.2em 0;padding:14px 18px;border-left:4px solid var(--blue);border-radius:0 14px 14px 0;background:rgba(234,246,255,.7)}
.pro-doc-prose hr{border:0;border-top:1px solid rgba(8,53,107,.12);margin:1.6em 0}
.pro-doc-table{overflow-x:auto;margin:1.2em 0;border-radius:14px;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.pro-doc-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem}
.pro-doc-table th,.pro-doc-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pro-doc-table th{background:rgba(234,246,255,.8);color:var(--navy)}
.pro-doc-prose .pro-fx-toggle{background:rgba(255,255,255,.75)}
.pro-doc-prose ul.products{padding:0} .pro-doc-toc__box{padding:0;overflow:hidden}
.pro-doc-toc__box summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;cursor:pointer;list-style:none;font:800 .95rem/1.2 "Nunito Sans","Segoe UI",sans-serif;color:var(--navy)}
.pro-doc-toc__box summary::-webkit-details-marker{display:none}
.pro-doc-toc__chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.pro-doc-toc__box[open] .pro-doc-toc__chevron{transform:rotate(-135deg)}
.pro-doc-toc ol{margin:0;padding:0 10px 14px;list-style:none;counter-reset:toc;max-height:min(62vh,640px);overflow:auto}
.pro-doc-toc li{counter-increment:toc}
.pro-doc-toc a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:8px 10px;border-radius:12px;font-size:.88rem;line-height:1.35;color:var(--ink);text-decoration:none}
.pro-doc-toc a::before{content:counter(toc,decimal-leading-zero);font-weight:800;font-size:.74rem;line-height:1.6;color:rgba(0,113,223,.6)}
.pro-doc-toc a:hover{background:rgba(234,246,255,.9);color:var(--blue)}
.pro-doc-toc a.is-current{background:rgba(0,113,223,.1);color:var(--blue);font-weight:750} .pro-doc-help{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;padding:24px clamp(22px,4vw,40px);background:linear-gradient(120deg,rgba(255,255,255,.82),rgba(232,245,255,.78))}
.pro-doc-help strong{display:block;margin-bottom:4px;font:850 1.15rem/1.25 "Nunito Sans","Segoe UI",sans-serif;color:var(--navy)}
.pro-doc-help p{margin:0;color:var(--ink);line-height:1.55}
.pro-doc-help p a{color:var(--blue);font-weight:700;white-space:nowrap}
.pro-doc-help .button{flex:0 0 auto} .pro-doc--shop .pro-doc-card--intro{padding:28px clamp(16px,3vw,36px)}
.pro-doc--shop .pro-doc-prose{max-width:none;font-size:1rem} @media (min-width:901px){.pro-doc{padding-top:84px}}
@media (min-width:1100px){
.pro-doc-layout.has-toc{grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start}
.pro-doc-toc{position:sticky;top:var(--doc-sticky)}
} @media (max-width:1099px){
.pro-doc{--doc-sticky:150px}
.pro-doc-toc ol{max-height:none}
} @media (max-width:700px){
.pro-doc{--doc-radius:20px;--doc-sticky:120px;padding:14px 0 44px}
.pro-doc-hero{padding:14px 0 18px}
.pro-doc-breadcrumb{font-size:.78rem}
.pro-doc-hero h1{font-size:clamp(1.85rem,8.2vw,2.4rem)}
.pro-doc-content,.pro-doc-layout.has-toc{gap:12px}
.pro-doc-card{padding:26px 18px 22px}
.pro-doc-card__number{top:16px;right:16px}
.pro-doc-card h2{padding-right:28px}
.pro-doc-prose{font-size:1rem;line-height:1.7}
.pro-doc-help{flex-direction:column;align-items:stretch;text-align:left}
.pro-doc-help .button{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.pro-doc-toc__chevron{transition:none}html:focus-within{scroll-behavior:auto}}
@media (prefers-reduced-motion:no-preference){html:has(.pro-doc){scroll-behavior:smooth}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.pro-doc{--doc-glass:rgba(255,255,255,.94);--doc-glass-strong:#fff}} .pro-doc-prose .pro-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:1.2em 0 0}
.pro-doc .pro-doc-card:has(.pro-news-grid) .pro-doc-prose{max-width:none}
.pro-news-card a{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--doc-border);border-radius:18px;background:rgba(255,255,255,.8);box-shadow:0 10px 26px rgba(8,53,107,.08);color:inherit;text-decoration:none;font-weight:400;transition:transform .18s ease,box-shadow .18s ease}
.pro-news-card a:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(8,53,107,.12)}
.pro-news-card__image img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}
.pro-news-card__body{display:grid;gap:6px;padding:14px 16px 18px}
.pro-news-card time{font-size:.76rem;font-weight:700;color:var(--muted)}
.pro-news-card strong{font:800 1.02rem/1.3 "Nunito Sans","Segoe UI",sans-serif;color:var(--navy)}
.pro-news-card__body>span{font-size:.9rem;line-height:1.55;color:#36506f}
@media (prefers-reduced-motion:reduce){.pro-news-card a{transition:none}}.pro-about {
--about-navy: #0b3155;
--about-blue: #0878dd;
--about-orange: #fe3d01;
--about-orange-dark: #df3500;
--about-muted: #5d758a;
--about-line: rgba(11, 49, 85, .12);
--about-glass: rgba(255, 255, 255, .76);
color: var(--about-navy);
background:
radial-gradient(circle at 10% 22%, rgba(139, 210, 243, .24), transparent 28%),
radial-gradient(circle at 88% 58%, rgba(185, 226, 203, .24), transparent 28%),
linear-gradient(180deg, #eff9fe 0%, #f8fcfe 46%, #f3faf6 100%);
overflow: clip;
}
.pro-about,
.pro-about *,
.pro-about *::before,
.pro-about *::after {
box-sizing: border-box;
}
.pro-about-shell {
width: min(calc(100% - 44px), 1380px);
margin: 0 auto;
}
.pro-about-glass {
border: 1px solid rgba(255, 255, 255, .88);
background: var(--about-glass);
box-shadow: 0 22px 60px rgba(12, 61, 96, .11), inset 0 1px rgba(255, 255, 255, .92);
-webkit-backdrop-filter: blur(18px) saturate(128%);
backdrop-filter: blur(18px) saturate(128%);
}
.pro-about-hero {
position: relative;
min-height: clamp(560px, 69vh, 760px);
display: grid;
align-items: center;
isolation: isolate;
overflow: hidden;
}
.pro-about-hero__photo,
.pro-about-hero__wash {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
}
.pro-about-hero__photo {
object-fit: cover;
object-position: center 42%;
}
.pro-about-hero__wash {
z-index: -1;
background:
linear-gradient(90deg, rgba(245,251,255,.96) 0%, rgba(245,251,255,.86) 37%, rgba(245,251,255,.28) 68%, rgba(245,251,255,.12) 100%),
linear-gradient(180deg, rgba(232,247,255,.24) 0%, transparent 65%, #eff9fe 100%);
}
.pro-about-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(320px, .58fr);
gap: clamp(22px, 4vw, 58px);
align-items: center;
padding: clamp(34px, 6vw, 78px) 0 clamp(58px, 8vw, 104px);
}
.pro-about-hero__copy {
max-width: 760px;
padding: clamp(27px, 4vw, 50px);
border-radius: 30px;
}
.pro-about-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 23px;
color: #5f7890;
font-size: 12px;
font-weight: 750;
}
.pro-about-breadcrumb a {
color: var(--about-blue);
text-decoration: none;
}
.pro-about-kicker {
display: block;
color: var(--about-blue);
font-size: 12px;
font-weight: 900;
letter-spacing: .09em;
line-height: 1.3;
text-transform: uppercase;
}
.pro-about-hero h1 {
max-width: 680px;
margin: 10px 0 17px;
color: var(--about-navy);
font-size: clamp(38px, 5vw, 67px);
font-weight: 900;
letter-spacing: -.055em;
line-height: .99;
}
.pro-about-hero__copy > p {
max-width: 650px;
margin: 0;
color: #3f607a;
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.65;
}
.pro-about-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-top: 28px;
}
.pro-about-button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
border: 1px solid transparent;
border-radius: 15px;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.pro-about-button--primary {
color: #fff;
background: linear-gradient(135deg, var(--about-orange), #ff7128);
box-shadow: 0 12px 26px rgba(254, 61, 1, .24);
}
.pro-about-button--glass {
border-color: rgba(11,49,85,.13);
color: var(--about-navy);
background: rgba(255,255,255,.72);
}
.pro-about-button:hover,
.pro-about-button:focus-visible {
transform: translateY(-2px);
}
.pro-about-button--primary:hover,
.pro-about-button--primary:focus-visible {
color: #fff;
background: linear-gradient(135deg, var(--about-orange-dark), #f65e1d);
box-shadow: 0 16px 32px rgba(254,61,1,.3);
}
.pro-about-hero__facts {
padding: 25px;
border-radius: 26px;
}
.pro-about-hero__facts > img {
display: block;
width: 160px;
height: auto;
margin-bottom: 13px;
}
.pro-about-hero__facts > p {
margin: 0 0 18px;
color: var(--about-muted);
font-size: 13px;
line-height: 1.6;
}
.pro-about-hero__facts dl {
display: grid;
gap: 7px;
margin: 0 0 17px;
}
.pro-about-hero__facts dl div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 12px;
border: 1px solid rgba(11,49,85,.09);
border-radius: 12px;
background: rgba(255,255,255,.57);
}
.pro-about-hero__facts dt {
color: var(--about-muted);
font-size: 11px;
font-weight: 750;
}
.pro-about-hero__facts dd {
margin: 0;
color: var(--about-navy);
font-size: 12px;
font-weight: 900;
text-align: right;
}
.pro-about-hero__facts > a {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--about-line);
color: var(--about-navy);
font-size: 11px;
font-weight: 850;
line-height: 1.35;
text-decoration: none;
}
.pro-about-hero__facts > a img {
width: 75px;
height: auto;
}
.pro-about-body {
position: relative;
z-index: 2;
padding: 0 0 clamp(72px, 9vw, 122px);
}
.pro-about-trust {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: -42px;
}
.pro-about-trust article {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
padding: 15px;
border-radius: 18px;
}
.pro-about-trust article > span,
.pro-about-icon,
.pro-about-application-links a > span {
display: grid;
flex: 0 0 auto;
place-items: center;
color: var(--about-blue);
border: 1px solid rgba(8,120,221,.12);
background: linear-gradient(145deg, #fff, #e8f5ff);
box-shadow: 0 8px 20px rgba(8,120,221,.09);
}
.pro-about-trust article > span {
width: 42px;
height: 42px;
border-radius: 13px;
}
.pro-about .pro-ui-icon {
width: 21px;
height: 21px;
}
.pro-about-trust strong,
.pro-about-trust small {
display: block;
}
.pro-about-trust strong {
font-size: 13px;
}
.pro-about-trust small {
margin-top: 3px;
color: var(--about-muted);
font-size: 10px;
line-height: 1.4;
}
.pro-about-story,
.pro-about-applications,
.pro-about-contact {
margin-top: clamp(38px, 6vw, 76px);
border-radius: 30px;
}
.pro-about-story {
padding: clamp(27px, 4vw, 50px);
}
.pro-about-section-heading {
max-width: 770px;
}
.pro-about-section-heading--center {
margin-right: auto;
margin-left: auto;
text-align: center;
}
.pro-about-section-heading h2 {
margin: 8px 0 11px;
color: var(--about-navy);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 900;
letter-spacing: -.045em;
line-height: 1.07;
}
.pro-about-section-heading > p {
margin: 0;
color: var(--about-muted);
font-size: 15px;
line-height: 1.65;
}
.pro-about-story__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
gap: clamp(28px, 5vw, 70px);
align-items: start;
margin-top: 28px;
}
.pro-about-story__copy p {
margin: 0 0 16px;
color: #365b77;
font-size: 15px;
line-height: 1.75;
}
.pro-about-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 3px;
color: var(--about-blue);
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.pro-about-principles {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
.pro-about-principles li {
display: grid;
grid-template-columns: 43px minmax(0, 1fr);
gap: 12px;
padding: 14px;
border: 1px solid rgba(11,49,85,.09);
border-radius: 16px;
background: rgba(255,255,255,.64);
}
.pro-about-principles li > span {
display: grid;
width: 39px;
height: 39px;
place-items: center;
border-radius: 12px;
color: #fff;
background: var(--about-blue);
font-size: 11px;
font-weight: 900;
}
.pro-about-principles strong {
font-size: 13px;
}
.pro-about-principles p {
margin: 4px 0 0;
color: var(--about-muted);
font-size: 11px;
line-height: 1.5;
}
.pro-about-expertise,
.pro-about-routes {
margin-top: clamp(54px, 7vw, 90px);
}
.pro-about-expertise__grid,
.pro-about-routes__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 25px;
}
.pro-about-expertise__card,
.pro-about-route {
position: relative;
min-width: 0;
min-height: 235px;
padding: 22px;
border-radius: 22px;
}
.pro-about-expertise__card {
display: flex;
flex-direction: column;
color: var(--about-navy);
text-decoration: none;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pro-about-expertise__card:hover,
.pro-about-expertise__card:focus-visible {
border-color: rgba(8,120,221,.28);
box-shadow: 0 26px 62px rgba(12,61,96,.15);
transform: translateY(-4px);
}
.pro-about-icon {
width: 46px;
height: 46px;
margin-bottom: 17px;
border-radius: 14px;
}
.pro-about-expertise__card strong {
font-size: 17px;
}
.pro-about-expertise__card p,
.pro-about-route p {
margin: 8px 0 18px;
color: var(--about-muted);
font-size: 12px;
line-height: 1.6;
}
.pro-about-expertise__card b {
margin-top: auto;
color: var(--about-orange);
font-size: 20px;
}
.pro-about-applications {
display: grid;
grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
gap: clamp(28px, 5vw, 68px);
align-items: center;
padding: clamp(27px, 4vw, 48px);
}
.pro-about-application-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.pro-about-application-links a {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 61px;
padding: 10px 12px;
border: 1px solid rgba(11,49,85,.09);
border-radius: 14px;
color: var(--about-navy);
background: rgba(255,255,255,.64);
text-decoration: none;
transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.pro-about-application-links a:hover,
.pro-about-application-links a:focus-visible {
border-color: rgba(254,61,1,.25);
background: #fff;
transform: translateY(-2px);
}
.pro-about-application-links a > span {
width: 36px;
height: 36px;
border-radius: 11px;
}
.pro-about-application-links strong {
font-size: 12px;
}
.pro-about-application-links b {
color: var(--about-orange);
}
.pro-about-route {
display: flex;
flex-direction: column;
}
.pro-about-route h3 {
margin: 0;
font-size: 17px;
}
.pro-about-route a {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: auto;
color: var(--about-blue);
font-size: 12px;
font-weight: 900;
line-height: 1.4;
text-decoration: none;
}
.pro-about-contact {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(360px, .85fr) auto;
gap: clamp(22px, 4vw, 52px);
align-items: center;
padding: clamp(24px, 4vw, 42px);
}
.pro-about-contact__brand {
display: grid;
grid-template-columns: 115px minmax(0, 1fr);
align-items: center;
gap: 18px;
}
.pro-about-contact__brand > img {
width: 115px;
height: auto;
}
.pro-about-contact__brand h2 {
margin: 6px 0 7px;
font-size: clamp(23px, 2.6vw, 34px);
letter-spacing: -.04em;
}
.pro-about-contact__brand p {
margin: 0;
color: var(--about-muted);
font-size: 12px;
line-height: 1.55;
}
.pro-about-contact__details {
display: grid;
gap: 7px;
margin: 0;
font-style: normal;
}
.pro-about-contact__details > span,
.pro-about-contact__details > a {
display: grid;
grid-template-columns: 31px minmax(0, 1fr);
align-items: center;
gap: 9px;
color: var(--about-navy);
text-decoration: none;
}
.pro-about-contact__details .pro-ui-icon {
width: 19px;
height: 19px;
color: var(--about-blue);
}
.pro-about-contact__details strong,
.pro-about-contact__details small {
display: block;
}
.pro-about-contact__details strong {
font-size: 12px;
}
.pro-about-contact__details small {
color: var(--about-muted);
font-size: 10px;
}
@media (max-width: 1120px) {
.pro-about-hero__inner {
grid-template-columns: minmax(0, 1.1fr) minmax(290px, .6fr);
}
.pro-about-trust,
.pro-about-expertise__grid,
.pro-about-routes__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pro-about-contact {
grid-template-columns: 1fr 1fr;
}
.pro-about-contact > .pro-about-button {
grid-column: 1 / -1;
justify-self: start;
}
}
@media (max-width: 820px) {
.pro-about-hero {
min-height: auto;
}
.pro-about-hero__photo {
object-position: 62% center;
}
.pro-about-hero__wash {
background:
linear-gradient(180deg, rgba(245,251,255,.58) 0%, rgba(245,251,255,.78) 48%, #eff9fe 100%),
linear-gradient(90deg, rgba(245,251,255,.86), rgba(245,251,255,.22));
}
.pro-about-hero__inner {
grid-template-columns: 1fr;
padding-top: 36px;
}
.pro-about-hero__copy {
max-width: 690px;
}
.pro-about-hero__facts {
max-width: 690px;
}
.pro-about-story__grid,
.pro-about-applications {
grid-template-columns: 1fr;
}
.pro-about-contact {
grid-template-columns: 1fr;
}
.pro-about-contact > .pro-about-button {
grid-column: auto;
}
}
@media (max-width: 620px) {
.pro-about-shell {
width: min(calc(100% - 24px), 1380px);
}
.pro-about-hero__inner {
gap: 14px;
padding: 20px 0 72px;
}
.pro-about-hero__copy,
.pro-about-hero__facts,
.pro-about-story,
.pro-about-applications,
.pro-about-contact {
border-radius: 22px;
}
.pro-about-hero__copy {
padding: 22px 18px;
}
.pro-about-breadcrumb {
margin-bottom: 17px;
}
.pro-about-hero h1 {
font-size: clamp(34px, 11vw, 48px);
}
.pro-about-actions {
display: grid;
}
.pro-about-button {
width: 100%;
}
.pro-about-trust,
.pro-about-expertise__grid,
.pro-about-routes__grid,
.pro-about-application-links {
grid-template-columns: 1fr;
}
.pro-about-trust {
margin-top: -38px;
}
.pro-about-story,
.pro-about-applications,
.pro-about-contact {
padding: 22px 17px;
}
.pro-about-expertise__card,
.pro-about-route {
min-height: 0;
}
.pro-about-contact__brand {
grid-template-columns: 86px minmax(0, 1fr);
gap: 13px;
}
.pro-about-contact__brand > img {
width: 86px;
}
}
@media (prefers-reduced-motion: reduce) {
.pro-about *,
.pro-about *::before,
.pro-about *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}