:root {
    --primary: #1571ba;
    --ink: #17202c;
    --muted: #5d6470;
    --line: #dfe3e8;
    --paper: #f7f8fa;
    --blue: #1571ba;
    --pale: #f4f6fa
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.65
}

a {
    color: inherit;
    text-decoration: none
}

a:hover {
    color: var(--primary)
}

button,
input,
select,
textarea {
    font: inherit
}

button {
    cursor: pointer
}

img {
    max-width: 100%
}

h1,
h2,
h3,
h4,
p {
    margin: 0 0 20px
}

h1,
h2,
h3,
h4 {
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.025em
}

h1 {
    font-size: clamp(36px, 4vw, 56px)
}

h2 {
    font-size: clamp(30px, 3vw, 42px)
}

h3 {
    font-size: 23px
}

p {
    color: var(--muted)
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation
}

:focus-visible {
    outline: 3px solid #b28114;
    outline-offset: 4px
}

.fa-solid,
.fa-brands {
    line-height: 1
}

.eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 18px
}

.site-header {
    position: relative;
    background: #fff;
    border-bottom: 1px solid var(--line);
    z-index: 50
}

.header-inner {
    max-width: 1500px;
    margin: auto;
    min-height: 88px;
    padding: 0 36px;
    display: flex;
    align-items: center;
    gap: 30px
}

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0
}

.brand img {
    width: 205px;
    height: auto;
    display: block
}

.header-inner nav {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1
}

.home-link,
.mega summary {
    font-size: 14px;
    white-space: nowrap;
    padding: 32px 0;
    color: #252c35
}

.home-link[aria-current] {
    color: var(--primary)
}

.mega summary {
    display: flex;
    gap: 7px;
    align-items: center;
    cursor: pointer;
    list-style: none
}

.mega summary::-webkit-details-marker {
    display: none
}

.mega summary i {
    font-size: 8px;
    color: #747d88;
    transition: transform .15s
}

.mega[open] summary {
    color: var(--primary)
}

.mega[open] summary i {
    transform: rotate(180deg)
}

.header-cta {
    font-size: 13px;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 10px 14px;
    white-space: nowrap
}

.header-cta i {
    margin-left: 10px;
    font-size: 10px
}

.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 30px #17202c12
}

.mega-inner {
    max-width: 1260px;
    margin: auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 50px;
    padding: 40px 30px
}

.mega-inner aside {
    padding-right: 30px;
    border-right: 1px solid var(--line)
}

.mega-inner h2 {
    font-size: 28px
}

.mega-inner p {
    font-size: 13px
}

.mega-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 20px;
    max-height: 55vh;
    overflow: auto
}

.mega-links>a {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 12px 8px
}

.mega-links>a:hover {
    background: #f5f7fc
}

.mega-links>a>i {
    font-size: 19px;
    color: var(--primary);
    width: 24px;
    flex-shrink: 0;
    margin-top: 3px
}

.mega-links strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35
}

.mega-links small {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 5px
}

.mega-bottom {
    border-top: 1px solid var(--line);
    padding: 14px max(30px, calc((100vw - 1200px)/2));
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    background: #fafbfc
}

.mega-bottom>span {
    letter-spacing: .06em;
    color: var(--muted)
}

.mega-bottom a {
    color: var(--primary)
}

.menu-toggle {
    display: none
}

.button {
    display: inline-flex;
    gap: 23px;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 0;
    color: #fff;
    padding: 16px 23px;
    line-height: 1.3;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    min-height: 48px
}

.button i {
    font-size: 10px
}

.button:hover {
    background: #105c98;
    border-color: #105c98;
    color: white
}

.button.secondary {
    color: var(--primary);
    background: white
}

.button.secondary:hover {
    background: #f1f4fc
}

.plain-link,
.text-link {
    color: var(--primary);
    font-size: 13px
}

.text-link i,
.plain-link i {
    font-size: 10px;
    margin-left: 8px
}

.plain-link {
    border-bottom: 1px solid transparent
}

.plain-link:hover {
    border-color: var(--primary)
}

.actions {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 32px
}

.home-intro {
    background: var(--paper);
    padding: 0 4.5% 0
}

.intro-inner {
    max-width: 1260px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 68px;
    padding: 65px 0 55px
}

.intro-copy {
    padding-top: 8px
}

.intro-copy .eyebrow {
    font-size: 10px;
    color: #637083
}

.intro-copy h1 {
    white-space: pre-line;
    font-size: clamp(35px, 3.55vw, 50px);
    line-height: 1.14;
    letter-spacing: -.035em;
    margin-bottom: 23px;
    font-weight: 400
}

.headline-rule {
    width: 43px;
    height: 2px;
    background: var(--primary);
    margin: 24px 0
}

.intro-description {
    font-size: 19px;
    line-height: 1.65;
    color: #414956;
    max-width: 540px
}

.featured-products {
    border-left: 1px solid #e7eaf0;
    padding-left: 40px;
    padding-top: 3px
}

.featured-products>h2 {
    font-size: 11px;
    letter-spacing: .06em;
    text-align: center;
    margin-bottom: 30px
}

.featured-products>h2:after {
    content: '';
    display: block;
    width: 26px;
    height: 2px;
    background: var(--primary);
    margin: 13px auto 0
}

.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 33px 24px
}

.featured-grid>a {
    display: flex;
    gap: 15px;
    align-items: flex-start
}

.product-icon {
    display: block;
    flex-shrink: 0;
    font-size: 26px;
    color: var(--primary);
    min-width: 32px;
    line-height: 1.3
}

.featured-grid .product-icon {
    font-size: 26px;
    margin-top: 3px
}

.featured-grid h3 {
    font-size: 21px;
    letter-spacing: -.02em;
    margin-bottom: 8px;
    line-height: 1.15
}

.featured-grid p {
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
    color: #626773
}

.tone-1 {
    color: #237796
}

.tone-2 {
    color: #bc7136
}

.tone-3 {
    color: #4c856b
}

.tone-0 {
    color: var(--primary)
}

.featured-all {
    display: block;
    text-align: center;
    margin-top: 32px;
    text-transform: uppercase;
    font-size: 11px
}

.intro-promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1260px;
    margin: auto;
    gap: 8px;
    border: 7px solid white;
    position: relative;
    transform: translateY(35px);
    margin-top: -35px
}

.promo {
    text-align: center;
    padding: 29px 24px 32px
}

.promo-education {
    background: #edf3fb
}

.promo-engineering {
    background: #f0eff8
}

.promo .eyebrow {
    font-size: 9px;
    letter-spacing: .07em;
    margin-bottom: 18px
}

.promo-title {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center
}

.promo-title>i {
    font-size: 28px;
    color: var(--primary)
}

.promo h2 {
    font-size: 26px;
    margin-bottom: 0;
    line-height: 1.25
}

.promo p {
    margin: 14px 0 20px;
    font-size: 13px
}

.outline-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #a5b2ca;
    padding: 9px 19px;
    border-radius: 24px;
    color: var(--primary);
    font-size: 10px;
    text-transform: uppercase
}

.outline-link i {
    font-size: 9px
}

.company-statement {
    background: var(--primary);
    padding: 100px 6% 66px;
    color: white
}

.statement-inner {
    max-width: 1180px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 110px;
    align-items: center
}

.company-statement .eyebrow {
    color: #c6d5ff;
    font-size: 10px
}

.company-statement h2 {
    font-size: 37px;
    line-height: 1.2;
    margin: 0
}

.company-statement p {
    color: #e0e7f9;
    line-height: 1.8;
    font-size: 16px
}

.white-link {
    color: white;
    border-bottom: 1px solid #93a9dd;
    padding-bottom: 5px;
    font-size: 12px
}

.white-link:hover {
    color: #dbe6ff
}

.white-link i {
    font-size: 10px;
    margin-left: 12px
}

.section {
    max-width: 1320px;
    margin: auto;
    padding: 80px 5%
}

.center-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 42px
}

.center-heading h2 {
    margin-bottom: 20px;
    font-size: 40px
}

.center-heading p {
    font-size: 15px
}

.product-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0
}

.product-filters button {
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    padding: 16px 19px;
    font-size: 12px;
    color: #575e68
}

.product-filters button.active {
    color: var(--primary);
    border-bottom-color: var(--primary)
}

.product-directory {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid var(--line)
}

.directory-item {
    display: flex;
    gap: 22px;
    padding: 35px 26px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-width: 0
}

.directory-item:hover {
    background: #fafbfd
}

.directory-item h3 {
    font-size: 21px;
    margin: 0 0 13px
}

.directory-item p {
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.6
}

.directory-item .text-link {
    font-size: 11px;
    text-transform: uppercase
}

.directory-item .product-icon {
    font-size: 27px;
    margin-top: 2px
}

.availability-note {
    text-align: center;
    font-size: 11px;
    margin: 22px 0 0
}

.availability-note a {
    text-decoration: underline;
    color: var(--primary)
}

.services-section {
    background: #f7f8fa;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 55px;
    margin-bottom: 36px
}

.section-heading h2 {
    margin: 0
}

.section-heading>div:last-child p {
    font-size: 14px;
    max-width: 450px
}

.service-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 55px
}

.service-index>a {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 27px 0;
    border-bottom: 1px solid #dce0e6
}

.service-number {
    font-size: 11px;
    color: #7b8594;
    padding-top: 6px
}

.service-index h3 {
    font-size: 21px;
    margin-bottom: 10px
}

.service-index p {
    font-size: 13px;
    margin: 0
}

.service-index>a>i {
    margin-left: auto;
    color: var(--primary);
    font-size: 12px;
    padding-top: 8px
}

.education-section {
    background: #fffaf0
}

.education-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 85px;
    align-items: center
}

.education-intro h2 {
    font-size: 41px
}

.education-intro p {
    font-size: 16px;
    line-height: 1.8
}

.education-intro .button {
    margin-top: 10px
}

.education-directory>a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 5px;
    border-bottom: 1px solid #e5dfd1
}

.education-directory>a>i:first-child {
    font-size: 23px;
    width: 33px;
    color: var(--primary)
}

.education-directory h3 {
    font-size: 21px;
    margin: 0 0 5px
}

.education-directory p {
    font-size: 12px;
    margin: 0
}

.education-directory>a>i:last-child {
    font-size: 10px;
    margin-left: auto;
    color: #7c7e81
}

.industry-directory {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px
}

.industry-directory a {
    text-align: center;
    padding: 20px 5px
}

.industry-directory i {
    display: block;
    font-size: 30px;
    color: var(--primary);
    margin-bottom: 22px
}

.industry-directory span {
    font-size: 12px
}

.approach-section {
    background: #f4f6f9;
    border-block: 1px solid var(--line);
    text-align: center
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    text-align: left;
    margin: 60px 0 35px
}

.approach-grid>article>i {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 24px
}

.approach-grid h3 {
    font-size: 22px
}

.approach-grid p {
    font-size: 14px
}

.technology-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center
}

.technology-line h2 {
    font-size: 34px;
    margin: 0
}

.technology-line p {
    font-size: 15px
}

.cta-section {
    padding: 75px 5%;
    text-align: center;
    border-top: 1px solid var(--line);
    background: #fafbfc
}

.cta-section h2 {
    font-size: 38px
}

.cta-section p {
    margin-bottom: 28px
}

.site-footer {
    padding: 65px 5% 25px;
    background: #f1f3f6;
    border-top: 1px solid var(--line)
}

.footer-grid {
    max-width: 1260px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 35px
}

.footer-grid h3 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 22px
}

.footer-grid>div>a:not(.brand) {
    display: block;
    font-size: 12px;
    margin-bottom: 11px;
    color: #4b5260
}

.footer-grid>div>a:hover {
    color: var(--primary)
}

.footer-brand .brand img {
    width: 210px
}

.footer-brand p {
    font-size: 12px;
    margin: 20px 0;
    max-width: 240px
}

.footer-brand>a {
    overflow-wrap: anywhere
}

.socials {
    display: flex;
    gap: 18px;
    font-size: 20px;
    color: var(--primary)
}

.footer-bottom {
    max-width: 1260px;
    margin: 45px auto 0;
    border-top: 1px solid #d7dce3;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 10px;
    color: #747c88
}

.footer-bottom a {
    margin-left: 20px
}

.page-hero {
    background: #f6f7f9;
    padding: 55px max(5%, calc((100vw - 1180px)/2));
    border-bottom: 1px solid var(--line)
}

.page-hero h1 {
    margin-bottom: 22px;
    font-size: 46px
}

.page-hero p {
    font-size: 17px;
    max-width: 710px
}

.page-hero .eyebrow {
    font-size: 10px
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    min-width: 0
}

.card:hover {
    background: #fafbfd;
    color: var(--ink)
}

.card .product-icon {
    margin-bottom: 25px
}

.card .eyebrow {
    font-size: 9px;
    color: #737b86;
    margin-bottom: 12px
}

.card h3 {
    font-size: 24px;
    margin-bottom: 14px
}

.card p {
    font-size: 14px;
    margin-bottom: 25px
}

.card .text-link {
    margin-top: auto;
    font-size: 11px;
    text-transform: uppercase
}

.card-image {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-bottom: 24px
}

.filters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 30px;
    flex-wrap: wrap
}

.filters label {
    flex: 1;
    min-width: 150px;
    margin: 0
}

.filters .button {
    min-height: 48px
}

.empty {
    grid-column: 1/-1;
    text-align: center;
    width: 100%;
    padding: 50px;
    border: 1px solid var(--line);
    background: #fafbfc
}

.empty>i {
    font-size: 30px;
    color: #a1aab9;
    margin-bottom: 20px
}

.empty p {
    font-size: 14px
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding-top: 30px;
    font-size: 12px
}

.pagination i {
    font-size: 10px
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
    gap: 80px
}

.prose {
    white-space: pre-line;
    color: #56606d;
    line-height: 1.9;
    margin-bottom: 30px
}

.detail-layout h2 {
    font-size: 29px;
    margin-top: 40px
}

.detail-aside {
    align-self: start;
    border: 1px solid var(--line);
    padding: 28px;
    background: #f6f7fa;
    position: sticky;
    top: 25px
}

.detail-aside p {
    font-size: 13px
}

.detail-aside h3 {
    font-size: 25px
}

.feature-list {
    padding-left: 20px;
    color: var(--muted)
}

.feature-list li {
    margin: 10px 0
}

.detail-image {
    width: 100%;
    margin: 25px 0
}

.badge {
    display: inline-block;
    font-size: 10px;
    padding: 4px 9px;
    background: #edf2fc;
    color: var(--primary);
    border: 1px solid #d5e0f5
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px
}

.contact-note {
    border-top: 1px solid var(--line);
    padding-top: 30px;
    margin-top: 40px
}

.contact-note p {
    font-size: 14px
}

.form-card {
    border: 1px solid var(--line);
    background: #fff;
    padding: 30px;
    margin-bottom: 25px;
    min-width: 0
}

.form-card h2 {
    font-size: 25px;
    margin-bottom: 23px
}

.form-card h3 {
    font-size: 20px
}

.form-card>p {
    font-size: 13px
}

label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 19px;
    color: #303b4b
}

input,
textarea,
select {
    display: block;
    width: 100%;
    background: white;
    color: var(--ink);
    font-size: 14px;
    border: 1px solid #c9d0da;
    border-radius: 2px;
    padding: 12px;
    margin-top: 7px;
    min-width: 0
}

textarea {
    resize: vertical
}

input[type=checkbox],
input[type=radio] {
    display: inline;
    width: 17px;
    height: 17px;
    margin: 0 8px 0 0;
    accent-color: var(--primary);
    flex-shrink: 0
}

.check {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 12px
}

.check a {
    text-decoration: underline
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px
}

.narrow {
    max-width: 730px;
    min-height: 460px
}

.narrow h1 {
    font-size: 42px
}

.honeypot {
    position: absolute;
    left: -9999px
}

.flash {
    padding: 15px 5%;
    background: #e8f3ed;
    color: #215638;
    font-size: 13px
}

.flash.error {
    background: #fff0ed;
    color: #8d3326
}

.muted {
    font-size: 12px;
    color: var(--muted)
}

dl {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 10px;
    font-size: 13px;
    overflow-wrap: anywhere
}

dt {
    font-weight: 600
}

dd {
    margin: 0;
    color: var(--muted)
}

.chat-toggle {
    position: fixed;
    right: 22px;
    bottom: 22px;
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--primary);
    color: white;
    padding: 13px 18px;
    border: 0;
    z-index: 60;
    font-size: 13px;
    border-radius: 3px;
    box-shadow: 0 4px 15px #1571ba20
}

.chat-toggle>i {
    font-size: 19px
}

.chat-panel {
    position: fixed;
    bottom: 80px;
    right: 22px;
    width: 360px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--line);
    background: white;
    padding: 23px;
    z-index: 60;
    box-shadow: 0 10px 40px #152c5325
}

.chat-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
    font-size: 14px
}

.chat-heading button {
    border: 0;
    background: none;
    padding: 8px;
    color: var(--muted)
}

.chat-panel p {
    font-size: 12px
}

.chat-panel label {
    font-size: 11px
}

#chat-results {
    max-height: 260px;
    overflow: auto
}

#chat-results a {
    display: block;
    color: var(--primary);
    font-size: 13px;
    margin-bottom: 5px
}

.inline {
    display: flex;
    gap: 7px
}

.inline input {
    margin: 0;
    font-size: 12px
}

.inline .button {
    padding: 10px 15px;
    min-height: 42px
}

.workspace {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    background: #f5f6f8;
    min-height: 700px
}

.admin-nav {
    padding: 28px 18px;
    background: white;
    border-right: 1px solid var(--line);
    font-size: 12px
}

.workspace-label {
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--primary);
    margin-bottom: 23px
}

.workspace-label i {
    margin-right: 8px
}

.admin-nav>a,
.admin-nav details>a {
    display: block;
    padding: 8px 9px
}

.admin-nav a:hover {
    background: #f1f4fb
}

.admin-nav a>i {
    width: 17px;
    margin-right: 6px;
    color: var(--primary)
}

.admin-nav summary {
    font-size: 11px;
    color: #6a7380;
    padding: 14px 9px 9px;
    cursor: pointer
}

.admin-nav details>a {
    padding-left: 20px
}

.admin-nav form {
    margin-top: 18px
}

.admin-main {
    padding: 35px;
    min-width: 0
}

.admin-heading {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    margin-bottom: 30px
}

.admin-heading h1 {
    font-size: 29px;
    margin: 0
}

.admin-heading .eyebrow {
    font-size: 9px;
    margin-bottom: 9px
}

.admin-heading>a {
    font-size: 11px;
    white-space: nowrap
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 25px
}

.stats article {
    padding: 22px;
    background: white;
    border: 1px solid var(--line)
}

.stats span {
    font-size: 11px;
    color: var(--muted)
}

.stats strong {
    display: block;
    font-size: 29px;
    font-weight: 400;
    margin-top: 10px
}

.table-wrap {
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    margin: 20px 0
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    text-align: left
}

th,
td {
    padding: 17px 15px;
    border-bottom: 1px solid var(--line);
    max-width: 330px;
    overflow-wrap: anywhere
}

th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #f9fafc;
    font-weight: 500;
    color: #6a7482
}

td a {
    color: var(--primary)
}

.table-sub {
    display: block;
    color: #78808b;
    font-size: 10px;
    margin-top: 4px
}

.text-button {
    background: none;
    color: var(--primary);
    border: 0;
    font-size: 12px;
    padding: 8px 0
}

.text-button i {
    margin-right: 6px
}

.danger {
    background: #fff;
    color: #a72b22;
    border: 1px solid #d7a39e;
    padding: 12px 16px;
    font-size: 12px;
    margin-left: 8px
}

.delete-form {
    margin-top: 20px
}

form details {
    border-top: 1px solid var(--line);
    padding: 20px 0;
    margin-top: 12px
}

form details summary {
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px
}

.admin-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    gap: 25px;
    margin-bottom: 25px
}

.admin-tabs>a {
    padding: 13px 0;
    font-size: 13px;
    border-bottom: 2px solid transparent
}

.admin-tabs>a.active {
    border-color: var(--primary);
    color: var(--primary)
}

.admin-notice {
    padding: 16px 20px;
    border: 1px solid var(--line);
    background: #edf1f9;
    font-size: 12px;
    color: #4b5871;
    margin-bottom: 24px
}

.theme-picker {
    border: 0;
    border-block: 1px solid var(--line);
    padding: 25px 0;
    margin: 18px 0 30px;
    min-width: 0
}

.theme-picker legend {
    padding-right: 12px;
    font-size: 15px
}

.theme-picker>p {
    font-size: 12px
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px
}

.theme-option label {
    font-size: 11px;
    margin-bottom: 8px
}

.theme-option label strong {
    font-weight: 500
}

.theme-thumb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    aspect-ratio: 1.414;
    background: white;
    border: 3px double #8b9cc5;
    margin: 10px 0;
    color: #1571ba;
    text-align: center;
    overflow: hidden
}

.theme-thumb>span {
    font-size: 4px;
    letter-spacing: .04em;
    max-width: 90%;
    margin-bottom: 10px
}

.theme-thumb b {
    font-size: 15px;
    font-family: Georgia, serif;
    font-weight: 400
}

.theme-thumb em {
    font-size: 9px;
    font-family: Georgia, serif;
    margin: 9px 0 4px
}

.theme-thumb small {
    font-size: 5px
}

.theme-2 {
    border: 1px solid #e0e5f0;
    border-left: 14px solid var(--primary);
    border-top: 6px solid #f0f3fa
}

.theme-3 {
    background: #fcf8ef;
    border: 3px double #ad8c4b;
    color: #766039
}

.theme-4 {
    border: 1px solid #dde3ee;
    background: linear-gradient(147deg, #1571ba 0 12%, transparent 12%), linear-gradient(-33deg, #1571ba 0 12%, transparent 12%), white
}

.theme-5 {
    border: 1px solid #e0e5ec;
    border: 1px solid var(--line);
    background: #fff
}

.theme-5 b {
    font-family: Arial, sans-serif
}

.theme-option:has(input:checked) .theme-thumb {
    outline: 2px solid var(--primary);
    outline-offset: 3px
}

.theme-option .text-link {
    font-size: 10px
}

.theme-option .text-link i {
    font-size: 8px;
    margin-left: 3px
}

.share-panel {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    background: #edf1f9;
    border: 1px solid #d4def2;
    padding: 25px;
    margin-bottom: 25px
}

.share-panel h2 {
    font-size: 27px
}

.share-panel p {
    font-size: 12px
}

.share-panel input {
    font-size: 11px
}

.share-panel .text-link {
    display: inline-block;
    margin: 13px 12px 0 0;
    font-size: 11px
}

.share-panel form {
    margin-top: 8px
}

.share-panel .eyebrow {
    font-size: 9px
}

.certificate-receipt {
    text-align: center;
    max-width: 800px;
    margin: auto;
    padding: 65px 24px
}

.receipt-icon {
    font-size: 49px;
    color: var(--primary);
    margin-bottom: 22px
}

.certificate-receipt h1 {
    font-size: 44px
}

.certificate-receipt .recipient-name {
    font-size: 25px;
    color: var(--primary);
    margin-top: 30px
}

.receipt-meta {
    margin: 35px auto 28px;
    border-block: 1px solid var(--line);
    padding: 20px;
    max-width: 550px
}

.receipt-meta p {
    font-size: 12px;
    margin-bottom: 10px
}

.receipt-meta strong {
    display: block;
    font-weight: 500;
    color: var(--ink)
}

.receipt-meta .text-link {
    font-size: 12px
}

pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12px
}

.skip {
    position: absolute;
    left: -9999px
}

.skip:focus {
    left: 10px;
    top: 10px;
    background: white;
    padding: 10px;
    z-index: 100
}

[hidden] {
    display: none !important
}

@media(min-width:1600px) {
    .home-intro {
        padding-inline: calc((100vw - 1320px)/2)
    }
}

@media(max-width:1200px) {
    .header-inner {
        padding: 0 24px;
        gap: 22px
    }

    .brand img {
        width: 178px
    }

    .header-inner nav {
        gap: 17px
    }

    .home-link,
    .mega summary {
        font-size: 12px
    }

    .header-cta {
        font-size: 11px;
        padding: 10px
    }

    .intro-inner {
        gap: 35px
    }

    .featured-products {
        padding-left: 28px
    }

    .featured-grid {
        gap: 28px 18px
    }

    .featured-grid h3 {
        font-size: 19px
    }

    .intro-description {
        font-size: 17px
    }

    .featured-grid>a {
        gap: 11px
    }

    .intro-copy h1 {
        font-size: 43px
    }

    .theme-options {
        grid-template-columns: repeat(3, 1fr)
    }

    .theme-thumb {
        max-height: 130px
    }

    .footer-grid {
        gap: 25px
    }

    .footer-brand .brand img {
        width: 180px
    }

    .mega-links {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:1000px) {
    .header-inner {
        min-height: 78px;
        flex-wrap: wrap;
        padding: 12px 25px;
        gap: 15px
    }

    .brand img {
        width: 190px
    }

    .header-inner nav {
        display: none;
        flex-basis: 100%;
        order: 5;
        align-items: stretch;
        flex-direction: column;
        gap: 0
    }

    .header-inner nav.open {
        display: flex
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        background: none;
        border: 0;
        font-size: 12px;
        padding: 10px
    }

    .header-cta {
        margin-left: 6px
    }

    .home-link,
    .mega summary {
        padding: 14px 4px;
        font-size: 14px;
        border-top: 1px solid var(--line);
        justify-content: space-between
    }

    .mega-panel {
        position: static;
        box-shadow: none;
        border: 0
    }

    .mega-inner {
        display: block;
        padding: 18px 0
    }

    .mega-inner aside {
        border: 0;
        padding: 0
    }

    .mega-inner aside h2,
    .mega-inner aside p,
    .mega-inner aside .eyebrow {
        display: none
    }

    .mega-inner aside .text-link {
        display: block;
        margin-bottom: 16px
    }

    .mega-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        max-height: none
    }

    .mega-links>a {
        padding: 12px 5px
    }

    .mega-bottom {
        display: none
    }

    .intro-inner {
        gap: 30px;
        padding-top: 45px
    }

    .intro-copy h1 {
        font-size: 37px
    }

    .intro-description {
        font-size: 16px
    }

    .featured-grid {
        gap: 25px 15px
    }

    .featured-grid h3 {
        font-size: 17px
    }

    .featured-grid p {
        font-size: 11px
    }

    .featured-grid .product-icon {
        font-size: 22px;
        min-width: 25px
    }

    .featured-products {
        padding-left: 20px
    }

    .actions {
        gap: 18px
    }

    .intro-copy .button {
        font-size: 10px;
        padding: 14px 17px
    }

    .intro-copy .plain-link {
        font-size: 11px
    }

    .promo h2 {
        font-size: 22px
    }

    .statement-inner {
        gap: 50px
    }

    .company-statement h2 {
        font-size: 32px
    }

    .directory-item {
        gap: 15px;
        padding: 30px 20px
    }

    .directory-item h3 {
        font-size: 19px
    }

    .education-inner {
        gap: 45px
    }

    .industry-directory {
        grid-template-columns: repeat(4, 1fr)
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-brand p {
        max-width: 500px;
        margin: 15px 0
    }

    .workspace {
        grid-template-columns: 190px minmax(0, 1fr)
    }

    .admin-main {
        padding: 25px
    }

    .admin-nav {
        padding: 25px 12px
    }

    .stats {
        grid-template-columns: repeat(3, 1fr)
    }

    .admin-main .two-col {
        grid-template-columns: 1fr
    }

    .share-panel {
        grid-template-columns: 1fr;
        gap: 10px
    }
}

@media(max-width:760px) {
    .intro-inner {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .intro-copy {
        max-width: 600px
    }

    .intro-copy h1 {
        font-size: 45px
    }

    .intro-description {
        font-size: 18px
    }

    .featured-products {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 30px 0 0
    }

    .featured-products>h2 {
        text-align: left;
        margin-bottom: 28px
    }

    .featured-products>h2:after {
        margin-left: 0
    }

    .featured-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 18px
    }

    .featured-grid>a {
        display: block
    }

    .featured-grid .product-icon {
        margin: 0 0 12px
    }

    .featured-grid h3 {
        font-size: 19px
    }

    .featured-grid p {
        font-size: 12px
    }

    .featured-all {
        text-align: left;
        margin-top: 25px
    }

    .intro-promos {
        grid-template-columns: 1fr 1fr
    }

    .promo {
        padding: 25px 15px
    }

    .promo-title {
        display: block
    }

    .promo-title>i {
        margin-bottom: 14px
    }

    .promo h2 {
        font-size: 23px
    }

    .promo p {
        font-size: 12px
    }

    .company-statement {
        padding-top: 88px
    }

    .statement-inner {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .company-statement p {
        font-size: 15px
    }

    .section {
        padding: 60px 6%
    }

    .center-heading h2 {
        font-size: 34px
    }

    .product-directory,
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-filters button {
        padding: 12px 11px;
        font-size: 11px
    }

    .directory-item {
        display: block;
        padding: 27px
    }

    .directory-item .product-icon {
        margin-bottom: 18px
    }

    .service-index {
        gap: 0 30px
    }

    .service-index>a {
        gap: 12px
    }

    .service-index h3 {
        font-size: 19px
    }

    .service-index p {
        font-size: 12px
    }

    .section-heading {
        gap: 30px
    }

    .section-heading h2 {
        font-size: 33px
    }

    .education-inner {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .education-intro h2 {
        font-size: 37px
    }

    .approach-grid {
        gap: 25px
    }

    .approach-grid h3 {
        font-size: 21px
    }

    .technology-line {
        gap: 35px
    }

    .technology-line h2 {
        font-size: 28px
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px
    }

    .detail-layout {
        gap: 30px;
        grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr)
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .contact-layout>div {
        max-width: 550px
    }

    .contact-note {
        display: none
    }

    .workspace {
        display: block
    }

    .admin-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 18px;
        border-bottom: 1px solid var(--line)
    }

    .workspace-label {
        width: 100%;
        margin-bottom: 10px
    }

    .admin-nav>a {
        font-size: 11px;
        padding: 7px
    }

    .admin-nav details {
        width: 100%
    }

    .admin-nav details>a {
        display: inline-block;
        padding: 7px;
        font-size: 11px
    }

    .admin-nav summary {
        padding: 10px 7px
    }

    .admin-nav form {
        margin: 0 7px
    }

    .admin-heading h1 {
        font-size: 27px
    }

    .admin-main .two-col {
        grid-template-columns: 1fr 1fr
    }

    .theme-options {
        grid-template-columns: repeat(3, 1fr)
    }

    .theme-thumb {
        max-height: 150px
    }
}

@media(max-width:480px) {
    .header-inner {
        padding: 12px 17px;
        gap: 10px;
        min-height: 72px
    }

    .brand img {
        width: 157px
    }

    .header-cta {
        padding: 8px 9px;
        font-size: 10px
    }

    .header-cta i {
        display: none
    }

    .menu-toggle {
        font-size: 11px;
        padding: 8px 4px
    }

    .menu-toggle span {
        display: none
    }

    .mega-links {
        grid-template-columns: 1fr 1fr;
        gap: 3px
    }

    .mega-links strong {
        font-size: 12px
    }

    .mega-links small {
        font-size: 9px
    }

    .mega-links>a>i {
        font-size: 16px;
        width: 19px
    }

    .mega-links>a {
        gap: 8px
    }

    .home-intro {
        padding-inline: 6%
    }

    .intro-inner {
        padding-top: 35px;
        gap: 32px;
        padding-bottom: 35px
    }

    .intro-copy .eyebrow {
        font-size: 9px
    }

    .intro-copy h1 {
        font-size: 36px;
        line-height: 1.15
    }

    .intro-description {
        font-size: 16px
    }

    .actions {
        gap: 18px;
        margin-top: 25px
    }

    .featured-grid {
        grid-template-columns: 1fr 1fr;
        gap: 27px 25px
    }

    .featured-grid>a {
        display: flex;
        gap: 12px
    }

    .featured-grid h3 {
        font-size: 18px
    }

    .featured-grid p {
        font-size: 11px
    }

    .featured-grid .product-icon {
        font-size: 23px
    }

    .intro-promos {
        grid-template-columns: 1fr;
        border: 5px solid #fff;
        gap: 5px
    }

    .promo {
        padding: 25px
    }

    .promo-title {
        display: flex
    }

    .promo-title>i {
        margin-bottom: 0
    }

    .promo h2 {
        font-size: 22px
    }

    .promo .eyebrow {
        font-size: 8px
    }

    .company-statement {
        padding: 85px 7% 48px
    }

    .company-statement h2 {
        font-size: 30px
    }

    .company-statement p {
        font-size: 14px
    }

    .section {
        padding: 48px 6%
    }

    .center-heading {
        margin-bottom: 25px
    }

    .center-heading h2 {
        font-size: 30px
    }

    .center-heading p {
        font-size: 13px
    }

    .product-directory {
        grid-template-columns: 1fr
    }

    .directory-item {
        display: flex;
        padding: 25px 20px;
        gap: 22px
    }

    .directory-item h3 {
        font-size: 21px
    }

    .directory-item p {
        font-size: 12px;
        margin-bottom: 16px
    }

    .directory-item .product-icon {
        margin: 0
    }

    .product-filters {
        gap: 0;
        justify-content: flex-start
    }

    .product-filters button {
        padding: 12px;
        font-size: 11px
    }

    .section-heading {
        display: block;
        margin-bottom: 25px
    }

    .section-heading>div:last-child {
        margin-top: 20px
    }

    .section-heading h2 {
        font-size: 31px
    }

    .service-index {
        grid-template-columns: 1fr
    }

    .service-index h3 {
        font-size: 21px
    }

    .service-index p {
        font-size: 13px
    }

    .education-intro h2 {
        font-size: 33px
    }

    .education-intro p {
        font-size: 14px
    }

    .education-directory>a {
        gap: 16px
    }

    .education-directory h3 {
        font-size: 20px
    }

    .industry-directory {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
    }

    .industry-directory i {
        font-size: 25px;
        margin-bottom: 17px
    }

    .industry-directory span {
        font-size: 11px
    }

    .approach-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin: 35px 0 25px
    }

    .approach-grid article {
        border-bottom: 1px solid var(--line);
        padding-bottom: 18px
    }

    .approach-grid article>i {
        margin-bottom: 17px;
        font-size: 25px
    }

    .approach-grid h3 {
        margin-bottom: 12px
    }

    .approach-grid p {
        font-size: 13px;
        margin: 0
    }

    .technology-line {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .technology-line p {
        font-size: 14px
    }

    .cta-section {
        padding: 50px 6%
    }

    .cta-section h2 {
        font-size: 31px
    }

    .cta-section p {
        font-size: 14px
    }

    .site-footer {
        padding: 45px 6% 70px
    }

    .footer-grid {
        gap: 32px 20px
    }

    .footer-grid h3 {
        font-size: 13px;
        margin-bottom: 18px
    }

    .footer-grid>div>a:not(.brand) {
        font-size: 11px
    }

    .footer-bottom {
        display: block;
        font-size: 9px;
        margin-top: 30px
    }

    .footer-bottom>span {
        display: block;
        margin-top: 10px
    }

    .footer-bottom a {
        margin: 0 18px 0 0
    }

    .page-hero {
        padding: 40px 6%
    }

    .page-hero h1 {
        font-size: 36px;
        overflow-wrap: anywhere
    }

    .page-hero p {
        font-size: 15px
    }

    .cards {
        grid-template-columns: 1fr
    }

    .card {
        padding: 27px
    }

    .detail-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .detail-aside {
        position: static
    }

    .form-card {
        padding: 22px
    }

    .two-col,
    .admin-main .two-col {
        grid-template-columns: 1fr
    }

    .filters {
        gap: 12px
    }

    .filters label {
        min-width: 120px
    }

    .filters .button {
        padding: 13px 16px;
        font-size: 11px
    }

    .admin-main {
        padding: 25px 15px
    }

    .admin-heading {
        align-items: flex-start;
        gap: 15px
    }

    .admin-heading h1 {
        font-size: 25px
    }

    .admin-heading>a {
        font-size: 9px
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .stats article {
        padding: 17px
    }

    .stats strong {
        font-size: 25px
    }

    .admin-tabs {
        gap: 18px
    }

    .admin-tabs>a {
        font-size: 12px
    }

    .theme-options {
        grid-template-columns: 1fr 1fr;
        gap: 17px
    }

    .theme-thumb {
        max-height: none
    }

    .theme-picker {
        padding-top: 15px
    }

    .theme-thumb b {
        font-size: 14px
    }

    .theme-option .text-link {
        font-size: 9px
    }

    .share-panel {
        padding: 20px
    }

    .share-panel h2 {
        font-size: 23px
    }

    .certificate-receipt {
        padding: 45px 20px
    }

    .certificate-receipt h1 {
        font-size: 34px
    }

    .receipt-meta {
        padding: 20px 5px
    }

    .receipt-meta strong {
        overflow-wrap: anywhere
    }

    .danger {
        margin: 10px 5px 0 0
    }

    .chat-toggle {
        bottom: 15px;
        right: 15px;
        padding: 12px 15px
    }

    .chat-panel {
        right: 16px;
        bottom: 72px
    }

    .narrow h1 {
        font-size: 35px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important
    }
}

.collection-heading {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 90px;
    align-items: center;
    padding: 0 0 45px;
    margin-bottom: 10px
}

.collection-heading h1 {
    font-size: 43px;
    line-height: 1.15;
    margin: 0
}

.collection-heading p {
    font-size: 15px;
    line-height: 1.8;
    max-width: 450px
}

.collection-page {
    padding-top: 55px
}

.detail-title {
    padding-bottom: 10px
}

.detail-title h1 {
    font-size: 43px;
    max-width: 850px
}

.detail-title p {
    max-width: 760px;
    font-size: 17px
}

.compact-title {
    padding-bottom: 0
}

.compact-title h1 {
    font-size: 43px;
    max-width: 800px
}

.compact-title+.section {
    padding-top: 35px
}

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: auto
}

.product-directory {
    border-top: 1px solid var(--line)
}

.event-registration {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 70px;
    padding-top: 55px
}

.event-story h1 {
    font-size: 42px
}

.event-story .eyebrow {
    font-size: 10px
}

.event-story dl {
    margin: 30px 0;
    font-size: 13px
}

.event-description {
    font-size: 15px
}

.registration-form-wrap h2 {
    font-size: 25px
}

.policy {
    border-block: 1px solid var(--line);
    padding: 20px 0
}

.policy summary {
    cursor: pointer;
    font-size: 13px
}

.policy p {
    font-size: 12px;
    margin-top: 15px
}

.registration-confirmation {
    max-width: 780px;
    text-align: center
}

.registration-confirmation h1 {
    font-size: 43px
}

.registration-confirmation .admin-notice {
    text-align: left;
    margin-top: 30px
}

.confirmation-details {
    border-block: 1px solid var(--line);
    padding: 20px;
    margin: 30px 0
}

.confirmation-details p {
    font-size: 12px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between
}

.confirmation-details strong {
    font-weight: 500;
    color: var(--ink)
}

.receipt-document {
    max-width: 950px
}

.receipt-document h1 {
    font-size: 40px
}

.receipt-document dl {
    grid-template-columns: 180px 1fr;
    border-block: 1px solid var(--line);
    padding: 30px 0;
    margin: 30px 0
}

.event-list>article {
    display: grid;
    grid-template-columns: 130px 1fr 160px;
    gap: 25px;
    border-top: 1px solid var(--line);
    padding: 30px 0;
    align-items: center
}

.event-list h2 {
    font-size: 26px;
    margin-bottom: 12px
}

.event-list p {
    font-size: 13px
}

.event-list small {
    font-size: 11px;
    color: var(--muted)
}

.event-type {
    font-size: 12px;
    color: var(--primary)
}

.event-type i {
    display: block;
    font-size: 30px;
    margin-bottom: 14px
}

.event-list strong {
    display: block;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 18px
}

.field-builder {
    padding: 25px 0;
    border-block: 1px solid var(--line);
    margin: 20px 0
}

.field-builder-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    gap: 12px;
    border: 1px solid var(--line);
    padding: 20px;
    margin: 15px 0;
    background: #fafbfd
}

.field-builder-row label {
    margin: 0;
    font-size: 11px
}

.field-builder-row input,
.field-builder-row select {
    font-size: 12px;
    padding: 10px
}

.field-options {
    grid-column: 1/4
}

.field-tools {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end
}

.field-tools button {
    border: 0;
    background: none;
    color: var(--primary);
    padding: 8px
}

.field-builder-row>.check {
    align-self: center
}

.registration-qr {
    display: block;
    width: 140px;
    margin: 15px 0 5px
}

.column-picker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    align-items: center
}

.column-picker label {
    margin: 0
}

.column-picker input {
    width: 14px;
    height: 14px
}

.event-story,
.registration-form-wrap {
    min-width: 0
}

@media(max-width:850px) {
    .collection-heading {
        gap: 40px
    }

    .collection-heading h1 {
        font-size: 35px
    }

    .event-registration {
        gap: 35px
    }

    .event-story h1 {
        font-size: 35px
    }

    .field-builder-row {
        grid-template-columns: 1fr 1fr
    }

    .field-options {
        grid-column: 1/-1
    }

    .event-list>article {
        grid-template-columns: 90px 1fr
    }

    .event-list>article>div:last-child {
        grid-column: 2
    }

    .field-builder-row input {
        min-width: 0
    }
}

@media(max-width:600px) {
    .collection-heading {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 30px
    }

    .collection-heading h1 {
        font-size: 34px
    }

    .collection-heading p {
        font-size: 14px
    }

    .collection-page {
        padding-top: 35px
    }

    .event-registration {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .event-story h1 {
        font-size: 34px
    }

    .detail-title h1,
    .compact-title h1 {
        font-size: 34px
    }

    .event-story dl {
        grid-template-columns: 120px 1fr
    }

    .confirmation-details {
        padding: 15px 0
    }

    .confirmation-details p {
        display: block
    }

    .confirmation-details strong {
        display: block;
        overflow-wrap: anywhere
    }

    .receipt-document .section-heading {
        display: block
    }

    .receipt-document dl {
        grid-template-columns: 115px 1fr;
        font-size: 12px
    }

    .event-list>article {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .event-list>article>div:last-child {
        grid-column: 1
    }

    .event-type i {
        display: inline;
        font-size: 15px;
        margin-right: 8px
    }

    .field-builder-row {
        padding: 15px;
        gap: 10px
    }

    .registration-confirmation h1 {
        font-size: 33px
    }
}

/* v4: content-specific editorial layouts and application-first navigation. */
.home-intro .intro-copy h1 {
    font-size: clamp(36px, 3.65vw, 56px);
    line-height: 1.12;
    letter-spacing: -1.7px;
    max-width: 640px;
    text-wrap: balance
}

.home-intro .intro-inner {
    align-items: center;
    padding-block: 72px 78px;
    gap: 65px
}

.intro-description {
    max-width: 500px;
    line-height: 1.75
}

.featured-products {
    background: #fff;
    border: 1px solid #e3e8f1;
    padding: 30px 28px
}

.featured-products>h2 {
    text-align: left;
    letter-spacing: 1.3px;
    font-size: 11px
}

.featured-products>h2:after {
    margin-left: 0
}

.featured-all {
    text-align: left
}

.intro-copy .headline-rule {
    width: 56px;
    height: 3px;
    margin-block: 26px
}

.featured-grid h3 {
    font-weight: 500
}

.featured-grid p {
    line-height: 1.6
}

.content-experience {
    --story-accent: #1571ba;
    --story-tint: #f1f5fc
}

.story-opening {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 66px
}

.story-heading {
    min-width: 0
}

.story-kicker {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--story-accent)
}

.story-heading h1 {
    font-size: clamp(40px, 4.7vw, 66px);
    letter-spacing: -1.7px;
    line-height: 1.08;
    margin: 22px 0;
    overflow-wrap: anywhere;
    text-wrap: balance
}

.story-summary {
    font-size: 19px;
    line-height: 1.7;
    max-width: 650px
}

.story-heading .actions {
    gap: 25px;
    align-items: center;
    flex-wrap: wrap
}

.availability-caption {
    font-size: 11px;
    margin: 22px 0 0;
    color: var(--muted)
}

.story-panel {
    background: var(--story-tint);
    padding: 40px;
    min-width: 0;
    border-top: 3px solid var(--story-accent)
}

.story-symbol {
    font-size: 42px;
    color: var(--story-accent);
    margin-bottom: 38px
}

.panel-heading {
    font-size: 22px;
    line-height: 1.4;
    color: var(--ink);
    max-width: 300px
}

.panel-note {
    font-size: 14px;
    line-height: 1.8
}

.opening-points {
    list-style: none;
    padding: 0;
    margin: 22px 0 0
}

.opening-points li {
    display: flex;
    gap: 19px;
    padding: 16px 0;
    border-top: 1px solid #d4deee;
    font-size: 13px;
    color: var(--ink)
}

.opening-points li span {
    font-size: 10px;
    color: var(--story-accent)
}

.story-cover {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto
}

.story-panel:has(.story-cover) {
    padding: 0;
    border: 0;
    background: transparent
}

.story-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 90px;
    border-top: 1px solid var(--line);
    padding-top: 58px;
    padding-bottom: 55px;
    scroll-margin-top: 100px
}

.story-margin h2 {
    font-size: 28px;
    line-height: 1.25;
    margin: 20px 0 28px;
    max-width: 260px
}

.story-article p {
    font-size: 17px;
    line-height: 1.95;
    white-space: pre-line;
    margin: 0 0 24px;
    max-width: 820px
}

.story-article p:last-child {
    margin-bottom: 0
}

.story-sections {
    padding-top: 0;
    padding-bottom: 20px
}

.story-sections:empty {
    display: none
}

.story-block {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 90px;
    border-top: 1px solid var(--line);
    padding: 36px 0
}

.block-label>span {
    color: var(--story-accent);
    font-size: 23px;
    display: block;
    margin-bottom: 16px
}

.block-label h2 {
    font-size: 24px
}

.story-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    align-content: start
}

.story-block li {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 18px;
    font-size: 15px;
    line-height: 1.6
}

.item-count {
    font-size: 10px;
    color: var(--story-accent);
    padding-top: 4px
}

.story-next {
    background: var(--story-tint);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px
}

.story-next h2 {
    font-size: 34px;
    margin: 16px 0 0
}

.story-next p {
    margin-bottom: 0;
    font-size: 14px
}

.story-next .button {
    flex-shrink: 0
}

.story-facts {
    padding-top: 0;
    padding-bottom: 35px
}

.story-facts dl {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 55px;
    padding: 28px 0;
    border-block: 1px solid var(--line);
    margin: 0
}

.story-facts dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 10px
}

.story-facts dd {
    margin: 0;
    font-size: 15px;
    color: var(--ink)
}

.story-byline {
    font-size: 12px;
    margin-top: 25px
}

.project-gallery {
    padding-top: 35px
}

.project-gallery>h2 {
    font-size: 30px;
    margin-bottom: 30px
}

.project-gallery>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.project-gallery figure {
    margin: 0;
    min-width: 0
}

.project-gallery img {
    width: 100%;
    height: auto;
    border: 1px solid var(--line)
}

.project-gallery figcaption {
    font-size: 11px;
    margin-top: 12px;
    color: var(--muted)
}

.story-tags {
    padding-top: 0;
    font-size: 12px
}

.experience-services .story-panel {
    background: white;
    border-left: 1px solid var(--line);
    border-top: 0;
    padding-left: 50px
}

.experience-services .story-symbol {
    font-size: 70px
}

.experience-services .story-block ul {
    grid-template-columns: 1fr
}

.experience-services .story-block li {
    font-size: 19px
}

.experience-education,
.experience-events {
    --story-tint: #fcf8ef;
    --story-accent: #675328
}

.experience-education .story-opening,
.experience-events .story-opening {
    background: var(--story-tint)
}

.experience-education .story-panel,
.experience-events .story-panel {
    background: white;
    border-top: 0;
    border: 1px solid var(--line)
}

.experience-education .story-block ul {
    background: #fcf8ef;
    padding: 10px 24px
}

.experience-industries .story-opening {
    background: #1571ba;
    color: white
}

.experience-industries .story-heading h1,
.experience-industries .story-heading p,
.experience-industries .story-heading .story-kicker,
.experience-industries .story-heading .text-link {
    color: white
}

.experience-industries .story-heading .button {
    background: white;
    color: #1571ba
}

.experience-industries .story-panel {
    background: #fff
}

.experience-industries .story-body {
    grid-template-columns: 1.1fr 1.4fr
}

.experience-editorial .story-opening {
    display: block;
    max-width: 1150px;
    margin: auto;
    padding-bottom: 45px
}

.experience-editorial .story-heading {
    max-width: 920px
}

.experience-editorial .story-heading h1 {
    font-size: clamp(38px, 4.8vw, 64px)
}

.experience-editorial .story-body {
    max-width: 1150px;
    margin: auto;
    grid-template-columns: 220px 1fr;
    gap: 70px
}

.experience-editorial .story-article p {
    font-size: 18px;
    line-height: 2
}

.experience-editorial .story-opening .actions {
    margin-top: 24px
}

.experience-editorial .story-next {
    margin-top: 35px
}

.experience-company .story-heading {
    border: 1px solid var(--line);
    padding-left: 35px
}

.experience-careers .story-panel {
    background: #f5f7fa
}

.experience-portfolio .story-panel {
    background: #edf1f8
}

.experience-portfolio .story-heading h1 {
    font-size: clamp(36px, 4.4vw, 60px)
}

.collection-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line)
}

.collection-entry {
    padding: 34px 28px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
    position: relative
}

.entry-symbol {
    font-size: 30px;
    color: #1571ba;
    display: block;
    margin-bottom: 26px
}

.entry-category {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted)
}

.entry-copy h2 {
    font-size: 26px;
    line-height: 1.2;
    margin: 13px 0
}

.entry-copy p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 600px
}

.entry-actions {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 23px
}

.entry-overview {
    font-size: 11px;
    text-decoration: underline;
    color: var(--muted)
}

.entry-number {
    position: absolute;
    right: 28px;
    top: 35px;
    font-size: 12px;
    color: #8794ad
}

.entry-visual {
    display: block;
    margin-bottom: 24px
}

.entry-visual img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover
}

.items-products .collection-entry {
    border-right: 1px solid var(--line)
}

.items-products {
    border-left: 1px solid var(--line)
}

.items-services {
    grid-template-columns: 1fr 1fr;
    column-gap: 55px
}

.items-services .collection-entry {
    display: flex;
    gap: 25px;
    padding: 34px 35px 34px 0
}

.items-services .entry-symbol {
    width: 35px;
    flex-shrink: 0;
    font-size: 25px;
    padding-top: 5px
}

.items-services .entry-category {
    display: none
}

.items-services .entry-number {
    right: 0
}

.items-services .entry-copy h2 {
    margin-top: 0
}

.items-education,
.items-company,
.items-careers {
    grid-template-columns: 1fr
}

.items-education .collection-entry,
.items-company .collection-entry,
.items-careers .collection-entry {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;
    padding: 36px 65px 36px 0
}

.items-education .entry-copy,
.items-company .entry-copy {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0 60px;
    align-items: start
}

.items-education .entry-category,
.items-company .entry-category {
    grid-column: 1
}

.items-education .entry-copy h2,
.items-company .entry-copy h2 {
    grid-column: 1;
    margin-top: 8px;
    grid-row: 2
}

.items-education .entry-copy p,
.items-company .entry-copy p {
    grid-column: 2;
    grid-row: 1/3;
    margin-top: 0
}

.items-education .entry-actions,
.items-company .entry-actions {
    grid-column: 2;
    margin-top: 5px
}

.items-education .entry-symbol {
    background: #fbf6eb;
    width: 75px;
    height: 75px;
    display: grid;
    place-items: center;
    color: #675328
}

.items-industries {
    gap: 24px;
    border: 0
}

.items-industries .collection-entry {
    background: #f2f5fb;
    border: 0;
    padding: 35px
}

.items-industries .collection-entry:nth-child(3n+2) {
    background: #faf7f0
}

.items-industries .collection-entry:nth-child(3n+3) {
    background: #eff7f5
}

.items-portfolio,
.items-case-studies,
.items-blog {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    border-top: 0
}

.items-blog .collection-entry,
.items-portfolio .collection-entry,
.items-case-studies .collection-entry {
    padding: 0 0 30px
}

.items-blog .entry-symbol,
.items-portfolio .entry-symbol,
.items-case-studies .entry-symbol {
    padding: 35px;
    background: #f3f6fb;
    margin-bottom: 25px;
    font-size: 42px
}

.entry-meta {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted)
}

.collection-empty {
    grid-column: 1/-1;
    padding: 55px 0;
    text-align: center
}

.collection-empty>i {
    font-size: 32px;
    color: #1571ba
}

.collection-empty h2 {
    font-size: 27px;
    margin-top: 25px
}

.collection-empty p {
    font-size: 14px
}

.collection-heading {
    padding-bottom: 50px
}

.collection-education .collection-heading {
    border-bottom: 3px solid #eee3cd
}

.collection-company .collection-heading h1 {
    border: 1px solid var(--line);
    padding-left: 25px
}

@media(max-width:1000px) {
    .home-intro .intro-inner {
        gap: 35px;
        padding-block: 45px
    }

    .home-intro .intro-copy h1 {
        letter-spacing: -1px
    }

    .featured-products {
        padding: 22px
    }

    .story-opening {
        gap: 35px;
        padding-top: 50px
    }

    .story-heading h1 {
        font-size: 45px
    }

    .story-panel {
        padding: 28px
    }

    .story-body,
    .story-block {
        gap: 40px
    }

    .collection-items {
        grid-template-columns: 1fr 1fr
    }

    .items-education,
    .items-company,
    .items-careers {
        grid-template-columns: 1fr
    }

    .items-education .entry-copy,
    .items-company .entry-copy {
        gap: 0 30px
    }

    .story-summary {
        font-size: 17px
    }

    .experience-editorial .story-body {
        grid-template-columns: 180px 1fr;
        gap: 30px
    }
}

@media(max-width:760px) {
    .home-intro .intro-inner {
        padding-block: 40px
    }

    .home-intro .intro-copy h1 {
        font-size: 45px;
        max-width: 590px
    }

    .featured-products {
        padding: 26px
    }

    .featured-products>h2 {
        margin-bottom: 25px
    }

    .story-opening {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .story-heading h1 {
        font-size: 43px;
        max-width: 620px
    }

    .story-panel {
        padding: 30px
    }

    .story-symbol {
        margin-bottom: 25px
    }

    .story-panel .panel-note {
        max-width: 520px
    }

    .story-body,
    .story-block,
    .experience-industries .story-body,
    .experience-editorial .story-body {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .story-margin h2 {
        max-width: 500px;
        margin: 12px 0 18px
    }

    .story-body {
        padding-block: 38px
    }

    .story-article p {
        font-size: 16px
    }

    .story-next {
        display: block
    }

    .story-next .button {
        margin-top: 25px
    }

    .story-next h2 {
        font-size: 30px
    }

    .items-services {
        column-gap: 25px
    }

    .items-services .collection-entry {
        display: block
    }

    .items-education .entry-copy,
    .items-company .entry-copy {
        display: block
    }

    .items-education .entry-copy p,
    .items-company .entry-copy p {
        margin-top: 16px
    }

    .items-education .entry-symbol {
        width: 58px;
        height: 58px
    }

    .items-education .collection-entry,
    .items-company .collection-entry,
    .items-careers .collection-entry {
        grid-template-columns: 65px 1fr;
        gap: 15px;
        padding-right: 35px
    }

    .entry-copy h2 {
        font-size: 23px
    }

    .entry-number {
        right: 0
    }

    .experience-services .story-panel {
        padding-left: 30px
    }

    .experience-editorial .story-article p {
        font-size: 16px
    }

    .collection-heading {
        padding-bottom: 30px
    }
}

@media(max-width:480px) {
    .home-intro .intro-copy h1 {
        font-size: 38px;
        letter-spacing: -1px;
        text-wrap: initial
    }

    .home-intro .intro-inner {
        gap: 30px;
        padding-top: 35px
    }

    .home-intro .featured-products {
        padding: 22px 18px
    }

    .featured-grid {
        gap: 24px 14px
    }

    .featured-grid h3 {
        font-size: 16px
    }

    .featured-grid p {
        font-size: 11px
    }

    .featured-grid>a {
        gap: 9px
    }

    .featured-grid .product-icon {
        font-size: 20px;
        min-width: 20px
    }

    .story-heading h1 {
        font-size: 36px;
        letter-spacing: -1px
    }

    .story-summary {
        font-size: 16px
    }

    .story-opening {
        padding-block: 38px
    }

    .story-heading .actions {
        gap: 20px
    }

    .story-heading .button {
        font-size: 10px;
        padding: 16px
    }

    .story-panel {
        padding: 25px
    }

    .story-block ul {
        grid-template-columns: 1fr
    }

    .story-block li {
        font-size: 14px
    }

    .story-article p {
        font-size: 15px
    }

    .story-next h2 {
        font-size: 28px
    }

    .story-facts dl {
        gap: 25px
    }

    .story-facts dd {
        font-size: 13px
    }

    .project-gallery>div {
        grid-template-columns: 1fr
    }

    .experience-company .story-heading {
        padding-left: 20px
    }

    .collection-items {
        grid-template-columns: 1fr
    }

    .collection-entry {
        padding: 28px 22px
    }

    .items-services .collection-entry {
        display: flex;
        padding: 28px 24px 28px 0;
        gap: 18px
    }

    .items-education .collection-entry,
    .items-company .collection-entry,
    .items-careers .collection-entry {
        grid-template-columns: 40px 1fr;
        gap: 18px;
        padding: 28px 25px 28px 0
    }

    .items-education .entry-symbol {
        width: 40px;
        height: 45px;
        font-size: 22px
    }

    .entry-symbol {
        font-size: 25px
    }

    .entry-number {
        font-size: 10px
    }

    .entry-copy p {
        font-size: 13px
    }

    .entry-copy h2 {
        font-size: 24px;
        overflow-wrap: anywhere
    }

    .items-industries .collection-entry {
        padding: 28px
    }

    .story-kicker {
        font-size: 10px
    }

    .experience-services .story-block li {
        font-size: 16px
    }
}

/* --------------------------------------------------------------------------
   Professional brand layer
   Clean editorial/corporate UI using #1571ba as the primary brand colour.
   Intentionally restrained: no glassmorphism, decorative gradients or motion.
   -------------------------------------------------------------------------- */

:root {
    --primary: #1571ba;
    --primary-dark: #105c98;
    --primary-soft: #eef6fc;
    --primary-soft-2: #f6fafd;
    --ink: #17202c;
    --muted: #66717d;
    --line: #dfe5eb;
    --paper: #f7f9fb;
    --surface: #ffffff;
    --blue: #1571ba;
    --pale: #eef6fc;
    --radius: 5px;
    --shadow: 0 8px 24px rgba(23, 32, 44, .06)
}

html {
    scroll-behavior: smooth
}

body {
    color: var(--ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

h1,
h2,
h3,
h4 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.025em
}

p {
    color: var(--muted)
}

a {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--line);
    z-index: 50
}

.header-inner {
    max-width: 1360px;
    min-height: 80px;
    padding: 0 32px;
    gap: 28px
}

.brand img {
    width: 190px
}

.header-inner nav {
    gap: 24px
}

.home-link,
.mega summary {
    padding: 29px 0;
    color: #39424c;
    font-size: 13px;
    font-weight: 500
}

.home-link:hover,
.mega summary:hover,
.home-link[aria-current],
.mega[open] summary {
    color: var(--primary)
}

.header-cta {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    border-radius: var(--radius);
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 600
}

.header-cta:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff
}

.mega-panel {
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(23, 32, 44, .08)
}

.mega-links>a {
    border-radius: 4px
}

.mega-links>a:hover {
    background: var(--primary-soft-2)
}

/* Buttons and links */
.button {
    min-height: 46px;
    padding: 13px 20px;
    gap: 12px;
    border-radius: var(--radius);
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none
}

.button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff
}

.button.secondary {
    background: #fff;
    border-color: #b8c6d2;
    color: var(--primary)
}

.button.secondary:hover {
    background: var(--primary-soft-2);
    border-color: var(--primary);
    color: var(--primary-dark)
}

.plain-link,
.text-link {
    color: var(--primary);
    font-weight: 500
}

/* Homepage hero */
.home-intro {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0 5%
}

.home-intro .intro-inner {
    max-width: 1280px;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    align-items: center;
    gap: 72px;
    padding: 78px 0 72px
}

.home-intro .intro-copy {
    padding-top: 0
}

.home-intro .intro-copy .eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    margin-bottom: 18px
}

.home-intro .intro-copy h1 {
    max-width: 680px;
    margin: 0 0 24px;
    color: var(--ink);
    font-size: clamp(42px, 4.5vw, 64px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.04em;
    white-space: normal;
    text-wrap: balance
}

.home-intro .headline-rule {
    width: 52px;
    height: 2px;
    margin: 24px 0;
    background: var(--primary)
}

.home-intro .intro-description {
    max-width: 590px;
    margin-bottom: 28px;
    color: #4f5b67;
    font-size: 17px;
    line-height: 1.75
}

.home-intro .actions {
    margin-top: 28px;
    gap: 14px
}

.hero-paths {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: #64707c;
    font-size: 12px
}

.hero-paths i {
    margin-right: 7px;
    color: var(--primary)
}

.home-intro .featured-products {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--line);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow)
}

.hero-product-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px
}

.hero-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid #cfe2f1;
    border-radius: 4px;
    font-size: 19px
}

.hero-product-heading h2 {
    margin: 0 0 3px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase
}

.hero-product-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px
}

.home-intro .featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--line)
}

.home-intro .featured-grid>a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    padding: 18px 10px;
    border-bottom: 1px solid var(--line)
}

.home-intro .featured-grid>a:nth-child(odd) {
    padding-left: 0;
    padding-right: 18px;
    border-right: 1px solid var(--line)
}

.home-intro .featured-grid>a:nth-child(even) {
    padding-left: 18px;
    padding-right: 0
}

.home-intro .featured-grid>a:hover {
    background: var(--primary-soft-2)
}

.home-intro .featured-grid .product-icon {
    min-width: 24px;
    margin-top: 2px;
    color: var(--primary);
    font-size: 20px
}

.home-intro .featured-grid h3 {
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25
}

.home-intro .featured-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55
}

.home-intro .featured-all {
    display: inline-block;
    margin-top: 20px;
    padding: 0;
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    text-transform: none
}

/* Homepage promotional row */
.intro-promos {
    max-width: 1280px;
    margin: 0 auto;
    padding: 26px 0 0;
    gap: 18px;
    border: 0;
    transform: none
}

.promo {
    padding: 30px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px
}

.promo-education,
.promo-engineering {
    background: #fff
}

.promo-title {
    justify-content: flex-start
}

.promo-title>i {
    color: var(--primary);
    font-size: 24px
}

.promo h2 {
    color: var(--ink);
    font-size: 24px;
    font-weight: 600
}

.promo p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7
}

.outline-link {
    border: 1px solid #b8c6d2;
    border-radius: 4px;
    color: var(--primary);
    font-weight: 600;
    text-transform: none
}

.outline-link:hover {
    border-color: var(--primary);
    background: var(--primary-soft-2)
}

/* Core public sections */
.section {
    max-width: 1320px;
    padding: 78px 5%
}

.center-heading {
    max-width: 760px;
    margin-bottom: 38px
}

.center-heading h2,
.section-heading h2,
.education-intro h2,
.technology-line h2,
.cta-section h2 {
    color: var(--ink);
    font-weight: 600
}

.company-statement {
    background: var(--primary);
    padding: 74px 6%;
    color: #fff
}

.statement-inner {
    max-width: 1180px;
    gap: 80px
}

.company-statement .eyebrow {
    color: #d8eaf7
}

.company-statement h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    white-space: normal
}

.company-statement p {
    color: #eaf4fb;
    font-size: 15px
}

.white-link {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .45)
}

.product-directory {
    border-top-color: var(--line);
    border-left-color: var(--line)
}

.directory-item,
.card,
.collection-entry {
    background: #fff;
    border-color: var(--line)
}

.directory-item:hover,
.card:hover,
.collection-entry:hover {
    background: var(--primary-soft-2)
}

.services-section {
    background: var(--paper);
    border-color: var(--line)
}

.service-index>a {
    border-bottom-color: var(--line)
}

.education-section {
    background: #fff
}

.education-directory>a {
    border-bottom-color: var(--line)
}

.industry-directory a {
    border: 1px solid transparent;
    border-radius: 4px
}

.industry-directory a:hover {
    border-color: var(--line);
    background: var(--primary-soft-2)
}

.industry-directory i {
    color: var(--primary)
}

.approach-section {
    background: var(--paper);
    border-color: var(--line)
}

.approach-grid>article>i {
    color: var(--primary)
}

.cta-section {
    background: var(--primary-soft-2);
    border-color: var(--line)
}

.site-footer {
    background: #f4f6f8;
    border-color: var(--line)
}

/* Inner-page hero and cards */
.page-hero {
    background: var(--primary-soft-2);
    border-bottom: 1px solid var(--line)
}

.page-hero h1 {
    color: var(--ink);
    font-weight: 600
}

.card {
    border: 1px solid var(--line);
    border-radius: 5px;
    margin: -1px 0 0 -1px
}

.card h3 {
    font-weight: 600
}

.form-card,
.detail-aside,
.chat-panel {
    border-color: var(--line);
    border-radius: 5px;
    box-shadow: none
}

input,
textarea,
select {
    border-color: #cbd4dd;
    border-radius: 4px
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary)
}

input::placeholder,
textarea::placeholder {
    color: #7a8590;
    opacity: 1
}

/* Content/story pages: keep editorial, not "AI dashboard" */
.content-experience {
    --story-accent: var(--primary);
    --story-tint: var(--primary-soft-2)
}

.story-opening {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.story-heading h1 {
    color: var(--ink);
    font-weight: 600
}

.story-kicker {
    color: var(--primary)
}

.story-summary {
    color: #596572
}

.story-panel,
.experience-services .story-panel,
.experience-education .story-panel,
.experience-events .story-panel,
.experience-careers .story-panel,
.experience-portfolio .story-panel {
    background: #fff;
    border: 1px solid var(--line);
    border: 1px solid var(--line);
    padding: 32px
}

.story-symbol {
    color: var(--primary)
}

.opening-points li,
.story-body,
.story-block,
.story-facts dl {
    border-color: var(--line)
}

.story-article {
    max-width: 820px
}

.story-article p {
    color: #56616d;
    line-height: 1.85
}

.story-next {
    background: var(--primary-soft-2);
    border: 1px solid var(--line)
}

.experience-industries .story-opening {
    background: #fff;
    color: var(--ink)
}

.experience-industries .story-heading h1,
.experience-industries .story-heading p,
.experience-industries .story-heading .story-kicker,
.experience-industries .story-heading .text-link {
    color: inherit
}

.experience-industries .story-heading .story-kicker,
.experience-industries .story-heading .text-link {
    color: var(--primary)
}

.experience-industries .story-heading .button {
    background: var(--primary);
    color: #fff
}

.experience-education .story-opening,
.experience-events .story-opening {
    background: #fff
}

.experience-education .story-block ul {
    background: transparent;
    padding: 0
}

.experience-company .story-heading {
    border: 1px solid var(--line);
    padding-left: 28px
}

/* Collection pages */
.collection-heading {
    border-bottom-color: var(--line)
}

.collection-heading h1,
.entry-copy h2 {
    color: var(--ink);
    font-weight: 600
}

.collection-items {
    border-color: var(--line)
}

.items-industries {
    gap: 16px
}

.items-industries .collection-entry,
.items-industries .collection-entry:nth-child(3n+2),
.items-industries .collection-entry:nth-child(3n+3) {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px
}

.items-industries .collection-entry:hover {
    background: var(--primary-soft-2)
}

.items-education .entry-symbol {
    background: var(--primary-soft);
    color: var(--primary)
}

.entry-symbol,
.entry-number,
.entry-actions .text-link {
    color: var(--primary)
}

/* Delivery / FAQ / editor utility blocks */
.delivery-section {
    background: var(--paper);
    border-block: 1px solid var(--line)
}

.delivery-section h2 {
    margin-top: 12px;
    color: var(--ink);
    font-size: 34px;
    font-weight: 600
}

.delivery-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px
}

.delivery-steps li {
    padding-top: 20px;
    border-top: 2px solid #cbd9e5
}

.step-index {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700
}

.delivery-steps h3 {
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 600
}

.delivery-steps p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75
}

.faq-section {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 64px
}

.faq-section h2 {
    margin-top: 16px;
    font-size: 34px;
    font-weight: 600
}

.faq-list details {
    padding: 20px 0;
    border-top: 1px solid var(--line)
}

.faq-list details:last-child {
    border-bottom: 1px solid var(--line)
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary i {
    color: var(--primary);
    font-size: 11px
}

.faq-list details[open] summary i {
    transform: rotate(45deg)
}

.faq-list p {
    margin: 14px 30px 0 0;
    font-size: 14px;
    line-height: 1.75
}

.editor-guide {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 25px;
    padding: 22px 24px;
    background: var(--primary-soft-2);
    border: 1px solid #d6e5f0;
    border: 1px solid var(--line);
    border-radius: 4px
}

.editor-guide>div {
    flex: 1;
    min-width: 220px
}

.editor-guide h2 {
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 600
}

.editor-guide p,
.editor-guide #starter-status {
    color: #5f6b76;
    font-size: 13px
}

.editor-guide p {
    margin: 0
}

.editor-guide #starter-status {
    flex-basis: 100%
}

.product-icon,
.tone-0,
.tone-1,
.tone-2,
.tone-3 {
    color: var(--primary)
}

.story-block,
.delivery-section,
.faq-section {
    scroll-margin-top: 92px
}

/* Responsive */
@media(max-width:1200px) {
    .header-inner {
        padding-inline: 24px
    }

    .home-intro .intro-inner {
        gap: 46px
    }

    .home-intro .intro-copy h1 {
        font-size: clamp(40px, 4.7vw, 56px)
    }
}

@media(max-width:1000px) {
    .site-header {
        position: relative
    }

    .header-inner {
        min-height: 74px
    }

    .home-intro .intro-inner {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
        padding-block: 58px
    }

    .home-intro .intro-copy h1 {
        font-size: 44px
    }

    .home-intro .featured-products {
        padding: 24px
    }

    .statement-inner {
        gap: 45px
    }

    .delivery-steps {
        grid-template-columns: 1fr 1fr
    }

    .faq-section {
        gap: 36px
    }
}

@media(max-width:760px) {
    .home-intro {
        padding-inline: 6%
    }

    .home-intro .intro-inner {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-block: 48px
    }

    .home-intro .intro-copy h1 {
        max-width: 620px;
        font-size: 44px
    }

    .home-intro .intro-description {
        max-width: 620px
    }

    .home-intro .featured-products {
        max-width: 620px
    }

    .intro-promos {
        grid-template-columns: 1fr;
        padding-inline: 6%
    }

    .statement-inner,
    .faq-section {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .company-statement {
        padding-block: 58px
    }

    .story-panel,
    .experience-services .story-panel,
    .experience-education .story-panel,
    .experience-events .story-panel,
    .experience-careers .story-panel,
    .experience-portfolio .story-panel {
        padding: 26px
    }
}

@media(max-width:480px) {
    .header-inner {
        padding-inline: 16px
    }

    .home-intro .intro-inner {
        padding-block: 38px
    }

    .home-intro .intro-copy h1 {
        font-size: 36px;
        letter-spacing: -.03em
    }

    .home-intro .intro-description {
        font-size: 15px
    }

    .home-intro .actions {
        align-items: stretch
    }

    .home-intro .actions .button {
        width: 100%
    }

    .hero-paths {
        display: grid;
        gap: 10px
    }

    .home-intro .featured-products {
        padding: 20px 18px
    }

    .home-intro .featured-grid {
        grid-template-columns: 1fr
    }

    .home-intro .featured-grid>a,
    .home-intro .featured-grid>a:nth-child(odd),
    .home-intro .featured-grid>a:nth-child(even) {
        padding: 16px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .promo {
        padding: 24px
    }

    .section {
        padding-block: 52px
    }

    .company-statement h2,
    .delivery-section h2,
    .faq-section h2 {
        font-size: 29px
    }

    .delivery-steps {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .editor-guide {
        padding: 18px
    }

    .editor-guide .button {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        transition: none !important;
        animation: none !important
    }
}