:root {
--font-sans:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
--deep:#28312e;
--teal:#727d60;
--paper:#fbf9f4;
--ink:#202a30;
--line:#dce2e3;
--bronze:#b58b5b;
--muted:#69777b
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth
}
body {
margin:0;
background:var(--paper);
color:var(--ink);
font:400 16px/1.65 var(--font-sans)
}
a {
color:inherit;
text-decoration:none
}
button {
font:inherit
}
.container {
width:min(100% - 96px,1280px);
margin:auto
}
.skip-link {
position:absolute;
left:12px;
top:-60px;
padding:10px 15px;
background:#fff;
z-index:100
}
.skip-link:focus {
top:12px
}
:focus-visible {
outline:3px solid var(--teal);
outline-offset:4px
}
.site-header {
position:absolute;
inset:0 0 auto;
z-index:20;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.22)
}
.header-inner {
min-height:90px;
display:flex;
align-items:center;
gap:38px
}
.brand {
display:inline-flex;
align-items:center;
gap:11px;
white-space:nowrap
}
.brand-mark {
width:29px;
height:33px;
border:2px solid currentColor;
display:grid;
place-items:center;
position:relative
}
.brand-mark:after {
content:'';
width:4px;
height:4px;
background:var(--teal);
border-radius:50%;
position:absolute;
right:5px;
top:13px
}
.brand-mark span {
height:21px;
width:8px;
border-left:2px solid currentColor;
transform:skewY(-23deg);
opacity:.75
}
.brand-type {
font:800 25px/1 var(--font-sans);
letter-spacing:-.065em
}
.brand-type>span {
font-weight:400
}
.nav {
display:flex;
gap:36px;
margin-left:auto;
font-size:14px;
font-weight:600
}
.nav a,.header-link {
transition:opacity .2s
}
.nav a:hover,.header-link:hover {
opacity:.66
}
.header-link {
font-size:14px;
font-weight:700;
border:1px solid rgba(255,255,255,.6);
padding:11px 17px;
margin-left:12px
}
.header-link span {
padding-left:13px
}
.menu-toggle,.mobile-nav {
display:none
}
.hero {
min-height:780px;
height:min(100svh,900px);
position:relative;
display:flex;
align-items:center;
color:#fff;
background:#09252e;
overflow:hidden
}
.hero-image,.hero-shade {
position:absolute;
inset:0
}
.hero-image {
background:none
}
.hero-shade {
background:linear-gradient(90deg,rgba(8,34,43,.55),rgba(8,34,43,.16) 58%,rgba(8,34,43,.02)),linear-gradient(0deg,rgba(8,34,43,.65),transparent 22%)
}
.hero-content {
z-index:2;
padding-top:115px
}
.eyebrow {
display:flex;
align-items:center;
gap:17px;
margin:0 0 30px;
font:700 12px/1.2 var(--font-sans);
letter-spacing:.18em
}
.hero-eyebrow {
color:#e2ded4
}
.eyebrow-line {
display:inline-block;
width:32px;
height:1px;
background:var(--bronze)
}
h1,h2,h3,p {
margin-top:0
}
h1,h2,h3 {
font-family:var(--font-sans)
}
h1 {
font-size:clamp(58px,7vw,114px);
line-height:1.07;
letter-spacing:-.075em;
font-weight:600;
margin:0 0 28px;
max-width:880px
}
h1 em,.planning-intro h2 em {
font-family:Georgia,serif;
font-weight:400;
letter-spacing:-.045em
}
.hero-lead {
max-width:535px;
color:#e6e8e5;
font-size:19px;
line-height:1.65;
margin:0 0 34px
}
.hero-actions {
display:flex;
align-items:center;
gap:33px
}
.button {
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:34px;
padding:17px 21px;
font-size:14px;
font-weight:700;
line-height:1.2;
transition:background .2s,color .2s,transform .2s
}
.button:hover {
transform:translateY(-2px)
}
.button-light {
background:#f5f5f0;
color:var(--deep)
}
.button-light:hover {
background:#fff
}
.text-link {
font-size:14px;
font-weight:700;
border-bottom:1px solid rgba(255,255,255,.6);
padding:10px 0
}
.text-link span {
padding-left:15px
}
.hero-side-label {
position:absolute;
right:24px;
top:50%;
transform:translateY(-50%);
writing-mode:vertical-rl;
font-size:11px;
letter-spacing:.16em;
z-index:2;
color:#dbd9d2
}
.hero-bottom {
position:absolute;
bottom:24px;
left:0;
right:0;
display:flex;
justify-content:space-between;
z-index:2;
font:700 11px/1 var(--font-sans);
letter-spacing:.14em;
color:#e4e5df
}
.hero-bottom span:last-child span {
font-size:19px;
margin-left:16px
}
.section {
padding:126px 0
}
.intro {
background:var(--paper)
}
.intro-grid {
display:grid;
grid-template-columns:1.25fr .75fr;
gap:70px;
align-items:end;
margin-bottom:86px
}
.dark-eyebrow {
color:var(--teal)
}
.section-number {
color:#9ca8a8;
margin-left:9px;
letter-spacing:0
}
.intro h2,.section-heading h2,.planning-intro h2,.closing-inner h2 {
font-size:clamp(40px,4.5vw,70px);
font-weight:600;
line-height:1.14;
letter-spacing:-.065em;
margin:0
}
.accent-text {
color:var(--teal)
}
.intro-copy {
max-width:480px;
padding-bottom:4px
}
.intro-copy p {
font-size:18px;
line-height:1.8;
color:#526166;
margin-bottom:19px
}
.intro-copy p:last-child {
margin:0
}
.pillar-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line)
}
.pillar {
position:relative;
padding:32px 44px 0 0;
border-right:1px solid var(--line);
min-height:280px
}
.pillar+.pillar {
padding-left:42px
}
.pillar:last-child {
border:0
}
.pillar-index {
font:700 12px/1 var(--font-sans);
color:#9da8ab;
letter-spacing:.08em
}
.pillar-icon {
display:block;
color:var(--teal);
font-size:40px;
font-weight:400;
height:75px;
padding-top:16px
}
.pillar h3 {
font-size:21px;
letter-spacing:-.035em;
margin:0 0 12px
}
.pillar p {
color:#687579;
line-height:1.75;
max-width:310px
}
.access-section {
background:#e9eeed
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:end;
gap:50px;
margin-bottom:45px
}
.section-heading>p {
max-width:365px;
color:#5f7073;
font-size:17px;
line-height:1.75;
margin-bottom:7px
}
.option-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px
}
.option-card {
background:#f8f9f6;
min-height:445px;
padding:27px 29px 28px;
display:flex;
flex-direction:column;
transition:transform .25s,box-shadow .25s
}
.option-card:hover {
transform:translateY(-5px);
box-shadow:0 16px 32px rgba(18,58,70,.09)
}
.option-head {
display:flex;
justify-content:space-between;
align-items:center;
color:#718489;
font:700 11px/1 var(--font-sans);
letter-spacing:.14em
}
.option-head span:last-child {
font-size:19px;
color:var(--teal)
}
.option-graphic {
margin:25px 0 29px;
min-height:148px;
background:#eaf1ef;
display:grid;
place-items:center;
overflow:hidden;
position:relative
}
.option-graphic:before,.option-graphic:after {
content:'';
position:absolute;
height:1px;
width:80%;
background:rgba(21,154,156,.18);
transform:rotate(-28deg)
}
.option-graphic:before {
top:20%;
left:-30%
}
.option-graphic:after {
bottom:18%;
right:-30%
}
.option-card:nth-child(2) .option-graphic {
background:#e7eded
}
.option-card:nth-child(3) .option-graphic {
background:#e9efec
}
.option-graphic>span {
font:700 clamp(54px,5vw,79px)/1 var(--font-sans);
letter-spacing:-.12em;
color:#287a80
}
.option-graphic .thin {
font-weight:400;
color:#78aaac
}
.option-card h3 {
font-size:24px;
letter-spacing:-.045em;
margin:0 0 8px
}
.option-card p {
color:#627175;
line-height:1.68;
margin-bottom:24px
}
.option-tag {
margin-top:auto;
border-top:1px solid #d9e1df;
padding-top:18px;
font:700 11px/1.2 var(--font-sans);
color:#6f8284;
letter-spacing:.11em;
text-transform:uppercase
}
.source-note {
color:#738386;
font-size:13px;
line-height:1.5;
margin:22px 0 0
}
.source-note a {
text-decoration:underline;
text-underline-offset:3px
}
.planning-section {
background:var(--deep);
color:#fff
}
.planning-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:10%
}
.planning-intro {
display:flex;
flex-direction:column;
align-items:flex-start
}
.planning-intro .eyebrow {
color:#82d0d0
}
.planning-intro h2 {
font-size:clamp(42px,4.3vw,68px);
margin-bottom:27px
}
.planning-intro h2 em {
color:#b2e2df
}
.planning-intro>p:not(.eyebrow) {
max-width:460px;
font-size:18px;
color:#b8cdcf;
line-height:1.75
}
.planning-rule {
width:100%;
height:1px;
background:#41626b;
margin:auto 0 22px
}
.planning-small {
font-size:13px;
color:#99b5ba
}
.planning-list {
border-top:1px solid #4b6b72
}
.planning-item {
display:grid;
grid-template-columns:60px 1fr;
gap:20px;
border-bottom:1px solid #4b6b72;
padding:27px 0 29px
}
.planning-item>span {
font:700 12px/1.8 var(--font-sans);
color:#6fc7c5
}
.planning-item h3 {
font-size:21px;
letter-spacing:-.035em;
margin:0 0 8px
}
.planning-item p {
color:#b2c5c8;
line-height:1.65;
margin:0
}
.closing-section {
background:#dfe9e6;
padding:109px 0 112px
}
.closing-inner {
text-align:center;
display:flex;
flex-direction:column;
align-items:center
}
.closing-inner .eyebrow {
margin-bottom:23px
}
.closing-inner h2 {
font-size:clamp(40px,4.4vw,68px);
margin-bottom:34px
}
.button-dark {
background:var(--deep);
color:#fff
}
.button-dark:hover {
background:#1e5762
}
.site-footer {
background:#102f38;
color:#d8e3e1
}
.footer-main {
display:flex;
justify-content:space-between;
align-items:start;
padding:72px 0 83px
}
.footer-brand .brand-type {
font-size:30px
}
.footer-main p {
font-size:15px;
color:#b5c9ca;
margin:15px 0 0
}
.footer-links {
display:flex;
gap:32px;
font-size:14px
}
.footer-links a:hover {
color:#7cd0ce
}
.footer-base {
display:flex;
justify-content:space-between;
gap:20px;
padding:23px 0;
border-top:1px solid #345660;
color:#91abb0;
font-size:12px
}
@media(max-width:1000px) {
.container {
width:min(100% - 56px,1280px)
}
.nav {
gap:17px
}
.header-inner {
gap:17px
}
.header-link {
display:none
}
.hero {
height:760px;
min-height:670px
}
.intro-grid {
gap:34px
}
.pillar {
padding-right:20px
}
.pillar+.pillar {
padding-left:25px
}
.planning-grid {
gap:6%
}
}
@media(max-width:700px) {
.container {
width:min(100% - 36px,1280px)
}
.site-header {
background:rgba(9,42,50,.58)
}
.header-inner {
min-height:70px
}
.brand-type {
font-size:23px
}
.brand-mark {
width:26px;
height:30px
}
.nav {
display:none
}
.menu-toggle {
display:flex;
margin-left:auto;
width:39px;
height:39px;
border:0;
background:transparent;
flex-direction:column;
justify-content:center;
gap:6px;
padding:8px;
cursor:pointer
}
.menu-toggle span {
height:2px;
width:24px;
background:#fff;
display:block
}
.mobile-nav:not([hidden]) {
display:flex;
flex-direction:column;
padding:13px 18px 22px;
background:#28312e;
border-top:1px solid rgba(255,255,255,.18)
}
.mobile-nav a {
padding:12px 0;
font-weight:600;
border-bottom:1px solid rgba(255,255,255,.14)
}
.hero {
height:auto;
min-height:720px;
align-items:center
}
.hero-image {
background-position:60% center
}
.hero-shade {
background:linear-gradient(90deg,rgba(6,29,38,.72),rgba(6,29,38,.37)),linear-gradient(0deg,rgba(6,29,38,.68),transparent 30%)
}
.hero-content {
padding-top:108px;
padding-bottom:100px
}
.eyebrow {
font-size:11px;
letter-spacing:.13em;
margin-bottom:24px
}
h1 {
font-size:clamp(50px,13vw,77px);
letter-spacing:-.07em
}
.hero-lead {
font-size:17px;
max-width:450px
}
.hero-actions {
gap:18px;
align-items:flex-start;
flex-direction:column
}
.hero-side-label {
display:none
}
.hero-bottom {
font-size:9px;
bottom:20px
}
.hero-bottom>span:last-child {
display:none
}
.section {
padding:76px 0
}
.intro-grid {
display:block;
margin-bottom:45px
}
.intro h2,.section-heading h2,.planning-intro h2,.closing-inner h2 {
font-size:clamp(37px,10vw,54px)
}
.intro-copy {
margin-top:28px
}
.intro-copy p {
font-size:16px
}
.pillar-grid {
grid-template-columns:1fr
}
.pillar,.pillar+.pillar {
border:0;
border-bottom:1px solid var(--line);
min-height:0;
padding:20px 0 26px
}
.pillar-icon {
height:63px;
padding-top:12px
}
.pillar p {
margin:0;
max-width:none
}
.section-heading {
display:block;
margin-bottom:30px
}
.section-heading>p {
margin:20px 0 0;
font-size:16px
}
.option-grid {
grid-template-columns:1fr;
gap:12px
}
.option-card {
min-height:410px
}
.option-graphic {
min-height:136px
}
.option-graphic>span {
font-size:75px
}
.planning-grid {
display:block
}
.planning-intro>p:not(.eyebrow) {
font-size:16px
}
.planning-rule,.planning-small {
display:none
}
.planning-list {
margin-top:44px
}
.planning-item {
grid-template-columns:39px 1fr;
gap:12px;
padding:23px 0
}
.planning-item h3 {
font-size:19px
}
.closing-section {
padding:76px 0
}
.closing-inner h2 {
font-size:clamp(35px,9vw,50px)
}
.footer-main {
display:block;
padding:56px 0 46px
}
.footer-links {
margin-top:35px;
flex-direction:column;
gap:12px
}
.footer-base {
flex-direction:column;
gap:7px;
font-size:12px
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
.button,.option-card {
transition:none
}
}
/* Expanded navigation and sections */
.nav {
gap:clamp(12px,1.35vw,24px)
}
.header-inner {
gap:20px
}
.header-link {
margin-left:0;
white-space:nowrap
}
.nav a {
white-space:nowrap
}
.footer-links {
max-width:780px;
justify-content:flex-end;
flex-wrap:wrap;
row-gap:12px
}
.integration-section {
background:#fbf9f4
}
.integration-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
border-top:1px solid var(--line)
}
.integration-grid article {
padding:28px 24px 10px 0;
border-right:1px solid var(--line)
}
.integration-grid article:last-child {
border:0
}
.integration-grid span {
font:700 11px/1.3 var(--font-sans);
letter-spacing:.13em;
color:var(--teal)
}
.integration-grid h3 {
font-size:22px;
letter-spacing:-.04em;
margin:38px 0 12px
}
.integration-grid p {
max-width:350px;
color:#627175;
line-height:1.7
}
.cases-section {
background:#e9eeed
}
.cases-inner {
max-width:1280px
}
.cases-inner h2,.about-inner h2 {
font-size:clamp(40px,4.5vw,70px);
line-height:1.12;
letter-spacing:-.06em;
max-width:720px
}
.cases-inner>p:not(.eyebrow),.about-inner>p:not(.eyebrow) {
max-width:690px;
font-size:18px;
color:#526166;
line-height:1.75
}
.cases-inner .cases-note,.about-inner .cases-note {
font-size:14px!important;
color:#69777b!important
}
.about-section {
background:#fbf9f4
}
html {
scroll-padding-top:24px
}
@media(max-width:1180px) {
.nav {
display:none
}
.header-link {
margin-left:auto
}
.menu-toggle {
display:flex;
margin-left:auto;
width:39px;
height:39px;
border:0;
background:transparent;
flex-direction:column;
justify-content:center;
gap:6px;
padding:8px;
cursor:pointer
}
.menu-toggle span {
height:2px;
width:24px;
background:#fff;
display:block
}
.mobile-nav:not([hidden]) {
display:flex;
flex-direction:column;
padding:13px max(28px,calc((100vw - 1280px)/2)) 22px;
background:#28312e;
border-top:1px solid rgba(255,255,255,.18)
}
.mobile-nav a {
padding:10px 0;
font-weight:600;
border-bottom:1px solid rgba(255,255,255,.14)
}
}
@media(max-width:700px) {
.header-link {
display:none
}
.integration-grid {
grid-template-columns:1fr;
gap:0
}
.integration-grid article {
border-right:0;
border-bottom:1px solid var(--line);
padding:22px 0
}
.integration-grid h3 {
margin:18px 0 10px
}
.cases-inner>p:not(.eyebrow),.about-inner>p:not(.eyebrow) {
font-size:16px
}
.footer-links {
justify-content:flex-start
}
}
/* Home banners and fixed navigation */
.site-header {
position:fixed;
background:rgba(10,39,48,.84);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px)
}
.site-header.is-scrolled {
background:rgba(10,39,48,.96);
box-shadow:0 8px 32px rgba(4,24,30,.18)
}
html {
scroll-padding-top:104px
}
.hero-carousel {
display:block;
isolation:isolate
}
.hero-slide {
position:absolute;
inset:0;
display:flex;
align-items:center;
opacity:0;
visibility:hidden;
transition:opacity .65s ease,visibility .65s;
pointer-events:none
}
.hero-slide.is-active {
opacity:1;
visibility:visible;
z-index:1;
pointer-events:auto
}
.hero-slide .hero-content {
position:relative
}
.hero-slide h2 {
font-size:clamp(58px,7vw,114px);
line-height:1.07;
letter-spacing:-.075em;
font-weight:600;
margin:0 0 28px;
max-width:980px;
color:#fff
}
.hero-slide h2 em {
font-family:Georgia,serif;
font-weight:400;
letter-spacing:-.045em
}
.hero-shade {
background:linear-gradient(90deg,rgba(7,27,35,.33),rgba(7,27,35,0) 75%),linear-gradient(0deg,rgba(7,27,35,.45),transparent 35%)
}
.hero-controls {
position:absolute;
bottom:32px;
left:0;
right:0;
z-index:5;
display:flex;
align-items:center;
gap:14px;
color:#fff
}
.hero-arrow {
height:42px;
width:42px;
border:1px solid rgba(255,255,255,.55);
background:rgba(6,31,38,.35);
color:#fff;
cursor:pointer;
font-size:18px
}
.hero-arrow:hover,.hero-arrow:focus-visible {
background:#f5f5f0;
color:var(--deep)
}
.hero-dots {
display:flex;
gap:7px
}
.hero-dots button {
height:32px;
width:28px;
border:0;
background:transparent;
cursor:pointer;
position:relative
}
.hero-dots button:after {
content:'';
position:absolute;
top:15px;
left:2px;
right:2px;
height:2px;
background:rgba(255,255,255,.45)
}
.hero-dots button.is-active:after {
background:#fff;
height:3px
}
.hero-count {
font:700 12px/1 var(--font-sans);
letter-spacing:.12em;
margin:0 6px
}
@media(max-width:700px) {
html {
scroll-padding-top:76px
}
.hero-carousel {
min-height:690px;
height:min(850px,100svh)
}
.hero-slide .hero-content {
padding-top:92px;
padding-bottom:85px
}
.hero-slide h2 {
font-size:clamp(48px,12vw,72px)
}
.hero-slide h1 {
font-size:clamp(48px,12vw,72px)
}
.hero-slide .hero-lead {
font-size:16px;
max-width:430px
}
.hero-slide .hero-image {
background-position:60% center
}
.hero-image-applications,.hero-image-integration,.hero-image-resources {
background-position:65% center!important
}
.hero-slide .hero-shade {
background:linear-gradient(90deg,rgba(7,27,35,.64),rgba(7,27,35,.28)),linear-gradient(0deg,rgba(7,27,35,.62),transparent 35%)
}
.hero-controls {
bottom:18px
}
.hero-arrow {
height:40px;
width:40px
}
}
@media(prefers-reduced-motion:reduce) {
.hero-slide {
transition:none
}
}
.selection-section {
background:#dfe9e6
}
.selection-section .section-heading h2 {
max-width:850px
}
.selection-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
border-top:1px solid #bdcccb
}
.selection-grid article {
padding:27px 24px 15px 0;
border-right:1px solid #bdcccb
}
.selection-grid article:last-child {
border:0
}
.selection-grid span {
font:700 11px/1.3 var(--font-sans);
letter-spacing:.13em;
color:#258587
}
.selection-grid h3 {
font-size:22px;
letter-spacing:-.04em;
margin:35px 0 12px
}
.selection-grid p {
color:#53666a;
max-width:350px;
line-height:1.7
}
.selection-link {
display:inline-block;
margin-top:32px;
border-bottom:1px solid var(--deep);
padding-bottom:6px;
font-weight:700
}
.selection-link span {
padding-left:16px
}
@media(max-width:700px) {
.selection-grid {
grid-template-columns:1fr;
gap:0
}
.selection-grid article {
border-right:0;
border-bottom:1px solid #bdcccb;
padding:23px 0
}
.selection-grid h3 {
margin:15px 0 9px
}
}
/* Homepage buying guide */
.editorial-note {
color:#63767a;
font-size:14px;
line-height:1.65;
margin:25px 0 0;
max-width:880px
}
.compare-strip {
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:33px
}
.compare-strip strong {
font-size:14px;
margin-right:6px
}
.compare-strip span {
border:1px solid #bfd0cc;
border-radius:50px;
padding:8px 13px;
color:#36555c;
font-size:14px
}
.supplier-section {
background:#eaf0ee
}
.supplier-table-wrap {
overflow-x:auto;
border-top:1px solid #b9cbca
}
.supplier-table {
width:100%;
border-collapse:collapse;
text-align:left;
min-width:650px
}
.supplier-table caption {
text-align:left;
font-weight:700;
color:#51686d;
padding:20px 0;
font-size:14px
}
.supplier-table th,.supplier-table td {
border-bottom:1px solid #c8d6d3;
padding:18px 20px 18px 0;
vertical-align:top;
line-height:1.55
}
.supplier-table thead th {
font-size:13px;
letter-spacing:.04em;
text-transform:uppercase;
color:#367d82
}
.supplier-table tbody th {
width:21%;
font-size:16px
}
.supplier-table tbody td {
color:#506469;
width:39%
}
.advantage-section {
background:#fbf9f4
}
.advantage-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
border-top:1px solid var(--line)
}
.advantage-grid article {
padding:26px 25px 18px 0;
border-right:1px solid var(--line)
}
.advantage-grid article:last-child {
border:0
}
.advantage-grid span {
font-size:12px;
color:var(--teal);
font-weight:700
}
.advantage-grid h3 {
font-size:23px;
margin:36px 0 12px;
letter-spacing:-.04em
}
.advantage-grid p {
color:#617175;
line-height:1.7
}
.faq-section {
background:#fbf9f4
}
.faq-grid {
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:10%
}
.faq-grid h2 {
font-size:clamp(40px,4.3vw,64px);
line-height:1.13;
letter-spacing:-.06em
}
.faq-grid>div>p:not(.eyebrow) {
color:#627175;
max-width:460px
}
.faq-list {
border-top:1px solid var(--line)
}
.faq-list details {
border-bottom:1px solid var(--line);
padding:21px 0
}
.faq-list summary {
cursor:pointer;
font:700 17px/1.45 var(--font-sans);
list-style:none;
padding-right:30px;
position:relative
}
.faq-list summary::-webkit-details-marker {
display:none
}
.faq-list summary:after {
content:'+';
position:absolute;
right:0;
top:0;
color:var(--teal);
font-size:22px
}
.faq-list details[open] summary:after {
content:'−'
}
.faq-list details p {
color:#617175;
line-height:1.7;
margin:15px 30px 0 0
}
.closing-inner>p:not(.eyebrow) {
max-width:570px;
color:#4d6668;
margin:0 0 25px
}
.option-card .option-head span:last-child {
display:none
}
@media(max-width:700px) {
.advantage-grid {
grid-template-columns:1fr;
gap:0
}
.advantage-grid article {
border-right:0;
border-bottom:1px solid var(--line);
padding:20px 0
}
.advantage-grid h3 {
margin:15px 0 9px
}
.faq-grid {
grid-template-columns:1fr;
gap:18px
}
.faq-list summary {
font-size:16px
}
.supplier-table th,.supplier-table td {
padding:15px 13px 15px 0
}
.compare-strip {
align-items:flex-start
}
}
/* Reserve a distinct banner navigation area at desktop and mobile widths. */
.hero-controls.container {
left:auto;
right:max(28px,calc((100vw - 1280px)/2));
width:max-content;
max-width:calc(100% - 56px)
}
@media(max-width:700px) {
.hero-carousel {
height:auto;
min-height:690px
}
.hero-slide {
position:relative;
display:none;
min-height:690px
}
.hero-slide.is-active {
display:flex
}
.hero-slide .hero-content {
padding-bottom:150px
}
.hero-controls.container {
left:18px;
right:auto;
bottom:22px;
max-width:calc(100% - 36px)
}
}
/* Keep controls usable without squeezing the article layout. */
.hero-pause {
border:1px solid rgba(255,255,255,.55);
border-radius:4px;
min-width:64px;
min-height:44px;
padding:8px 10px;
color:#fff;
background:rgba(8,35,42,.65);
cursor:pointer;
font-size:12px
}
.hero-controls {
flex-wrap:wrap;
row-gap:10px
}
.detail-table-wrap:focus-visible {
outline:3px solid var(--teal);
outline-offset:5px
}
.detail-hero h1 {
overflow-wrap:anywhere
}
@media(max-width:700px) {
.menu-toggle {
width:44px;
height:44px
}
.hero-controls {
gap:12px
}
.hero-arrow {
min-width:44px;
min-height:44px
}
}
/* Approved InnVerio C identity: restrained IV + serif wordmark. */
.brand-logo{display:block;width:184px;height:auto;max-width:100%;object-fit:contain}
.site-header,.site-header.is-scrolled{background:rgba(251,249,244,.97);color:#28312e;border-bottom:1px solid #dedfd5}
.site-header .header-link{color:#28312e}
.mobile-nav:not([hidden]){background:#fbf9f4;color:#28312e;border-top-color:#dedfd5}
.mobile-nav a{border-bottom-color:#dedfd5}
.menu-toggle{color:#28312e;border-color:#727d60}
.menu-toggle .hn-icon{filter:none}
.footer-brand .brand-logo{filter:brightness(0) invert(1)}
@media(max-width:700px){.brand-logo{width:158px}.header-inner{gap:18px}}
/* One concise source note per page, shared in the footer. */
.footer-base .site-notice {
max-width: 72ch;
margin: 0;
line-height: 1.65;
}
.detail-hero {
background:radial-gradient(circle at 85% 20%,#465242 0%,transparent 45%),#28312e;
color:#fff;
padding:155px 0 90px;
position:relative;
overflow:hidden
}
.detail-hero:after {
content:'IV';
position:absolute;
right:4%;
bottom:-95px;
font:800 clamp(200px,28vw,450px)/1 Manrope,sans-serif;
letter-spacing:-.13em;
color:rgba(255,255,255,.035);
pointer-events:none
}
.detail-hero .container {
position:relative;
z-index:1
}
.breadcrumbs {
display:flex;
flex-wrap:wrap;
gap:11px;
align-items:center;
color:#b9d6d7;
font-size:13px;
margin-bottom:67px
}
.breadcrumbs a {
text-decoration:underline;
text-underline-offset:3px
}
.detail-hero .eyebrow {
color:#c2ccae;
margin-bottom:21px
}
.detail-hero h1 {
font-size:clamp(44px,5.2vw,76px);
max-width:980px;
line-height:1.12;
letter-spacing:-.065em;
margin:0 0 22px
}
.detail-lead {
max-width:730px;
font-size:19px;
line-height:1.75;
color:#d1e3e3;
margin:0
}
.detail-section {
padding:90px 0;
border-bottom:1px solid #d9e3e1
}
.detail-section:nth-child(even) {
background:#ebf1ef
}
.detail-section h2 {
font-size:clamp(34px,3.7vw,53px);
line-height:1.17;
letter-spacing:-.055em;
max-width:800px;
margin:0 0 27px
}
.detail-section p {
max-width:850px;
color:#4f6267;
line-height:1.78
}
.detail-section .eyebrow {
margin-bottom:22px
}
.section-intro {
font-size:18px
}
.detail-cards {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-top:35px
}
.detail-cards article {
background:#fff;
padding:30px;
min-height:220px
}
.detail-cards span,.feature-card>span {
color:#596446;
font:700 11px/1.4 Manrope,sans-serif;
letter-spacing:.13em
}
.detail-cards h3 {
font-size:22px;
line-height:1.3;
letter-spacing:-.04em;
margin:21px 0 9px
}
.detail-cards p {
margin:0;
font-size:15px
}
.detail-table-wrap {
overflow-x:auto
}
.detail-table {
border-collapse:collapse;
width:100%;
min-width:550px;
text-align:left
}
.detail-table th,.detail-table td {
border-bottom:1px solid #c7d5d3;
padding:18px 24px 18px 0;
vertical-align:top
}
.detail-table thead th {
color:#208689;
text-transform:uppercase;
letter-spacing:.1em;
font-size:12px
}
.detail-table tbody th {
width:28%;
font-size:16px
}
.detail-table td {
color:#52666a
}
.evidence-box {
max-width:920px;
background:#fff;
border-left:4px solid var(--teal);
padding:30px 34px;
line-height:2;
color:#435a60
}
.check-list {
max-width:900px;
padding-left:28px
}
.check-list li {
padding:14px 0 14px 9px;
border-bottom:1px solid #d5e0de;
line-height:1.65
}
.detail-section a:not(.feature-card) {
text-decoration:underline;
text-underline-offset:4px;
color:#505c40
}
.detail-faq {
max-width:900px
}
.feature-card {
display:block;
background:#fff;
border:1px solid #d9e5e2;
padding:35px 40px;
margin-top:35px;
max-width:930px;
transition:transform .2s,box-shadow .2s
}
.feature-card:hover {
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(18,58,70,.1)
}
.feature-card h3 {
font-size:31px;
letter-spacing:-.05em;
margin:13px 0
}
.feature-card p {
max-width:700px
}
.feature-card strong {
font-size:14px;
color:#0d777a
}
.detail-end {
background:#28312e;
color:#fff;
padding:83px 0
}
.detail-end h2 {
font-size:clamp(34px,4vw,58px);
letter-spacing:-.05em;
line-height:1.2;
max-width:680px
}
.detail-end .eyebrow {
color:#79cfcc
}
.site-footer .footer-links {
flex-wrap:wrap;
max-width:750px;
justify-content:flex-end
}
.site-header .nav {
gap:21px;
font-size:13px
}
@media(max-width:700px) {
.detail-hero {
padding:105px 0 70px
}
.breadcrumbs {
margin-bottom:45px
}
.detail-hero h1 {
font-size:clamp(41px,10vw,61px)
}
.detail-lead {
font-size:16px
}
.detail-section {
padding:62px 0
}
.detail-cards {
grid-template-columns:1fr
}
.detail-cards article {
min-height:0;
padding:25px
}
.detail-section h2 {
font-size:clamp(34px,9vw,46px)
}
.feature-card {
padding:25px
}
.feature-card h3 {
font-size:25px
}
.evidence-box {
padding:23px
}
.detail-end {
padding:65px 0
}
.site-footer .footer-links {
justify-content:flex-start
}
}
.fact-list {
display:flex;
gap:10px;
flex-wrap:wrap;
list-style:none;
padding:0;
margin:24px 0 28px
}
.fact-list li {
border:1px solid #b9cfcb;
background:#f7faf8;
padding:9px 14px;
color:#34555c;
font-size:14px;
line-height:1.45
}
@media(max-width:700px) {
.fact-list {
display:block
}
.fact-list li {
margin-bottom:8px
}
}
.directory-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px
}
.directory-card {
display:grid;
grid-template-columns:58px 1fr;
gap:16px;
background:#fff;
padding:27px;
min-height:210px
}
.directory-rank {
font:600 27px/1 Manrope,sans-serif;
color:#89afb1
}
.directory-label {
font-size:11px;
letter-spacing:.07em;
text-transform:uppercase;
color:#278488;
font-weight:700
}
.directory-card h3 {
font-size:23px;
letter-spacing:-.04em;
margin:9px 0
}
.directory-card p {
font-size:14px;
line-height:1.6;
margin:0 0 14px
}
.directory-action {
font-size:13px;
font-weight:700;
color:#0b737a!important;
text-decoration:underline
}
.related-links {
padding-left:20px;
columns:2;
max-width:850px
}
.related-links li {
padding:9px 0;
break-inside:avoid
}
@media(max-width:700px) {
.directory-grid {
grid-template-columns:1fr
}
.directory-card {
grid-template-columns:42px 1fr;
gap:8px;
padding:22px
}
.directory-card h3 {
font-size:21px
}
.related-links {
columns:1
}
}
.editorial-image {
max-width:1280px;
margin:34px auto 0;
background:#dce6e4
}
.editorial-image img {
display:block;
width:100%;
height:auto;
max-height:590px;
object-fit:cover
}
.editorial-image figcaption {
text-align:right;
font-size:12px;
color:#52666b;
background:#e7eeeb;
padding:8px 15px
}
.product-checks {
max-width:940px;
padding-left:25px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px 38px
}
.product-checks li {
padding:11px 0 11px 8px;
line-height:1.6;
border-bottom:1px solid #ccdcd9
}
.detail-cards a {
text-decoration:underline;
color:#08767c;
font-size:14px;
font-weight:700
}
@media(max-width:700px) {
.editorial-image {
margin-top:0
}
.editorial-image img {
height:260px;
object-fit:cover
}
.editorial-image figcaption {
text-align:left
}
.product-checks {
grid-template-columns:1fr
}
}
.factory-proof {
max-width:760px;
margin:24px auto 60px;
padding:0 24px
}
.factory-proof img {
display:block;
width:100%;
max-height:440px;
object-fit:contain;
background:#e9edeb;
border-radius:12px
}
.factory-proof figcaption {
font-size:.82rem;
line-height:1.5;
color:#54666a;
margin-top:10px
}
.factory-proof a {
color:inherit;
text-decoration:underline
}
.editorial-image.product-photo {
max-width:900px;
margin:32px auto 56px;
padding:0 24px;
background:transparent
}
.editorial-image.product-photo img {
width:100%;
height:auto;
max-height:540px;
object-fit:contain;
background:white;
border-radius:12px
}
.editorial-image.product-photo figcaption {
color:#54666a;
font-size:.875rem;
line-height:1.5;
padding:12px 0
}
.product-photo figcaption a {
color:inherit;
text-decoration:underline
}
.attribute-nav {
display:flex;
flex-wrap:wrap;
gap:10px 20px;
margin-top:24px
}
.attribute-nav a {
font-size:1rem;
color:inherit;
text-decoration:underline;
text-underline-offset:4px
}
.detail-section[id] {
scroll-margin-top:100px
}
.detail-table-wrap {
max-width:100%;
overflow-x:auto
}
.detail-table td {
overflow-wrap:anywhere
}
.detail-table th,.detail-table td {
vertical-align:top
}
@media(max-width:600px) {
.attribute-nav {
gap:12px
}
.detail-table {
min-width:580px
}
}
.catalogue-stats {
display:flex;
flex-wrap:wrap;
gap:18px 36px;
margin-top:30px
}
.catalogue-stats span {
display:flex;
flex-direction:column;
font-size:.9rem
}
.catalogue-stats strong {
font-size:2rem;
font-weight:600
}
.catalogue-search {
display:block;
max-width:460px;
font-weight:600;
margin:24px 0
}
.catalogue-search input {
display:block;
width:100%;
margin-top:9px;
border:1px solid #789599;
border-radius:7px;
background:#fff;
padding:14px 16px;
color:#28312e;
font:inherit
}
.catalogue-grid [hidden] {
display:none!important
}
.catalogue-grid .directory-card {
height:auto
}
.catalogue-search input:focus-visible {
outline:3px solid #596446;
outline-offset:3px
}
.catalogue-filters {
display:flex;
flex-wrap:wrap;
gap:24px
}
.catalogue-filters .catalogue-search {
flex:1;
min-width:220px
}
.catalogue-search select {
display:block;
width:100%;
margin-top:9px;
border:1px solid #789599;
border-radius:7px;
background:#fff;
padding:14px 16px;
color:#28312e;
font:inherit
}
.catalogue-search select:focus-visible {
outline:3px solid #596446;
outline-offset:3px
}
/* Source products remain intact; AI images describe an application context. */
.product-visual {
width:min(900px,calc(100% - 48px));
margin:40px auto 56px;
background:#fff;
border:1px solid #d8e2df;
border-radius:14px;
overflow:hidden
}
.product-visual-frame {
aspect-ratio:4/3;
background:#f4f6f3;
max-height:640px
}
.product-visual img {
display:block;
width:100%;
height:100%;
object-fit:contain
}
.product-visual.is-concept img {
object-fit:cover
}
.product-visual figcaption {
padding:18px 22px;
font-size:14px;
line-height:1.6;
color:#53676b
}
.product-visual figcaption strong {
display:block;
margin-bottom:5px;
color:#145e64;
font-size:12px;
letter-spacing:.04em
}
.product-visual figcaption a {
color:#505c40;
text-decoration:underline;
text-underline-offset:3px
}
.catalogue-grid .directory-card {
display:flex;
flex-direction:column;
gap:0;
padding:0;
min-width:0;
overflow:hidden;
border:1px solid #d8e2df;
border-radius:12px
}
.catalogue-visual {
position:relative;
aspect-ratio:4/3;
background:#f4f6f3;
overflow:hidden
}
.catalogue-visual>a {
display:block;
width:100%;
height:100%
}
.catalogue-visual>a:focus-visible {
outline:3px solid #596446;
outline-offset:-3px
}
.catalogue-visual img {
display:block;
width:100%;
height:100%;
object-fit:contain;
padding:15px
}
.catalogue-visual.is-concept img {
object-fit:cover;
padding:0
}
.catalogue-visual>span {
position:absolute;
left:12px;
bottom:12px;
background:#fff;
color:#155b62;
padding:5px 9px;
border-radius:4px;
font-size:11px;
line-height:1.4;
pointer-events:none
}
.catalogue-card-body {
padding:24px;
min-width:0;
overflow-wrap:anywhere
}
.catalogue-card-body h3 {
margin:12px 0
}
.catalogue-card-body p {
max-width:100%
}
@media(max-width:700px) {
.product-visual {
width:calc(100% - 36px);
margin:28px auto 38px
}
.product-visual figcaption {
padding:15px 17px;
font-size:13px
}
.catalogue-card-body {
padding:22px
}
.catalogue-visual>span {
left:10px;
bottom:10px
}
}
/* Product artwork and a labeled use setting: half-and-half on PC, stacked on mobile. */
.product-visual-grid {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:1px;
background:#dbe3de
}
.product-visual-panel,.product-context-panel {
min-width:0;
background:#fff
}
.has-context .product-visual-frame,.product-context-frame {
aspect-ratio:4/3;
max-height:none;
background:#f3f4ef;
display:grid;
place-items:center;
overflow:hidden
}
.has-context .product-visual-frame img {
width:100%;
height:100%;
object-fit:contain;
padding:20px;
max-height:none
}
.product-context-frame img {
display:block;
width:100%;
height:100%;
object-fit:cover
}
.visual-panel-label {
margin:0;
padding:14px 18px;
font-size:12px;
font-weight:600;
line-height:1.5;
color:#36544e;
background:#edf1ec
}
.product-context-panel .visual-panel-label {
background:#e9ece5;
color:#57635e
}
@media(max-width:700px) {
.product-visual-grid {
grid-template-columns:minmax(0,1fr);
gap:1px
}
.has-context .product-visual-frame img {
padding:16px
}
.visual-panel-label {
padding:12px 16px
}
.product-context-frame {
aspect-ratio:16/10
}
}
.product-context-panel[hidden] {
display:none
}
.product-context-panel.is-specification .product-context-frame img,.product-visual.is-specification .product-visual-frame img,.catalogue-visual.is-specification img {
object-fit:contain;
padding:0;
background:#f2f4ed
}
.product-context-panel.is-specification .product-context-frame {
aspect-ratio:auto;
min-height:100%
}
.product-visual.is-specification .product-visual-frame {
aspect-ratio:auto
}
.product-context-panel.is-specification .product-context-frame img {
height:auto;
align-self:center
}
.product-visual.is-specification .product-visual-frame img {
height:auto;
padding:0
}
@media(max-width:700px) {
.product-context-panel.is-specification .product-context-frame {
min-height:0;
aspect-ratio:auto
}
}
.specification-picture {
display:block;
width:100%;
height:auto;
align-self:center
}
.specification-picture img {
display:block;
width:100%;
height:auto!important
}
.catalogue-visual .specification-picture {
height:100%
}
.catalogue-visual .specification-picture img {
height:100%!important;
object-fit:contain
}
@media(max-width:700px) {
.catalogue-visual.is-specification .specification-picture img {
object-fit:cover;
object-position:top
}
.product-visual.is-specification .product-visual-frame,.product-context-panel.is-specification .product-context-frame {
aspect-ratio:auto
}
}
.about-page { color: #28312e; }
.about-hero { position: relative; min-height: 580px; display: grid; align-items: center; overflow: hidden; background: #28312e; color: #fff; }
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,32,28,.9), rgba(23,32,28,.55) 62%, rgba(23,32,28,.22)); }
.about-hero-image { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; }
.about-hero-copy { position: relative; z-index: 1; padding-block: 48px 64px; }
.about-hero .breadcrumbs, .about-hero .breadcrumbs a { color: #f4f0e6; }
.about-hero h1 { font-size: clamp(1.1rem, 2vw, 1.35rem); letter-spacing: .02em; font-family: inherit; margin: 0 0 18px; }
.about-page .about-hero-statement { max-width: 760px; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 24px; }
.about-hero .button { background: #fbf9f4; color: #28312e; }
.about-hero-copy > p:not(.eyebrow):not(.about-hero-statement) { max-width: 570px; font-size: 1.1rem; line-height: 1.7; margin-bottom: 28px; }
.about-photo-credit { font-size: .72rem; line-height: 1.7; color: #62675c; padding-top: 14px; margin: 0; }
.about-section { padding: 88px 0; }
.about-tint { background: #eeefe7; }
.about-split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 72px; }
.about-page h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(2rem, 3.2vw, 3.1rem); letter-spacing: -.025em; line-height: 1.16; margin: 0 0 24px; }
.about-page p, .about-page li { line-height: 1.8; }
.about-page p { margin: 0 0 18px; }
.about-page .eyebrow { margin-bottom: 20px; }
.about-lead { font-size: 1.16rem; }
.about-page .about-scene { margin: 0; width: 100%; border: 0; background: transparent; }
.about-scene .media-frame { aspect-ratio: 5 / 4; border-radius: 4px; }
.about-scene .media-frame img { width: 100%; height: 100%; object-fit: cover; }
.about-scene figcaption { padding: 18px 0 0; display: grid; gap: 7px; font-size: .88rem; }
.about-scene figcaption small { font-size: .72rem; color: #62675c; line-height: 1.6; }
.about-section-heading { max-width: 750px; margin-bottom: 36px; }
.about-table-wrap { overflow-x: auto; }
.about-table-wrap table { width: 100%; border-collapse: collapse; background: #fbf9f4; }
.about-table-wrap caption { text-align: left; padding: 0 0 14px; font-size: .85rem; }
.about-table-wrap th, .about-table-wrap td { padding: 22px; border-bottom: 1px solid #d6d9cd; text-align: left; vertical-align: top; line-height: 1.7; }
.about-table-wrap thead { background: #28312e; color: white; }
.about-table-wrap tbody th { width: 25%; font-weight: 600; }
.about-table-wrap td:last-child { width: 23%; }
.about-steps { padding-left: 26px; margin: 0; }
.about-steps li { padding: 0 0 16px 12px; }
.about-steps li::marker { color: #727d60; font-size: 1.1rem; font-weight: 600; }
.about-steps h3 { font-size: 1.1rem; margin: 0 0 5px; }
.about-steps p { margin: 0; }
.about-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-benefit { padding: 30px; background: #fbf9f4; border-top: 3px solid #727d60; }
.about-benefit-title { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.about-benefit-title .hn-icon { width: 36px; height: 36px; flex: 0 0 36px; }
.about-benefit h3 { font-size: 1.2rem; line-height: 1.45; margin: 0; }
.about-benefit > a, .about-text-link { font-weight: 600; line-height: 1.7; }
.about-reasons { padding-left: 22px; margin-bottom: 28px; }
.about-reasons li { padding-left: 5px; margin-bottom: 16px; }
.about-contact { padding: 80px 0; background: #28312e; color: #fbf9f4; scroll-margin-top: 110px; }
.about-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.about-contact a { color: #fbf9f4; }
.about-email { display: inline-block; font-size: clamp(1.15rem, 2.3vw, 1.65rem); overflow-wrap: anywhere; text-underline-offset: 6px; margin: 8px 0 20px; }
.about-contact-note { color: #d2d7c8; font-size: .86rem; }
.about-enquiry { border: 1px solid #65705f; padding: 32px; }
.about-enquiry h3 { font-size: 1.2rem; margin: 0 0 16px; }
.about-enquiry ul { padding-left: 20px; margin-bottom: 24px; }
.about-email-button { background: #fbf9f4; color: #28312e !important; }
@media (max-width: 1000px) {
.about-split, .about-contact-grid { gap: 36px; }
.about-benefits { gap: 16px; }
.about-benefit { padding: 22px; }
.about-benefit-title { flex-direction: column; }
}
@media (max-width: 700px) {
.about-hero { min-height: 520px; }
.about-hero-copy { padding-block: 32px 48px; }
.about-hero::after { background: rgba(23,32,28,.76); }
.about-section { padding: 54px 0; }
.about-split, .about-contact-grid, .about-benefits { grid-template-columns: 1fr; gap: 30px; }
.about-split-reverse > .about-scene { order: 2; }
.about-benefit-title { flex-direction: row; }
.about-table-wrap th, .about-table-wrap td { padding: 16px; }
.about-table-wrap table { min-width: 630px; }
.about-contact { padding: 54px 0; }
.about-enquiry { padding: 24px; }
}
/* InnVerio local Lucide system: generous features, clear controls. */
.hn-icon {
display:inline-block;
width:24px;
height:24px;
flex:none;
vertical-align:middle;
pointer-events:none;
color:inherit;
overflow:visible
}
.nav a,.mobile-nav a,.footer-links a,.attribute-nav a {
display:inline-flex;
align-items:center;
gap:9px
}
.nav .hn-icon {
width:21px;
height:21px
}
.nav {
gap:16px
}
.mobile-nav a {
min-height:48px
}
.mobile-nav .hn-icon {
width:25px;
height:25px
}
.footer-links .hn-icon {
width:20px;
height:20px;
opacity:.8
}
.button .hn-icon,.selection-link .hn-icon {
margin-left:12px
}
.hero-arrow {
min-width:44px;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center
}
.menu-toggle {
width:48px;
height:48px;
align-items:center;
justify-content:center
}
.menu-toggle .hn-icon {
width:28px;
height:28px
}
.hn-menu-close {
display:none
}
.menu-toggle[aria-expanded="true"] .hn-menu-open {
display:none
}
.menu-toggle[aria-expanded="true"] .hn-menu-close {
display:inline-block
}
.hn-feature-icon {
display:flex;
width:80px;
height:80px;
align-items:center;
justify-content:center;
border-radius:18px;
background:#e4ece8;
color:#28312e;
margin-bottom:24px;
border:1px solid #cbd9d3
}
.hn-feature-icon .hn-icon {
width:46px;
height:46px
}
.pillar-icon.hn-feature-icon {
padding:0;
height:80px
}
.option-graphic>.hn-icon {
width:80px;
height:80px;
position:relative;
z-index:1;
color:#28312e
}
.hn-planning-icon {
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border:1px solid rgba(255,255,255,.32);
border-radius:12px;
background:rgba(255,255,255,.07)
}
.hn-planning-icon .hn-icon {
width:30px;
height:30px
}
.planning-item {
grid-template-columns:64px 1fr
}
.hn-heading-icon {
width:36px;
height:36px;
margin-right:14px;
vertical-align:-3px;
color:#426c68
}
.attribute-nav a {
padding:11px 14px;
border:1px solid rgba(255,255,255,.3);
border-radius:8px;
text-decoration:none;
min-height:46px
}
.attribute-nav a:hover {
background:rgba(255,255,255,.1)
}
.hn-faq-icon {
width:23px;
height:23px;
margin-right:11px;
color:#426c68
}
.catalogue-card-body a>.hn-icon {
width:22px;
height:22px;
margin-left:8px
}
@media(max-width:1440px) {
.header-link {
display:none
}
}
@media(max-width:700px) {
.hn-feature-icon,.pillar-icon.hn-feature-icon {
width:72px;
height:72px;
border-radius:16px;
margin-bottom:20px
}
.hn-feature-icon .hn-icon {
width:42px;
height:42px
}
.option-graphic>.hn-icon {
width:72px;
height:72px
}
.hn-heading-icon {
width:30px;
height:30px;
margin-right:10px
}
.planning-item {
grid-template-columns:58px 1fr
}
.hero-controls {
gap:10px
}
.hero-dots {
gap:4px
}
.hero-dots button {
width:22px
}
.attribute-nav {
gap:10px
}
.attribute-nav a {
padding:10px 12px
}
.footer-links {
gap:15px
}
.button {
gap:20px
}
}
@media(max-width:400px) {
.hero-count {
display:none
}
}
.hn-icon {
display:inline-block
}
.hn-menu-close {
display:none
}
.menu-toggle[aria-expanded="true"] .hn-menu-open {
display:none
}
.menu-toggle[aria-expanded="true"] .hn-menu-close {
display:inline-block
}
.hn-card-icon {
width:30px;
height:30px;
margin-right:12px;
color:#426c68;
vertical-align:-5px
}
.hn-label-icon {
width:22px;
height:22px;
margin-right:9px;
color:#426c68
}
.planning-intro .hn-heading-icon {
color:#d5e4dc
}
@media(max-width:700px) {
.hn-card-icon {
width:27px;
height:27px;
margin-right:9px
}
.hn-heading-icon {
max-width:30px;
max-height:30px
}
}
/* Icons accompany labels; numbering and editorial copy keep their own layout. */
.hn-feature-title {
display:grid;
grid-template-columns:48px minmax(0,1fr);
align-items:center;
gap:14px
}
.hn-feature-title .hn-feature-inline {
display:flex;
width:48px;
height:48px;
align-items:center;
justify-content:center;
border-radius:13px;
background:#e4ece8;
color:#28312e;
font:inherit;
letter-spacing:inherit
}
.hn-feature-title .hn-feature-inline .hn-icon {
width:34px;
height:34px
}
.hn-feature-title>.hn-title-text {
display:block;
min-width:0;
font:inherit;
letter-spacing:inherit;
color:inherit
}
.planning-item {
grid-template-columns:60px minmax(0,1fr)
}
.planning-item>span {
display:block;
width:auto;
height:auto;
border:0;
border-radius:0;
background:none
}
@media(max-width:700px) {
.hn-feature-title {
grid-template-columns:44px minmax(0,1fr);
gap:12px
}
.hn-feature-title .hn-feature-inline {
width:44px;
height:44px
}
.hn-feature-title .hn-feature-inline .hn-icon {
width:30px;
height:30px
}
.planning-item {
grid-template-columns:39px minmax(0,1fr)
}
}
/* Shared media components. Dimensions belong to the frame, never to an image. */
.media-figure {
min-width: 0;
}
.media-frame {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
align-self: start;
overflow: hidden;
border: 1px solid #d9e1db;
border-radius: 8px;
background: #edf1eb;
}
.media-frame > img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
object-fit: cover;
object-position: center;
padding: 0;
}
.media-frame.media-frame--artwork > img {
object-fit: contain;
background: #fff;
padding: 16px;
}
.pillar-scene .media-frame {
aspect-ratio: 16 / 10;
}
.pillar-scene figcaption {
padding: 14px 0 0;
}
.pillar-grid > .pillar {
min-width: 0;
}
.context-visual .media-frame,
.integration-scene .media-frame {
height: auto;
border: 0;
border-radius: 0;
}
.hero-slide > .hero-image {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: center;
}
.hero-slide > .hero-image-products {
object-position: 50% 45%;
}
.hero-slide > .hero-image-applications {
object-position: 50% 55%;
}
.hero-slide > .hero-image-integration {
object-position: 50% 45%;
}
.hero-slide > .hero-image-resources {
object-position: 50% 50%;
}
.hero-slide .hero-shade {
background: linear-gradient(90deg, rgba(7, 27, 35, .66), rgba(7, 27, 35, .12) 78%),
linear-gradient(0deg, rgba(7, 27, 35, .45), transparent 38%);
}
@media (max-width: 700px) {
.media-frame {
aspect-ratio: 4 / 3;
}
.pillar-scene .media-frame {
aspect-ratio: 16 / 10;
}
.hero-slide .hero-shade {
background: linear-gradient(90deg, rgba(7, 27, 35, .72), rgba(7, 27, 35, .3)),
linear-gradient(0deg, rgba(7, 27, 35, .62), transparent 40%);
}
}
.pillar-scene .media-caption-compact {
display: block;
padding: 10px 0 0;
min-height: 44px;
}
.media-caption-compact summary {
cursor: pointer;
color: #536a6e;
font-size: 12px;
line-height: 1.6;
}
.media-caption-compact details[open] summary {
margin-bottom: 10px;
}
.media-caption-compact strong,
.media-caption-compact small {
display: block;
}
.media-caption-compact p {
margin: 8px 0;
font-size: 14px;
}
/* Real photographs, supplier artwork and clear technical layouts. */
.context-hero {
background:#f2f4ef;
color:#28312e;
position:relative;
overflow:hidden
}
.context-hero:before,.context-hero:after,.detail-hero:after {
display:none
}
.context-hero .detail-lead {
color:#4d6265
}
.context-hero .breadcrumbs {
color:#4c6b6d
}
.context-hero .eyebrow {
color:#167477
}
.context-hero h1 {
color:#28312e
}
.context-hero .container {
position:relative
}
.context-hero a {
color:#176f75
}
.context-visual,.integration-scene {
width:min(1280px,calc(100% - 56px));
margin:40px auto;
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
background:#f1f3ee;
border:1px solid #d9e1db;
overflow:hidden
}
.context-visual>a,.integration-scene>a {
display:block;
min-width:0
}
.context-visual figcaption,.integration-scene figcaption {
display:flex;
flex-direction:column;
justify-content:center;
gap:14px;
padding:30px;
min-width:0
}
.context-visual strong,.integration-scene strong {
font-size:23px;
line-height:1.3;
color:#28312e
}
.context-visual span,.integration-scene span {
font-size:16px;
line-height:1.75;
color:#52656b
}
.context-visual small,.pillar-scene small,.integration-scene small {
font-size:12px;
line-height:1.65;
color:#5e7072
}
.context-visual small a,.pillar-scene small a,.integration-scene small a {
text-decoration:underline;
text-underline-offset:3px
}
.integration-scene {
width:100%;
margin:0 0 35px
}
.pillar-scene {
margin:0 0 24px
}
.pillar-scene figcaption {
padding:12px 0 0;
display:flex;
flex-direction:column;
gap:8px
}
.pillar-scene strong {
font-size:16px;
line-height:1.4;
color:#28312e
}
.pillar-scene figcaption>span {
font-size:14px;
line-height:1.65;
color:#52656b
}
.hero-photo-credit {
position:absolute;
z-index:3;
left:max(28px,calc((100vw - 1280px)/2));
bottom:20px;
max-width:540px;
padding:6px 9px;
margin:0;
background:rgba(9,35,42,.76);
color:#fff;
font-size:11px;
line-height:1.6
}
.hero-photo-credit a {
text-decoration:underline;
text-underline-offset:2px
}
.hero-image {
width:100%;
height:100%;
object-fit:cover;
background-image:none!important
}
.product-visual.is-specification:not(.has-context) .product-visual-grid {
grid-template-columns:minmax(0,1fr)
}
@media(max-width:700px) {
.context-visual {
width:calc(100% - 36px);
margin:28px auto;
grid-template-columns:minmax(0,1fr)
}
.context-visual figcaption,.integration-scene figcaption {
padding:22px;
gap:11px
}
.context-visual strong,.integration-scene strong {
font-size:21px
}
.integration-scene {
grid-template-columns:minmax(0,1fr)
}
.hero-photo-credit {
left:18px;
right:18px;
max-width:none;
bottom:95px;
font-size:11px
}
.hero-slide .hero-content {
padding-bottom:190px
}
}
.pillar-scene>a {
display:block
}