@charset "UTF-8";
:root {
--navy: #142B4A;
--navy-dark: #0d1c31;
--navy-800: #1d3a5f;
--navy-soft: #e7ecf3;
--steel: #7a6a4e;
--steel-light: #c3ad82;
--line: #e7d6b8;
--line-strong: #d8c199;
--bg: #fffbf4;
--bg-alt: #f5e6ce;
--bg-panel: #eedcbd;
--ink: #1b2735;
--ink-soft: #46586c;
--white: #ffffff;
--surface: #ffffff;
--head: var(--navy);
--accent: #f28c28;
--accent-dark: #d9761b;
--ok: #1d7a4d;
--err: #b42318;
--radius: 5px;
--radius-sm: 3px;
--radius-md: 12px;
--shadow: 0 1px 2px rgba(20,43,74,.08), 0 1px 3px rgba(20,43,74,.06);
--shadow-md: 0 2px 8px rgba(20,43,74,.10);
--wrap: min(1560px, 96vw);
--font: "IBM Plex Sans Thai", "Segoe UI", "Tahoma", "Leelawadee UI", system-ui, -apple-system, "Noto Sans Thai", sans-serif;
--grad-navy: linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-800) 100%);
}
@media (max-width: 900px) {
:root {
--wrap: 100%;
}
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--bg);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1.25;
color: var(--head);
margin: 0 0 0.5em;
letter-spacing: -0.01em;
}
p {
margin: 0 0 1em;
}
a {
color: var(--head);
text-decoration: none;
}
img {
max-width: 100%;
}
.wrap {
width: 100%;
max-width: var(--wrap);
margin: 0 auto;
padding: 0 24px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
z-index: 100;
background: var(--navy);
color: var(--white);
padding: 10px 16px;
border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
left: 0;
}
.eyebrow {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--steel);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 2px solid var(--accent);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--surface);
border-bottom: 1px solid var(--line-strong);
}
.topbar {
background: var(--grad-navy);
color: var(--white);
font-size: 12.5px;
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 34px;
}
.topbar-tag {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 11px;
color: var(--steel-light);
}
.topbar-links {
display: flex;
align-items: center;
gap: 20px;
}
.topbar-links a {
color: var(--white);
opacity: 0.9;
}
.topbar-links a:hover {
opacity: 1;
text-decoration: underline;
}
.topbar-links .lang {
color: var(--steel-light);
border-left: 1px solid rgba(255, 255, 255, 0.25);
padding-left: 20px;
}
.topbar-links .lang b {
color: var(--white);
}
.mainbar-inner {
display: flex;
align-items: center;
gap: 24px;
height: 68px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand-mark {
width: 38px;
height: 38px;
flex: none;
display: grid;
place-items: center;
background: var(--grad-navy);
color: var(--white);
font-size: 18px;
border-radius: var(--radius-sm);
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.brand-text b {
font-size: 18px;
color: var(--head);
letter-spacing: -0.02em;
}
.brand-text small {
font-size: 11px;
color: var(--steel);
letter-spacing: 0.02em;
}
.brand--logo {
gap: 0;
}
.brand-logo-img {
height: 50px;
width: auto;
display: block;
mix-blend-mode: multiply;
}
@media (max-width: 720px) {
.brand-logo-img {
height: 40px;
}
}
.main-nav {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.main-nav a {
padding: 9px 14px;
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
border-radius: var(--radius-sm);
border-bottom: 2px solid transparent;
}
.main-nav a:hover {
color: var(--head);
background: var(--bg-alt);
}
.main-nav a.active {
color: var(--head);
border-bottom-color: var(--head);
}
.main-nav .btn-quote {
margin-left: 12px;
background: var(--accent);
color: var(--white);
padding: 10px 18px;
border-radius: var(--radius-sm);
border-bottom: none;
}
.main-nav .btn-quote:hover {
background: var(--accent-dark);
color: var(--white);
}
.lang-switch {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 12px;
}
.lang-switch .lang-opt {
padding: 5px 9px;
font-size: 13px;
font-weight: 700;
color: var(--ink-soft);
border-radius: var(--radius-sm);
border-bottom: none;
letter-spacing: 0.03em;
line-height: 1;
}
.lang-switch .lang-opt:hover {
color: var(--head);
background: var(--bg-alt);
}
.lang-switch .lang-opt.is-active {
color: var(--head);
background: var(--navy-soft);
}
.lang-switch .lang-sep {
color: var(--line-strong);
font-size: 12px;
user-select: none;
}
.menu-parent {
position: relative;
}
.menu-parent > a {
display: inline-flex;
align-items: center;
gap: 5px;
}
.nav-caret {
font-size: 10px;
line-height: 1;
transform-origin: 50% 50%;
transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}
@media (min-width: 901px) {
.menu-parent:hover .nav-caret,
.menu-parent:focus-within .nav-caret {
transform: rotate(180deg);
}
}
.main-nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 60;
min-width: 210px;
margin: 0;
padding: 6px;
list-style: none;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: 0 10px 30px rgba(20, 43, 74, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.menu-parent:hover > .sub-menu,
.menu-parent:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-nav .sub-menu li {
margin: 0;
}
.main-nav .sub-menu a {
display: block;
padding: 9px 12px;
border-radius: var(--radius-sm);
border-bottom: none;
white-space: nowrap;
}
.main-nav .sub-menu a:hover {
background: var(--bg-alt);
color: var(--head);
}
.nav-toggle {
display: none;
margin-left: auto;
width: 42px;
height: 40px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
color: var(--head);
font-size: 20px;
cursor: pointer;
}
.btn {
display: inline-block;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: 11px 22px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
text-shadow: none;
}
.btn-primary {
background: var(--navy);
color: var(--white);
border-color: var(--head);
}
.btn-primary:hover {
background: var(--navy-dark);
}
.btn-ghost {
background: transparent;
color: var(--head);
border-color: var(--line-strong);
}
.btn-ghost:hover {
background: var(--bg-alt);
border-color: var(--head);
color: var(--head);
}
.hero .btn-ghost,
.section--navy .btn-ghost,
.page-head-media .btn-ghost {
color: var(--white);
border-color: rgba(255, 255, 255, 0.5);
}
.hero .btn-ghost:hover,
.section--navy .btn-ghost:hover,
.page-head-media .btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.5);
color: var(--white);
}
.btn-outline {
background: var(--surface);
color: var(--head);
border-color: var(--line-strong);
}
.btn-outline:hover {
border-color: var(--head);
}
.btn-sm {
padding: 7px 14px;
font-size: 13px;
}
.hero {
background: var(--grad-navy);
color: var(--white);
border-bottom: 3px solid var(--accent);
}
.hero-inner {
padding: 74px 0;
}
.hero-copy {
max-width: 640px;
}
.hero .eyebrow {
color: var(--steel-light);
border-bottom-color: var(--accent);
}
.hero h1 {
color: var(--white);
font-size: 44px;
line-height: 1.3;
margin-bottom: 18px;
text-wrap: balance;
}
.hero-lead {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
max-width: 52ch;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
}
.hero .btn-primary {
background: var(--surface);
color: var(--head);
border-color: var(--white);
}
.hero .btn-primary:hover {
background: var(--bg-alt);
border-color: var(--bg-alt);
color: var(--head);
}
.hero {
position: relative;
overflow: hidden;
}
.hero-slides {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.1s ease;
}
.hero-slide.is-active {
opacity: 1;
}
.hero-slide-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.hero--bg::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, rgba(13, 28, 49, 0.68) 0%, rgba(13, 28, 49, 0.36) 45%, rgba(13, 28, 49, 0.06) 100%);
}
.hero--bg .hero-copy {
text-shadow: 0 2px 16px rgba(13, 28, 49, 0.75), 0 1px 4px rgba(13, 28, 49, 0.6);
}
.hero-dots {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
pointer-events: none;
}
.hero-dot {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
background: rgba(255, 255, 255, 0.45);
box-shadow: 0 1px 4px rgba(13, 28, 49, 0.5);
transition: background 0.2s, transform 0.2s;
}
.hero-dot:hover, .hero-dot:focus-visible {
background: rgba(255, 255, 255, 0.8);
}
.hero-dot.is-active {
background: #fff;
transform: scale(1.3);
}
@media (max-width: 720px) {
.hero-dots {
bottom: 12px;
}
}
.hero-inner {
position: relative;
z-index: 2;
}
.hero--bg {
display: flex;
align-items: center;
min-height: clamp(400px, 52vh, 540px);
}
.hero--bg .hero-inner {
width: 100%;
}
@media (max-width: 720px) {
.hero--bg {
min-height: clamp(360px, 62vh, 460px);
}
.hero--bg::before {
background: linear-gradient(90deg, rgba(13, 28, 49, 0.72) 0%, rgba(13, 28, 49, 0.48) 100%);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-slide {
transition: none;
}
}
.hero-facts {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius);
padding: 24px;
}
.hero-facts h2 {
color: var(--white);
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-facts dl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 16px;
margin: 0;
}
.hero-facts dt {
font-size: 26px;
font-weight: 700;
color: var(--white);
}
.hero-facts dd {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--steel-light);
}
.section {
padding: 64px 0;
}
.section-alt {
background: var(--bg-alt);
}
.section-head {
margin-bottom: 34px;
max-width: 62ch;
}
.section-head h2 {
font-size: 28px;
line-height: 1.3;
}
.section-head p {
color: var(--ink-soft);
margin: 8px 0 0;
}
.page-head {
background: var(--bg-panel);
padding: 16px 0;
}
.page-head .crumbs {
font-size: 12.5px;
color: var(--steel);
margin-bottom: 0;
}
.page-title {
position: relative;
padding: clamp(30px, 4vw, 46px) 0 0;
}
.crumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
}
.crumbs li {
display: inline;
}
.crumbs li + li::before {
content: "/";
margin: 0 6px;
opacity: 0.6;
}
.page-head .crumbs a {
color: var(--steel);
}
.page-head h1, .page-head .page-head-title,
.page-title h1, .page-title .page-head-title {
font-size: 30px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--head);
margin: 0 0 4px;
}
.page-head .crumbs + h1,
.page-head .crumbs + .page-head-title {
margin-top: 12px;
}
.page-title h1 {
position: relative;
padding-bottom: 16px;
}
.page-title h1::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 76px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
}
.page-head p, .page-title p {
color: var(--ink-soft);
margin: 0;
}
.pd-title {
font-size: 24px;
padding-bottom: 10px;
margin: 0 0 14px;
border-bottom: 2px dashed var(--line-strong);
}
.pd-excerpt {
color: var(--ink-soft);
margin: 0 0 16px;
}
.hl-strip {
background: var(--surface);
border-bottom: 1px solid var(--navy-soft);
}
.hl-heading {
font-size: 18px;
margin: 0;
padding: 26px 30px 0;
color: var(--head);
}
.hl-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding-top: 0;
padding-bottom: 0;
}
.hl-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 30px 30px;
position: relative;
}
.hl-card + .hl-card::before {
content: "";
position: absolute;
left: 0;
top: 22px;
bottom: 22px;
width: 1px;
background: var(--navy-soft);
}
.hl-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 10px;
background: var(--bg);
color: var(--head);
border: 1px solid var(--line-strong);
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.hl-card:hover .hl-icon {
background: var(--navy);
color: var(--white);
border-color: var(--head);
}
.hl-title {
font-size: 17px;
margin: 2px 0 6px;
color: var(--head);
}
.hl-desc {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-soft);
}
@media (max-width: 860px) {
.hl-heading {
padding: 22px 20px 0;
font-size: 17px;
}
.hl-grid {
grid-template-columns: 1fr;
}
.hl-card {
padding: 22px 20px;
}
.hl-card + .hl-card::before {
left: 20px;
right: 20px;
top: 0;
bottom: auto;
width: auto;
height: 1px;
}
}
.spec-strip {
background: var(--navy);
border-top: 3px solid var(--accent);
border-bottom: 1px solid var(--navy-800);
}
.spec-strip-inner {
display: flex;
align-items: stretch;
gap: 0;
}
.spec-strip-label {
flex: none;
align-self: center;
width: 130px;
padding-right: 24px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--steel-light);
border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.spec-metrics {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.spec-metric {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 26px 28px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.spec-metric:last-child {
border-right: none;
}
.spec-metric-val {
font-size: 32px;
font-weight: 700;
line-height: 1;
color: var(--white);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.spec-metric-val em {
font-style: normal;
color: var(--accent);
}
.spec-metric-unit {
margin-top: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
}
.spec-metric-desc {
margin-top: 4px;
font-size: 12.5px;
color: var(--steel-light);
}
.capabilities {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.cap-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px 24px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.cap-item:nth-child(odd) {
border-right: 1px solid var(--line);
}
.cap-item:nth-last-child(-n+2) {
border-bottom: none;
}
.cap-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 9px;
background: var(--bg);
color: var(--head);
border: 1px solid var(--line-strong);
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cap-item:hover .cap-icon {
background: var(--navy);
color: var(--white);
border-color: var(--head);
}
.cap-icon .cpn-icon-img, .hl-icon .cpn-icon-img {
width: 70%;
height: 70%;
object-fit: contain;
display: block;
transition: filter 0.18s;
}
.cap-item:hover .cap-icon .cpn-icon-img, .hl-card:hover .hl-icon .cpn-icon-img {
filter: brightness(0) invert(1);
}
.cap-body {
min-width: 0;
}
.cap-item h3 {
font-size: 15.5px;
margin: 4px 0 3px;
}
.cap-item p {
margin: 0;
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.5;
}
.client-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.client-logo {
flex: 0 1 180px;
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
padding: 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.client-logo img {
max-width: 100%;
max-height: 62px;
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 560px) {
.client-logo {
flex-basis: calc(50% - 8px);
}
}
.client-marquee {
overflow: hidden;
}
.client-row + .client-row {
margin-top: 16px;
}
.client-track {
display: flex;
gap: 16px;
width: max-content;
animation: cpn-marquee var(--cpn-marq, 60s) linear infinite;
}
.client-row.is-reverse .client-track {
animation-direction: reverse;
}
@keyframes cpn-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
.client-marquee:hover .client-track,
.client-marquee:focus-within .client-track {
animation-play-state: paused;
}
.client-marquee .client-grid {
flex-wrap: nowrap;
justify-content: flex-start;
width: max-content;
}
.client-marquee .client-logo {
flex: 0 0 180px;
}
.client-logo {
transition: border-color 0.18s ease;
}
.client-logo:hover {
border-color: var(--line-strong);
}
@media (max-width: 560px) {
.client-marquee .client-logo {
flex: 0 0 148px;
}
}
@media (prefers-reduced-motion: reduce) {
.client-track {
display: block;
animation: none;
width: auto;
}
.client-marquee .client-grid {
flex-wrap: wrap;
justify-content: center;
width: auto;
}
.client-marquee .client-grid[aria-hidden=true] {
display: none;
}
.client-marquee .client-logo {
flex: 0 1 180px;
}
.client-row + .client-row {
margin-top: 16px;
}
}
.vp-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 44px;
align-items: center;
}
.vp-copy h2 {
margin: 6px 0 12px;
}
.vp-lead {
margin: 0;
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.75;
}
.vp-points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 13px;
}
.vp-points li {
display: flex;
align-items: center;
gap: 11px;
font-weight: 600;
color: var(--head);
font-size: 15px;
}
.vp-check {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--thread);
}
.vp-check svg {
display: block;
width: 18px;
height: 18px;
}
@media (max-width: 820px) {
.vp-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
.cta-actions {
justify-content: center;
margin-top: 24px;
}
.cta-section .btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--white);
}
.cta-section .btn-primary:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
}
.spec-list {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
}
.spec-head {
display: grid;
grid-template-columns: 90px 1fr auto;
align-items: center;
gap: 20px;
padding: 11px 22px;
background: var(--navy);
color: var(--white);
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.spec-head span:last-child {
text-align: right;
}
.spec-row {
display: grid;
grid-template-columns: 90px 1fr auto;
align-items: center;
gap: 20px;
padding: 16px 22px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.spec-row:last-child {
border-bottom: none;
}
.spec-row:nth-of-type(even) {
background: var(--bg-alt);
}
.spec-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--head);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 5px 8px;
text-align: center;
background: var(--surface);
}
.spec-main h3 {
font-size: 15.5px;
margin: 0 0 2px;
}
.spec-main p {
margin: 0;
font-size: 13px;
color: var(--ink-soft);
}
.spec-price {
font-weight: 700;
color: var(--head);
white-space: nowrap;
font-variant-numeric: tabular-nums;
text-align: right;
}
.spec-price small {
font-weight: 500;
color: var(--steel);
font-size: 12px;
}
.cert-section {
padding-top: 0;
}
.cert-strip {
display: flex;
align-items: stretch;
gap: 24px;
flex-wrap: wrap;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 22px 26px;
background: var(--bg-alt);
}
.cert-strip-label {
flex: none;
align-self: center;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--steel);
line-height: 1.5;
}
.cert-badges {
flex: 1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.cert-badge {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 12px 14px;
background: var(--surface);
}
.cert-badge-code {
flex: none;
min-width: 46px;
height: 40px;
padding: 0 8px;
display: grid;
place-items: center;
background: var(--navy);
color: var(--white);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
}
.cert-badge-body {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.cert-badge-body b {
font-size: 13.5px;
color: var(--head);
}
.cert-badge-body small {
font-size: 11.5px;
color: var(--ink-soft);
}
.table-toolbar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.table-search {
position: relative;
flex: 1 1 300px;
max-width: 380px;
}
.table-search input {
width: 100%;
padding: 11px 14px 11px 38px;
font-family: inherit;
font-size: 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
}
.table-search input::placeholder {
color: var(--steel);
opacity: 1;
}
.table-search::before {
content: "⌕";
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--steel);
font-size: 18px;
}
.table-meta {
font-size: 13px;
color: var(--steel);
}
.table-meta b {
color: var(--head);
}
.table-wrap {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow-x: auto;
background: var(--surface);
}
table.data-table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
font-size: 14px;
}
.data-table thead th {
background: var(--navy);
color: var(--white);
text-align: left;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0;
white-space: nowrap;
}
.data-table thead th button.th-sort {
width: 100%;
text-align: inherit;
background: transparent;
border: none;
color: inherit;
cursor: pointer;
font: inherit;
padding: 13px 16px;
display: flex;
align-items: center;
gap: 6px;
justify-content: space-between;
}
.data-table thead th.num button.th-sort {
justify-content: flex-end;
flex-direction: row-reverse;
}
.data-table thead th button.th-sort:hover {
background: var(--navy-dark);
}
.th-sort .arrow {
font-size: 10px;
opacity: 0.6;
}
.data-table thead th[aria-sort=ascending] .arrow::after {
content: "▲";
opacity: 1;
}
.data-table thead th[aria-sort=descending] .arrow::after {
content: "▼";
opacity: 1;
}
.data-table thead th[aria-sort=none] .arrow::after {
content: "⇅";
}
.data-table th.static {
padding: 13px 16px;
}
.data-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.data-table tbody tr:nth-child(even) {
background: var(--bg-alt);
}
.data-table tbody tr:hover {
background: var(--bg-panel);
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
.data-table .col-name {
font-weight: 600;
color: var(--head);
}
.data-table .col-name small {
display: block;
font-weight: 400;
color: var(--ink-soft);
font-size: 12px;
}
.data-table .cat-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--steel);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 3px 8px;
}
.data-table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.data-table .price {
font-weight: 700;
color: var(--head);
}
.data-table td.action {
text-align: right;
white-space: nowrap;
}
.data-table td.action .btn {
margin-left: 6px;
}
.data-table tbody tr.product-row {
cursor: pointer;
}
.data-table tbody tr.product-row:hover {
background: var(--bg-panel);
}
.data-table tbody tr.product-row:focus-visible {
outline: 2px solid var(--navy);
outline-offset: -2px;
}
.data-table .col-name-link {
color: var(--head);
font-weight: 600;
}
.data-table .col-name-link:hover {
text-decoration: underline;
}
.cpn-linkbox {
cursor: pointer;
}
.cpn-linkbox:focus-visible {
outline: 2px solid var(--navy);
outline-offset: -2px;
}
.spec-row.cpn-linkbox:hover {
background: var(--bg-panel);
}
.spec-main-link {
color: var(--head);
}
.spec-main-link:hover {
text-decoration: underline;
}
.page-content > *,
.freeform > * {
max-width: 820px;
margin-left: auto;
margin-right: auto;
padding-left: 22px;
padding-right: 22px;
}
.page-content > .alignwide,
.freeform > .alignwide {
max-width: 1140px;
}
.page-content > .alignfull,
.freeform > .alignfull {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.freeform > .alignfull > .wp-block-group__inner-container,
.page-content .alignfull > .wp-block-group__inner-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 22px;
}
.freeform {
padding: 40px 0 64px;
}
.has-navy-color {
color: var(--head);
}
.has-navy-background-color {
background-color: var(--head);
}
.has-navy-dark-color {
color: var(--navy-dark);
}
.has-navy-dark-background-color {
background-color: var(--navy-dark);
}
.has-accent-color {
color: var(--accent);
}
.has-accent-background-color {
background-color: var(--accent);
}
.has-sky-background-color {
background-color: var(--navy-soft, #e7ecf3);
}
.has-bg-alt-background-color {
background-color: var(--bg-alt);
}
.has-ink-color {
color: var(--ink);
}
.has-white-color {
color: #fff;
}
.has-white-background-color {
background-color: #fff;
}
.no-result td {
padding: 26px 16px;
text-align: center;
color: var(--steel);
font-size: 14px;
}
.about-intro {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 42px;
align-items: start;
}
.about-intro p {
color: var(--ink-soft);
}
.about-figure {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
min-height: 240px;
background: var(--grad-navy);
position: relative;
}
.weave-pattern {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 12px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 12px);
}
.figure-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 18px;
color: var(--white);
font-size: 12.5px;
background: linear-gradient(0deg, rgba(10, 44, 80, 0.85), transparent);
}
.cpn-pgallery-main {
margin: 0 auto;
min-height: 0;
position: relative;
background: transparent;
border: 0;
max-width: 560px;
}
.cpn-pgallery-viewport {
overflow: hidden;
width: 100%;
}
.cpn-pgallery-track {
display: flex;
transition: transform 0.35s ease;
will-change: transform;
}
.cpn-pgallery-cell {
flex: 0 0 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4/3;
max-height: 460px;
background: transparent;
}
.cpn-pgallery-cell img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.about-figure > .cpn-zoomable {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 460px;
width: auto;
height: auto;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
.cpn-pgallery-track {
transition: none;
}
}
.cpn-pgal-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 38px;
height: 38px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--line);
border-radius: 2px;
background: var(--surface);
color: var(--head);
font-size: 24px;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
opacity: 0.7;
transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.cpn-pgallery-main:hover .cpn-pgal-nav {
opacity: 1;
}
.cpn-pgal-nav:hover {
background: var(--bg-alt);
border-color: var(--accent);
}
.cpn-pgal-prev {
left: 8px;
}
.cpn-pgal-next {
right: 8px;
}
.cpn-pgallery-thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.cpn-pthumb {
width: 64px;
height: 64px;
padding: 0;
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
background: none;
cursor: pointer;
transition: border-color 0.15s;
}
.cpn-pthumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cpn-pthumb:hover {
border-color: var(--head);
}
.cpn-pthumb.is-active {
border-color: var(--accent);
}
.cpn-cols {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 2em;
margin-bottom: 1.75em;
align-items: normal;
}
.cpn-col {
flex-grow: 1;
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
}
.cpn-col.is-valign-top {
align-self: flex-start;
width: 100%;
}
.cpn-col.is-valign-center {
align-self: center;
width: 100%;
}
.cpn-col.is-valign-bottom {
align-self: flex-end;
width: 100%;
}
.cpn-col.is-valign-stretch {
align-self: stretch;
}
@media (min-width: 782px) {
.cpn-cols {
flex-wrap: nowrap;
}
.cpn-col {
flex-basis: 0;
flex-grow: 1;
}
.cpn-col[style*=flex-basis] {
flex-grow: 0;
}
}
@media (max-width: 781px) {
.cpn-col {
flex-basis: 100% !important;
}
}
@media (min-width: 901px) {
.cpn-col:has(> .cpn-pgallery),
.cpn-col:has(> .about-figure) {
align-self: stretch;
}
.cpn-col > .cpn-pgallery,
.cpn-col > .about-figure {
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
}
}
@media (min-width: 901px) {
.cpn-col:has(> .cpn-pgallery):has(> .hero-actions) {
align-self: start;
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
}
.cpn-col:has(> .hero-actions) > .cpn-pgallery {
position: static;
max-height: none;
}
.cpn-col:has(> .cpn-pgallery) > .hero-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 20px;
padding-bottom: 0;
}
.cpn-col:has(> .cpn-pgallery) > .hero-actions .btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 900px) {
.cpn-col:has(> .cpn-pgallery) {
order: -1;
}
}
.cpn-col .section {
padding: 0 0 34px;
background: transparent;
border-top: 0;
}
.cpn-col .section:last-child {
padding-bottom: 0;
}
.cpn-col .section > .wrap {
width: 100%;
max-width: none;
padding: 0;
margin: 0;
}
.cpn-col > .hero-actions {
padding-bottom: 34px;
}
.cpn-col > .eyebrow {
display: block;
}
.cpn-col > .pd-title {
margin-top: 6px;
}
.cpn-col > .pd-excerpt {
margin-bottom: 18px;
}
.cpn-col .cpn-pdspec--chart {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cpn-col .cpn-pdspec--swatch {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cpn-zoomable {
cursor: zoom-in;
}
.cpn-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(10, 20, 35, 0.92);
}
.cpn-lightbox.is-open {
display: flex;
}
.cpn-lb-img {
max-width: 92vw;
max-height: 88vh;
border-radius: 8px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.cpn-lb-close {
position: absolute;
top: 14px;
right: 20px;
font-size: 34px;
line-height: 1;
background: none;
border: 0;
color: #fff;
cursor: pointer;
}
.cpn-lb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 46px;
line-height: 1;
background: none;
border: 0;
color: #fff;
cursor: pointer;
padding: 0 18px;
opacity: 0.8;
}
.cpn-lb-nav:hover {
opacity: 1;
}
.cpn-lb-prev {
left: 6px;
}
.cpn-lb-next {
right: 6px;
}
.cert-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.cert-card {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 20px;
background: var(--surface);
}
.cert-card .cert-mark {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
display: grid;
place-items: center;
background: var(--bg-panel);
color: var(--head);
font-weight: 700;
margin-bottom: 12px;
border: 1px solid var(--line);
}
.cert-card h3 {
font-size: 15px;
margin: 0 0 4px;
}
.cert-card p {
font-size: 13px;
color: var(--ink-soft);
margin: 0;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
counter-reset: step;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.process-step {
padding: 24px 22px;
border-right: 1px solid var(--line);
background: var(--surface);
position: relative;
}
.process-step:last-child {
border-right: none;
}
.process-step::before {
counter-increment: step;
content: "0" counter(step);
font-size: 26px;
font-weight: 700;
color: var(--line-strong);
display: block;
margin-bottom: 8px;
}
.process-step h3 {
font-size: 15px;
margin: 0 0 4px;
}
.process-step p {
font-size: 13px;
color: var(--ink-soft);
margin: 0;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.value-card {
padding: 20px 0 0;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 16px) 2;
}
.value-card .value-num {
font-size: 16px;
margin: 0 0 4px;
color: var(--head);
font-weight: 700;
line-height: 1.25;
}
.value-card p {
color: var(--ink-soft);
margin: 0;
font-size: 14px;
}
.stat-inline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 8px;
}
.cpn-cols {
grid-template-columns: repeat(var(--cpn-cols, 3), 1fr);
}
.contact-layout {
display: grid;
grid-template-columns: 1.4fr 0.9fr;
gap: 32px;
align-items: start;
}
.form-panel {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.form-panel-head {
padding: 20px 26px;
border-bottom: 1px solid var(--line);
background: var(--bg-alt);
border-radius: var(--radius) var(--radius) 0 0;
}
.form-panel-head h2 {
margin: 0;
font-size: 18px;
}
.form-panel-head p {
margin: 4px 0 0;
font-size: 13px;
color: var(--ink-soft);
}
.contact-form {
padding: 26px;
}
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field.full {
grid-column: 1/-1;
}
.field label {
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
}
.field label .req {
color: var(--err);
}
.field input, .field select, .field textarea {
font-family: inherit;
font-size: 14px;
padding: 10px 12px;
color: var(--ink);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
}
.field textarea {
resize: vertical;
}
.field.error input, .field.error select, .field.error textarea {
border-color: var(--err);
}
.field .err-msg {
font-size: 12px;
color: var(--err);
display: none;
}
.field.error .err-msg {
display: block;
}
.form-foot {
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
flex-wrap: wrap;
}
.form-note {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--ok);
}
.form-note[hidden] {
display: none;
}
.info-panel {
display: flex;
flex-direction: column;
gap: 20px;
}
.info-card {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.info-card h2 {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
padding: 16px 20px;
background: var(--navy);
color: var(--white);
}
.info-list {
list-style: none;
margin: 0;
padding: 8px 20px;
}
.info-list li {
display: flex;
flex-direction: column;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.info-list li:last-child {
border-bottom: none;
}
.info-list b {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--steel);
font-weight: 700;
margin-bottom: 3px;
}
.info-list span {
color: var(--ink);
font-size: 14px;
}
.map-placeholder {
height: 180px;
background: var(--grad-navy);
position: relative;
display: grid;
place-items: center;
color: var(--steel-light);
font-size: 13px;
}
.map-placeholder::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 28px);
}
.map-placeholder span {
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 6px 12px;
border-radius: var(--radius-sm);
background: rgba(10, 44, 80, 0.4);
}
.site-footer {
background: var(--navy-dark);
color: var(--steel-light);
border-top: 3px solid var(--accent);
margin-top: 20px;
}
.footer-top {
display: grid;
grid-template-columns: 1.5fr 2.5fr;
gap: 48px;
padding: 48px 24px 40px;
}
.site-footer .footer-col h2 {
color: var(--white);
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-brand {
max-width: 340px;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--white);
margin-bottom: 14px;
}
.footer-logo .brand-mark {
width: 32px;
height: 32px;
font-size: 16px;
}
.footer-logo b {
font-size: 17px;
color: var(--white);
letter-spacing: -0.02em;
}
.footer-logo--img {
background: transparent;
padding: 0;
border-radius: 8px;
overflow: hidden;
}
.footer-logo--img .brand-logo-img {
height: 50px;
display: block;
mix-blend-mode: normal;
}
@media (max-width: 720px) {
.footer-logo--img .brand-logo-img {
height: 40px;
}
}
.footer-desc {
font-size: 13.5px;
margin: 0 0 18px;
line-height: 1.7;
color: var(--steel-light);
}
.footer-contact {
font-style: normal;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
line-height: 1.5;
}
.footer-contact b {
color: var(--white);
font-weight: 600;
margin-right: 4px;
}
.footer-contact a {
color: var(--steel-light);
}
.footer-contact a:hover {
color: var(--white);
text-decoration: underline;
}
.footer-sitemap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 28px;
}
.footer-col {
max-width: 320px;
}
.footer-top--nomap {
grid-template-columns: 1fr;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.footer-col a {
color: var(--steel-light);
font-size: 13.5px;
}
.footer-col a:hover {
color: var(--white);
text-decoration: underline;
}
.footer-col .sub-menu {
list-style: none;
margin: 6px 0 2px;
padding: 0 0 0 14px;
border-left: 1px solid var(--steel-dark, rgba(255, 255, 255, 0.14));
display: flex;
flex-direction: column;
gap: 7px;
}
.footer-col .sub-menu a {
font-size: 12.5px;
color: var(--steel);
}
.footer-dropdown > .sub-menu {
margin-top: 8px;
}
.footer-dropdown-label {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--steel-light);
font-size: 13.5px;
user-select: none;
}
.footer-dropdown-label::-webkit-details-marker {
display: none;
}
.footer-dropdown-label:hover {
color: var(--white);
}
.footer-dropdown-label:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 3px;
}
.footer-caret {
font-size: 10px;
line-height: 1;
transition: transform 0.18s ease;
}
.footer-dropdown[open] > .footer-dropdown-label .footer-caret {
transform: rotate(180deg);
}
.cpn-carousel-section {
border-top: 1px solid var(--line);
}
.cpn-carousel-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.cpn-carousel-head .section-head {
margin-bottom: 0;
}
.cpn-carousel-nav {
display: flex;
align-items: center;
gap: 16px;
flex: none;
}
.cpn-carousel-nav[hidden] {
display: none;
}
.cpn-carousel-btns {
display: flex;
gap: 8px;
}
.cpn-cbtn {
width: 40px;
height: 40px;
border-radius: 2px;
cursor: pointer;
background: transparent;
border: 1px solid var(--hair, var(--line-strong));
color: var(--head);
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
outline: 1px dashed transparent;
outline-offset: -5px;
transition: border-color 0.16s ease, outline-color 0.16s ease, outline-offset 0.16s ease, color 0.16s ease;
}
.cpn-cbtn:hover {
border-color: var(--thread, var(--accent));
outline-color: rgba(242, 140, 40, 0.5);
outline-offset: -4px;
color: var(--accent-dark);
}
.cpn-cbtn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.cpn-carousel {
position: relative;
}
.cpn-carousel-rail {
position: relative;
height: 1px;
margin-top: 24px;
background: var(--hair, var(--line));
}
.cpn-carousel-thread {
position: absolute;
left: 0;
top: -1px;
height: 3px;
width: 0;
background: var(--thread, var(--accent));
transition: width 0.18s linear, left 0.18s linear;
}
@media (prefers-reduced-motion: reduce) {
.cpn-carousel-thread {
transition: none;
}
}
.section--navy .cpn-cbtn {
border-color: rgba(255, 255, 255, 0.28);
color: var(--white);
}
.section--navy .cpn-cbtn:hover {
border-color: var(--accent);
color: var(--accent);
}
.section--navy .cpn-carousel-rail {
background: rgba(255, 255, 255, 0.2);
}
.cpn-carousel-track {
list-style: none;
margin: 0;
padding: 4px;
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
}
.cpn-carousel-track::-webkit-scrollbar {
display: none;
}
.cpn-carousel-track.is-tight {
justify-content: center;
}
.cpn-carousel-track.is-dragging {
cursor: grabbing;
user-select: none;
scroll-snap-type: none;
scroll-behavior: auto;
}
.cpn-card {
flex: 0 0 clamp(220px, 24%, 280px);
scroll-snap-align: start;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md, 10px);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.cpn-carousel-track > .cat-card {
flex: 0 0 clamp(230px, 26%, 300px);
scroll-snap-align: start;
}
@media (max-width: 900px) {
.cpn-carousel-track > .cat-card {
flex-basis: clamp(200px, 44%, 260px);
}
}
@media (max-width: 560px) {
.cpn-carousel-track > .cat-card {
flex-basis: 80%;
}
}
.cpn-card:hover {
box-shadow: 0 12px 30px rgba(20, 43, 74, 0.12);
transform: translateY(-3px);
}
.cpn-card-media {
display: block;
aspect-ratio: 4/3;
background: var(--bg-alt);
position: relative;
overflow: hidden;
}
.cpn-card-media.has-img::before {
content: "";
position: absolute;
inset: 0;
background: var(--card-img) center/cover no-repeat;
filter: blur(16px) saturate(1.15);
transform: scale(1.18);
}
.cpn-card-media img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cpn-card-ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--head);
background: linear-gradient(135deg, var(--bg-alt), #dbe3ee);
}
.cpn-card-body {
padding: 14px 15px 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.cpn-card-title {
font-size: 15px;
line-height: 1.35;
margin: 0;
}
.cpn-card-title a {
color: var(--head);
}
.cpn-card-desc {
font-size: 12.5px;
color: var(--steel);
margin: 0;
flex: 1;
}
.cpn-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 4px;
}
.cpn-card-price {
font-weight: 700;
color: var(--head);
font-size: 16px;
}
.cpn-card-price small {
font-weight: 500;
color: var(--steel);
font-size: 11px;
}
@media (max-width: 900px) {
.cpn-card {
flex-basis: clamp(200px, 42%, 260px);
}
}
@media (max-width: 560px) {
.cpn-card {
flex-basis: 78%;
}
.cpn-carousel-head {
gap: 16px;
margin-bottom: 22px;
}
.cpn-carousel-nav {
width: 100%;
justify-content: space-between;
}
}
.cat-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 20px;
}
.cat-grid--center {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.cat-grid--center > .cat-card {
flex: 0 1 260px;
}
@media (max-width: 560px) {
.cat-grid--center > .cat-card {
flex-basis: calc(50% - 10px);
}
}
.cat-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md, 12px);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.cat-card:hover {
box-shadow: 0 14px 34px rgba(20, 43, 74, 0.14);
transform: translateY(-3px);
}
.cat-card-media {
display: block;
aspect-ratio: 4/3;
background: var(--bg-alt);
position: relative;
overflow: hidden;
}
.cat-card-media.has-img::before {
content: "";
position: absolute;
inset: 0;
background: var(--card-img) center/cover no-repeat;
filter: blur(16px) saturate(1.15);
transform: scale(1.18);
}
.cat-card-media img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cat-card-ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 22px;
letter-spacing: 0.02em;
color: var(--head);
background: linear-gradient(135deg, var(--navy-soft, #e7ecf3), #c6d2e2);
text-align: center;
padding: 12px;
}
.cat-card-ph-all {
font-size: 40px;
color: #fff;
background: linear-gradient(135deg, var(--navy), var(--navy-dark));
}
.cat-card-body {
padding: 15px 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cat-card-title {
margin: 0;
font-size: 17px;
}
.cat-card-title a {
color: var(--head);
}
.cat-card-count {
margin: 0;
font-size: 13px;
color: var(--steel);
}
.cat-card-all {
border-style: dashed;
border-color: var(--line-strong);
}
.cat-chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cpn-occtree {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 26px 32px;
}
.cpn-occtree-branch {
border-top: 2px solid var(--accent);
padding-top: 14px;
}
.cpn-occtree-title {
font-size: 17px;
margin: 0 0 10px;
}
.cpn-occtree-title a {
color: var(--head);
text-decoration: none;
}
.cpn-occtree-title a:hover {
color: var(--accent-dark);
}
.cpn-occtree-shelves {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 7px;
}
.cpn-occtree-shelves a {
color: var(--ink-soft);
text-decoration: none;
font-size: 14px;
}
.cpn-occtree-shelves a:hover {
color: var(--accent-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.section--navy .cpn-occtree-title a {
color: var(--white);
}
.section--navy .cpn-occtree-shelves a {
color: rgba(255, 255, 255, 0.82);
}
.cat-chip-item {
margin: 0;
}
.cat-chip {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 14px 9px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--head);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cat-chip:hover {
border-color: var(--accent);
box-shadow: 0 6px 16px rgba(20, 43, 74, 0.1);
transform: translateY(-1px);
}
.cat-chip-icon {
display: inline-flex;
color: var(--accent);
}
.cat-chip-icon svg {
width: 24px;
height: 24px;
}
.cat-chip-icon .cpn-icon-mask {
width: 24px;
height: 24px;
}
.cat-chip-icon img {
display: block;
width: 24px;
height: 24px;
object-fit: contain;
}
.cat-chip-label {
font-weight: 600;
font-size: 14.5px;
}
.cat-chip-all {
border-style: dashed;
border-color: var(--line-strong);
}
.cat-chip-all .cat-chip-icon {
color: var(--head);
font-size: 18px;
line-height: 1;
}
.section-alt .cat-chips {
gap: 14px;
}
.section-alt .cat-chip {
flex-direction: column;
justify-content: flex-start;
gap: 12px;
padding: 20px 18px 18px;
min-width: 132px;
border-radius: 16px;
}
.section-alt .cat-chip-icon {
position: relative;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
}
.section-alt .cat-chip-icon::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: currentColor;
opacity: 0.12;
}
.section-alt .cat-chip-icon > * {
position: relative;
}
.section-alt .cat-chip-icon svg,
.section-alt .cat-chip-icon .cpn-icon-mask,
.section-alt .cat-chip-icon img {
width: 38px;
height: 38px;
}
.section-alt .cat-chip-label {
text-align: center;
line-height: 1.35;
}
.section-alt .cat-chip-all .cat-chip-icon {
font-size: 30px;
}
.home .section-alt .section-head {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.home .section-alt .section-head > p {
margin-left: auto;
margin-right: auto;
}
.home .section-alt .section-head h2::after {
left: 50%;
transform: translateX(-50%);
}
.home .section-alt .cat-chips {
justify-content: center;
}
.home .section-alt .hero-actions {
justify-content: center;
}
.cpn-grid-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.cpn-grid-tools {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
#gridSort {
padding: 9px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
font-family: inherit;
font-size: 14px;
}
.cpn-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.cpn-grid .cpn-card {
flex: initial;
width: auto;
}
.cpn-grid-empty {
grid-column: 1/-1;
text-align: center;
padding: 40px;
color: var(--steel);
}
.cpn-pager {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 30px 0 4px;
}
.cpn-pager-btn,
.cpn-pager .page-numbers {
min-width: 40px;
height: 40px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--ink);
border-radius: 10px;
font: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cpn-pager-btn:hover:not(:disabled):not(.is-current),
.cpn-pager a.page-numbers:hover {
border-color: var(--head);
color: var(--head);
}
.cpn-pager-btn.is-current,
.cpn-pager .page-numbers.current {
background: var(--navy);
border-color: var(--navy);
color: var(--white);
cursor: default;
}
.cpn-pager-btn:disabled {
opacity: 0.4;
cursor: default;
}
.cpn-pager .page-numbers.dots {
min-width: 0;
padding: 0 2px;
border: 0;
background: none;
color: var(--ink-soft);
user-select: none;
}
.cpn-pager-gap {
padding: 0 2px;
color: var(--ink-soft);
user-select: none;
}
.page-head-media {
position: relative;
overflow: hidden;
background: var(--navy);
border-bottom: none;
}
.page-head-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: var(--cat-img) center/cover no-repeat;
filter: blur(22px) brightness(0.75);
transform: scale(1.12);
}
.page-head-media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(rgba(20, 43, 74, 0.68), rgba(10, 42, 77, 0.78)), var(--cat-img);
background-size: cover, contain;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.page-head-media > * {
position: relative;
z-index: 2;
}
.page-head-media .crumbs, .page-head-media .crumbs a, .page-head-media h1, .page-head-media p {
color: #fff;
}
.page-head-media .crumbs a {
text-decoration: underline;
}
.btn-ghost-navy {
background: transparent;
color: var(--head);
border: 1px solid var(--line-strong);
}
.btn-ghost-navy:hover {
border-color: var(--head);
background: var(--bg-alt);
color: var(--head);
}
.lang-switch--footer {
margin: 20px 0 0;
}
.lang-switch--footer .lang-opt {
color: var(--steel-light);
}
.lang-switch--footer .lang-opt:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.08);
}
.lang-switch--footer .lang-opt.is-active {
color: var(--white);
background: rgba(255, 255, 255, 0.14);
}
.lang-switch--footer .lang-sep {
color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 900px) {
.hero-inner {
grid-template-columns: 1fr;
gap: 30px;
padding: 44px 0;
}
.hero h1 {
font-size: 32px;
}
.process-grid {
grid-template-columns: 1fr 1fr;
}
.process-step:nth-child(2) {
border-right: none;
}
.cert-grid {
grid-template-columns: 1fr 1fr;
}
.cert-badges {
grid-template-columns: 1fr 1fr;
}
.spec-strip-inner {
flex-direction: column;
}
.spec-strip-label {
width: auto;
align-self: stretch;
padding: 16px 28px 0;
border-right: none;
}
.spec-metrics {
grid-template-columns: 1fr 1fr;
}
.spec-metric:nth-child(2) {
border-right: none;
}
.spec-metric:nth-child(-n+2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.about-intro, .contact-layout {
grid-template-columns: 1fr;
}
.footer-top {
grid-template-columns: 1fr;
gap: 34px;
}
.footer-brand {
max-width: none;
}
}
@media (max-width: 720px) {
.nav-toggle {
display: block;
}
.main-nav {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
background: var(--surface);
border-bottom: 1px solid var(--line-strong);
box-shadow: var(--shadow-md);
padding: 8px;
}
.main-nav.open {
display: flex;
}
.site-header .mainbar-inner {
position: relative;
}
.main-nav a {
padding: 12px 14px;
border-radius: var(--radius-sm);
border-bottom: 1px solid var(--line);
}
.main-nav a:last-of-type {
border-bottom: none;
}
.main-nav a.active {
border-bottom-color: var(--line);
background: var(--bg-alt);
}
.main-nav .btn-quote {
margin: 8px 0 4px;
text-align: center;
}
.main-nav .lang-switch {
justify-content: center;
margin: 2px 0 4px;
}
.menu-parent {
display: flex;
flex-direction: column;
}
.menu-parent > a {
display: flex;
align-items: center;
justify-content: space-between;
}
.main-nav .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
margin: 0;
padding: 0 0 0 14px;
border: none;
box-shadow: none;
overflow: hidden;
max-height: 0;
transition: max-height 0.24s ease;
}
.menu-parent.is-open > .sub-menu {
max-height: 70vh;
border-bottom: 1px solid var(--line);
}
.main-nav .sub-menu a {
padding: 10px 14px;
color: var(--steel);
}
.nav-caret {
display: inline-block;
padding: 6px;
margin: -6px -6px -6px 8px;
transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
font-size: 13px;
}
.menu-parent.is-open > a .nav-caret {
transform: rotate(180deg);
}
.main-nav.open {
max-height: calc(100vh - 130px);
overflow-y: auto;
}
.topbar-tag {
display: none;
}
.topbar-inner {
justify-content: center;
}
.process-grid, .cert-grid, .values-grid, .stat-inline {
grid-template-columns: 1fr;
}
.process-step {
border-right: none;
border-bottom: 1px solid var(--line);
}
.process-step:last-child {
border-bottom: none;
}
.capabilities {
grid-template-columns: 1fr;
}
.cap-item {
border-right: none;
}
.cap-item:nth-child(odd) {
border-right: none;
}
.cap-item:nth-last-child(2) {
border-bottom: 1px solid var(--line);
}
.cert-strip {
flex-direction: column;
gap: 16px;
}
.cert-badges {
grid-template-columns: 1fr;
}
.footer-sitemap {
grid-template-columns: 1fr 1fr;
}
.field-grid {
grid-template-columns: 1fr;
}
.spec-head {
display: none;
}
.spec-row {
grid-template-columns: 64px 1fr;
}
.spec-price {
grid-column: 2;
text-align: left;
}
}
@media (max-width: 480px) {
.spec-metrics {
grid-template-columns: 1fr;
}
.spec-metric {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.spec-metric:last-child {
border-bottom: none;
}
.footer-sitemap {
grid-template-columns: 1fr;
}
.hero-facts dl {
grid-template-columns: 1fr;
}
}
.section--navy {
background: var(--navy);
color: var(--white);
}
.section--navy h2, .section--navy h3 {
color: var(--white);
}
.section--navy .eyebrow {
color: var(--steel-light);
}
.section--navy p {
color: rgba(255, 255, 255, 0.85);
}
.cpn-section-body {
max-width: 760px;
}
.cpn-section-body p {
margin: 0 0 14px;
}
.cpn-imgtext {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.cpn-imgtext--right .cpn-imgtext-media {
order: 2;
}
.cpn-imgtext-media img {
width: 100%;
height: auto;
border-radius: var(--radius-md, 10px);
display: block;
}
.cpn-imgtext-body h2 {
margin-top: 0;
}
.cpn-imgtext-body .btn {
margin-top: 18px;
}
.cpn-cta {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.cpn-cta h2 {
margin-top: 0;
}
.cpn-cta p {
margin: 0 auto 22px;
max-width: 52ch;
}
@media (max-width: 720px) {
.cpn-imgtext {
grid-template-columns: 1fr;
gap: 24px;
}
.cpn-imgtext--right .cpn-imgtext-media {
order: 0;
}
}
.cpn-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 24px;
text-align: center;
}
.cpn-stat-val {
display: block;
font-size: 38px;
font-weight: 700;
line-height: 1.1;
color: var(--head);
}
.cpn-stat-val em {
font-style: normal;
color: var(--accent);
}
.cpn-stat-label {
display: block;
margin-top: 6px;
font-size: 13.5px;
color: var(--steel);
}
.section--navy .cpn-stat-val {
color: var(--white);
}
.section--navy .cpn-stat-label {
color: var(--steel-light);
}
.section--navy .cap-item {
color: var(--ink-soft);
}
.section--navy .cap-item h3 {
color: var(--head);
}
.section--navy .cap-item p {
color: var(--ink-soft);
}
.section--navy h1, .section--navy h4, .section--navy h5, .section--navy h6,
.section--navy li {
color: var(--white);
}
.section--navy a {
color: var(--accent);
}
.cpn-iconbox {
display: flex;
margin: 0 0 12px;
}
.cpn-iconbox.is-left {
justify-content: flex-start;
}
.cpn-iconbox.is-center {
justify-content: center;
}
.cpn-iconbox.is-right {
justify-content: flex-end;
}
.cpn-iconbox .cap-icon {
width: 52px;
height: 52px;
border-radius: 12px;
transition: background 0.18s, color 0.18s;
}
.cpn-iconbox .cpn-icon-img {
width: 70%;
height: 70%;
object-fit: contain;
display: block;
transition: filter 0.18s;
}
.section--navy .cpn-iconbox .cap-icon {
background: rgba(255, 255, 255, 0.14);
color: var(--white);
}
.section--navy .cap-icon .cpn-icon-img,
.section--navy .hl-icon .cpn-icon-img {
filter: brightness(0) invert(1);
}
.cpn-gcards {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
.cpn-gcards.cpn-cols {
grid-template-columns: repeat(var(--cpn-cols, 3), 1fr);
}
.cpn-gcard {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px;
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cpn-gcard .cpn-iconbox {
margin: 0 0 14px;
}
.cpn-gcard:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.cpn-gcard:hover .cpn-iconbox .cap-icon {
background: var(--navy);
color: var(--white);
border-color: var(--head);
}
.cpn-gcard:hover .cpn-iconbox .cap-icon .cpn-icon-img {
filter: brightness(0) invert(1);
}
.cpn-gcard-title, .cpn-gcard h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 6px;
color: var(--head);
}
.cpn-gcard-desc, .cpn-gcard p {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-soft);
}
.section--navy .cpn-gcard {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: none;
}
.section--navy .cpn-gcard-title, .section--navy .cpn-gcard h3 {
color: var(--white);
}
.section--navy .cpn-gcard-desc, .section--navy .cpn-gcard p {
color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 860px) {
.cpn-gcards, .cpn-gcards.cpn-cols {
grid-template-columns: 1fr;
}
}
@keyframes cpn-gcard-rise {
from {
opacity: 0;
translate: 0 16px;
}
to {
opacity: 1;
translate: none;
}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
body:not(.wp-admin):not(.editor-styles-wrapper) .cpn-gcards:not(.is-zig) > .cpn-gcard {
animation: cpn-gcard-rise linear both;
animation-timeline: view();
animation-range: entry 5% entry 75%;
}
body:not(.wp-admin):not(.editor-styles-wrapper) .cpn-gcards:not(.is-zig) > .cpn-gcard:nth-child(3n+2) {
animation-range: entry 17% entry 87%;
}
body:not(.wp-admin):not(.editor-styles-wrapper) .cpn-gcards:not(.is-zig) > .cpn-gcard:nth-child(3n) {
animation-range: entry 29% entry 99%;
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
body:not(.wp-admin):not(.editor-styles-wrapper) .cpn-gcards:not(.is-zig) > .cpn-gcard,
body:not(.wp-admin):not(.editor-styles-wrapper) .cpn-gcards:not(.is-zig) > .cpn-gcard:nth-child(3n+2),
body:not(.wp-admin):not(.editor-styles-wrapper) .cpn-gcards:not(.is-zig) > .cpn-gcard:nth-child(3n) {
animation-range: entry 5% entry 70%;
}
}
}
}
.cpn-occ-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 24px;
}
.cpn-occ-label {
font-size: 13px;
font-weight: 700;
color: var(--ink-soft);
margin-inline-end: 4px;
}
.cpn-occ-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 2px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--head);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cpn-occ-chip:hover {
border-color: var(--navy-soft);
background: var(--bg-alt);
}
.cpn-occ-chip.is-active {
background: var(--navy);
color: var(--white);
border-color: var(--head);
}
.cpn-occ-bar--block {
justify-content: center;
gap: 10px;
margin: 8px 0 0;
}
.cpn-occ-bar--block .cpn-occ-label {
display: none;
}
.cpn-occ-bar--block .cpn-occ-chip {
padding: 9px 18px;
font-size: 14.5px;
}
.section--navy .cpn-occ-label {
color: rgba(255, 255, 255, 0.7);
}
.section--navy .cpn-occ-chip {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
color: var(--white);
}
.section--navy .cpn-occ-chip:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.32);
}
.section--navy .cpn-occ-chip.is-active {
background: var(--accent);
color: var(--white);
border-color: var(--accent);
}
@media (max-width: 560px) {
.cpn-occ-label {
width: 100%;
margin: 0 0 4px;
}
}
h1, h2, h3 {
text-wrap: balance;
}
h1 {
letter-spacing: -0.015em;
}
h2 {
letter-spacing: -0.01em;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
outline: none;
}
::selection {
background: var(--navy);
color: var(--white);
}
.section--navy .cap-icon, .section--navy .hl-icon {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
color: var(--white);
}
.section--navy .cap-item:hover .cap-icon, .section--navy .cpn-gcard:hover .cap-icon {
background: var(--accent);
border-color: var(--accent);
color: var(--white);
}
.btn-primary, .btn-quote, .cta-section .btn-primary {
box-shadow: 0 1px 2px rgba(20, 43, 74, 0.14);
}
.btn {
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn-primary:active, .btn-quote:active, .btn-ghost:active, .btn-outline:active, .btn-ghost-navy:active {
transform: translateY(1px);
}
.section p a, .hl-desc a, .cap-item p a {
text-underline-offset: 3px;
text-decoration-color: var(--line-strong);
}
.section p a:hover, .hl-desc a:hover, .cap-item p a:hover {
text-decoration-color: var(--accent);
color: var(--accent-dark);
}
@media (prefers-reduced-motion: reduce) {
.cpn-gcard, .cpn-gcard:hover {
transform: none;
}
.btn-primary:active, .btn-quote:active {
transform: none;
}
}
.hl-desc, .cap-item p, .cpn-gcard-desc, .cpn-gcard p {
color: var(--ink-soft);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.cap-icon, .hl-icon {
box-shadow: inset 0 0 0 1px rgba(20, 43, 74, 0.02);
}
.cap-item, .hl-card {
align-items: center;
}
.cpn-gcard .cpn-iconbox {
margin-bottom: 12px;
}
.herox-inner {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 40px;
align-items: center;
padding: 66px 0;
min-height: 440px;
}
.herox-main {
position: relative;
z-index: 1;
max-width: 640px;
}
.herox-slide {
display: none;
}
.herox-slide.is-active {
display: block;
animation: hxRise 0.45s ease both;
}
@keyframes hxRise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
.herox-slide h1 {
color: var(--white);
font-size: 42px;
line-height: 1.3;
margin: 0 0 16px;
text-wrap: balance;
}
.herox-slide .hero-lead {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
max-width: 46ch;
margin: 0;
}
.herox-main .hero-actions {
margin-top: 24px;
}
.herox-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
.herox-tab {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 15px;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 2px;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.herox-tab::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gc, var(--accent));
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.herox-tab:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--white);
border-color: rgba(255, 255, 255, 0.4);
}
.herox-tab.is-active {
background: var(--surface);
color: var(--head);
border-color: var(--white);
}
.herox-stage {
position: relative;
min-height: 380px;
align-self: stretch;
}
.herox-figure {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
opacity: 0;
transform: scale(0.94);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.herox-figure.is-active {
opacity: 1;
transform: none;
}
.herox-figure::before {
content: "";
position: absolute;
bottom: 8%;
width: 74%;
height: 60%;
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--gc) 42%, transparent), transparent 70%);
filter: blur(6px);
opacity: 0.55;
z-index: 0;
}
.herox-svg {
position: relative;
z-index: 1;
width: clamp(180px, 62%, 330px);
height: auto;
color: var(--gc);
filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.35));
}
.herox-photo {
position: relative;
z-index: 1;
max-width: 92%;
max-height: 400px;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.herox-figcap {
position: relative;
z-index: 1;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 2px;
background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 900px) {
.herox-inner {
grid-template-columns: 1fr;
gap: 26px;
padding: 48px 0;
min-height: 0;
}
.herox-stage {
min-height: 300px;
order: 2;
}
.herox-main {
order: 1;
max-width: none;
}
.herox-slide h1 {
font-size: 32px;
}
}
@media (prefers-reduced-motion: reduce) {
.herox-slide.is-active {
animation: none;
}
.herox-figure {
transition: none;
}
}
.ind-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.ind-chip {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 10px 16px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--head);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 2px;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.ind-chip:hover {
border-color: var(--head);
}
.ind-chip.is-active {
background: var(--navy);
color: var(--white);
border-color: var(--head);
}
.ind-panels {
position: relative;
}
.ind-panel {
display: none;
}
.ind-panel.is-active {
display: block;
animation: hxRise 0.4s ease both;
}
.ind-panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.ind-panel-head h3 {
font-size: 20px;
margin: 0;
color: var(--head);
}
.ind-viewall {
font-size: 14px;
font-weight: 600;
color: var(--accent-dark);
white-space: nowrap;
}
.ind-viewall:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.ind-empty {
color: var(--ink-soft);
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.ind-panel.is-active {
animation: none;
}
}
@media (max-width: 560px) {
.ind-panel-head {
flex-direction: column;
gap: 4px;
}
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--navy-soft: #1b2f4a;
--line: #273c59;
--line-strong: #33507a;
--bg: #0e1a2b;
--bg-alt: #132339;
--bg-panel: #16273f;
--surface: #16273f;
--head: #e9eff7;
--ink: #e9eff7;
--ink-soft: #a7b6ca;
--steel: #9fb0c7;
--steel-light: #c7d3e2;
--shadow: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
--shadow-md: 0 2px 10px rgba(0,0,0,.45);
}
}
:root[data-theme=dark] {
--navy-soft: #1b2f4a;
--line: #273c59;
--line-strong: #33507a;
--bg: #0e1a2b;
--bg-alt: #132339;
--bg-panel: #16273f;
--surface: #16273f;
--head: #e9eff7;
--ink: #e9eff7;
--ink-soft: #a7b6ca;
--steel: #9fb0c7;
--steel-light: #c7d3e2;
--shadow: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
--shadow-md: 0 2px 10px rgba(0,0,0,.45);
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-left: 10px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 2px;
background: var(--surface);
color: var(--ink);
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover {
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.theme-toggle-sun {
display: none;
}
:root[data-theme=dark] .theme-toggle-moon {
display: none;
}
:root[data-theme=dark] .theme-toggle-sun {
display: inline;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) .theme-toggle-moon {
display: none;
}
:root:not([data-theme=light]) .theme-toggle-sun {
display: inline;
}
}
.brand-logo-img--dark {
display: none;
mix-blend-mode: normal;
}
:root[data-theme=dark] .site-header .brand-logo-img--light {
display: none;
}
:root[data-theme=dark] .site-header .brand-logo-img--dark {
display: block;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) .site-header .brand-logo-img--light {
display: none;
}
:root:not([data-theme=light]) .site-header .brand-logo-img--dark {
display: block;
}
}
.cpn-add-btn {
cursor: pointer;
}
.cpn-add-btn:active {
transform: translateY(1px);
}
.cpn-tray-fab {
position: fixed;
z-index: 1200;
right: 22px;
bottom: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border: none;
border-radius: 2px;
cursor: pointer;
background: var(--navy);
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
box-shadow: 0 10px 28px rgba(20, 43, 74, 0.32);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cpn-tray-fab:hover {
background: var(--navy-dark);
box-shadow: 0 14px 34px rgba(20, 43, 74, 0.4);
}
.cpn-tray-fab[hidden] {
display: none;
}
.cpn-tray-count[hidden] {
display: none;
}
.cpn-tray-fab-icon {
font-size: 18px;
line-height: 1;
}
.cpn-tray-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 2px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.cpn-tray-fab.is-bump {
animation: cpn-bump 0.4s ease;
}
@keyframes cpn-bump {
0% {
transform: scale(1);
}
30% {
transform: scale(1.14);
}
60% {
transform: scale(0.96);
}
100% {
transform: scale(1);
}
}
.cpn-tray-backdrop {
position: fixed;
inset: 0;
z-index: 1250;
background: rgba(10, 20, 35, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease, visibility 0.22s ease;
}
#cpn-tray-root.is-open .cpn-tray-backdrop {
opacity: 1;
visibility: visible;
}
.cpn-tray-drawer {
position: fixed;
z-index: 1300;
top: 0;
right: 0;
height: 100%;
width: min(400px, 92vw);
display: flex;
flex-direction: column;
background: var(--surface);
color: var(--ink);
box-shadow: -14px 0 40px rgba(0, 0, 0, 0.28);
transform: translateX(100%);
transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
#cpn-tray-root.is-open .cpn-tray-drawer {
transform: translateX(0);
}
.cpn-tray-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--line);
}
.cpn-tray-head h2 {
margin: 0;
font-size: 18px;
color: var(--head);
}
.cpn-tray-close {
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
color: var(--steel);
width: 34px;
height: 34px;
border-radius: 8px;
line-height: 1;
}
.cpn-tray-close:hover {
background: var(--bg-alt);
color: var(--head);
}
.cpn-tray-empty {
padding: 28px 20px;
color: var(--steel);
text-align: center;
font-size: 14px;
}
.cpn-tray-items {
flex: 1;
overflow-y: auto;
padding: 8px 14px;
}
.cpn-trow {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 6px;
border-bottom: 1px solid var(--line);
}
.cpn-trow-media {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
background: var(--bg-alt);
display: flex;
align-items: center;
justify-content: center;
}
.cpn-trow-media img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cpn-trow-ph {
font-size: 22px;
}
.cpn-trow-name {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--head);
line-height: 1.35;
margin-bottom: 6px;
}
.cpn-trow-name:hover {
text-decoration: underline;
}
.cpn-trow-qty {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid var(--line-strong, var(--line));
border-radius: 8px;
overflow: hidden;
}
.cpn-qbtn {
width: 30px;
height: 30px;
border: none;
background: var(--bg-alt);
color: var(--head);
font-size: 16px;
cursor: pointer;
line-height: 1;
}
.cpn-qbtn:hover {
background: var(--navy);
color: #fff;
}
.cpn-qinput {
width: 44px;
height: 30px;
border: none;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
text-align: center;
background: var(--surface);
color: var(--ink);
font-family: inherit;
font-size: 14px;
-moz-appearance: textfield;
}
.cpn-qinput::-webkit-outer-spin-button, .cpn-qinput::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cpn-trow-del {
border: none;
background: transparent;
color: var(--steel);
cursor: pointer;
font-size: 15px;
width: 30px;
height: 30px;
border-radius: 8px;
}
.cpn-trow-del:hover {
background: rgba(200, 40, 40, 0.12);
color: #c22;
}
.cpn-tray-foot {
display: flex;
gap: 10px;
padding: 16px 18px;
border-top: 1px solid var(--line);
}
.cpn-tray-foot .cpn-tray-quote {
flex: 1;
text-align: center;
}
.cpn-tray-foot .cpn-tray-clear {
white-space: nowrap;
}
body.cpn-tray-lock {
overflow: hidden;
}
.cpn-tray-toast {
position: fixed;
z-index: 1400;
left: 50%;
bottom: 84px;
transform: translate(-50%, 12px);
background: var(--navy);
color: #fff;
padding: 10px 18px;
border-radius: 2px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
pointer-events: none;
}
.cpn-tray-toast.is-show {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.cpn-mobile-cta {
display: none;
}
@media (max-width: 768px) {
.cpn-tray-fab {
display: none;
}
.cpn-mobile-cta {
position: fixed;
z-index: 1200;
left: 0;
right: 0;
bottom: 0;
display: flex;
background: var(--surface);
border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.cpn-mcta-item {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 2px;
border: none;
background: transparent;
cursor: pointer;
color: var(--head);
font-family: inherit;
font-size: 11px;
font-weight: 600;
text-decoration: none;
}
.cpn-mcta-ico {
font-size: 19px;
line-height: 1;
}
.cpn-mcta-primary {
color: #fff;
background: var(--accent);
border-radius: 10px;
margin: 0 4px;
}
.cpn-mcta-count {
position: absolute;
top: 0;
right: 22%;
min-width: 17px;
height: 17px;
padding: 0 5px;
font-size: 11px;
}
body {
padding-bottom: 64px;
}
}
@media (prefers-reduced-motion: reduce) {
.cpn-tray-drawer, .cpn-tray-backdrop, .cpn-tray-toast, .cpn-tray-fab {
transition: none;
}
.cpn-tray-fab.is-bump {
animation: none;
}
}
.cpn-tray-fab-icon i, .cpn-mcta-ico i, .cpn-trow-ph i, .cpn-add-btn i,
.cpn-tray-drawer i, .cpn-mobile-cta i, .nav-caret i {
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
}
.nav-caret i {
font-size: 0.82em;
}
.cpn-mobile-cta .fa-brands, .cpn-tray-drawer .fa-brands {
font-family: "Font Awesome 6 Brands" !important;
font-weight: 400 !important;
}
@media (prefers-reduced-motion: reduce) {
.nav-caret {
transition: none;
}
}
.cpn-listing {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.cpn-listing-main {
min-width: 0;
}
.cpn-filter {
position: sticky;
top: 86px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 14px;
}
.cpn-filter-title {
font-size: 15px;
font-weight: 700;
color: var(--head);
margin: 0 0 10px;
padding: 0 6px;
}
.cpn-filter-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 2px;
}
.cpn-filter-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border-radius: 9px;
color: var(--ink-soft);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.cpn-filter-link:hover {
background: var(--bg-alt);
color: var(--head);
}
.cpn-filter-link.is-active {
background: var(--navy);
color: var(--white);
}
@media (max-width: 900px) {
.cpn-listing {
display: block;
}
.cpn-filter {
position: static;
margin: 0 0 18px;
padding: 12px;
}
.cpn-filter-title {
margin-bottom: 8px;
}
.cpn-filter-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cpn-filter-link {
border: 1px solid var(--line);
border-radius: 2px;
padding: 6px 12px;
}
}
.editor-styles-wrapper .cpn-listing,
.block-editor-block-list__layout .cpn-listing {
display: block;
}
.cpn-listing > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.cpn-listing > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
min-width: 0;
margin: 0;
}
.editor-styles-wrapper .cpn-pd-preview a,
.editor-styles-wrapper .cpn-pd-preview button,
.editor-styles-wrapper a.btn,
.editor-styles-wrapper .hero-actions a,
.editor-styles-wrapper .btn-quote,
.editor-styles-wrapper .cpn-filter-link,
.editor-styles-wrapper .cpn-occ-chip,
.editor-styles-wrapper .cpn-card a,
.editor-styles-wrapper .cat-card a,
.editor-styles-wrapper .crumbs a,
.editor-styles-wrapper .cpn-add-btn {
pointer-events: none;
cursor: default;
}
.editor-styles-wrapper .cpn-pd-preview [contenteditable=true] {
pointer-events: auto;
cursor: text;
}
.editor-styles-wrapper {
--navy-soft: #e7ecf3;
--line: #e7d6b8;
--line-strong: #d8c199;
--bg: #fffbf4;
--bg-alt: #f5e6ce;
--bg-panel: #eedcbd;
--surface: #ffffff;
--head: var(--navy);
--ink: #1b2735;
--ink-soft: #46586c;
--steel: #7a6a4e;
--steel-light: #c3ad82;
--shadow: 0 1px 2px rgba(20,43,74,.08), 0 1px 3px rgba(20,43,74,.06);
--shadow-md: 0 2px 8px rgba(20,43,74,.10);
}
@font-face {
font-family: "Anuphan";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/anuphan-var-thai.woff2) format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Anuphan";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/anuphan-var-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bai Jamjuree";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/bai-jamjuree-600-thai.woff2) format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Bai Jamjuree";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/bai-jamjuree-600-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bai Jamjuree";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/bai-jamjuree-700-thai.woff2) format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Bai Jamjuree";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/bai-jamjuree-700-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-400-thai.woff2) format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-400-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-500-thai.woff2) format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-500-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-600-thai.woff2) format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-600-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-700-thai.woff2) format("woff2");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: "Sarabun";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://xn--12cmh4bzac5a6ll7c.com/wp-content/themes/chudpanakngan/fonts/sarabun-700-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--font: "Sarabun","Noto Sans Thai","Leelawadee UI","Segoe UI",Tahoma,system-ui,sans-serif;
--font-display: "Bai Jamjuree","Anuphan","Segoe UI",Tahoma,sans-serif;
--stitch: 9px;
--thread: var(--accent);
--grid-line: rgba(20,43,74,.045);
--hair: rgba(20,43,74,.16);
--shelf-tint: rgba(242,140,40,.16);
--shelf-tint-hover: rgba(242,140,40,.30);
--radius: 2px;
--radius-sm: 2px;
--radius-md: 3px;
--shadow: 0 1px 0 rgba(20,43,74,.05);
--shadow-md: 0 10px 30px -22px rgba(20,43,74,.85);
}
:root[data-theme=dark] {
--grid-line: rgba(199,211,226,.04);
--hair: rgba(199,211,226,.20);
--shelf-tint: rgba(242,140,40,.22);
--shelf-tint-hover: rgba(242,140,40,.38);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--grid-line: rgba(199,211,226,.04);
--hair: rgba(199,211,226,.20);
--shelf-tint: rgba(242,140,40,.22);
--shelf-tint-hover: rgba(242,140,40,.38);
}
}
body {
font-size: 16px;
}
h1, h2, h3, h4, .btn, .brand-text b, .cat-card-title, .cpn-card-title, .nav-link, .main-nav a {
font-family: var(--font-display);
letter-spacing: -0.015em;
}
h1 {
font-size: clamp(34px, 4.6vw, 62px);
line-height: 1.06;
}
h2 {
font-size: clamp(24px, 2.5vw, 34px);
line-height: 1.3;
margin-bottom: 0.6em;
}
h3 {
font-size: 17px;
letter-spacing: -0.01em;
}
.hero h1 {
font-size: clamp(36px, 5.2vw, 66px);
line-height: 1.3;
margin-bottom: 20px;
}
.hero-lead, .section-head p {
font-size: 16.5px;
max-width: 56ch;
line-height: 1.65;
}
.main-nav a, .nav-link {
font-weight: 600;
letter-spacing: -0.005em;
}
.eyebrow {
display: none !important;
}
.section-head h2, .cpn-sec-head h2 {
position: relative;
padding-bottom: 16px;
}
.section-head h2::after, .cpn-sec-head h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 76px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
}
:is(.section-head, .cpn-sec-head).has-text-align-center {
text-align: center;
}
:is(.section-head, .cpn-sec-head).has-text-align-right {
text-align: right;
}
.cpn-carousel-head .section-head:is(.has-text-align-center, .has-text-align-right) {
flex: 1 1 auto;
max-width: none;
}
:is(.section-head, .cpn-sec-head) h2.has-text-align-center,
:is(.section-head, .cpn-sec-head).has-text-align-center h2 {
width: fit-content;
margin-inline: auto;
}
:is(.section-head, .cpn-sec-head) h2.has-text-align-center::after,
:is(.section-head, .cpn-sec-head).has-text-align-center h2::after {
left: 0;
right: 0;
width: auto;
}
:is(.section-head, .cpn-sec-head).has-text-align-center p {
margin-inline: auto;
}
:is(.section-head, .cpn-sec-head).has-text-align-right p {
margin-inline-start: auto;
margin-inline-end: 0;
}
:is(.section-head, .cpn-sec-head) h2.has-text-align-right::after,
:is(.section-head, .cpn-sec-head).has-text-align-right h2::after {
left: auto;
right: 0;
}
hr, .stitch-rule {
border: 0;
height: 2px;
margin: 0;
background-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px);
}
.section {
position: relative;
padding: clamp(36px, 4.8vw, 84px) 0;
}
.section + .section {
border-top: none;
}
.home-why-choose .capabilities,
.home-why-choose .capabilities.cpn-cols {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 20px;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.home-why-choose .cap-item,
.home-why-choose .cap-item:nth-child(odd),
.home-why-choose .cap-item:nth-last-child(-n+2) {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
grid-column: span 4;
grid-row: auto;
gap: 20px;
min-width: 0;
padding: 24px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
border-image: none;
text-align: start;
}
.home-why-choose .cap-item:first-child {
grid-column: span 6;
grid-row: span 2;
justify-content: center;
gap: 28px;
padding: 32px;
background: var(--navy);
border-color: var(--navy);
}
.home-why-choose .cap-item:nth-child(2),
.home-why-choose .cap-item:nth-child(3) {
grid-column: span 6;
flex-direction: row;
align-items: center;
gap: 24px;
}
.home-why-choose .cap-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
margin: 0;
padding: 0;
background: transparent;
border: 0;
color: var(--thread);
}
.home-why-choose .cap-item:hover .cap-icon {
background: transparent;
color: var(--thread);
border: 0;
}
.home-why-choose .cap-icon.cap-icon--photo,
.home-why-choose .cap-item:hover .cap-icon.cap-icon--photo {
flex: 0 0 auto;
align-self: center;
width: min(300px, 100%);
height: auto;
aspect-ratio: 4/3;
min-height: 0;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
overflow: hidden;
}
.home-why-choose .cap-item:first-child .cap-icon--photo {
width: min(348px, 100%);
}
.home-why-choose .cap-item:nth-child(2) .cap-icon--photo,
.home-why-choose .cap-item:nth-child(3) .cap-icon--photo {
flex: 0 0 184px;
width: 184px;
}
.home-why-choose .cpn-cap-photo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: none;
}
.home-why-choose .cap-item:hover .cap-icon .cpn-cap-photo {
filter: none;
}
.home-why-choose .cap-body {
flex: 0 1 auto;
min-width: 0;
}
.home-why-choose .cap-item h3 {
margin: 0 0 12px;
font-size: 18px;
line-height: 1.5;
}
.home-why-choose .cap-item:first-child h3 {
color: #fffbf4;
font-size: 24px;
}
.home-why-choose .cap-item p {
display: block;
max-width: 60ch;
overflow: visible;
-webkit-line-clamp: unset;
font-size: 15px;
line-height: 1.75;
}
.home-why-choose .cap-item:first-child p {
color: #fffbf4;
}
@media (max-width: 1100px) {
.home-why-choose .capabilities,
.home-why-choose .capabilities.cpn-cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.home-why-choose .cap-item:nth-child(n) {
grid-column: span 1;
grid-row: auto;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 20px;
padding: 24px;
}
.home-why-choose .cap-item:first-child {
grid-column: span 2;
}
.home-why-choose .cap-item:nth-child(n) .cap-icon--photo {
flex: 0 0 auto;
width: min(300px, 100%);
height: auto;
}
.home-why-choose .cap-item:first-child .cap-icon--photo {
width: min(348px, 100%);
}
.home-why-choose .cap-item:last-child {
grid-column: span 2;
flex-direction: row;
align-items: center;
gap: 24px;
}
.home-why-choose .cap-item:last-child .cap-icon--photo {
flex: 0 0 240px;
width: 240px;
}
}
@media (max-width: 760px) {
.home-why-choose .capabilities,
.home-why-choose .capabilities.cpn-cols {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.home-why-choose .cap-item:nth-child(n) {
grid-column: span 1;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 24px;
}
.home-why-choose .cap-item:nth-child(n) .cap-icon--photo {
flex: 0 0 auto;
width: min(300px, 100%);
}
.home-why-choose .cap-item h3 {
font-size: 18px;
}
.home-why-choose .cap-item:first-child h3 {
font-size: 22px;
}
}
.section > *, .page-title > *, .page-head > * {
position: relative;
z-index: 1;
}
.site-header {
border-bottom: 0;
}
.topbar {
background: var(--navy-dark);
}
.mainbar {
border-bottom: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px) 2;
}
.mainbar-inner {
height: 74px;
max-width: 1560px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 48px);
}
.btn {
border-radius: 2px;
font-weight: 600;
padding: 13px 22px;
letter-spacing: 0;
transition: background 0.16s ease, color 0.16s ease, outline-offset 0.16s ease, border-color 0.16s ease;
}
.btn-primary {
background: var(--accent);
color: #1a1206;
border: 1px solid var(--accent-dark);
outline: 1px dashed rgba(26, 18, 6, 0.55);
outline-offset: -5px;
}
.btn-primary:hover {
background: var(--accent-dark);
color: #fff;
outline-offset: -4px;
}
.btn-outline {
background: transparent;
color: var(--head);
border: 1px solid var(--hair);
outline: 1px dashed transparent;
outline-offset: -5px;
}
.btn-outline:hover {
border-color: var(--thread);
outline-color: rgba(242, 140, 40, 0.5);
outline-offset: -4px;
color: var(--head);
}
.hero .btn-primary {
background: var(--accent);
color: #1a1206;
border-color: var(--accent);
}
.hero .btn-outline {
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
.hero .btn-outline:hover {
color: #fff;
border-color: var(--thread);
}
.cat-card, .cpn-card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.cat-card:hover, .cpn-card:hover {
box-shadow: none;
transform: none;
}
.cat-card-media, .cpn-card-media {
display: block;
position: relative;
border-radius: 0;
overflow: hidden;
aspect-ratio: 4/5;
background: var(--bg-alt);
border: 1px solid var(--hair);
}
.cat-card-media img, .cpn-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cat-card:hover .cat-card-media img, .cpn-card:hover .cpn-card-media img {
transform: scale(1.035);
}
.cat-card-media::after, .cpn-card-media::after {
content: "";
position: absolute;
right: 9px;
top: 9px;
width: 11px;
height: 11px;
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 11px 1px, 1px 11px;
background-position: center, center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.2s ease;
}
.cat-card:hover .cat-card-media::after, .cpn-card:hover .cpn-card-media::after {
opacity: 1;
}
.cat-card-media:not(.has-img), .cpn-card-media:not(.has-img) {
background: var(--navy);
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px);
}
.cat-card-ph, .cpn-card-ph {
position: absolute;
inset: 0;
font-size: 0;
color: transparent;
display: grid;
place-items: center;
}
.cat-card-ph::after, .cpn-card-ph::after {
content: "";
width: 26px;
height: 26px;
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
background-size: 26px 1px, 1px 26px;
background-position: center, center;
background-repeat: no-repeat;
transform: rotate(45deg);
}
.cat-card-ph-all::after {
transform: none;
}
.cat-card-body, .cpn-card-body {
position: relative;
background: transparent;
padding: 14px 0 0;
border: 0;
}
.cat-card-title, .cpn-card-title {
font-size: 15.5px;
font-weight: 600;
margin: 0 0 4px;
line-height: 1.35;
}
.cat-card-title a, .cpn-card-title a {
color: var(--head);
}
.cat-card:hover .cat-card-title a, .cpn-card:hover .cpn-card-title a {
color: var(--accent-dark);
}
.cat-card-count, .cpn-card-desc {
margin: 0;
font-size: 13px;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.cpn-card-foot {
padding: 12px 0 0;
border-top: 0;
margin-top: auto;
}
.ind-chip {
border-radius: 2px;
border: 1px solid var(--hair);
background: transparent;
font-family: var(--font-display);
font-weight: 600;
padding: 9px 14px;
}
.ind-chip.is-active {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.ind-panel {
border: 0;
background: transparent;
padding: 0;
box-shadow: none;
}
.ind-panel-head {
border-bottom: 1px solid var(--hair);
padding-bottom: 12px;
margin-bottom: 24px;
}
.cpn-iconbox, .cpn-gcard {
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 22px 0 0;
border-top: 1px solid var(--hair);
}
.cpn-iconbox:hover, .cpn-gcard:hover {
box-shadow: none;
transform: none;
}
.cap-icon, .cpn-iconbox svg, .cpn-gcard svg {
color: var(--thread);
}
::selection {
background: var(--navy);
color: #fffbf4;
}
:root[data-theme=dark] ::selection {
background: var(--accent);
color: #141414;
}
input, textarea, select {
caret-color: var(--thread);
border-radius: 2px;
}
html {
scrollbar-color: var(--navy) var(--bg-alt);
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 11px;
height: 11px;
}
::-webkit-scrollbar-track {
background: var(--bg-alt);
}
::-webkit-scrollbar-thumb {
background: var(--navy);
border: 3px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-dark);
}
a {
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
:where(table, .cat-card-count, time) {
font-variant-numeric: tabular-nums;
}
@keyframes cpn-thread-in {
from {
background-size: 0 2px;
}
to {
background-size: 100% 2px;
}
}
.hero-inner {
position: relative;
}
.hero-inner::after {
content: "";
display: block;
height: 2px;
margin-top: 30px;
width: min(420px, 80%);
background-repeat: no-repeat;
background-size: 100% 2px;
background-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
animation: cpn-thread-in 1.1s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-inner::after {
animation: none;
}
.cat-card-media img, .cpn-card-media img {
transition: none;
}
}
.cat-card-media, .cpn-card-media {
aspect-ratio: 4/3;
background: var(--bg-alt);
}
.cat-card-media img, .cpn-card-media img {
object-fit: contain;
}
.cat-card-media.has-img::before, .cpn-card-media.has-img::before {
display: none;
}
.cat-card-ph, .cpn-card-ph, .cat-card-ph-all {
background: none;
padding: 0;
}
.cat-card-all {
border-style: none;
}
.cat-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 40px 24px;
}
.cpn-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 40px 24px;
}
.hl-strip {
background: transparent;
border-bottom: 1px solid var(--hair);
}
.hl-card {
padding: 26px 0 28px;
align-items: flex-start;
}
.hl-grid {
column-gap: 48px;
}
.hl-card + .hl-card::before {
left: -24px;
}
.hl-body {
flex: 1 1 auto;
min-width: 0;
}
.hl-heading {
padding: 26px 0 0;
font-size: 17px;
}
.hl-card + .hl-card::before {
background: var(--hair);
}
.hl-icon {
background: transparent;
border: 0;
border-radius: 0;
color: var(--thread);
width: auto;
height: auto;
margin-bottom: 2px;
}
.hl-card:hover .hl-icon {
background: transparent;
color: var(--accent-dark);
border: 0;
}
.hl-title {
font-size: 16px;
}
.cert-strip {
border: 0;
background: transparent;
padding: 0;
align-items: stretch;
}
.cert-strip-label {
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 0;
text-transform: none;
padding-right: 26px;
border-right: 1px solid var(--hair);
display: flex;
align-items: center;
}
.cert-badges {
gap: 0;
}
.cert-badge {
padding: 14px 22px;
border-left: 1px solid var(--hair);
background: transparent;
border-radius: 0;
align-items: baseline;
gap: 10px;
}
.cert-badge:first-child {
border-left: 0;
}
.cert-badge-code {
font-family: var(--font-display);
font-weight: 700;
font-size: 23px;
color: var(--head);
background: transparent;
padding: 0;
border: 0;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.cert-badge-body b {
font-size: 13px;
color: var(--head);
font-weight: 600;
}
.cert-badge-body small {
color: var(--ink-soft);
}
.cert-card {
background: transparent;
border: 0;
border-top: 1px solid var(--hair);
border-radius: 0;
padding: 20px 0 0;
}
.cert-card .cert-mark {
background: transparent;
border: 0;
color: var(--thread);
border-radius: 0;
}
.herox-svg {
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}
.herox-figcap {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0;
border: 0;
border-top: 2px solid transparent;
background: transparent;
border-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px) 2;
border-radius: 0;
padding-top: 8px;
}
.cpn-tray-fab {
border-radius: 2px;
}
.cpn-mcta-item {
font-family: var(--font-display);
font-weight: 600;
}
.herox-inner {
padding-inline: 24px;
}
@media (max-width: 900px) {
.herox-inner {
padding: 44px 24px;
}
.herox-stage {
min-height: 240px;
}
.herox-svg {
width: clamp(150px, 46%, 240px);
}
.herox-tabs {
margin-top: 22px;
}
}
@media (max-width: 520px) {
.hero h1, .herox-slide h1 {
font-size: 30px;
line-height: 1.3;
}
.herox-stage {
min-height: 200px;
}
.herox-svg {
width: clamp(130px, 40%, 200px);
}
.hero-actions .btn {
flex: 1 1 auto;
text-align: center;
}
.cat-grid, .cpn-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 22px 14px;
}
.cert-badges {
grid-template-columns: repeat(2, 1fr);
}
.cert-badge {
border-left: 0;
border-top: 1px solid var(--hair);
padding: 12px 0;
}
.cert-strip-label {
border-right: 0;
padding: 0 0 8px;
}
}
@media (max-width: 520px) {
.hero-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.hero-actions .btn {
flex: none;
width: 100%;
}
.herox-tabs {
gap: 7px;
}
.herox-tab {
font-size: 13px;
padding: 7px 11px;
}
}
.cert-strip {
border: 0;
}
@media (max-width: 760px) {
.hl-grid {
grid-template-columns: 1fr;
}
.hl-card {
padding: 20px 0;
}
.hl-card + .hl-card::before {
display: none;
}
.hl-card + .hl-card {
border-top: 1px solid var(--hair);
}
}
.cat-card-media::after, .cpn-card-media::after {
opacity: 0.45;
}
.cat-card:hover .cat-card-media::after, .cpn-card:hover .cpn-card-media::after {
opacity: 1;
}
.herox-photo {
border: 1px solid var(--hair);
border-radius: 0;
box-shadow: 0 24px 48px -34px rgba(0, 0, 0, 0.9);
}
.herox-figure:has(.herox-photo)::after {
content: "";
position: absolute;
right: 10px;
top: 10px;
width: 13px;
height: 13px;
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 13px 1px, 1px 13px;
background-position: center, center;
background-repeat: no-repeat;
z-index: 2;
}
.cpn-carousel, .cpn-carousel-track {
max-width: 100%;
min-width: 0;
}
.cpn-carousel-track {
overscroll-behavior-x: contain;
}
.wrap {
max-width: min(var(--wrap), 100%);
}
.cpn-gcard {
text-align: center;
}
.cpn-gcard .cpn-iconbox {
margin: 0 auto 12px;
justify-content: center;
}
.cpn-gcard .cpn-iconbox.is-left {
justify-content: center;
}
.cpn-gcard .cap-icon {
margin-inline: auto;
}
.cpn-gcard-desc, .cpn-gcard p {
margin-inline: auto;
max-width: 34ch;
}
.cpn-ui-ico {
display: block;
width: 1.25em;
height: 1.25em;
}
.nav-caret .cpn-ui-ico {
width: 14px;
height: 14px;
}
.cpn-mcta-ico .cpn-ui-ico, .cpn-tray-fab-icon .cpn-ui-ico {
width: 20px;
height: 20px;
}
.cpn-tray-close .cpn-ui-ico {
width: 16px;
height: 16px;
}
.cpn-tray-close {
display: inline-flex;
align-items: center;
justify-content: center;
}
.contact-layout, .field-grid {
min-width: 0;
}
.contact-layout > *, .field-grid > *, .form-panel, .info-panel, .contact-form, .field {
min-width: 0;
}
.contact-form input, .contact-form textarea, .contact-form select {
width: 100%;
max-width: 100%;
}
.contact-form textarea {
resize: vertical;
}
@media (max-width: 860px) {
.contact-layout {
grid-template-columns: 1fr;
gap: 26px;
}
}
@media (max-width: 620px) {
.field-grid {
grid-template-columns: 1fr;
}
.form-panel-head {
padding: 18px 18px;
}
.contact-form {
padding-inline: 18px;
}
.form-foot {
flex-wrap: wrap;
gap: 12px;
}
}
.cap-icon, .cpn-iconbox .cap-icon, .hl-icon {
width: auto;
height: auto;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
color: var(--thread);
}
.cap-icon svg, .cpn-iconbox .cap-icon svg, .hl-icon svg {
width: 26px;
height: 26px;
display: block;
}
.cap-icon .cpn-icon-img, .cpn-iconbox .cpn-icon-img, .hl-icon .cpn-icon-img {
width: 26px;
height: 26px;
}
.section--navy .cpn-iconbox .cap-icon, .section--navy .cap-icon {
background: transparent;
color: var(--thread);
}
.cap-item:hover .cap-icon, .hl-card:hover .hl-icon, .cpn-gcard:hover .cap-icon {
background: transparent;
border: 0;
color: var(--accent-dark);
}
.cap-item:hover .cap-icon .cpn-icon-img, .hl-card:hover .hl-icon .cpn-icon-img {
filter: none;
}
.section--navy .cap-item:hover .cap-icon,
.section--navy .cpn-gcard:hover .cap-icon,
.cap-item:hover .cap-icon,
.cpn-gcard:hover .cap-icon,
.hl-card:hover .hl-icon {
background: transparent;
border-color: transparent;
color: var(--accent-dark);
}
.section--navy .cpn-iconbox .cap-icon,
.section--navy .cap-icon,
.section--navy .hl-icon {
background: transparent;
border-color: transparent;
color: var(--thread);
}
.section--navy .cap-item:hover .cap-icon,
.section--navy .cpn-gcard:hover .cap-icon {
color: #ffb166;
}
.cap-icon .cpn-icon-img, .hl-icon .cpn-icon-img, .cpn-iconbox .cpn-icon-img {
filter: brightness(0) saturate(100%) invert(70%) sepia(45%) saturate(1200%) hue-rotate(340deg) brightness(101%) contrast(94%);
transition: filter 0.18s ease;
}
.cap-item:hover .cap-icon .cpn-icon-img,
.hl-card:hover .hl-icon .cpn-icon-img,
.cpn-gcard:hover .cpn-iconbox .cap-icon .cpn-icon-img {
filter: brightness(0) saturate(100%) invert(52%) sepia(60%) saturate(1600%) hue-rotate(347deg) brightness(92%) contrast(95%);
}
.section--navy .cpn-icon-img {
filter: brightness(0) saturate(100%) invert(78%) sepia(38%) saturate(900%) hue-rotate(333deg) brightness(104%) contrast(96%);
}
.cat-card:hover, .cpn-card:hover {
transform: none;
box-shadow: none;
}
.cat-card-media, .cpn-card-media {
transition: border-color 0.2s ease;
}
.cat-card:hover .cat-card-media, .cpn-card:hover .cpn-card-media {
border-color: var(--thread);
}
.cat-card:hover .cat-card-media img, .cpn-card:hover .cpn-card-media img {
transform: scale(1.07);
}
.cat-card:hover .cat-card-media::after, .cpn-card:hover .cpn-card-media::after {
opacity: 1;
}
.cat-card-title a, .cpn-card-title a {
transition: color 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
.cat-card-title a, .cpn-card-title a {
transition: none;
}
}
.cpn-icon-mask {
display: block;
width: 26px;
height: 26px;
background-color: currentColor;
-webkit-mask: var(--cpn-icon) center/contain no-repeat;
mask: var(--cpn-icon) center/contain no-repeat;
filter: none !important;
}
.section--navy .cat-card-title a {
color: var(--white);
}
.section--navy .cat-card:hover .cat-card-title a {
color: #ffb166;
}
.section--navy .cat-card-count {
color: var(--steel-light);
}
:root[data-theme=light] .section--navy {
background: var(--bg-alt);
--white: var(--head);
--steel-light: var(--steel);
}
:root[data-theme=light] .section--navy p,
:root[data-theme=light] .section--navy .cpn-gcard-desc,
:root[data-theme=light] .section--navy .cpn-gcard p {
color: var(--ink-soft);
}
:root[data-theme=light] .section--navy .cpn-occ-label {
color: var(--steel);
}
:root[data-theme=light] .section--navy .cpn-occ-chip {
background: var(--surface);
border-color: var(--line-strong);
color: var(--ink);
}
:root[data-theme=light] .section--navy .cpn-occ-chip:hover {
background: var(--bg-alt);
border-color: var(--line-strong);
}
:root[data-theme=light] .section--navy .cpn-gcard {
background: var(--surface);
border-color: var(--line);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=dark]) .section--navy {
background: var(--bg-alt);
--white: var(--head);
--steel-light: var(--steel);
}
:root:not([data-theme=dark]) .section--navy p,
:root:not([data-theme=dark]) .section--navy .cpn-gcard-desc,
:root:not([data-theme=dark]) .section--navy .cpn-gcard p {
color: var(--ink-soft);
}
:root:not([data-theme=dark]) .section--navy .cpn-occ-label {
color: var(--steel);
}
:root:not([data-theme=dark]) .section--navy .cpn-occ-chip {
background: var(--surface);
border-color: var(--line-strong);
color: var(--ink);
}
:root:not([data-theme=dark]) .section--navy .cpn-occ-chip:hover {
background: var(--bg-alt);
border-color: var(--line-strong);
}
:root:not([data-theme=dark]) .section--navy .cpn-gcard {
background: var(--surface);
border-color: var(--line);
}
}
.cap-icon, .hl-icon, .cpn-iconbox .cap-icon {
transition: color 0.18s ease;
}
.cpn-gcard:hover .cap-icon, .cpn-gcard:hover .cpn-iconbox .cap-icon,
.cap-item:hover .cap-icon, .hl-card:hover .hl-icon,
.section--navy .cpn-gcard:hover .cap-icon, .section--navy .cpn-gcard:hover .cpn-iconbox .cap-icon,
.section--navy .cap-item:hover .cap-icon, .section--navy .hl-card:hover .hl-icon {
background: transparent;
border-color: transparent;
color: var(--thread);
}
.cpn-gcard:hover .cpn-icon-img, .cpn-gcard:hover .cpn-iconbox .cap-icon .cpn-icon-img,
.cap-item:hover .cpn-icon-img, .hl-card:hover .cpn-icon-img {
filter: brightness(0) saturate(100%) invert(70%) sepia(45%) saturate(1200%) hue-rotate(340deg) brightness(101%) contrast(94%);
}
.section--navy .cpn-gcard:hover .cpn-icon-img, .section--navy .cap-item:hover .cpn-icon-img,
.section--navy .hl-card:hover .cpn-icon-img {
filter: brightness(0) saturate(100%) invert(78%) sepia(38%) saturate(900%) hue-rotate(333deg) brightness(104%) contrast(96%);
}
.cat-card-media.cat-card-media-icon {
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
background-image: none;
}
.cat-card-media.cat-card-media-icon::before,
.cat-card-media.cat-card-media-icon::after {
content: none;
display: none;
}
.cat-card-icon {
position: relative;
z-index: 2;
display: inline-flex;
color: var(--accent);
transition: transform 0.18s ease;
}
.cat-card-icon svg {
width: 60px;
height: 60px;
}
.cat-card-icon .cpn-icon-mask {
width: 60px;
height: 60px;
}
.cat-card-icon img {
display: block;
width: 60px;
height: 60px;
object-fit: contain;
}
.cat-card:hover .cat-card-icon {
transform: scale(1.08);
}
.cpn-hub {
position: relative;
width: 100%;
max-width: 760px;
aspect-ratio: 1/1;
margin: 40px auto 6px;
}
.cpn-hub-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.cpn-hub-lines line {
stroke: var(--line-strong);
stroke-width: 0.5;
}
.section--navy .cpn-hub-lines line {
stroke: rgba(255, 255, 255, 0.22);
}
.cpn-hub-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 23%;
aspect-ratio: 1/1;
border-radius: 50%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
text-align: center;
padding: 10px;
background: var(--accent);
color: var(--white);
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
}
.cpn-hub-center svg {
width: 30px;
height: 30px;
}
.cpn-hub-label {
font-size: 13px;
font-weight: 700;
line-height: 1.22;
}
.cpn-hub-ring {
position: absolute;
inset: 0;
z-index: 1;
}
.cpn-hub-ring .cpn-gcard {
position: absolute;
width: 22%;
min-width: 150px;
translate: -50% -50%;
margin: 0;
padding: 14px 12px;
text-align: center;
}
.cpn-hub-ring .cpn-gcard .cpn-gcard-title, .cpn-hub-ring .cpn-gcard h3 {
font-size: 14px;
}
.cpn-hub-ring .cpn-gcard .cpn-gcard-desc, .cpn-hub-ring .cpn-gcard p {
font-size: 12px;
}
@media (max-width: 900px) {
.cpn-hub {
aspect-ratio: auto;
max-width: none;
margin: 24px 0 0;
}
.cpn-hub-lines {
display: none;
}
.cpn-hub-center {
position: static;
transform: none;
width: auto;
aspect-ratio: auto;
border-radius: 14px;
flex-direction: row;
margin: 0 auto 18px;
max-width: 340px;
}
.cpn-hub-ring {
position: static;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.cpn-hub-ring .cpn-gcard {
position: static;
width: auto;
min-width: 0;
translate: none;
transform: none !important;
}
}
.cpn-hub-cue {
display: none;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 820px) {
@supports (animation-timeline: view()) {
.cpn-hub-pin {
height: 240svh;
}
.cpn-hub-stage {
position: sticky;
top: 86px;
height: calc(100svh - 86px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 0 96px;
}
.cpn-hub-stage .section-head {
margin-bottom: 0;
flex: none;
}
.cpn-hub-stage .section-head h2 {
font-size: 26px;
margin-bottom: 6px;
}
.cpn-hub-stage .section-head p {
font-size: 14px;
margin: 0;
}
.cpn-hub-stage .cpn-hub {
width: min(1140px, 92%);
max-width: none;
aspect-ratio: auto;
height: auto;
flex: 1 1 auto;
min-height: 0;
margin: 66px auto 0;
}
.cpn-hub-stage .cpn-gcard {
padding: 10px 12px;
}
.cpn-hub-pin {
view-timeline-name: --cpn-hub;
}
.cpn-hub-ring .cpn-gcard {
animation: cpn-hub-card-in linear both;
animation-timeline: --cpn-hub;
}
.cpn-hub-lines line {
stroke-dasharray: 1;
animation: cpn-hub-spoke-in linear both;
animation-timeline: --cpn-hub;
}
.cpn-hub-center {
animation: cpn-hub-center-in linear both;
animation-timeline: --cpn-hub;
animation-range: contain 8% contain 15%;
}
.cpn-hub-cue {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
position: absolute;
left: 50%;
bottom: 8px;
translate: -50% 0;
color: rgba(255, 255, 255, 0.86);
font-size: 12px;
letter-spacing: 0.02em;
text-shadow: 0 1px 10px rgba(10, 20, 35, 0.9);
animation: cpn-hub-cue-park cubic-bezier(0.33, 1, 0.68, 1) both, cpn-hub-cue-out linear both;
animation-timeline: --cpn-hub, --cpn-hub;
animation-range: contain 0% contain 30%, contain 90% contain 100%;
}
.cpn-hub-cue-track {
width: 132px;
height: 2px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.22);
overflow: hidden;
}
.cpn-hub-cue-fill {
display: block;
width: 100%;
height: 100%;
background: var(--accent);
transform-origin: left center;
scale: 0 1;
animation: cpn-hub-cue-fill linear both;
animation-timeline: --cpn-hub;
animation-range: contain 0% contain 100%;
}
.cpn-hub-cue-mouse {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
margin-top: 2px;
animation: cpn-hub-cue-bob 1.4s ease-in-out infinite alternate;
}
.cpn-hub-cue-mouse-body {
width: 18px;
height: 27px;
display: block;
}
.cpn-hub-cue-wheel {
transform-box: fill-box;
animation: cpn-hub-cue-wheel 1.6s ease-in-out infinite;
}
.cpn-hub-cue-arrow {
width: 16px;
height: 16px;
margin-top: -3px;
display: block;
}
}
}
@keyframes cpn-hub-center-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cpn-hub-cue-fill {
from {
scale: 0 1;
}
to {
scale: 1 1;
}
}
@keyframes cpn-hub-cue-park {
from {
translate: -50% -41svh;
scale: 1.75;
}
to {
translate: -50% 0;
scale: 1;
}
}
@keyframes cpn-hub-cue-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes cpn-hub-cue-bob {
from {
translate: 0 -2px;
}
to {
translate: 0 3px;
}
}
@keyframes cpn-hub-cue-wheel {
0% {
transform: translateY(0);
opacity: 1;
}
70% {
transform: translateY(6px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 0;
}
}
@keyframes cpn-hub-card-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cpn-hub-spoke-in {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
.section.has-video-bg {
position: relative;
isolation: isolate;
}
.section.has-video-bg > .wrap {
position: relative;
z-index: 1;
}
.cpn-secvid {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cpn-secvid-media {
position: sticky;
top: 0;
display: block;
width: 100%;
height: 100svh;
object-fit: cover;
object-position: center;
}
.cpn-secvid::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 20, 35, 0.55) 0%, rgba(10, 20, 35, 0.18) 45%, rgba(10, 20, 35, 0.55) 100%);
}
.section.has-video-bg .section-head .eyebrow,
.section.has-video-bg .section-head h2,
.section.has-video-bg .section-head p {
text-shadow: 0 2px 16px rgba(10, 20, 35, 0.9), 0 1px 3px rgba(10, 20, 35, 0.75);
}
.section.has-video-bg .cpn-hub-ring .cpn-gcard,
:root[data-theme=dark] .section.has-video-bg .cpn-hub-ring .cpn-gcard {
background: #16283f;
border-color: rgba(255, 255, 255, 0.26);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) .section.has-video-bg .cpn-hub-ring .cpn-gcard {
background: #16283f;
}
}
.section.has-video-bg .cpn-gcard-desc,
.section.has-video-bg .cpn-gcard p {
color: rgba(255, 255, 255, 0.92);
}
.section.has-video-bg .cpn-hub-lines line {
stroke: rgba(255, 255, 255, 0.42);
}
:root[data-theme=light] .section--navy.has-video-bg {
background: var(--navy);
--white: #ffffff;
--steel-light: #c3ad82;
}
:root[data-theme=light] .section--navy.has-video-bg p {
color: rgba(255, 255, 255, 0.85);
}
:root[data-theme=light] .section--navy.has-video-bg .cpn-gcard-desc,
:root[data-theme=light] .section--navy.has-video-bg .cpn-gcard p {
color: rgba(255, 255, 255, 0.92);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=dark]) .section--navy.has-video-bg {
background: var(--navy);
--white: #ffffff;
--steel-light: #c3ad82;
}
:root:not([data-theme=dark]) .section--navy.has-video-bg p {
color: rgba(255, 255, 255, 0.85);
}
:root:not([data-theme=dark]) .section--navy.has-video-bg .cpn-gcard-desc,
:root:not([data-theme=dark]) .section--navy.has-video-bg .cpn-gcard p {
color: rgba(255, 255, 255, 0.92);
}
}
:root {
--line-green: #06c755;
--line-green-dark: #04a344;
}
.btn-line {
background: var(--line-green);
color: var(--white);
border: 1px solid var(--line-green-dark);
outline: 1px dashed rgba(255, 255, 255, 0.5);
outline-offset: -5px;
}
.btn-line:hover {
background: var(--line-green-dark);
color: var(--white);
border-color: var(--line-green-dark);
outline-offset: -4px;
}
.btn-line:active {
transform: translateY(1px);
}
.hero .btn-line, .section--navy .btn-line {
color: var(--white);
border-color: var(--line-green-dark);
}
.main-nav .btn-quote {
background: var(--navy);
}
.main-nav .btn-quote:hover {
background: var(--navy-dark);
}
.main-nav .btn-quote--line {
background: var(--line-green);
margin-left: 8px;
}
.main-nav .btn-quote--line:hover {
background: var(--line-green-dark);
}
@media (max-width: 768px) {
.cpn-mcta-primary {
background: var(--accent);
color: #1a1206;
}
}
@media (prefers-reduced-motion: reduce) {
.btn-line:active {
transform: none;
}
}
.cpn-trow-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.cpn-trow-money {
text-align: right;
line-height: 1.25;
}
.cpn-trow-unit {
display: block;
font-size: 11.5px;
color: var(--steel);
font-variant-numeric: tabular-nums;
}
.cpn-trow-sum {
display: block;
font-size: 14px;
color: var(--head);
font-variant-numeric: tabular-nums;
}
.cpn-trow-ask {
font-size: 12.5px;
color: var(--steel);
}
.cpn-tray-foot {
flex-direction: column;
gap: 14px;
}
.cpn-tray-sum {
display: flex;
flex-direction: column;
gap: 4px;
}
.cpn-tray-sum-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.cpn-tray-sum-lbl {
font-size: 13.5px;
font-weight: 600;
color: var(--ink-soft);
}
.cpn-tray-total {
font-size: 20px;
color: var(--head);
font-variant-numeric: tabular-nums;
}
.cpn-tray-note {
margin: 0;
font-size: 11.5px;
line-height: 1.45;
color: var(--steel);
}
.cpn-tray-foot-actions {
display: flex;
gap: 10px;
}
.cpn-card.is-unpublished .cpn-card-media {
opacity: 0.55;
}
.cpn-card.is-unpublished:hover .cpn-card-media {
opacity: 1;
}
.cpn-card-flag {
position: absolute;
z-index: 2;
left: 0;
top: 10px;
padding: 4px 10px;
background: var(--navy);
color: var(--white);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
}
.cpn-pdspec {
display: grid;
grid-template-columns: repeat(var(--cpn-spec-cols, 2), minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.cpn-pdspec-fig {
margin: 0;
}
.cpn-pdspec-fig figcaption {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 10px;
}
.cpn-pdspec-name {
font-size: 14px;
font-weight: 600;
color: var(--head);
line-height: 1.35;
}
.cpn-pdspec-desc {
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.5;
}
.cpn-pdspec--chart .cpn-pdspec-fig img {
display: block;
width: 100%;
height: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.cpn-pdspec--swatch .cpn-pdspec-fig img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.cpn-pdspec-fablink {
display: block;
text-decoration: none;
color: inherit;
}
.cpn-pdspec-fablink img {
transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cpn-pdspec-fablink:hover img {
transform: scale(1.03);
}
.cpn-pdspec-cap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
}
.cpn-pdspec-cap .cpn-pdspec-notes {
margin: 0;
}
.cpn-pdspec-cap .cpn-pdspec-notes p:last-child,
.cpn-pdspec-cap .cpn-pdspec-notes ul:last-child {
margin-bottom: 0;
}
.cpn-pdspec-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1px solid var(--line-strong);
border-radius: 2px;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--head);
background: var(--surface);
transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.cpn-pdspec-btn span[aria-hidden] {
transition: transform 0.18s ease;
}
.cpn-pdspec-fablink:hover .cpn-pdspec-btn {
border-color: var(--accent);
color: var(--accent);
}
.cpn-pdspec-fablink:hover .cpn-pdspec-btn span[aria-hidden] {
transform: translateX(3px);
}
.cpn-pdspec-fablink:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.section--navy .cpn-pdspec-btn {
color: var(--white);
background: transparent;
border-color: rgba(255, 255, 255, 0.28);
}
.section--navy .cpn-pdspec-fablink:hover .cpn-pdspec-btn {
color: var(--thread);
border-color: var(--thread);
}
@media (prefers-reduced-motion: reduce) {
.cpn-pdspec-fablink img,
.cpn-pdspec-btn,
.cpn-pdspec-btn span[aria-hidden] {
transition: none;
}
}
.cpn-pdspec-more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.cpn-pdspec-more span[aria-hidden] {
transition: transform 0.18s ease;
}
.cpn-pdspec-more:hover {
border-bottom-color: currentColor;
}
.cpn-pdspec-more:hover span[aria-hidden] {
transform: translateX(2px);
}
.cpn-pdspec-more:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
.section--navy .cpn-pdspec-more {
color: var(--thread);
}
@media (prefers-reduced-motion: reduce) {
.cpn-pdspec-more span[aria-hidden] {
transition: none;
}
}
.cpn-fabric-single {
display: grid;
grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
.cpn-fabric-swatch {
margin: 0;
}
.cpn-fabric-swatch img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.cpn-fabric-back {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
@media (max-width: 860px) {
.cpn-fabric-single {
grid-template-columns: 1fr;
gap: 22px;
}
}
.section--navy .cpn-pdspec-name {
color: var(--white);
}
.section--navy .cpn-pdspec-desc {
color: rgba(255, 255, 255, 0.82);
}
.cpn-pd-note {
margin: 0;
padding: 18px 20px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--ink-soft);
font-size: 13.5px;
}
@media (max-width: 900px) {
.cpn-pdspec--swatch {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.cpn-pdspec--chart {
grid-template-columns: 1fr;
}
.cpn-pdspec--swatch {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cpn-pdspec {
gap: 16px;
}
}
.cpn-pdspec-notes {
max-width: 68ch;
}
.cpn-pdspec + .cpn-pdspec-notes {
margin-top: 26px;
}
.cpn-pdspec-notes > :first-child {
margin-top: 0;
}
.cpn-pdspec-notes > :last-child {
margin-bottom: 0;
}
.cpn-pdspec-notes p {
color: var(--ink-soft);
margin: 0 0 12px;
}
.cpn-pdspec-notes ul,
.cpn-pdspec-notes ol {
margin: 0 0 12px;
padding: 0;
display: grid;
gap: 8px;
}
.cpn-pdspec-notes ul {
list-style: none;
}
.cpn-pdspec-notes ul > li {
position: relative;
padding-left: 24px;
color: var(--ink-soft);
line-height: 1.6;
}
.cpn-pdspec-notes ul > li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-weight: 700;
}
.cpn-pdspec-notes ol {
padding-left: 22px;
}
.cpn-pdspec-notes ol > li {
color: var(--ink-soft);
line-height: 1.6;
}
.cpn-pdspec-notes strong {
color: var(--head);
}
.section--navy .cpn-pdspec-notes p,
.section--navy .cpn-pdspec-notes li {
color: rgba(255, 255, 255, 0.85);
}
.section--navy .cpn-pdspec-notes strong {
color: var(--white);
}
.cpn-pdspec-fig .cpn-pdspec-notes {
max-width: none;
margin-top: 8px;
}
.cpn-pdspec-fig .cpn-pdspec-notes p,
.cpn-pdspec-fig .cpn-pdspec-notes li {
font-size: 12.5px;
line-height: 1.55;
}
.cpn-pdspec-fig .cpn-pdspec-notes ul,
.cpn-pdspec-fig .cpn-pdspec-notes ol {
gap: 5px;
margin-bottom: 8px;
}
.cpn-pdspec-fig .cpn-pdspec-notes ul > li {
padding-left: 17px;
}
.cpn-pdspec-fig .cpn-pdspec-notes ul > li::before {
font-size: 11px;
top: 1px;
}
.cpn-faq {
border-top: 1px solid var(--hair, var(--line));
}
.cpn-faq-item {
border-bottom: 1px solid var(--hair, var(--line));
}
.cpn-faq-q {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 0;
padding: 18px 0 18px 2px;
list-style: none;
cursor: pointer;
font-family: var(--font-display, inherit);
font-size: 16.5px;
font-weight: 600;
line-height: 1.5;
color: var(--head);
transition: color 0.15s ease;
}
.cpn-faq-q::-webkit-details-marker {
display: none;
}
.cpn-faq-q > span {
flex: 1;
min-width: 0;
}
.cpn-faq-item:hover > .cpn-faq-q {
color: var(--accent-dark);
}
.cpn-faq-q:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.cpn-faq-q::after {
content: "";
flex: none;
width: 13px;
height: 13px;
margin-top: 7px;
background-image: linear-gradient(var(--thread, var(--accent)), var(--thread, var(--accent))), linear-gradient(var(--thread, var(--accent)), var(--thread, var(--accent)));
background-size: 13px 1px, 1px 13px;
background-position: center, center;
background-repeat: no-repeat;
transition: background-size 0.18s ease;
}
.cpn-faq-item[open] > .cpn-faq-q::after {
background-size: 13px 1px, 1px 0;
}
.cpn-faq-a {
padding: 0 44px 20px 2px;
max-width: 74ch;
}
.cpn-faq-a > :first-child {
margin-top: 0;
}
.cpn-faq-a > :last-child {
margin-bottom: 0;
}
.cpn-faq-a p {
margin: 0 0 10px;
color: var(--ink-soft);
line-height: 1.7;
}
.cpn-faq-a ul, .cpn-faq-a ol {
margin: 0 0 10px;
padding-left: 20px;
color: var(--ink-soft);
}
.cpn-faq-a li {
margin-bottom: 4px;
line-height: 1.65;
}
.cpn-faq-item.is-cat > .cpn-faq-q,
.cpn-faq-item.is-item > .cpn-faq-q {
padding-left: 14px;
position: relative;
}
.cpn-faq-item.is-cat > .cpn-faq-q::before,
.cpn-faq-item.is-item > .cpn-faq-q::before {
content: "";
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
width: 2px;
background: var(--line-strong);
}
.cpn-faq-item.is-item > .cpn-faq-q::before {
background: var(--thread, var(--accent));
}
.cpn-faq-item.is-cat > .cpn-faq-a,
.cpn-faq-item.is-item > .cpn-faq-a {
padding-left: 16px;
}
.section--navy .cpn-faq {
border-top-color: rgba(255, 255, 255, 0.2);
}
.section--navy .cpn-faq-item {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.section--navy .cpn-faq-q {
color: var(--white);
}
.section--navy .cpn-faq-a p, .section--navy .cpn-faq-a li {
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 560px) {
.cpn-faq-q {
font-size: 15.5px;
gap: 12px;
padding: 15px 0;
}
.cpn-faq-a {
padding-right: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cpn-faq-q::after {
transition: none;
}
}
.cpn-blog-wrap {
max-width: min(1400px, 96vw);
}
.cpn-tape-col {
position: relative;
border-right: 1px solid var(--hair);
background-image: repeating-linear-gradient(180deg, var(--hair) 0 1px, transparent 1px var(--stitch));
background-size: 9px 100%;
background-position: right top;
background-repeat: repeat-y;
}
.cpn-tape-col::before {
content: "";
position: absolute;
inset: 0 0 0 auto;
width: 17px;
background-image: repeating-linear-gradient(180deg, var(--hair) 0 1px, transparent 1px calc(var(--stitch) * 5));
pointer-events: none;
}
.cpn-post-no {
position: absolute;
right: 0;
top: 34px;
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
padding-left: 6px;
background: var(--bg);
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
letter-spacing: 0;
}
.cpn-post-no::after {
content: "";
width: 24px;
height: 2px;
background: var(--thread);
}
.cpn-tape-scale {
margin: 0 0 20px;
font-size: 13px;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.cpn-tape-scale b {
font-family: var(--font-display);
color: var(--head);
font-weight: 600;
}
.cpn-topics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 26px;
}
.cpn-occ-chip-n {
margin-left: 6px;
font-weight: 500;
opacity: 0.75;
font-variant-numeric: tabular-nums;
}
.cpn-list-tools {
display: none;
}
.cpn-list-tools.is-ready {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
justify-content: flex-end;
}
.cpn-list-tools-label {
font-size: 12.5px;
color: var(--steel);
}
.cpn-list-switch {
display: inline-flex;
border: 1px solid var(--hair);
}
.cpn-list-btn {
appearance: none;
background: none;
cursor: pointer;
border: 0;
padding: 0;
width: 34px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--steel);
}
.cpn-list-btn svg {
display: block;
}
.cpn-list-btn + .cpn-list-btn {
border-left: 1px solid var(--hair);
}
.cpn-list-btn:hover {
color: var(--head);
}
.cpn-list-btn[aria-pressed=true] {
background: var(--surface);
color: var(--head);
font-weight: 600;
}
.cpn-list-btn:focus-visible {
outline: 2px solid var(--accent, currentColor);
outline-offset: -2px;
}
.cpn-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.cpn-card-grid .cpn-post {
display: flex;
flex-direction: column;
padding: 0;
border: 1px solid var(--hair);
background: var(--surface);
}
.cpn-card-grid .cpn-post + .cpn-post {
border-top: 1px solid var(--hair);
border-image: none;
}
.cpn-card-grid .cpn-tape-col {
display: none;
}
.cpn-card-grid .cpn-post-body {
display: flex;
flex-direction: column;
flex: 1;
}
.cpn-card-grid .cpn-post-figure {
order: -1;
}
.cpn-card-grid .cpn-post-media {
aspect-ratio: 3/2;
}
.cpn-card-grid .cpn-post-text {
display: flex;
flex-direction: column;
flex: 1;
padding: 18px 20px 20px;
}
.cpn-card-grid .cpn-post-title {
font-size: 19px;
}
.cpn-card-grid .cpn-post-sum {
max-width: none;
}
.cpn-card-grid .cpn-post-meta {
margin-top: auto;
padding-top: 12px;
}
.cpn-card-grid .cpn-post-no-inline {
display: inline-flex;
}
.cpn-card-grid .cpn-post.is-lead .cpn-post-title {
font-size: 19px;
}
.cpn-card-grid .cpn-post.is-textonly .cpn-post-text {
padding-top: 22px;
}
.cpn-tape-list {
display: block;
}
.cpn-post {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
column-gap: 28px;
padding: 34px 0;
}
.cpn-post + .cpn-post {
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-post:first-child {
padding-top: 0;
}
.cpn-post:first-child .cpn-post-no {
top: 0;
}
.cpn-post-body {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
column-gap: 28px;
align-items: start;
}
.cpn-post.is-lead .cpn-post-body {
grid-template-columns: 420px minmax(0, 1fr);
column-gap: 34px;
}
.cpn-post-figure {
display: block;
}
.cpn-post-media {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
background: var(--bg-alt);
border: 1px solid var(--hair);
}
.cpn-post-media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cpn-post:hover .cpn-post-media img {
transform: scale(1.035);
}
.cpn-post-media::after {
content: "";
position: absolute;
right: 9px;
top: 9px;
width: 11px;
height: 11px;
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 11px 1px, 1px 11px;
background-position: center, center;
background-repeat: no-repeat;
opacity: 0.45;
transition: opacity 0.2s ease;
}
.cpn-post:hover .cpn-post-media::after {
opacity: 1;
}
.cpn-post.is-textonly .cpn-post-body,
.cpn-post.is-lead.is-textonly .cpn-post-body {
grid-template-columns: minmax(0, 1fr);
}
.cpn-post.is-textonly .cpn-post-sum {
max-width: 72ch;
}
.cpn-post-title {
font-size: 21px;
line-height: 1.35;
margin: 0 0 8px;
}
.cpn-post.is-lead .cpn-post-title {
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.3;
}
.cpn-post-title a {
color: var(--head);
}
.cpn-post:hover .cpn-post-title a {
color: var(--accent-dark);
}
.cpn-post-sum {
margin: 0 0 14px;
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.65;
max-width: 62ch;
}
.cpn-post-meta {
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--hair);
font-size: 13px;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.cpn-post-sep {
width: 16px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--hair) 0 4px, transparent 4px 7px);
}
.cpn-post-topic {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0;
color: var(--head);
text-decoration: underline;
text-decoration-color: var(--thread);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.cpn-post-topic:hover {
color: var(--accent-dark);
}
.cpn-post-no-inline {
display: none;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 600;
color: var(--head);
}
.cpn-post-sample {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 0;
font-size: 12.5px;
color: var(--ink-soft);
}
.cpn-post-sample::before {
content: "";
width: 11px;
height: 11px;
flex: none;
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 11px 1px, 1px 11px;
background-position: center, center;
background-repeat: no-repeat;
transform: rotate(45deg);
}
.cpn-tape-list.is-related .cpn-post-body {
grid-template-columns: 150px minmax(0, 1fr);
column-gap: 20px;
}
.cpn-tape-list.is-related .cpn-post-title {
font-size: 17px;
}
.cpn-tape-pager {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-top: 34px;
padding-top: 20px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
font-size: 13px;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.cpn-tape-pager-links {
display: flex;
gap: 8px;
}
.cpn-tape-pager-links a {
display: inline-block;
padding: 9px 14px;
border: 1px solid var(--hair);
border-radius: 2px;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
color: var(--head);
}
.cpn-tape-pager-links a:hover {
border-color: var(--thread);
}
.cpn-tape-empty {
padding: 24px 0 0;
border-top: 1px solid var(--hair);
max-width: 56ch;
}
.cpn-tape-empty p {
color: var(--ink-soft);
}
.cpn-blog-head .cpn-post-sample {
margin-top: 16px;
}
.cpn-post-sample--list {
margin: 0 0 18px;
}
:is(.page-head, .page-title) .cpn-article-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 14px;
font-size: 13px;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
:is(.page-head, .page-title) .cpn-article-lead {
margin-top: 16px;
max-width: 56ch;
font-size: 16.5px;
line-height: 1.65;
color: var(--ink-soft);
}
.cpn-article-layout {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 232px;
column-gap: 28px;
align-items: start;
}
.cpn-article-tape {
align-self: stretch;
min-height: 100%;
grid-column: 1;
grid-row: 1/span 99;
}
@media (min-width: 1081px) {
.cpn-article {
display: contents;
}
.cpn-article-figure,
.cpn-article-body,
.cpn-article-walk,
.cpn-article-cta {
grid-column: 2;
}
.cpn-article-rail {
grid-column: 3;
grid-row: 1/span 99;
align-self: stretch;
}
}
.cpn-article-tape-fill {
position: absolute;
right: -1px;
top: 0;
width: 2px;
height: 100%;
background: var(--thread);
transform: scaleY(0);
transform-origin: top;
}
@keyframes cpn-tape-fill {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) and (timeline-scope: --cpn-article) {
.cpn-article-layout {
timeline-scope: --cpn-article;
}
.cpn-article-body {
view-timeline-name: --cpn-article;
view-timeline-axis: block;
}
.cpn-article-tape-fill {
animation: cpn-tape-fill linear both;
animation-timeline: --cpn-article;
animation-range: contain 0% contain 100%;
}
}
}
.cpn-article {
min-width: 0;
}
.cpn-article-figure {
margin: 0 0 34px;
}
.cpn-article-figure figcaption {
margin-top: 10px;
font-size: 13px;
color: var(--ink-soft);
border-bottom: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
padding-bottom: 10px;
}
.cpn-article-figure .cpn-post-media {
aspect-ratio: 16/9;
}
.cpn-article-body {
font-size: 16.5px;
line-height: 1.75;
}
.cpn-article-body > p,
.cpn-article-body > ul,
.cpn-article-body > ol,
.cpn-article-body > h2,
.cpn-article-body > h3,
.cpn-article-body > h4,
.cpn-article-body > blockquote {
max-width: 68ch;
}
.cpn-article-body > * + * {
margin-top: 1.1em;
}
.cpn-article-body h2 {
position: relative;
margin: 44px 0 0;
padding-bottom: 16px;
font-size: clamp(22px, 2.1vw, 27px);
line-height: 1.3;
scroll-margin-top: 96px;
}
.cpn-article-body h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 76px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
}
.cpn-article-body h3 {
margin: 30px 0 0;
font-size: 18px;
}
.cpn-article-body p {
margin-bottom: 0;
}
.cpn-article-body ul, .cpn-article-body ol {
padding-left: 1.3em;
}
.cpn-article-body li + li {
margin-top: 0.5em;
}
.cpn-article-body img {
border: 1px solid var(--hair);
}
.cpn-article-body figure {
margin: 0;
position: relative;
}
.cpn-article-body figure:has(img)::after {
content: "";
position: absolute;
right: 9px;
top: 9px;
width: 11px;
height: 11px;
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 11px 1px, 1px 11px;
background-position: center, center;
background-repeat: no-repeat;
opacity: 0.45;
}
.cpn-article-body figcaption {
margin-top: 10px;
font-size: 13px;
color: var(--ink-soft);
}
.cpn-article-body a {
color: var(--head);
text-decoration: underline;
text-decoration-color: var(--thread);
}
.cpn-article-body a:hover {
color: var(--accent-dark);
}
a.cpn-shelf-link,
.cpn-article-body a.cpn-shelf-link {
color: var(--head);
background: var(--shelf-tint);
padding: 0.06em 0.2em;
border-radius: var(--radius);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
text-decoration: underline;
text-decoration-color: var(--thread);
text-decoration-thickness: 2px;
text-underline-offset: 0.28em;
transition: background-color 0.15s ease, color 0.15s ease;
}
a.cpn-shelf-link:hover,
a.cpn-shelf-link:focus-visible,
.cpn-article-body a.cpn-shelf-link:hover,
.cpn-article-body a.cpn-shelf-link:focus-visible {
color: var(--head);
background: var(--shelf-tint-hover);
text-decoration-color: var(--accent-dark);
}
a.cpn-shelf-link:focus-visible {
outline: 2px solid var(--thread);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
a.cpn-shelf-link {
transition: none;
}
}
.cpn-article-body blockquote {
margin: 34px 0;
padding: 0 0 0 24px;
border-left: 1px solid var(--hair);
font-family: var(--font-display);
font-size: 19px;
line-height: 1.5;
color: var(--head);
}
.cpn-article-body blockquote p {
margin: 0;
}
.cpn-article-body table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.cpn-article-body th, .cpn-article-body td {
text-align: left;
padding: 10px 12px 10px 0;
border-bottom: 1px solid var(--hair);
}
.cpn-article-body th {
font-family: var(--font-display);
font-weight: 600;
color: var(--head);
}
.cpn-article-rail {
min-width: 0;
}
.cpn-article-rail-in {
position: sticky;
top: 96px;
padding-top: 16px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-article-rail-h {
margin: 0 0 12px;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
color: var(--head);
letter-spacing: 0;
}
.cpn-article-toc {
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.cpn-article-toc li + li {
margin-top: 10px;
}
.cpn-article-toc a {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 8px;
font-size: 13.5px;
line-height: 1.45;
color: var(--ink-soft);
}
.cpn-article-toc a:hover {
color: var(--head);
}
.cpn-article-toc-n {
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
opacity: 0.7;
}
.cpn-article-toc .is-here a {
color: var(--head);
}
.cpn-article-toc .is-here .cpn-article-toc-n {
color: var(--thread);
opacity: 1;
}
.cpn-article-toc .is-here > a {
font-weight: 600;
}
.cpn-article-rail-meta {
margin: 0 0 16px;
padding-top: 14px;
border-top: 1px solid var(--hair);
font-size: 13px;
line-height: 1.6;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.cpn-article-rail-meta b {
font-family: var(--font-display);
color: var(--head);
font-weight: 600;
}
.cpn-article-rail-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 13.5px;
color: var(--head);
}
.cpn-article-rail-cta:hover {
color: var(--accent-dark);
}
.cpn-article-rail-cta .cpn-ui-ico {
width: 18px;
height: 18px;
color: var(--thread);
}
.cpn-article-walk {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 44px;
padding-top: 20px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-article-walk-item {
display: block;
min-width: 0;
}
.cpn-article-walk-item.is-next {
text-align: right;
}
.cpn-article-walk-item:only-child {
grid-column: 1/-1;
}
.cpn-article-walk-label {
display: block;
margin-bottom: 6px;
font-size: 12.5px;
color: var(--ink-soft);
font-family: var(--font-display);
font-weight: 600;
}
.cpn-article-walk-title {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
line-height: 1.4;
color: var(--head);
}
.cpn-article-walk-item:hover .cpn-article-walk-title {
color: var(--accent-dark);
}
.cpn-article-cta {
margin-top: 44px;
padding-top: 24px;
max-width: 62ch;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px) 2;
}
.cpn-article-cta h2 {
font-size: clamp(21px, 2vw, 26px);
margin-bottom: 8px;
}
.cpn-article-cta p {
color: var(--ink-soft);
margin-bottom: 20px;
}
@media (max-width: 1080px) {
.cpn-article-layout {
grid-template-columns: 64px minmax(0, 1fr);
}
.cpn-article-rail {
margin: 0 0 28px;
}
.cpn-article-rail-in {
position: static;
}
.cpn-article-toc {
columns: 2;
column-gap: 24px;
margin-bottom: 14px;
}
.cpn-article-toc li {
break-inside: avoid;
}
.cpn-article-rail-meta {
border-top: 0;
padding-top: 0;
}
}
@media (max-width: 860px) {
.cpn-post-body {
grid-template-columns: 200px minmax(0, 1fr);
column-gap: 20px;
}
.cpn-post.is-lead .cpn-post-body {
grid-template-columns: 260px minmax(0, 1fr);
column-gap: 24px;
}
}
@media (max-width: 700px) {
.cpn-list-btn {
width: 44px;
height: 44px;
}
.cpn-post, .cpn-article-layout {
grid-template-columns: 26px minmax(0, 1fr);
column-gap: 16px;
}
.cpn-tape-col::before {
width: 10px;
}
.cpn-post-no {
display: none;
}
.cpn-post-no-inline {
display: inline-flex;
}
.cpn-post-body, .cpn-post.is-lead .cpn-post-body {
grid-template-columns: minmax(0, 1fr);
row-gap: 16px;
}
.cpn-post-title {
font-size: 19px;
}
.cpn-post.is-lead .cpn-post-title {
font-size: 23px;
}
.cpn-article-body {
font-size: 16px;
}
.cpn-article-toc {
columns: 1;
}
.cpn-article-walk {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.cpn-article-walk-item.is-next {
text-align: left;
}
}
@media (max-width: 520px) {
.cpn-tape-list.is-related .cpn-post-body {
grid-template-columns: minmax(0, 1fr);
}
.cpn-post-media {
aspect-ratio: 3/2;
}
}
@media (prefers-reduced-motion: reduce) {
.cpn-post-media img {
transition: none;
}
}
.cpn-fabsheet-sec {
padding-top: 34px;
}
.cpn-fabband {
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-fabband:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.cpn-fabband-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.cpn-fabband-icon {
flex: none;
display: inline-flex;
width: 24px;
height: 24px;
color: var(--thread);
}
.cpn-fabband-icon svg {
width: 100%;
height: 100%;
}
.cpn-fabband-icon .cpn-icon-mask {
width: 24px;
height: 24px;
}
.cpn-fabband-name {
margin: 0;
font-size: clamp(19px, 1.9vw, 24px);
line-height: 1.3;
}
.cpn-fabband-name a {
color: var(--head);
border-bottom: 1px solid transparent;
}
.cpn-fabband-name a:hover {
color: var(--accent-dark);
border-bottom-color: var(--thread);
}
.cpn-fabband-meta {
margin: 0 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.cpn-fabband-sep {
width: 16px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--hair) 0 4px, transparent 4px 7px);
}
.cpn-fabcells {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--cpn-fabcols, 4), minmax(0, 340px));
justify-content: start;
gap: 30px 24px;
}
.cpn-fabcell-link {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "media" "title" "body";
gap: 13px;
align-items: start;
color: inherit;
}
.cpn-fabcell-media {
grid-area: media;
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
background: var(--bg-alt);
border: 1px solid var(--hair);
}
.cpn-fabcell-media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cpn-fabcell-link:hover .cpn-fabcell-media img {
transform: scale(1.035);
}
.cpn-fabcell-media::after {
content: "";
position: absolute;
right: 9px;
top: 9px;
width: 11px;
height: 11px;
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 11px 1px, 1px 11px;
background-position: center, center;
background-repeat: no-repeat;
opacity: 0.45;
transition: opacity 0.2s ease;
}
.cpn-fabcell-link:hover .cpn-fabcell-media::after {
opacity: 1;
}
.cpn-fabsheet-head {
max-width: none;
}
.cpn-fabcell-title {
grid-area: title;
display: block;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--head);
}
.cpn-fabcell-link:hover .cpn-fabcell-title,
.cpn-fabcell-link:focus-visible .cpn-fabcell-title {
color: var(--accent-dark);
}
.cpn-fabcell-claim {
grid-area: body;
position: relative;
display: block;
padding-top: 11px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
}
.cpn-fabcell-claim::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 2px;
width: 100%;
background: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px);
}
.cpn-fabcell-claim::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 2px;
width: 0;
background: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
transition: width 0.55s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cpn-fabcell-link:hover .cpn-fabcell-claim::after,
.cpn-fabcell-link:focus-visible .cpn-fabcell-claim::after {
width: 100%;
}
.cpn-fabcell-link:hover .cpn-fabcell-claim,
.cpn-fabcell-link:focus-visible .cpn-fabcell-claim {
color: var(--head);
}
.cpn-fabcell-body {
grid-area: body;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.cpn-fabcell-name {
font-size: 16px;
font-weight: 600;
color: var(--head);
line-height: 1.35;
}
.cpn-fabcell-link:hover .cpn-fabcell-name {
color: var(--accent-dark);
}
.cpn-fabcell-spec {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.cpn-fabcell.is-nophoto .cpn-fabcell-link {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "draft" "body";
align-items: start;
}
.cpn-fabcell.is-nophoto {
grid-column: 1/-1;
max-width: none;
}
.cpn-fabcell.is-blank {
order: 2;
}
.cpn-fabcell.is-blank .cpn-fabcell-link {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "body";
padding-top: 14px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-fabcell.is-blank .cpn-fabcell-body {
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 14px;
}
.cpn-fabsilent {
margin-top: 44px;
padding-top: 26px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-fabsilent h2 {
font-size: 16px;
margin-bottom: 12px;
}
.cpn-fabsilent ul {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 14px;
}
.cpn-fabsilent a {
color: var(--ink-soft);
border-bottom: 1px solid transparent;
}
.cpn-fabsilent a:hover {
color: var(--head);
border-bottom-color: var(--thread);
}
.cpn-fabsilent > p {
margin: 0;
font-size: 13px;
color: var(--ink-soft);
max-width: 62ch;
}
.cpn-fab-empty {
margin: 0;
color: var(--ink-soft);
max-width: 62ch;
}
.cpn-fabbody {
max-width: 68ch;
margin-left: auto;
margin-right: auto;
}
.cpn-fabbody-lead {
max-width: 74ch;
margin: 0 0 28px;
}
.cpn-fabbody-lead p {
margin: 0 0 12px;
color: var(--ink-soft);
line-height: 1.75;
}
.cpn-fabbody-lead p:last-child {
margin-bottom: 0;
}
.cpn-fabcards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
gap: 22px;
align-items: stretch;
}
@media (min-width: 900px) {
.cpn-fabcards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cpn-fabcard {
min-width: 0;
padding: 24px 26px 26px;
background: var(--surface);
border: 1px solid var(--hair);
}
.cpn-fabcard h2 {
position: relative;
margin: 0 0 16px;
padding-bottom: 14px;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.35;
}
.cpn-fabcard h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 76px;
height: 2px;
background: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
}
.cpn-fabcard-body > * + * {
margin-top: 14px;
}
.cpn-fabcard p {
margin: 0;
font-size: 14.5px;
line-height: 1.7;
color: var(--ink-soft);
}
.cpn-fabcard ul, .cpn-fabcard ol {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.cpn-fabcard li {
position: relative;
padding-left: 26px;
font-size: 14.5px;
line-height: 1.65;
color: var(--ink-soft);
}
.cpn-fabcard li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--thread);
font-weight: 700;
line-height: inherit;
}
.cpn-fabtable {
width: 100%;
border-collapse: collapse;
}
.cpn-fabtable th, .cpn-fabtable td {
text-align: left;
vertical-align: baseline;
padding: 11px 0;
border-bottom: 1px solid var(--hair);
}
.cpn-fabtable th {
position: relative;
width: 38%;
padding-right: 18px;
padding-left: 26px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--head);
}
.cpn-fabtable th::before {
content: "✓";
position: absolute;
left: 0;
top: 11px;
color: var(--thread);
font-weight: 700;
}
.cpn-fabtable td {
font-size: 14px;
line-height: 1.65;
color: var(--ink-soft);
}
.cpn-fabtable tr:last-child th, .cpn-fabtable tr:last-child td {
border-bottom: 0;
padding-bottom: 0;
}
@media (max-width: 620px) {
.cpn-fabcards {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.cpn-fabcard {
padding: 20px 18px 22px;
}
.cpn-fabtable th, .cpn-fabtable td {
display: block;
width: auto;
padding-right: 0;
}
.cpn-fabtable th {
border-bottom: 0;
padding-bottom: 2px;
}
}
.cpn-fabuse-cats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin: -8px 0 26px;
font-size: 13.5px;
color: var(--ink-soft);
}
.cpn-fabuse-cat {
color: var(--head);
border-bottom: 1px solid var(--hair);
}
.cpn-fabuse-cat:hover {
color: var(--accent-dark);
border-bottom-color: var(--thread);
}
.cpn-fabuse-none {
margin: 0;
color: var(--ink-soft);
max-width: 62ch;
}
.cpn-fabcta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px 40px;
flex-wrap: wrap;
padding-top: 26px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px) 2;
}
.cpn-fabcta-text {
max-width: 56ch;
}
.cpn-fabcta-text h2 {
font-size: clamp(20px, 2vw, 26px);
margin-bottom: 8px;
}
.cpn-fabcta-text p {
margin: 0;
color: var(--ink-soft);
}
.cpn-fabcta-acts {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 1080px) {
.cpn-fabcells {
grid-template-columns: repeat(var(--cpn-fabcols-md, 3), minmax(0, 340px));
}
}
@media (max-width: 700px) {
.cpn-fabcells {
grid-template-columns: repeat(var(--cpn-fabcols-sm, 2), minmax(0, 1fr));
gap: 26px 18px;
}
.cpn-fabband-meta {
margin-left: 0;
width: 100%;
}
.cpn-fabcta-acts .btn {
flex: 1 1 auto;
text-align: center;
}
}
.cpn-fabprops {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
gap: 0 44px;
}
.cpn-fabprop {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 20px 0;
border-bottom: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-fabprop-mark {
display: block;
color: var(--thread);
padding-top: 1px;
}
.cpn-fabprop-mark svg,
.cpn-fabprop-mark .cpn-icon-mask {
display: block;
}
.cpn-fabmark-img {
display: block;
object-fit: contain;
}
.cpn-fabprop-body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.cpn-fabprop-name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--head);
line-height: 1.3;
}
.cpn-fabprop-text {
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 46ch;
}
.cpn-fabstd {
margin: 0;
}
.cpn-fabstd-row {
display: grid;
grid-template-columns: minmax(190px, 30%) minmax(0, 1fr);
gap: 14px 32px;
padding: 18px 0;
border-bottom: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
align-items: start;
}
.cpn-fabstd-row.has-logo {
grid-template-columns: clamp(150px, 15vw, 210px) minmax(170px, 26%) minmax(0, 1fr);
}
.cpn-fabstd-row.has-cert {
grid-template-columns: minmax(150px, 24%) minmax(120px, 19%) minmax(0, 1fr);
}
.cpn-fabstd-row.has-logo.has-cert {
grid-template-columns: clamp(150px, 15vw, 210px) minmax(140px, 21%) minmax(115px, 17%) minmax(0, 1fr);
}
.cpn-fabstd-row dt {
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-start;
}
.cpn-fabstd-logo {
display: block;
padding: 10px 12px;
background: var(--bg-alt);
border: 1px solid var(--hair);
}
.cpn-fabstd-logo img {
display: block;
width: 100%;
height: auto;
}
.cpn-fabstd-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--head);
line-height: 1.3;
}
.cpn-fabstd-cert {
display: flex;
flex-direction: column;
gap: 3px;
}
.cpn-fabstd-certlabel {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
opacity: 0.75;
}
.cpn-fabstd-by {
font-size: 13.5px;
line-height: 1.5;
color: var(--head);
}
.cpn-fabstd-row dd {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 62ch;
}
.cpn-fabtime {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.cpn-fabtime::before {
content: "";
position: absolute;
left: 50%;
top: 10px;
bottom: 10px;
width: 2px;
margin-left: -1px;
background-image: repeating-linear-gradient(180deg, var(--hair) 0 9px, transparent 9px 16px);
}
.cpn-fabtime-step {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 20px 0;
}
.cpn-fabtime-step::before {
content: "";
position: absolute;
top: 38px;
height: 1px;
width: 54px;
background: var(--hair);
right: 50%;
margin-right: 18px;
}
.cpn-fabtime-step::after {
content: "";
position: absolute;
top: 35px;
width: 7px;
height: 7px;
background: var(--thread);
right: 50%;
margin-right: 69px;
}
.cpn-fabtime-step:nth-child(even)::before {
right: auto;
left: 50%;
margin-right: 0;
margin-left: 18px;
}
.cpn-fabtime-step:nth-child(even)::after {
right: auto;
left: 50%;
margin-right: 0;
margin-left: 69px;
}
.cpn-fabtime-mark {
position: absolute;
left: 50%;
top: 26px;
width: 34px;
height: 34px;
margin-left: -17px;
display: flex;
align-items: center;
justify-content: center;
color: var(--thread);
background: var(--bg);
}
.cpn-fabtime-mark svg,
.cpn-fabtime-mark .cpn-icon-mask {
display: block;
}
.cpn-fabtime-body {
grid-column: 1;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
padding-right: 84px;
text-align: right;
align-items: flex-end;
}
.cpn-fabtime-step:nth-child(even) .cpn-fabtime-body {
grid-column: 2;
padding-right: 0;
padding-left: 84px;
text-align: left;
align-items: flex-start;
}
.cpn-fabtime-year {
font-family: var(--font-display);
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
color: var(--thread);
font-variant-numeric: tabular-nums;
}
.cpn-fabtime-name {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--head);
line-height: 1.35;
}
.cpn-fabtime-text {
font-size: 14.5px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 42ch;
}
@media (max-width: 860px) {
.cpn-fabstd-row,
.cpn-fabstd-row.has-logo,
.cpn-fabstd-row.has-cert,
.cpn-fabstd-row.has-logo.has-cert {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.cpn-fabstd-logo {
max-width: 190px;
}
.cpn-fabtime::before {
left: 17px;
margin-left: 0;
}
.cpn-fabtime-step {
grid-template-columns: minmax(0, 1fr);
padding: 16px 0;
}
.cpn-fabtime-step::before,
.cpn-fabtime-step:nth-child(even)::before {
right: auto;
left: 17px;
margin: 0;
top: 34px;
width: 26px;
}
.cpn-fabtime-step::after,
.cpn-fabtime-step:nth-child(even)::after {
right: auto;
left: 47px;
margin: 0;
top: 31px;
}
.cpn-fabtime-mark {
left: 17px;
top: 22px;
margin-left: -17px;
}
.cpn-fabtime-body,
.cpn-fabtime-step:nth-child(even) .cpn-fabtime-body {
grid-column: 1;
padding: 0 0 0 66px;
text-align: left;
align-items: flex-start;
}
.cpn-fabtime-text {
max-width: none;
}
}
.cpn-fabbanner {
margin: 0 auto;
position: relative;
width: fit-content;
max-width: 100%;
border: 1px solid var(--hair);
background: var(--bg-alt);
}
.cpn-fabbanner img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 460px;
}
.cpn-fabbanner::after {
content: "";
position: absolute;
right: 11px;
top: 11px;
width: 13px;
height: 13px;
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 13px 1px, 1px 13px;
background-position: center, center;
background-repeat: no-repeat;
opacity: 0.5;
}
.cpn-fabclaim {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 26px 48px;
}
.cpn-fabclaim + .cpn-fabclaim {
margin-top: 44px;
padding-top: 40px;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
.cpn-fabclaim.has-img {
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
align-items: center;
}
.cpn-fabclaim-fig {
margin: 0;
border: 1px solid var(--hair);
background: var(--bg-alt);
}
.cpn-fabclaim-fig img {
display: block;
width: 100%;
height: auto;
}
.cpn-fabclaim-text {
min-width: 0;
}
.cpn-fabclaim-head {
position: relative;
margin: 0 0 16px;
padding-bottom: 18px;
font-size: clamp(27px, 3.4vw, 44px);
line-height: 1.32;
letter-spacing: -0.01em;
max-width: 26ch;
}
.cpn-fabclaim-head::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 76px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
}
.cpn-fabclaim-sub {
margin: 0 0 14px;
color: var(--thread);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0;
font-size: clamp(18px, 1.9vw, 24px);
line-height: 1.45;
max-width: 36ch;
}
.cpn-fabclaim-body {
margin: 0;
color: var(--ink-soft);
font-size: 16px;
line-height: 1.75;
max-width: 76ch;
}
@media (max-width: 900px) {
.cpn-fabclaim.has-img {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.cpn-fabcell-claim::after {
transition: none;
}
.cpn-fabcell-media img {
transition: none;
}
}
.about-intro .stat-inline {
display: block;
margin-top: clamp(26px, 3.4vw, 38px);
padding-left: 26px;
position: relative;
}
.about-intro .stat-inline::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 9px;
border-right: 1px solid var(--hair);
background-image: repeating-linear-gradient(180deg, var(--hair) 0 1px, transparent 1px 9px);
}
.about-intro .stat-inline > .value-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: baseline;
column-gap: clamp(14px, 1.8vw, 22px);
padding: 0;
border: 0;
border-top: 1px solid var(--hair);
padding-block: clamp(13px, 1.5vw, 17px);
}
.about-intro .stat-inline > .value-card:first-child {
border-top: 0;
padding-top: 0;
}
.about-intro .stat-inline > .value-card:last-child {
padding-bottom: 0;
}
.about-intro .stat-inline > .value-card::before {
content: "";
position: absolute;
left: -26px;
top: calc(clamp(13px, 1.5vw, 17px) + 0.42em);
width: 18px;
height: 2px;
background: var(--thread);
}
.about-intro .stat-inline > .value-card:first-child::before {
top: 0.42em;
}
.about-intro .stat-inline .value-num {
margin: 0;
min-width: 2.6em;
font-family: var(--font-display);
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--head);
font-variant-numeric: tabular-nums;
}
.about-intro .stat-inline .value-num em {
font-style: normal;
font-size: 0.5em;
color: var(--thread);
margin-left: 0.04em;
vertical-align: 0.38em;
}
.about-intro .stat-inline .value-card > p:last-child {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
}
.values-grid {
display: block;
counter-reset: value;
}
.values-grid > .value-card {
display: grid;
grid-template-columns: 3.2em minmax(0, 1fr);
column-gap: clamp(16px, 2vw, 28px);
align-items: start;
padding: clamp(22px, 2.6vw, 30px) 0;
border: 0;
border-top: 1px solid var(--hair);
background: transparent;
}
.values-grid > .value-card:first-child {
border-top: 0;
padding-top: 0;
}
.values-grid > .value-card:last-child {
padding-bottom: 0;
}
.values-grid > .value-card::before {
counter-increment: value;
content: "0" counter(value);
grid-row: 1/span 2;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
line-height: 1.9;
}
.values-grid > .value-card .value-num {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: clamp(19px, 1.9vw, 24px);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--head);
}
.values-grid > .value-card > p:last-child {
margin: 0;
max-width: 62ch;
font-size: 16px;
line-height: 1.7;
color: var(--ink-soft);
}
.cert-grid {
display: block;
}
.cert-grid > .cert-card {
display: grid;
grid-template-columns: 4.5em minmax(0, 15em) minmax(0, 1fr);
column-gap: clamp(16px, 2.4vw, 32px);
align-items: baseline;
padding: clamp(15px, 1.7vw, 19px) 0;
border: 0;
border-top: 1px solid var(--hair);
border-radius: 0;
background: transparent;
}
.cert-grid > .cert-card:first-child {
border-top: 0;
padding-top: 0;
}
.cert-grid > .cert-card:last-child {
padding-bottom: 0;
}
.cert-grid > .cert-card .cert-mark {
width: auto;
height: auto;
display: block;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--thread);
}
.cert-grid > .cert-card h3 {
margin: 0;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.35;
color: var(--head);
}
.cert-grid > .cert-card p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
}
.process-grid:not(.is-timeline) {
display: block;
border: 0;
border-radius: 0;
overflow: visible;
position: relative;
counter-reset: step;
padding-left: 46px;
}
.process-grid:not(.is-timeline)::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
bottom: auto;
height: calc(100% - 1.6em);
width: 2px;
background-image: repeating-linear-gradient(180deg, var(--thread) 0 9px, transparent 9px 16px);
}
.process-grid:not(.is-timeline) > .process-step {
position: relative;
padding: clamp(20px, 2.4vw, 28px) 0;
border: 0;
border-top: 1px solid var(--hair);
background: transparent;
}
.process-grid:not(.is-timeline) > .process-step:first-child {
border-top: 0;
padding-top: 0;
}
.process-grid:not(.is-timeline) > .process-step:last-child {
padding-bottom: 0;
}
.process-grid:not(.is-timeline) > .process-step::before {
counter-increment: step;
content: "0" counter(step);
position: absolute;
left: calc(var(--stair, 0px) - 46px);
top: calc(clamp(20px, 2.4vw, 28px) + 0.1em);
width: 46px;
padding-left: 16px;
margin: 0;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
background-image: linear-gradient(90deg, var(--thread) 0 11px, transparent 11px);
background-repeat: no-repeat;
background-position: 0 0.62em;
background-size: 11px 2px;
}
.process-grid:not(.is-timeline) > .process-step:first-child::before {
top: 0.1em;
}
.process-grid:not(.is-timeline) > .process-step h3 {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: clamp(17px, 1.7vw, 21px);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--head);
}
.process-grid:not(.is-timeline) > .process-step p {
margin: 0;
max-width: 62ch;
font-size: 15.5px;
line-height: 1.7;
color: var(--ink-soft);
}
.process-grid.is-timeline {
border: 0;
border-radius: 0;
overflow: visible;
position: relative;
gap: clamp(20px, 2.6vw, 34px);
padding-top: 26px;
}
.process-grid.is-timeline::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
}
.process-grid.is-timeline > .process-step {
position: relative;
padding: 0;
border: 0;
background: transparent;
}
.process-grid.is-timeline > .process-step::before {
counter-increment: none;
content: "";
position: absolute;
left: 0;
top: -26px;
width: 2px;
height: 14px;
margin: 0;
background: var(--thread);
}
.process-grid.is-timeline > .process-step h3 {
margin: 0 0 8px;
font-family: var(--font-display);
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--head);
}
.process-grid.is-timeline > .process-step p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
}
.about-figure {
align-self: start;
}
@media (max-width: 900px) {
.process-grid.is-timeline {
padding-top: 0;
}
.process-grid.is-timeline::before {
display: none;
}
.process-grid.is-timeline > .process-step {
padding: clamp(18px, 2.4vw, 24px) 0 0 22px;
}
.process-grid.is-timeline > .process-step::before {
left: 0;
top: calc(clamp(18px, 2.4vw, 24px) + 0.5em);
width: 12px;
height: 2px;
}
.process-grid.is-timeline > .process-step:first-child {
padding-top: 0;
}
.process-grid.is-timeline > .process-step:first-child::before {
top: 0.5em;
}
.cert-grid > .cert-card {
grid-template-columns: 4.5em minmax(0, 1fr);
row-gap: 4px;
}
.cert-grid > .cert-card p {
grid-column: 2;
}
}
@media (max-width: 560px) {
.values-grid > .value-card {
grid-template-columns: minmax(0, 1fr);
row-gap: 6px;
}
.values-grid > .value-card::before {
grid-row: auto;
line-height: 1.4;
}
.about-intro .stat-inline > .value-card {
grid-template-columns: minmax(0, 1fr);
row-gap: 4px;
}
}
@media (min-width: 901px) {
.wrap:has(> .values-grid),
.wrap:has(> .cert-grid),
.wrap:has(> .process-grid:not(.is-timeline)) {
display: grid;
grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
column-gap: clamp(36px, 5vw, 88px);
align-items: start;
}
.wrap:has(> .values-grid) > .section-head,
.wrap:has(> .cert-grid) > .section-head,
.wrap:has(> .process-grid:not(.is-timeline)) > .section-head {
margin-bottom: 0;
max-width: none;
position: sticky;
top: clamp(24px, 6vh, 64px);
}
.wrap:has(> .values-grid) > .section-head h2,
.wrap:has(> .cert-grid) > .section-head h2,
.wrap:has(> .process-grid:not(.is-timeline)) > .section-head h2 {
font-size: clamp(24px, 2.5vw, 34px);
line-height: 1.14;
}
.values-grid > .value-card {
grid-template-columns: 3.2em minmax(0, 14rem) minmax(0, 1fr);
column-gap: clamp(16px, 2vw, 34px);
align-items: baseline;
}
.values-grid > .value-card::before {
grid-row: auto;
line-height: 1.9;
}
.values-grid > .value-card .value-num {
margin-bottom: 0;
}
.values-grid > .value-card > p:last-child {
max-width: 68ch;
}
.process-grid:not(.is-timeline) {
display: grid;
grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
column-gap: clamp(16px, 2vw, 34px);
}
.process-grid:not(.is-timeline) > .process-step {
display: grid;
grid-column: 1/-1;
grid-template-columns: subgrid;
align-items: baseline;
}
.process-grid:not(.is-timeline) > .process-step h3 {
margin-bottom: 0;
}
.process-grid:not(.is-timeline) > .process-step p {
max-width: 68ch;
}
.cert-grid > .cert-card {
grid-template-columns: 4.5em minmax(0, 16rem) minmax(0, 1fr);
}
.cert-grid > .cert-card p {
max-width: 68ch;
}
}
@media (min-width: 901px) {
.process-grid:not(.is-timeline)::before {
display: none;
}
.process-grid:not(.is-timeline) > .process-step::after {
content: "";
position: absolute;
left: calc(var(--stair, 0px) - 46px);
top: 0;
bottom: 0;
width: 2px;
background-image: repeating-linear-gradient(180deg, var(--thread) 0 9px, transparent 9px 16px);
}
.process-grid:not(.is-timeline) > .process-step:first-child::after {
top: -0.4em;
}
.process-grid:not(.is-timeline) > .process-step > :first-child {
padding-left: var(--stair, 0px);
}
.process-grid:not(.is-timeline) > .process-step:nth-child(2) {
--stair: 24px;
}
.process-grid:not(.is-timeline) > .process-step:nth-child(3) {
--stair: 48px;
}
.process-grid:not(.is-timeline) > .process-step:nth-child(4) {
--stair: 72px;
}
.process-grid:not(.is-timeline) > .process-step:nth-child(5) {
--stair: 96px;
}
.process-grid:not(.is-timeline) > .process-step:nth-child(6) {
--stair: 120px;
}
.process-grid:not(.is-timeline) > .process-step:nth-child(n+7) {
--stair: 144px;
}
}
.about-intro.is-solo {
grid-template-columns: minmax(0, 1fr);
}
.cpn-mapblock {
margin: 0;
}
.cpn-mapblock.is-half {
max-width: min(46%, 640px);
}
.cpn-mapblock.is-third {
max-width: min(32%, 440px);
}
.cpn-mapblock > img,
.cpn-mapblock > a > img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
}
.cpn-mapblock .map-placeholder {
height: 320px;
border-radius: var(--radius-sm);
}
.cpn-mapblock > a {
display: block;
text-decoration: none;
}
.cpn-mapblock > a:hover img {
border-color: var(--accent);
}
.cpn-mapblock .figure-caption {
margin-top: 10px;
}
@media (max-width: 860px) {
.cpn-mapblock.is-half,
.cpn-mapblock.is-third {
max-width: none;
}
.cpn-mapblock .map-placeholder {
height: 220px;
}
}
.cpn-figblock {
display: table;
width: auto;
margin-inline: auto;
min-height: 0;
border: 0;
padding: 0;
background: transparent;
}
.cpn-figblock.is-half {
max-width: min(46%, 640px);
}
.cpn-figblock.is-third {
max-width: min(32%, 440px);
}
.cpn-figblock > img {
display: block;
max-width: 100%;
height: auto;
max-height: 520px;
border: 1px solid var(--hair);
border-radius: var(--radius);
}
.cpn-figblock .figure-caption {
display: table-caption;
caption-side: bottom;
position: static;
padding: 12px 0 0;
margin: 12px 0 0;
background: none;
color: var(--ink-soft);
font-size: 13px;
line-height: 1.55;
text-align: left;
border-top: 2px solid transparent;
border-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px) 2;
}
@media (max-width: 900px) {
.cpn-figblock.is-half,
.cpn-figblock.is-third {
max-width: none;
}
}
.page-template-page-about .section::before,
.page-template-page-about .page-title::before {
display: none;
}
.section-alt {
--band-fade: min(clamp(48px, 7vw, 110px), 34%);
background: linear-gradient(180deg, transparent 0, var(--bg-alt) var(--band-fade), var(--bg-alt) calc(100% - var(--band-fade)), transparent 100%);
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: var(--stitch) var(--stitch);
}
.hero,
.section.has-video-bg {
z-index: 1;
}
.cat-card-media::after,
.cpn-card-media::after,
.cat-card:hover .cat-card-media::after,
.cpn-card:hover .cpn-card-media::after,
.cpn-post-media::after,
.cpn-fabcell-media::after,
.cpn-fabbanner::after,
.herox-figure:has(.herox-photo)::after,
.cpn-article-body figure:has(img)::after {
content: none;
}
.cpn-gcards.is-zig {
grid-template-rows: minmax(0, auto) 132px minmax(0, auto);
gap: 0 clamp(16px, 2vw, 30px);
align-items: end;
}
.cpn-gcards.is-zig::before {
content: "";
grid-column: 1/-1;
grid-row: 2;
align-self: stretch;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27%3E%3Cpolyline points=%270,50 25,10 50,50 75,90 100,50%27 fill=%27none%27 stroke=%27%23f28c28%27 stroke-width=%271.6%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27 stroke-dasharray=%274 3%27/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: calc(200% / var(--cpn-cols, 4)) 100%;
}
.is-zig .cpn-gcard,
.is-zig .cpn-gcard .cpn-iconbox {
border-top: 0;
}
.is-zig .cpn-gcard {
display: flex;
flex-direction: column;
position: relative;
background: none;
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
text-align: left;
}
.is-zig .cpn-gcard:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.is-zig .cpn-gcard:nth-child(2) {
grid-column: 2;
grid-row: 3;
align-self: start;
}
.is-zig .cpn-gcard:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.is-zig .cpn-gcard:nth-child(4) {
grid-column: 4;
grid-row: 3;
align-self: start;
}
.is-zig .cpn-gcard:nth-child(odd) {
padding-bottom: 12px;
}
.is-zig .cpn-gcard:nth-child(even) {
padding-top: 12px;
}
.is-zig .cpn-gcard:nth-child(odd) .cpn-iconbox {
order: 4;
margin: 12px 0 0;
}
.is-zig .cpn-gcard:nth-child(even) .cpn-iconbox {
order: 0;
margin: 0 0 12px;
}
.is-zig .cpn-gcard h3 {
order: 2;
}
.is-zig .cpn-gcard p {
order: 3;
}
.is-zig .cpn-gcard .cpn-iconbox {
display: flex;
justify-content: center;
}
.is-zig .cpn-gcard .cap-icon {
width: 48px;
height: 48px;
background: none;
border: 0;
border-radius: 0;
color: var(--thread);
display: grid;
place-items: center;
}
.is-zig .cpn-gcard .cap-icon svg,
.is-zig .cpn-gcard .cpn-icon-img {
width: 41px;
height: 41px;
}
.is-zig .cpn-gcard::before {
content: none;
}
.is-zig .cpn-gcard h3 {
font-family: var(--font-display);
font-size: 17px;
margin: 0 0 6px;
}
.is-zig .cpn-gcard, .is-zig .cpn-gcard * {
text-align: center;
}
.is-zig .cpn-gcard p {
font-size: 14px;
margin: 0 auto;
}
@media (max-width: 860px) {
.cpn-gcards.is-zig {
grid-template-rows: none;
gap: 22px;
}
.cpn-gcards.is-zig::before {
display: none;
}
.is-zig .cpn-gcard:nth-child(n) {
grid-column: 1;
grid-row: auto;
align-self: start;
padding: 0;
}
.is-zig .cpn-gcard:nth-child(n) .cpn-iconbox {
order: 0;
margin: 0 0 10px;
}
}
.cpn-gcard,
.section--navy .cpn-gcard,
:root:not([data-theme=dark]) .section--navy .cpn-gcard {
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
}
:root .cpn-hub-ring .cpn-gcard,
:root .section--navy .cpn-hub-ring .cpn-gcard {
background: var(--navy);
padding: 10px 12px;
}
:root[data-theme=light] .section--navy .cpn-hub-ring .cpn-gcard {
background: var(--bg-alt);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=dark]) .section--navy .cpn-hub-ring .cpn-gcard {
background: var(--bg-alt);
}
}
:root[data-theme=light] .section--navy .cpn-hub-lines line {
stroke: var(--line-strong);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=dark]) .section--navy .cpn-hub-lines line {
stroke: var(--line-strong);
}
}
:root .section--navy.has-video-bg .cpn-hub-ring .cpn-gcard,
:root[data-theme=light] .section--navy.has-video-bg .cpn-hub-ring .cpn-gcard {
background: #16283f;
}
:root[data-theme=light] .section--navy.has-video-bg .cpn-hub-lines line {
stroke: rgba(255, 255, 255, 0.42);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=dark]) .section--navy.has-video-bg .cpn-hub-ring .cpn-gcard {
background: #16283f;
}
:root:not([data-theme=dark]) .section--navy.has-video-bg .cpn-hub-lines line {
stroke: rgba(255, 255, 255, 0.42);
}
}
@keyframes cpn-seam-draw {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@media (prefers-reduced-motion: no-preference) {
.cpn-gcards.is-zig.is-anim-ready > .cpn-gcard {
animation: none;
animation-timeline: auto;
opacity: 0;
translate: 0 16px;
}
.cpn-gcards.is-zig.is-anim-ready::before {
clip-path: inset(0 100% 0 0);
}
.cpn-gcards.is-zig.is-drawn::before {
animation: cpn-seam-draw 1.5s cubic-bezier(0.35, 0, 0.2, 1) both;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard {
animation: cpn-gcard-rise 0.65s cubic-bezier(0.22, 0.7, 0.2, 1) both;
animation-timeline: auto;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n+1) {
animation-delay: 0.2s;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n+2) {
animation-delay: 0.5s;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n+3) {
animation-delay: 0.8s;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n) {
animation-delay: 1.1s;
}
}
.cpn-gcards.is-zig::after,
.cpn-gcards.is-zig.is-anim-ready::after {
content: "";
grid-column: 1/-1;
grid-row: 2;
align-self: stretch;
pointer-events: none;
opacity: 0;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: 0% 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M2 2 L14 8 L2 14 L5 8 Z%27 fill=%27%23f28c28%27/%3E%3C/svg%3E");
}
@keyframes cpn-seam-head {
0% {
opacity: 0;
background-position: 0% 50%;
}
4% {
opacity: 1;
background-position: 4% 34%;
}
12.5% {
background-position: 12.5% 10%;
}
37.5% {
background-position: 37.5% 90%;
}
62.5% {
background-position: 62.5% 10%;
}
87.5% {
background-position: 87.5% 90%;
}
96% {
opacity: 1;
background-position: 96% 34%;
}
100% {
opacity: 0;
background-position: 100% 50%;
}
}
.cpn-gcards.is-zig > .cpn-gcard::after {
content: "";
position: absolute;
left: 50%;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--thread);
box-shadow: 0 0 0 3px var(--bg);
opacity: 0;
scale: 0;
}
.cpn-gcards.is-zig > .cpn-gcard:nth-child(odd)::after {
bottom: -13px;
translate: -50% 50%;
}
.cpn-gcards.is-zig > .cpn-gcard:nth-child(even)::after {
top: -13px;
translate: -50% -50%;
}
@keyframes cpn-seam-mark {
from {
opacity: 0;
scale: 0;
}
60% {
opacity: 1;
scale: 1.35;
}
to {
opacity: 1;
scale: 1;
}
}
@media (prefers-reduced-motion: no-preference) {
.cpn-gcards.is-zig.is-drawn::after {
animation: cpn-seam-head 1.5s linear both;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard::after {
animation: cpn-seam-mark 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n+1)::after {
animation-delay: 0.19s;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n+2)::after {
animation-delay: 0.56s;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n+3)::after {
animation-delay: 0.94s;
}
.cpn-gcards.is-zig.is-drawn > .cpn-gcard:nth-child(4n)::after {
animation-delay: 1.31s;
}
}
@media (prefers-reduced-motion: reduce) {
.cpn-gcards.is-zig > .cpn-gcard::after {
opacity: 1;
scale: 1;
}
}
.cpn-fabcats {
display: grid;
gap: 34px 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.cpn-fabcats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.cpn-fabcats {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
}
.cpn-fabcat {
display: grid;
gap: 0;
align-content: start;
min-width: 0;
}
.cpn-fabcat.cpn-linkbox {
cursor: pointer;
}
.cpn-fabcat-media {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
background: var(--bg-alt);
border: 1px solid var(--hair);
border-radius: 0;
}
.cpn-fabcat-media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cpn-fabcat:hover .cpn-fabcat-media img,
.cpn-fabcat:focus-within .cpn-fabcat-media img {
transform: scale(1.035);
}
.cpn-fabcat-body {
position: relative;
display: grid;
gap: 7px;
align-content: start;
padding: 16px 0 0;
margin-top: 11px;
background-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px);
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: 0 0;
}
.cpn-fabcat-body::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 2px;
width: 100%;
background-image: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px);
clip-path: inset(0 100% 0 0);
transition: clip-path 0.55s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cpn-fabcat:hover .cpn-fabcat-body::before,
.cpn-fabcat:focus-within .cpn-fabcat-body::before {
clip-path: inset(0 0 0 0);
}
.cpn-fabcat-title {
margin: 0;
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--head);
overflow-wrap: anywhere;
min-width: 0;
}
.cpn-fabcat-title a {
color: inherit;
text-decoration: none;
}
.cpn-fabcat:hover .cpn-fabcat-title a {
color: var(--accent-dark);
}
.cpn-fabcat-sub {
margin: 0;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
color: var(--head);
}
.cpn-fabcat-desc {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 46ch;
}
.cpn-fabcat-cta {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: start;
margin-top: 5px;
padding: 11px 16px;
border: 1px solid var(--line-strong);
border-radius: 2px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--head);
transition: border-color 0.15s ease, color 0.15s ease;
}
.cpn-fabcat-cta .cpn-ui-ico {
width: 16px;
height: 16px;
transform: rotate(-90deg);
}
.cpn-fabcat:hover .cpn-fabcat-cta,
.cpn-fabcat:focus-within .cpn-fabcat-cta {
border-color: var(--thread);
color: var(--thread);
}
.cpn-fabcat.cpn-linkbox:focus-visible {
outline: 2px solid var(--thread);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.cpn-fabcat-media img,
.cpn-fabcat-body::before,
.cpn-fabcat-cta {
transition: none;
}
.cpn-fabcat:hover .cpn-fabcat-media img,
.cpn-fabcat:focus-within .cpn-fabcat-media img {
transform: none;
}
.cpn-fabcat:hover .cpn-fabcat-body::before,
.cpn-fabcat:focus-within .cpn-fabcat-body::before {
clip-path: inset(0 0 0 0);
}
}
.cpn-fabcat-badge {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: block;
width: 64px;
height: 64px;
}
.cpn-fabcat-badge img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 700px) {
.cpn-fabcat-badge {
right: 12px;
width: 54px;
height: 54px;
}
}
.cpn-fabcats-band .section-head:is(.has-text-align-center, .has-text-align-right) {
max-width: none;
}
.cpn-fabcats-band .section-head.has-text-align-center p {
max-width: 62ch;
}
.cpn-fl-hero {
position: relative;
overflow: hidden;
background-color: var(--white);
color: var(--navy);
padding-block: clamp(44px, 6vw, 96px);
}
.cpn-fl-hero.has-bg {
background-image: var(--cpn-fl-hero-img);
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
}
.cpn-fl-hero-copy {
position: relative;
z-index: 1;
}
.cpn-fl-hero.has-bg .cpn-fl-hero-copy {
padding-right: 56%;
}
@media (max-width: 1349px) {
.cpn-fl-hero.has-bg {
background-image: none;
}
.cpn-fl-hero.has-bg::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 47%;
background-image: var(--cpn-fl-hero-img);
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
mask-image: linear-gradient(90deg, transparent 0, #000 56px);
pointer-events: none;
}
.cpn-fl-hero.has-bg .cpn-fl-hero-copy {
padding-right: calc(47% + 12px);
}
}
@media (max-width: 760px) {
.cpn-fl-hero.has-bg {
--cpn-fl-photo-height:clamp(160px, 30vw, 228px);
padding-bottom: calc(var(--cpn-fl-photo-height) + 32px);
background-image: var(--cpn-fl-hero-img-sm, var(--cpn-fl-hero-img));
background-size: auto var(--cpn-fl-photo-height);
background-position: right bottom;
}
.cpn-fl-hero.has-bg::before {
display: none;
}
.cpn-fl-hero.has-bg .cpn-fl-hero-copy {
padding-right: 24px;
}
}
.cpn-fl-hero h1 {
margin: 0;
color: var(--navy);
}
.cpn-fl-hero h1 span {
display: block;
margin-top: 6px;
font-size: clamp(19px, 2.2vw, 28px);
font-weight: 600;
color: rgba(20, 43, 74, 0.74);
letter-spacing: -0.01em;
line-height: 1.35;
}
.cpn-fl-hero-for {
margin: 14px 0 0;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--navy);
}
.cpn-fl-hero-lead {
margin: 10px 0 0;
color: rgba(20, 43, 74, 0.8);
font-size: 16.5px;
line-height: 1.7;
max-width: 56ch;
}
.cpn-fl-chips {
list-style: none;
margin: 22px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
max-width: 520px;
}
@media (max-width: 560px) {
.cpn-fl-chips {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: none;
}
}
.cpn-fl-chips li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 11px 6px 9px;
min-width: 0;
border: 1px solid rgba(20, 43, 74, 0.32);
border-radius: 2px;
background: rgba(255, 255, 255, 0.9);
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
color: var(--navy);
text-align: center;
line-height: 1.3;
overflow-wrap: anywhere;
}
.cpn-fl-chip-mark {
display: block;
color: var(--navy);
}
.cpn-fl-chip-mark svg {
display: block;
width: clamp(34px, 4.6vw, 48px);
height: clamp(34px, 4.6vw, 48px);
}
.cpn-fl-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.cpn-fl-hero .btn-outline {
color: var(--navy);
border-color: rgba(20, 43, 74, 0.34);
}
.cpn-fl-hero .btn-outline:hover {
border-color: var(--navy);
color: var(--navy);
}
body.page-template-page-fabrics .cpn-gcard .cap-icon .cpn-icon-img,
body.page-template-page-fabrics .cpn-gcard .cpn-iconbox .cpn-icon-img,
body.home .cpn-gcards .cpn-gcard .cap-icon .cpn-icon-img,
body.home .cpn-gcards .cpn-gcard .cpn-iconbox .cpn-icon-img {
width: clamp(76px, 8.4vw, 112px);
height: clamp(76px, 8.4vw, 112px);
}
body.page-template-page-fabrics .cpn-gcard .cap-icon svg,
body.page-template-page-fabrics .cpn-gcard .cpn-iconbox .cap-icon svg,
body.home .cpn-gcards .cpn-gcard .cap-icon svg,
body.home .cpn-gcards .cpn-gcard .cpn-iconbox .cap-icon svg {
width: clamp(76px, 8.4vw, 112px);
height: clamp(76px, 8.4vw, 112px);
}
body.page-template-page-fabrics .cpn-gcard .cpn-iconbox {
margin-bottom: 18px;
}
body.home .cpn-hub-ring .cpn-gcard .cap-icon .cpn-icon-img,
body.home .cpn-hub-ring .cpn-gcard .cap-icon svg {
width: clamp(44px, 5vw, 60px);
height: clamp(44px, 5vw, 60px);
}
body.home .cpn-hub-ring .cpn-gcard .cpn-iconbox {
margin-bottom: 8px;
}
body.home .cpn-gcards.is-zig .cpn-gcard .cap-icon {
width: auto;
height: auto;
}
.cpn-fl-band .section-head:is(.has-text-align-center, .has-text-align-right) {
max-width: none;
}
.cpn-fl-band .section-head.has-text-align-center p {
max-width: 62ch;
}
.cpn-fl-cards {
display: grid;
gap: 30px 24px;
grid-template-columns: repeat(var(--cpn-fl-cols, 4), minmax(0, 1fr));
}
@media (max-width: 1100px) {
.cpn-fl-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.cpn-fl-cards {
grid-template-columns: minmax(0, 1fr);
}
}
.cpn-fl-card {
display: grid;
gap: 0;
align-content: start;
min-width: 0;
}
.cpn-fl-card-swatch {
display: block;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--bg-alt);
border: 1px solid var(--hair);
}
.cpn-fl-card-swatch img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.cpn-fl-card:hover .cpn-fl-card-swatch img {
transform: scale(1.035);
}
.cpn-fl-card-body {
display: grid;
gap: 7px;
align-content: start;
padding: 15px 0 0;
margin-top: 11px;
background-image: repeating-linear-gradient(90deg, var(--hair) 0 9px, transparent 9px 16px);
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: 0 0;
}
.cpn-fl-card-name {
margin: 0;
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--head);
overflow-wrap: anywhere;
min-width: 0;
}
.cpn-fl-card-desc {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: var(--ink-soft);
}
.cpn-fl-card-label {
margin: 4px 0 0;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
color: var(--head);
letter-spacing: 0.02em;
}
.cpn-fl-points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.cpn-fl-points li {
position: relative;
padding-left: 20px;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
}
.cpn-fl-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 11px;
height: 6px;
border-left: 2px solid var(--thread);
border-bottom: 2px solid var(--thread);
transform: rotate(-45deg);
}
.cpn-fl-card-suit {
margin: 6px 0 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-soft);
}
.cpn-fl-card-suit strong {
color: var(--head);
font-family: var(--font-display);
font-weight: 600;
}
.cpn-fl-tiles {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 18px 16px;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.cpn-fl-tiles {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.cpn-fl-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cpn-fl-tile {
display: grid;
gap: 9px;
min-width: 0;
}
.cpn-fl-tile-swatch {
display: block;
aspect-ratio: 1/1;
overflow: hidden;
background: var(--bg-alt);
border: 1px solid var(--hair);
}
.cpn-fl-tile-swatch img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cpn-fl-tile-name {
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--head);
text-align: center;
}
.cpn-fl-tiles-foot {
margin-top: 26px;
text-align: center;
}
.cpn-fl-tiles-note {
margin: 0 auto;
max-width: 62ch;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.7;
}
.cpn-fl-tiles-aud {
margin: 12px 0 0;
font-size: 14px;
color: var(--ink-soft);
}
.cpn-fl-tiles-aud strong {
color: var(--head);
font-family: var(--font-display);
font-weight: 600;
}
.cpn-fl-matrix-scroll {
overflow-x: auto;
contain: paint;
}
.cpn-fl-matrix-scroll:focus-visible {
outline: 2px solid var(--thread);
outline-offset: 3px;
}
.cpn-fl-matrix {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
min-width: 940px;
}
.cpn-fl-matrix th, .cpn-fl-matrix td {
border-bottom: 1px solid var(--hair);
padding: 11px 8px;
text-align: center;
}
.cpn-fl-matrix thead th {
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--head);
line-height: 1.3;
vertical-align: bottom;
}
.cpn-fl-matrix thead .cpn-fl-matrix-groups th {
background: var(--navy);
color: var(--white);
font-size: 13px;
padding: 10px 12px;
border-bottom: 0;
}
.cpn-fl-matrix thead .cpn-fl-matrix-groups td {
border: 0;
}
.cpn-fl-matrix thead .cpn-fl-matrix-groups th + th {
border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.cpn-fl-matrix th[scope=row], .cpn-fl-matrix-corner {
position: sticky;
left: 0;
z-index: 1;
text-align: left;
white-space: nowrap;
background: var(--bg);
padding-right: 18px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--head);
}
.section-alt .cpn-fl-matrix th[scope=row], .section-alt .cpn-fl-matrix-corner {
background: var(--bg-alt);
}
.cpn-fl-matrix-corner {
z-index: 2;
border-bottom: 2px solid var(--line-strong);
}
.cpn-fl-matrix thead tr:last-child th {
border-bottom: 2px solid var(--line-strong);
}
.cpn-fl-matrix tbody tr:hover th[scope=row] {
background: var(--bg-panel);
}
.cpn-fl-matrix tbody tr:hover td {
background: var(--bg-panel);
}
.cpn-fl-tick {
display: inline-block;
width: 13px;
height: 7px;
border-left: 2.2px solid var(--thread);
border-bottom: 2.2px solid var(--thread);
transform: rotate(-45deg) translate(1px, -2px);
}
.cpn-fl-matrix td.is-on {
background: transparent;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.cpn-fl-cta {
position: relative;
background: var(--navy);
color: var(--white);
overflow: hidden;
}
.cpn-fl-cta.has-img::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--cpn-fl-cta-img);
background-size: cover;
background-position: center;
opacity: 0.22;
}
.cpn-fl-cta .wrap {
position: relative;
z-index: 1;
text-align: center;
}
.cpn-fl-cta h2 {
margin: 0;
color: var(--white);
}
.cpn-fl-cta p {
margin: 12px auto 0;
max-width: 58ch;
color: rgba(255, 255, 255, 0.82);
font-size: 15.5px;
line-height: 1.7;
}
.cpn-fl-cta .cpn-fl-actions {
justify-content: center;
}
.cpn-fl-cta .btn-outline {
color: var(--white);
border-color: rgba(255, 255, 255, 0.45);
}
.cpn-fl-cta .btn-outline:hover {
border-color: var(--white);
}
.cpn-fl-faq {
display: grid;
gap: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 34px;
}
@media (max-width: 860px) {
.cpn-fl-faq {
grid-template-columns: minmax(0, 1fr);
}
}
.cpn-fl-qa {
border-bottom: 1px solid var(--hair);
}
.cpn-fl-qa summary {
list-style: none;
cursor: pointer;
padding: 16px 30px 16px 0;
position: relative;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--head);
line-height: 1.5;
}
.cpn-fl-qa summary::-webkit-details-marker {
display: none;
}
.cpn-fl-qa summary::after {
content: "";
position: absolute;
right: 4px;
top: 50%;
width: 13px;
height: 13px;
transform: translateY(-50%);
background-image: linear-gradient(var(--thread), var(--thread)), linear-gradient(var(--thread), var(--thread));
background-size: 13px 1.5px, 1.5px 13px;
background-position: center, center;
background-repeat: no-repeat;
transition: background-size 0.2s ease;
}
.cpn-fl-qa[open] summary::after {
background-size: 13px 1.5px, 1.5px 0;
}
.cpn-fl-qa summary:focus-visible {
outline: 2px solid var(--thread);
outline-offset: 2px;
}
.cpn-fl-qa-body {
padding: 0 30px 16px 0;
}
.cpn-fl-qa-body p {
margin: 0;
font-size: 14.5px;
line-height: 1.7;
color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
.cpn-fl-card-swatch img, .cpn-fl-qa summary::after {
transition: none;
}
.cpn-fl-card:hover .cpn-fl-card-swatch img {
transform: none;
}
}
.cpn-gcards-sec .section-head:is(.has-text-align-center, .has-text-align-right),
.section:has(> .wrap > .section-head.has-text-align-center + .cpn-gcards) .section-head {
max-width: none;
}
.section-head.has-text-align-center + .cpn-gcards {
margin-top: 0;
}
.cpn-consent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
background: var(--navy);
color: var(--white);
border-top: 2px solid var(--thread);
}
.cpn-consent[hidden] {
display: none;
}
.cpn-consent-inner {
max-width: 1180px;
margin-inline: auto;
padding: calc(var(--stitch) * 2) calc(var(--stitch) * 2.5);
display: flex;
gap: calc(var(--stitch) * 2);
align-items: center;
flex-wrap: wrap;
}
.cpn-consent-copy {
flex: 1 1 32ch;
min-width: 0;
}
.cpn-consent-title {
font-family: var(--font-display);
font-size: 16px;
margin: 0 0 4px;
color: var(--white);
letter-spacing: 0.01em;
}
.cpn-consent-copy p {
margin: 0;
font-size: 13.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.86);
}
.cpn-consent-copy a {
color: var(--thread);
text-underline-offset: 3px;
}
.cpn-consent-actions {
display: flex;
gap: var(--stitch);
flex: 0 0 auto;
}
.cpn-consent-actions .btn {
min-width: 11ch;
justify-content: center;
}
.cpn-consent-actions .btn-outline {
background: transparent;
color: var(--white);
border-color: rgba(255, 255, 255, 0.45);
}
.cpn-consent-actions .btn-outline:hover {
border-color: var(--white);
background: rgba(255, 255, 255, 0.06);
}
.cpn-consent-actions .btn-primary {
background: var(--thread);
color: var(--navy);
border-color: var(--thread);
}
.cpn-consent-actions .btn-primary:hover {
background: #ffa040;
}
@media (max-width: 700px) {
.cpn-consent-copy {
flex: 0 0 auto;
}
.cpn-consent-inner {
flex-direction: column;
align-items: stretch;
gap: calc(var(--stitch) * 1.5);
padding: calc(var(--stitch) * 1.5) calc(var(--stitch) * 1.75);
max-height: 38vh;
overflow: auto;
padding-bottom: calc(var(--stitch) * 1.5 + env(safe-area-inset-bottom, 0px));
}
.cpn-consent-title {
font-size: 15px;
}
.cpn-consent-copy p {
font-size: 13px;
line-height: 1.55;
}
.cpn-consent-actions .btn {
flex: 1 1 0;
min-width: 0;
}
}
.cpn-consent-panel {
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.cpn-consent-panel[hidden] {
display: none;
}
.cpn-consent-panel .cpn-consent-inner {
align-items: flex-start;
padding-top: var(--stitch);
}
.cpn-consent-cats {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 32ch;
display: grid;
gap: var(--stitch);
}
.cpn-consent-cats label {
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
}
.cpn-consent-cats input {
margin-top: 3px;
accent-color: var(--thread);
flex: 0 0 auto;
}
.cpn-consent-cats input:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.cpn-consent-cats strong {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--white);
}
.cpn-consent-cats em {
display: block;
font-style: normal;
font-size: 12.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
}
.cpn-consent-reopen {
display: block;
margin: calc(var(--stitch) * 2) auto 0;
background: none;
border: 0;
padding: 4px 6px;
font: inherit;
font-size: 12.5px;
color: inherit;
opacity: 0.7;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.cpn-consent-reopen:hover {
opacity: 1;
}
@media (pointer: coarse) {
.nav-toggle {
width: 44px;
height: 44px;
}
.brand, .cpn-cbtn, .hero-dot {
position: relative;
}
.brand::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
.cpn-cbtn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
.hero-dots {
gap: 24px;
}
.hero-dot::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 34px;
height: 44px;
transform: translate(-50%, -50%);
}
}
.cpn-facts-wrap {
overflow-x: auto;
}
.cpn-facts {
width: 100%;
border-collapse: collapse;
font-size: 15px;
background: var(--surface);
border: 1px solid var(--hair, var(--line));
}
.cpn-facts th, .cpn-facts td {
padding: 13px 18px;
text-align: left;
vertical-align: top;
}
.cpn-facts th {
width: 190px;
white-space: nowrap;
font-weight: 600;
color: var(--head);
border-right: 1px solid var(--hair, var(--line));
}
.cpn-facts td {
color: var(--ink);
}
.cpn-facts tr + tr th, .cpn-facts tr + tr td {
border-top: 1px solid var(--hair, var(--line));
}
.cpn-facts td {
overflow-wrap: anywhere;
}
@media (max-width: 560px) {
.cpn-facts, .cpn-facts tbody, .cpn-facts tr, .cpn-facts th, .cpn-facts td {
display: block;
width: auto;
}
.cpn-facts th {
white-space: normal;
border-right: 0;
padding-bottom: 2px;
font-size: 12.5px;
letter-spacing: 0.02em;
color: var(--steel);
}
.cpn-facts td {
padding-top: 0;
}
.cpn-facts tr + tr th {
border-top: 1px solid var(--hair, var(--line));
padding-top: 13px;
}
.cpn-facts tr + tr td {
border-top: 0;
}
}
.cpn-next-grid > .cat-card {
padding: 0;
}
.cpn-next-grid .cat-card-body {
padding: 18px 20px 20px;
gap: 6px;
}
.cpn-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-note.is-error {
color: var(--err, #c0392b);
}
.cpn-facts--3 th[scope=row] {
width: 34%;
white-space: normal;
}
.cpn-facts--3 td {
width: 33%;
}
.cpn-facts thead th {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--steel);
font-weight: 700;
background: var(--bg-alt);
border-bottom: 1px solid var(--hair, var(--line));
}
@media (max-width: 560px) {
.cpn-facts thead {
position: absolute;
left: -9999px;
}
.cpn-facts--3 th[scope=row] {
width: auto;
}
.cpn-facts--3 td {
width: auto;
}
.cpn-facts--3 td + td {
padding-top: 0;
color: var(--steel);
font-size: 14px;
}
}
.pp-hero {
position: relative;
background: var(--navy);
color: #fff;
padding: clamp(28px, 3.2vw, 40px) 0 clamp(34px, 3.6vw, 46px);
}
.pp-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 6px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px);
}
.pp-hero__in {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
.pp-hero .crumbs {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 14px;
}
.pp-hero .crumbs a {
color: rgba(255, 255, 255, 0.78);
}
.pp-hero .crumbs a:hover {
color: #fff;
}
.pp-hero h1 {
font-family: var(--font-display, inherit);
font-size: clamp(32px, 3.9vw, 52px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 8px;
}
.pp-hero__sub {
font-size: clamp(16.5px, 1.7vw, 22px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
margin: 0;
}
.pp-hero .pp-updated {
margin: 12px 0 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.72);
}
.pp-hero__points {
list-style: none;
margin: 0;
padding: 4px 0 4px clamp(24px, 2.6vw, 40px);
border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.pp-hero__points li {
position: relative;
padding: 14px 0 14px 40px;
font-size: 18.5px;
line-height: 1.45;
color: #fff;
}
.pp-hero__points li + li {
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pp-hero__points li::before {
content: "";
position: absolute;
left: 0;
top: calc(14px + 0.72em - 1.5px);
width: 20px;
height: 3px;
background: var(--accent);
}
.pp-hero, .pp-body, .pp-cta {
position: relative;
z-index: 1;
}
.pp-body {
background: var(--surface);
}
:root[data-theme=dark] .pp-body {
background: var(--bg);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) .pp-body {
background: var(--bg);
}
}
.pp-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
padding-top: clamp(32px, 3.4vw, 44px);
padding-bottom: clamp(48px, 5vw, 72px);
}
.pp-aside {
padding-right: 32px;
position: sticky;
top: 110px;
align-self: start;
}
.pp-toc__h {
font-family: var(--font-display, inherit);
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: var(--head);
margin: 0 0 14px;
}
.pp-toc ol {
list-style: none;
margin: 0;
padding: 0;
}
.pp-toc a {
position: relative;
display: block;
padding: 9px 0 9px 22px;
font-size: 17px;
line-height: 1.4;
color: var(--ink);
text-decoration: none;
transition: color 0.15s ease;
}
.pp-toc a::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: transparent;
transition: background-color 0.15s ease;
}
.pp-toc a:hover {
color: var(--head);
}
.pp-toc li.is-here > a {
color: #b05e10;
font-weight: 600;
}
.pp-toc li.is-here > a::before {
background: var(--accent);
}
:root[data-theme=dark] .pp-toc li.is-here > a {
color: var(--accent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) .pp-toc li.is-here > a {
color: var(--accent);
}
}
.pp-toc a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.pp-ask {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--line-strong);
display: flex;
flex-direction: column;
gap: 4px;
font-size: 17px;
}
.pp-ask__h {
margin: 0 0 4px;
font-weight: 700;
color: var(--head);
}
.pp-ask a {
font-size: inherit;
color: var(--ink);
text-decoration: none;
padding: 2px 0;
}
.pp-ask a:hover {
color: #b05e10;
text-decoration: underline;
}
.pp-doc {
min-width: 0;
font-size: 16.5px;
border-left: 1px solid var(--line-strong);
padding-left: clamp(32px, 4.2vw, 56px);
}
.pp-doc p {
max-width: 82ch;
line-height: 1.7;
margin: 0 0 12px;
color: var(--ink);
}
.pp-doc .pp-lead {
font-size: 17.5px;
font-weight: 600;
color: var(--head);
margin-bottom: 8px;
}
.pp-sec {
margin-top: clamp(32px, 3.2vw, 44px);
scroll-margin-top: 104px;
}
.pp-h {
font-family: var(--font-display, inherit);
font-size: clamp(24px, 2.35vw, 31px);
font-weight: 700;
line-height: 1.3;
color: var(--head);
margin: 0 0 16px;
padding-bottom: 10px;
background-image: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 12px);
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: left bottom;
}
.pp-h::after {
content: none;
}
.pp-doc .cpn-facts-wrap {
margin: 4px 0 12px;
}
.pp-table {
font-size: 15.5px;
background: transparent;
}
.pp-table th, .pp-table td {
padding: 9px 16px;
line-height: 1.55;
border-right: 0;
}
.pp-table th[scope=row] {
width: 36%;
white-space: normal;
}
.pp-table--grid {
border: 1px solid var(--line);
background: var(--surface);
}
.pp-table--grid thead th {
font-size: 15.5px;
letter-spacing: 0;
text-transform: none;
font-weight: 700;
color: var(--head);
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--bg-alt) 55%, var(--surface));
}
.pp-table--grid tbody th[scope=row] {
font-weight: 400;
color: var(--ink);
}
.pp-table--grid.cpn-facts--3 tbody th[scope=row] {
width: 36%;
}
.pp-table--grid.cpn-facts--3 td {
width: 32%;
}
.pp-table tr + tr th, .pp-table tr + tr td {
border-top: 1px solid var(--line);
}
.pp-table--plain {
border: 0;
border-bottom: 1px solid var(--line);
}
.pp-table--plain tbody tr:first-child th, .pp-table--plain tbody tr:first-child td {
border-top: 1px solid var(--line);
}
.pp-table--plain th[scope=row] {
font-weight: 700;
color: var(--head);
padding-left: 2px;
}
#pp-7 .pp-table--plain th[scope=row] {
width: 190px;
}
.pp-table--grid td, .pp-table--grid thead th + th {
border-left: 1px solid var(--line);
}
.pp-table--grid:not(.cpn-facts--3) tbody th[scope=row] {
font-weight: 700;
color: var(--head);
}
.pp-callout {
margin: 4px 0 14px;
padding: 18px 24px 8px;
border-left: 4px solid var(--accent);
background: color-mix(in srgb, var(--bg-alt) 55%, var(--surface));
}
.pp-doc .pp-callout__t {
font-family: var(--font-display, inherit);
font-size: 21px;
font-weight: 700;
line-height: 1.35;
color: var(--head);
margin: 0 0 8px;
}
.pp-doc .pp-list {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
max-width: 82ch;
}
.pp-doc .pp-list > li {
position: relative;
padding-left: 26px;
line-height: 1.65;
}
.pp-doc .pp-list > li::before {
content: "";
position: absolute;
left: 6px;
top: calc(0.82em - 3.5px);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.pp-doc .pp-cookie {
margin: 6px 0 0;
}
.pp-cookie__btn {
min-height: 44px;
padding: 10px 26px;
border-color: var(--head);
color: var(--head);
font-size: 15px;
}
.pp-faq.cpn-faq {
border-top: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pp-faq .cpn-faq-item {
border: 1px solid var(--line-strong);
background: var(--surface);
}
.pp-faq .cpn-faq-q {
padding: 13px 18px;
font-size: 16px;
}
.pp-faq .cpn-faq-q::after {
width: 14px;
height: 14px;
background-size: 14px 2px, 2px 14px;
margin-top: 5px;
}
.pp-faq .cpn-faq-item[open] > .cpn-faq-q::after {
background-size: 14px 2px, 2px 0;
}
.pp-faq .cpn-faq-a {
max-width: none;
padding: 12px 18px 14px;
border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--bg-alt) 40%, var(--surface));
}
.pp-faq .cpn-faq-a p {
color: var(--ink);
max-width: 82ch;
}
.pp-faq .cpn-faq-q:focus-visible {
outline-offset: -3px;
}
.pp-cta {
background: var(--navy);
color: #fff;
padding: clamp(28px, 3vw, 36px) 0;
}
.pp-cta__in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px 40px;
flex-wrap: wrap;
}
.pp-cta h2 {
font-family: var(--font-display, inherit);
font-size: clamp(23px, 2.1vw, 28px);
font-weight: 700;
line-height: 1.3;
color: #fff;
margin: 0 0 4px;
}
.pp-cta p {
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 15.5px;
}
.pp-cta__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.pp-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 166px;
min-height: 52px;
font-size: 16px;
}
.pp-cta__tel {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.75);
}
.pp-cta__tel:hover {
color: #fff;
border-color: var(--accent);
background: rgba(255, 255, 255, 0.06);
}
.pp-chev {
flex: none;
}
@media (max-width: 1024px) {
.pp-hero__in {
grid-template-columns: 1fr;
gap: 22px;
}
.pp-hero__points {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.28);
padding: 4px 0 0;
}
.pp-layout {
grid-template-columns: 1fr;
}
.pp-aside {
padding: 0 0 24px;
position: static;
}
.pp-toc {
border: 1px solid var(--line-strong);
background: var(--surface);
padding: 16px 18px 10px;
}
.pp-toc__h {
font-size: 20px;
margin-bottom: 6px;
}
.pp-toc ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
}
.pp-toc a {
padding: 11px 0 11px 18px;
}
.pp-ask {
display: none;
}
.pp-doc {
border-left: 0;
padding-left: 0;
}
}
@media (max-width: 560px) {
.pp-hero__points li {
font-size: 15.5px;
padding: 11px 0 11px 34px;
}
.pp-hero__points li::before {
top: calc(11px + 0.72em - 1.5px);
width: 18px;
}
.pp-toc ol {
column-gap: 12px;
}
.pp-toc a {
font-size: 14.5px;
}
.pp-doc .pp-lead {
font-size: 16px;
}
.pp-callout {
padding: 16px 16px 6px;
}
.pp-table th, .pp-table td {
padding-left: 14px;
padding-right: 14px;
}
.pp-table th[scope=row], #pp-7 .pp-table--plain th[scope=row],
.pp-table--grid.cpn-facts--3 tbody th[scope=row], .pp-table--grid.cpn-facts--3 td {
width: auto;
}
.pp-table--grid td {
border-left: 0;
}
.pp-table--plain th[scope=row], .pp-table--plain td {
padding-left: 2px;
}
.pp-cta__actions, .pp-cta__btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.pp-toc a, .pp-toc a::before {
transition: none;
}
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0 24px;
max-width: min(var(--wrap), 100%);
margin: 0 auto;
padding: 6px 24px 18px;
}
.footer-legal-link,
.footer-legal .cpn-consent-reopen {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: 0;
padding: 0 4px;
font-size: 13px;
line-height: 1.4;
color: inherit;
opacity: 0.85;
}
.footer-legal-link {
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-legal-link:hover,
.footer-legal .cpn-consent-reopen:hover {
color: var(--accent);
opacity: 1;
}
.cpn-gcards.is-docket {
counter-reset: cpn-docket;
gap: 0;
align-items: stretch;
}
.is-docket .cpn-gcard {
counter-increment: cpn-docket;
position: relative;
padding: 26px clamp(16px, 1.8vw, 26px) 4px;
display: flex;
flex-direction: column;
border-top: 1.6px solid var(--thread);
background: transparent;
box-shadow: none;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.is-docket .cpn-gcard,
.is-docket .cpn-gcard * {
text-align: left;
}
.is-docket .cpn-gcard:first-child {
padding-left: 0;
}
.is-docket .cpn-gcard:last-child {
padding-right: 0;
}
.is-docket .cpn-gcard::before {
content: counter(cpn-docket, decimal-leading-zero);
position: absolute;
left: clamp(16px, 1.8vw, 26px);
top: 4px;
font-family: var(--font-display);
font-weight: 700;
font-size: 62px;
line-height: 1;
color: var(--navy);
opacity: 0.08;
pointer-events: none;
}
.section--navy .is-docket .cpn-gcard::before {
color: var(--white);
opacity: 0.1;
}
.is-docket .cpn-gcard:first-child::before {
left: 0;
}
:root[data-theme=light] .section--navy .is-docket .cpn-gcard::before {
color: var(--navy);
opacity: 0.08;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=dark]) .section--navy .is-docket .cpn-gcard::before {
color: var(--navy);
opacity: 0.08;
}
}
.is-docket .cpn-gcard:not(:first-child)::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-left: 1.6px dashed var(--thread);
opacity: 0.55;
}
.is-docket .cpn-gcard .cpn-iconbox {
justify-content: flex-start;
margin: 30px 0 12px;
border-top: 0;
}
.is-docket .cpn-gcard .cap-icon {
width: 44px;
height: 44px;
background: none;
border: 0;
border-radius: 0;
color: var(--thread);
display: grid;
place-items: center;
margin-inline: 0;
}
.is-docket .cpn-gcard .cap-icon svg,
.is-docket .cpn-gcard .cpn-icon-img {
width: 38px;
height: 38px;
}
.is-docket .cpn-gcard h3 {
font-family: var(--font-display);
font-size: 18px;
margin: 0 0 6px;
}
.is-docket .cpn-gcard p {
font-size: 14px;
line-height: 1.65;
margin: 0;
max-width: 30ch;
}
@media (max-width: 860px) {
.is-docket .cpn-gcard {
padding: 22px 0 8px;
}
.is-docket .cpn-gcard:not(:first-child)::after {
content: none;
}
.is-docket .cpn-gcard::before {
font-size: 42px;
top: 10px;
right: 0;
}
.is-docket .cpn-gcard p {
max-width: none;
}
}
.cpn-tree-root {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
margin: 0 0 4px;
color: var(--head);
}
.cpn-tree {
list-style: none;
margin: 0;
padding: 0 0 0 18px;
}
.cpn-tree--d0 {
padding-left: 4px;
}
.cpn-tree-item {
position: relative;
padding: 7px 0 7px 22px;
}
.cpn-tree-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-left: 1px dashed var(--line-strong);
}
.cpn-tree-item:last-child::before {
bottom: auto;
height: 20px;
}
.cpn-tree-item::after {
content: "";
position: absolute;
left: 0;
top: 20px;
width: 14px;
border-top: 1px dashed var(--line-strong);
}
.cpn-tree-link {
font-weight: 600;
color: var(--head);
text-decoration: none;
}
.cpn-tree-link:hover, .cpn-tree-link:focus-visible {
color: var(--accent);
text-decoration: underline;
}
.cpn-tree--d0 > .cpn-tree-item > .cpn-tree-link {
font-family: var(--font-display);
font-size: 17px;
}
.cpn-tree-note {
margin-left: 10px;
font-size: 13px;
color: var(--steel);
font-variant-numeric: tabular-nums;
}
.cpn-tree-foot {
margin-top: 30px;
font-size: 14px;
color: var(--ink-soft);
}
@media (max-width: 600px) {
.cpn-tree {
padding-left: 12px;
}
.cpn-tree-item {
padding-left: 16px;
}
.cpn-tree-item::after {
width: 10px;
}
.cpn-tree-note {
display: block;
margin: 2px 0 0;
}
}
.cpn-tree-label {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
color: var(--head);
}
.term-body {
margin: 44px 0 0;
max-width: 760px;
}
.term-body > summary {
cursor: pointer;
font-weight: 600;
font-size: 17px;
color: var(--head);
padding: 13px 0;
border-top: 1px solid var(--hair, var(--line));
border-bottom: 1px solid var(--hair, var(--line));
list-style: none;
display: flex;
align-items: center;
gap: 10px;
}
.term-body > summary::-webkit-details-marker {
display: none;
}
.term-body > summary::before {
content: "";
width: 8px;
height: 8px;
flex: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 0.18s ease;
margin-left: 2px;
}
.term-body[open] > summary::before {
transform: rotate(45deg);
margin-top: -4px;
}
.term-body > summary:hover {
color: var(--accent, var(--head));
}
.term-body > summary:focus-visible {
outline: 2px solid var(--accent, currentColor);
outline-offset: 3px;
}
.term-body__in {
padding: 20px 0 4px;
}
.term-body__in > p {
margin: 0 0 14px;
}
.term-body__in > p:last-child {
margin-bottom: 0;
}
.term-body__in > .cpn-facts,
.term-body__in > table.cpn-facts {
margin: 18px 0;
}
@media (prefers-reduced-motion: reduce) {
.term-body > summary::before {
transition: none;
}
}
.page-title .wrap > p {
margin: 0 0 14px;
}
.page-title .wrap > p:last-child {
margin-bottom: 0;
}
.page-title .wrap > .cpn-facts,
.page-title .wrap > table.cpn-facts {
margin: 18px 0;
max-width: 720px;
}
.cpn-fsheet-hero {
display: grid;
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
@media (max-width: 900px) {
.cpn-fsheet-hero {
grid-template-columns: 1fr;
gap: 24px;
}
}
.cpn-fsheet-swatch {
display: flex;
flex-direction: column;
margin: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg-alt);
}
.cpn-fsheet-swatch img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: contain;
}
.cpn-fsheet-swatch-tag {
margin: 0;
padding: 11px 16px;
background: var(--navy);
color: var(--white);
font-weight: 600;
font-size: 0.95rem;
text-align: center;
}
.cpn-fsheet-badge {
display: inline-block;
margin: 0 0 12px;
padding: 5px 14px;
border-radius: 999px;
background: var(--accent);
color: var(--white);
font-weight: 700;
font-size: 0.85rem;
}
.cpn-fsheet-name {
margin: 0;
color: var(--head);
font-size: clamp(2rem, 4.2vw, 3.1rem);
line-height: 1.12;
letter-spacing: -0.01em;
}
.cpn-fsheet-tagline {
margin: 6px 0 0;
color: var(--ink-soft);
font-weight: 600;
font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.cpn-fsheet-summary {
margin: 16px 0 0;
max-width: 62ch;
color: var(--ink-soft);
line-height: 1.8;
}
.cpn-fsheet-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 20px 14px;
max-width: 660px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.cpn-fsheet-point {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.cpn-fsheet-point-mark {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(242, 140, 40, 0.12);
color: var(--accent);
}
.cpn-fsheet-point-mark svg,
.cpn-fsheet-point-mark img {
width: 30px;
height: 30px;
}
.cpn-fsheet-point-name {
color: var(--head);
font-weight: 700;
}
.cpn-fsheet-point-text {
color: var(--steel);
font-size: 0.9rem;
line-height: 1.6;
}
.cpn-fsheet-head {
position: relative;
margin: 0 0 20px;
padding-left: 14px;
color: var(--head);
font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.cpn-fsheet-head::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.18em;
width: 5px;
border-radius: 3px;
background: var(--accent);
}
.cpn-fsheet-head-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.cpn-fsheet-head-row .cpn-fsheet-head {
margin-bottom: 0;
}
.cpn-fsheet-more {
color: var(--accent-dark);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
}
.cpn-fsheet-more::after {
content: " ›";
}
.cpn-fsheet-more:hover {
text-decoration: underline;
}
.cpn-fsheet-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.cpn-fsheet-card {
padding: 24px 20px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
text-align: center;
}
.cpn-fsheet-card-mark {
display: inline-grid;
place-items: center;
margin-bottom: 10px;
color: var(--accent);
}
.cpn-fsheet-card-mark svg,
.cpn-fsheet-card-mark img {
width: 34px;
height: 34px;
}
.cpn-fsheet-card-name {
margin: 0 0 8px;
color: var(--head);
font-size: 1.1rem;
}
.cpn-fsheet-card-text {
margin: 0;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.75;
}
.cpn-fsheet-uses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.cpn-fsheet-use:only-child {
max-width: 440px;
}
.cpn-fsheet-use {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
}
.cpn-fsheet-use img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
}
.cpn-fsheet-use-text {
padding: 16px 18px 20px;
}
.cpn-fsheet-use-name {
margin: 0 0 6px;
color: var(--head);
font-size: 1.05rem;
}
.cpn-fsheet-use-text p {
margin: 0;
color: var(--ink-soft);
font-size: 0.93rem;
line-height: 1.75;
}
.cpn-fsheet-specs {
width: 100%;
border-collapse: separate;
border-spacing: 0 6px;
}
.cpn-fsheet-specs th,
.cpn-fsheet-specs td {
padding: 13px 18px;
text-align: start;
vertical-align: top;
line-height: 1.7;
}
.cpn-fsheet-specs th {
width: 220px;
border-radius: var(--radius) 0 0 var(--radius);
background: var(--bg-alt);
color: var(--head);
font-weight: 600;
}
.cpn-fsheet-specs td {
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--navy-soft);
color: var(--ink);
}
@media (max-width: 640px) {
.cpn-fsheet-specs th,
.cpn-fsheet-specs td {
display: block;
width: auto;
}
.cpn-fsheet-specs th {
border-radius: var(--radius) var(--radius) 0 0;
}
.cpn-fsheet-specs td {
border-radius: 0 0 var(--radius) var(--radius);
}
}
.cpn-fsheet-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.cpn-fsheet-swatchcard {
position: relative;
}
.cpn-fsheet-swatchcard > a {
display: block;
height: 100%;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
text-decoration: none;
}
.cpn-fsheet-swatchcard > a:hover {
border-color: var(--accent);
}
.cpn-fsheet-swatchcard img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: contain;
background: var(--bg-alt);
}
.cpn-fsheet-swatchcard-text {
display: block;
padding: 14px 16px 16px;
}
.cpn-fsheet-swatchcard-name {
display: block;
color: var(--head);
font-weight: 700;
}
.cpn-fsheet-swatchcard-line {
display: block;
margin-top: 3px;
color: var(--steel);
font-size: 0.88rem;
}
.cpn-fsheet-swatchcard.is-here > a {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.cpn-fsheet-here {
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
margin: 0;
padding: 4px 10px;
border-radius: 999px;
background: var(--accent);
color: var(--white);
font-weight: 700;
font-size: 0.78rem;
}
.cpn-fsheet-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: center;
padding: 32px 36px;
border-radius: var(--radius-md);
background: var(--grad-navy);
color: var(--white);
}
@media (max-width: 820px) {
.cpn-fsheet-cta {
grid-template-columns: 1fr;
padding: 26px 22px;
}
}
.cpn-fsheet-cta h2 {
margin: 0 0 8px;
color: var(--white);
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.cpn-fsheet-cta p {
margin: 0;
max-width: 56ch;
color: rgba(255, 255, 255, 0.86);
line-height: 1.8;
}
.cpn-fsheet-cta-acts {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.cpn-fsheet-cta .btn-outline {
border-color: rgba(255, 255, 255, 0.6);
color: var(--white);
}
.cpn-fsheet-cta .btn-outline:hover {
background: rgba(255, 255, 255, 0.12);
}
.cpn-fl-card.is-linked {
position: relative;
}
.cpn-fl-card-link {
color: inherit;
text-decoration: none;
}
.cpn-fl-card-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.cpn-fl-card.is-linked:hover .cpn-fl-card-name,
.cpn-fl-card.is-linked:focus-within .cpn-fl-card-name {
color: var(--accent-dark);
}
.cpn-fl-card.is-linked:focus-within {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.cpn-fl-card.is-linked .cpn-fl-card-link:focus-visible {
outline: none;
}
.cpn-fl-tile-link {
display: block;
color: inherit;
text-decoration: none;
}
.cpn-fl-tile.is-linked:hover .cpn-fl-tile-name,
.cpn-fl-tile.is-linked:focus-within .cpn-fl-tile-name {
color: var(--accent-dark);
}
.cpn-fl-tile-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
.cpn-fl-card-name,
.cpn-fl-tile-name {
transition: color 0.15s ease;
}
}
.cpn-band-photo {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.cpn-band-photo img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.cpn-band-photo::after {
content: "";
position: absolute;
inset: 0;
}
.section.section--navy.cpn-steps-band {
position: relative;
isolation: isolate;
background-color: #101d33;
background-image: none;
padding-block: 76px 84px;
}
.cpn-steps-band .cpn-band-photo::after {
background: radial-gradient(ellipse 60% 45% at 50% 16%, rgba(10, 20, 36, 0.55), transparent 70%);
}
.cpn-steps-band .cpn-steps-head {
margin: 0 auto 18px;
max-width: none;
text-align: center;
}
.cpn-steps-band .cpn-steps-head h2 {
color: #fff;
font-size: clamp(26px, 3.4vw, 46px);
line-height: 1.25;
text-shadow: 0 2px 18px rgba(6, 14, 28, 0.6);
text-wrap: balance;
}
.cpn-steps-band .cpn-steps-head h2::after,
.cpn-steps-band .cpn-steps-head::after {
display: none;
}
.cpn-steps-accent {
color: var(--accent);
}
.cpn-steps {
position: relative;
width: min(1360px, 100vw - 32px);
margin-left: calc(50% - min(680px, 50vw - 16px));
}
.cpn-steps-list {
list-style: none;
margin: 0;
padding: 0;
}
.cpn-step {
position: relative;
container-type: inline-size;
}
.cpn-step-art {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.cpn-step-text {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #24324b;
}
.cpn-steps-band .cpn-step .cpn-step-num {
font-family: var(--font-head, inherit);
font-weight: 800;
font-size: 7.6cqw;
line-height: 1;
color: #e9771b;
letter-spacing: 0.01em;
}
.cpn-steps-band .cpn-step h3.cpn-step-title {
margin: 0.22em 0 0.2em;
font-size: max(5cqw, 14px);
line-height: 1.22;
font-weight: 800;
color: #13213a;
}
.cpn-steps-band .cpn-step p.cpn-step-desc {
margin: 0;
font-size: max(3.5cqw, 11.5px);
line-height: 1.38;
color: #4b566b;
}
.cpn-step-1 .cpn-step-text {
left: 28%;
right: 12%;
top: 66%;
bottom: 6.5%;
}
.cpn-step-2 .cpn-step-text {
left: 27%;
right: 22.5%;
top: 64%;
bottom: 7.6%;
}
.cpn-step-3 .cpn-step-text {
left: 25%;
right: 25.5%;
top: 67%;
bottom: 5.5%;
}
.cpn-step-4 .cpn-step-text {
left: 23.5%;
right: 29.5%;
top: 69%;
bottom: 7%;
}
.cpn-steps-thread {
display: none;
}
@media (min-width: 1200px) {
.cpn-steps.is-four {
aspect-ratio: 1000/350;
}
.cpn-steps.is-four .cpn-steps-list {
position: absolute;
inset: 0;
z-index: 1;
}
.cpn-steps.is-four .cpn-step {
position: absolute;
width: 25%;
}
.cpn-steps.is-four .cpn-step-1 {
left: 0;
top: 0;
}
.cpn-steps.is-four .cpn-step-2 {
left: 25%;
top: 28.571%;
}
.cpn-steps.is-four .cpn-step-3 {
left: 50%;
top: 3.571%;
}
.cpn-steps.is-four .cpn-step-4 {
left: 75%;
top: 21.429%;
}
.cpn-steps.is-four .cpn-steps-thread {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
z-index: 0;
pointer-events: none;
}
.cpn-steps-thread-line,
.cpn-steps-thread-shadow {
fill: none;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.cpn-steps-thread-shadow {
stroke: #5a2c06;
stroke-width: 6;
stroke-dasharray: 11 8;
opacity: 0.45;
}
.cpn-steps-thread-line {
stroke: #f28c28;
stroke-width: 3.5;
stroke-dasharray: 11 8;
}
.cpn-steps-thread-mask {
stroke-dasharray: 1;
stroke-dashoffset: 0;
}
}
@media (min-width: 640px) and (max-width: 1199.98px) {
.cpn-steps {
width: auto;
margin-left: 0;
}
.cpn-steps-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 12px;
}
}
@media (max-width: 639.98px) {
.cpn-steps-band {
padding-block: 56px 60px;
}
.cpn-steps {
width: auto;
margin-left: 0;
}
.cpn-steps-list {
display: grid;
gap: 0;
max-width: 380px;
margin-inline: auto;
}
}
.section.section--navy.cpn-vpi-band {
position: relative;
isolation: isolate;
background-color: #0d1c31;
background-image: none;
padding-block: 72px 64px;
}
.cpn-vpi-band .cpn-band-photo::after {
background: radial-gradient(ellipse 55% 40% at 50% 12%, rgba(8, 18, 33, 0.5), transparent 70%);
}
.cpn-vpi-band .cpn-vpi-head {
margin: 0 auto 8px;
max-width: none;
text-align: center;
}
.cpn-vpi-band .cpn-vpi-head h2 {
max-width: none;
margin-inline: auto;
color: #fff;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1.2;
margin-block: 0;
text-shadow: 0 2px 18px rgba(6, 14, 28, 0.6);
text-wrap: balance;
}
.cpn-vpi-band .cpn-vpi-head h2::after,
.cpn-vpi-band .cpn-vpi-head::after {
display: none;
}
.cpn-vpi-accent {
color: var(--accent);
}
.cpn-vpi-band .cpn-vpi-head p.cpn-vpi-sub {
margin: 10px auto 0;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(15px, 1.5vw, 21px);
font-weight: 600;
}
.cpn-vpi {
position: relative;
width: min(1360px, 100vw - 32px);
margin-left: calc(50% - min(680px, 50vw - 16px));
}
.cpn-vpi-polo {
display: block;
width: min(300px, 70%);
height: auto;
aspect-ratio: 960/1200;
object-fit: contain;
margin: 8px auto 0;
filter: drop-shadow(0 18px 30px rgba(3, 8, 18, 0.45));
}
.cpn-vpi-points {
list-style: none;
margin: 0;
padding: 0;
}
.cpn-vpi-point {
position: relative;
container-type: inline-size;
}
.cpn-vpi-art {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.cpn-vpi-band .cpn-vpi-point .cpn-vpi-label {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 800;
font-size: max(5.6cqw, 15px);
line-height: 1.28;
color: #13213a;
text-wrap: balance;
}
.cpn-vpi-point-1 .cpn-vpi-label {
left: 21%;
right: 16%;
top: 21%;
height: 20.5%;
}
.cpn-vpi-point-2 .cpn-vpi-label {
left: 20%;
right: 21%;
top: 13.5%;
height: 21%;
}
.cpn-vpi-point-3 .cpn-vpi-label {
left: 17%;
right: 35%;
top: 14%;
height: 18%;
}
.cpn-vpi-point-4 .cpn-vpi-label {
left: 25%;
right: 17%;
top: 16%;
height: 16%;
}
.cpn-vpi-lines {
display: none;
}
.section.cpn-vpi-band p.cpn-vpi-lead {
display: flex;
align-items: center;
gap: 22px;
max-width: 980px;
margin: 18px auto 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(14px, 1.2vw, 17px);
line-height: 1.7;
text-align: center;
}
.section.cpn-vpi-band p.cpn-vpi-lead > span {
flex: 0 1 auto;
max-width: 640px;
}
.section.cpn-vpi-band p.cpn-vpi-lead::before,
.section.cpn-vpi-band p.cpn-vpi-lead::after {
content: "";
flex: 1 1 60px;
min-width: 28px;
border-top: 2px dashed var(--accent);
opacity: 0.75;
}
@media (min-width: 1200px) {
.cpn-vpi.is-four {
aspect-ratio: 1000/560;
}
.cpn-vpi.is-four .cpn-vpi-polo {
position: absolute;
left: 33%;
top: 10.714%;
width: 34%;
margin: 0;
z-index: 1;
}
.cpn-vpi.is-four .cpn-vpi-points {
position: absolute;
inset: 0;
z-index: 2;
}
.cpn-vpi.is-four .cpn-vpi-point {
position: absolute;
width: 28%;
}
.cpn-vpi.is-four .cpn-vpi-point-1 {
left: 1%;
top: 0;
}
.cpn-vpi.is-four .cpn-vpi-point-2 {
left: 1%;
top: 50%;
}
.cpn-vpi.is-four .cpn-vpi-point-3 {
left: 71%;
top: 0;
}
.cpn-vpi.is-four .cpn-vpi-point-4 {
left: 71%;
top: 50%;
}
.cpn-vpi.is-four .cpn-vpi-lines {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
z-index: 3;
pointer-events: none;
}
.cpn-vpi-line, .cpn-vpi-line-shadow {
fill: none;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.cpn-vpi-line-shadow {
stroke: #5a2c06;
stroke-width: 6;
stroke-dasharray: 11 8;
opacity: 0.45;
}
.cpn-vpi-line {
stroke: #f28c28;
stroke-width: 3.5;
stroke-dasharray: 11 8;
}
.cpn-vpi-ring {
fill: none;
stroke: url(#cpn-vpi-metal);
stroke-width: 4.5;
}
.cpn-vpi-line-mask {
stroke-dasharray: 1;
stroke-dashoffset: 0;
}
}
@media (min-width: 640px) and (max-width: 1199.98px) {
.cpn-vpi {
width: auto;
margin-left: 0;
}
.cpn-vpi-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 16px;
margin-top: 8px;
}
}
@media (max-width: 639.98px) {
.section.section--navy.cpn-vpi-band {
padding-block: 56px 52px;
}
.cpn-vpi {
width: auto;
margin-left: 0;
}
.cpn-vpi-points {
display: grid;
gap: 0;
max-width: 380px;
margin: 8px auto 0;
}
.section.cpn-vpi-band p.cpn-vpi-lead::before,
.section.cpn-vpi-band p.cpn-vpi-lead::after {
display: none;
}
}
.section.section--navy.cpn-svc-band {
background-color: var(--navy);
}
.cpn-svc-band .cpn-svc-head {
margin: 0 auto;
max-width: none;
text-align: center;
}
.cpn-svc-band .cpn-svc-head h2 {
max-width: none;
margin-inline: auto;
margin-block: 0;
color: #fff;
font-size: clamp(26px, 3vw, 46px);
line-height: 1.2;
text-wrap: balance;
}
.cpn-svc-band .cpn-svc-head h2::after,
.cpn-svc-band .cpn-svc-head::after {
display: none;
}
.cpn-svc-accent {
color: var(--accent);
}
.section.cpn-svc-band .cpn-svc-head p {
margin: 8px auto 0;
max-width: 64em;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(14px, 1.25vw, 19px);
font-weight: 500;
}
.cpn-svc-fit {
width: min(1360px, 100vw - 32px);
margin-left: calc(50% - min(680px, 50vw - 16px));
}
.cpn-svc {
position: relative;
margin: 0 auto;
}
.cpn-svc-spokes {
display: none;
}
.cpn-svc-items {
list-style: none;
margin: 0;
padding: 0;
}
.cpn-svc-hub, .cpn-svc-item {
position: relative;
}
.cpn-svc-ring, .cpn-svc-art {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.cpn-svc-hub-label,
.cpn-svc-text {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.cpn-svc-hub-label > span {
color: #14233b;
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
}
.cpn-svc-text {
padding: 0 5%;
gap: 0.1em;
}
:root .section.section--navy.cpn-svc-band .cpn-svc-text h3 {
margin: 0;
color: #14233b;
font-weight: 800;
line-height: 1.2;
}
:root .section.section--navy.cpn-svc-band .cpn-svc-text p {
margin: 0;
color: #3b4558;
font-weight: 500;
line-height: 1.3;
}
.cpn-svc-cue {
display: none;
}
@media (max-width: 1099px) {
.cpn-svc-hub {
width: min(280px, 64%);
margin: 4px auto 0;
}
.cpn-svc-hub-label > span {
font-size: clamp(18px, 5vw, 24px);
}
.cpn-svc-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 20px;
max-width: 1000px;
margin: 0 auto;
}
.cpn-svc-item {
container-type: inline-size;
flex: 0 0 calc((100% - 40px) / 3);
}
:root .section.section--navy.cpn-svc-band .cpn-svc-text h3 {
font-size: clamp(13px, 6.2cqi, 20px);
}
:root .section.section--navy.cpn-svc-band .cpn-svc-text p {
font-size: clamp(11.5px, 4.4cqi, 15px);
}
}
@media (max-width: 819px) {
.cpn-svc-items {
max-width: 640px;
}
.cpn-svc-item {
flex-basis: calc((100% - 20px) / 2);
}
}
@media (max-width: 559px) {
.cpn-svc-item {
flex-basis: min(100%, 300px);
}
}
@media (min-width: 1100px) {
.cpn-svc {
width: 100%;
aspect-ratio: 1536/880;
container-type: inline-size;
}
.cpn-svc-spokes {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: visible;
pointer-events: none;
}
.cpn-svc-spoke path {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 8 6;
vector-effect: non-scaling-stroke;
}
.cpn-svc-spoke circle {
fill: var(--accent);
}
.cpn-svc-spoke-mask {
stroke-dasharray: 1;
}
.cpn-svc-hub, .cpn-svc-item {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--w);
}
.cpn-svc-hub {
z-index: 6;
}
.cpn-svc-item-1, .cpn-svc-item-2 {
z-index: 5;
}
.cpn-svc-item-3, .cpn-svc-item-7 {
z-index: 4;
}
.cpn-svc-item-4, .cpn-svc-item-6 {
z-index: 3;
}
.cpn-svc-item-5 {
z-index: 2;
}
.cpn-svc-ring, .cpn-svc-art {
filter: drop-shadow(0 14px 22px rgba(3, 8, 18, 0.38));
}
.cpn-svc-hub-label > span {
font-size: clamp(16px, 1.95cqw, 30px);
}
:root .section.section--navy.cpn-svc-band .cpn-svc-text h3 {
font-size: clamp(12px, 1.3cqw, 20px);
}
:root .section.section--navy.cpn-svc-band .cpn-svc-text p {
font-size: clamp(10px, 0.97cqw, 15px);
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (min-height: 740px) {
.cpn-motion-gsap .cpn-svc-pin {
height: calc(100svh + 980px);
}
.cpn-motion-gsap .cpn-svc-stage {
position: sticky;
top: 86px;
height: calc(100svh - 86px);
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 0 var(--cpn-svc-cue-room, 64px);
}
.cpn-motion-gsap .cpn-svc-head {
flex: none;
}
.cpn-motion-gsap .cpn-svc-head h2 {
font-size: clamp(26px, 2.7vw, 42px);
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (min-height: 740px) and (max-height: 820px) {
.cpn-motion-gsap .cpn-svc-head p {
display: none;
}
.cpn-motion-gsap .cpn-svc-head h2 {
font-size: clamp(24px, 2.4vw, 34px);
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (min-height: 740px) {
.cpn-motion-gsap .cpn-svc-fit {
flex: 1 1 auto;
min-height: 0;
align-self: flex-start;
container-type: size;
display: grid;
place-items: center;
}
.cpn-motion-gsap .cpn-svc {
width: min(100cqw, 174.5454545455cqh);
}
.cpn-motion-gsap .cpn-svc-cue {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
position: absolute;
left: 0;
right: 0;
bottom: 10px;
width: max-content;
margin-inline: auto;
z-index: 7;
color: #fff;
}
.cpn-svc-cue-pill {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 14px;
border: 1.5px solid var(--accent);
border-radius: 999px;
background: rgba(8, 17, 31, 0.82);
backdrop-filter: blur(6px);
box-shadow: 0 10px 28px rgba(3, 8, 18, 0.5);
animation: cpn-svc-cue-pulse 1.8s ease-out infinite;
}
.cpn-svc-cue .cpn-hub-cue-mouse {
display: flex;
color: #fff;
animation: cpn-hub-cue-bob 1.1s ease-in-out infinite alternate;
}
.cpn-svc-cue .cpn-hub-cue-mouse-body {
width: 20px;
height: 30px;
display: block;
}
.cpn-svc-cue .cpn-hub-cue-wheel {
stroke: var(--accent);
stroke-width: 3;
transform-box: fill-box;
animation: cpn-hub-cue-wheel 1.3s ease-in-out infinite;
}
.cpn-svc-cue-label {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
.cpn-svc-cue-track {
width: 168px;
height: 4px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.22);
overflow: hidden;
}
.cpn-svc-cue-fill {
display: block;
width: 100%;
height: 100%;
background: var(--accent);
transform-origin: left center;
}
.cpn-svc-cue-chevrons {
display: flex;
flex-direction: column;
align-items: center;
color: var(--accent);
}
.cpn-svc-cue-chevrons svg {
width: 16px;
height: 9px;
display: block;
margin-top: -2px;
opacity: 0.2;
animation: cpn-svc-cue-chev 1.5s ease-in-out infinite;
}
.cpn-svc-cue-chevrons svg:nth-child(2) {
animation-delay: 0.2s;
}
.cpn-svc-cue-chevrons svg:nth-child(3) {
animation-delay: 0.4s;
}
}
@keyframes cpn-svc-cue-pulse {
0% {
box-shadow: 0 10px 28px rgba(3, 8, 18, 0.5), 0 0 0 0 rgba(242, 140, 40, 0.55);
}
70% {
box-shadow: 0 10px 28px rgba(3, 8, 18, 0.5), 0 0 0 14px rgba(242, 140, 40, 0);
}
100% {
box-shadow: 0 10px 28px rgba(3, 8, 18, 0.5), 0 0 0 0 rgba(242, 140, 40, 0);
}
}
@keyframes cpn-svc-cue-chev {
0%, 100% {
opacity: 0.2;
translate: 0 -2px;
}
40% {
opacity: 1;
translate: 0 2px;
}
}
:root[data-theme=light] .section.section--navy.cpn-svc-band {
background-color: var(--navy);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme=dark]) .section.section--navy.cpn-svc-band {
background-color: var(--navy);
}
}
.section.home-why-choose,
.section.cpn-steps-band,
.section.cpn-vpi-band,
.section.cpn-svc-band {
overflow-x: clip;
}
.cpn-ab {
--ab-navy: #142b4a;
--ab-navy-deep: #0f2340;
--ab-pad: clamp(40px, 4.4vw, 64px);
}
.cpn-ab .section {
padding-block: var(--ab-pad);
}
.cpn-ab .cpn-ab-icon {
display: block;
width: 1em;
height: 1em;
flex: none;
}
.cpn-ab .cpn-ab-head {
max-width: none;
margin: 0 0 24px;
}
.cpn-ab .cpn-ab-head::after,
.cpn-ab .cpn-ab-head h2::after,
.cpn-ab .cpn-ab-prod-head::after,
.cpn-ab .cpn-ab-prod-head h2::after {
display: none;
}
.cpn-ab .cpn-ab-head h2 {
margin: 0;
color: var(--head);
font-size: clamp(24px, 2.2vw, 32px);
font-weight: 800;
line-height: 1.3;
}
.cpn-ab .cpn-ab-head p {
margin: 10px 0 0;
max-width: 70ch;
color: var(--ink-soft);
font-size: 15.5px;
line-height: 1.75;
}
.cpn-ab-illus {
position: absolute;
right: 10px;
bottom: 7px;
color: rgba(255, 255, 255, 0.82);
font-size: 11px;
letter-spacing: 0.02em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
pointer-events: none;
}
.cpn-ab-hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: clamp(380px, 32vw, 540px);
background: var(--ab-navy);
color: #fff;
}
.cpn-ab-hero-img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
.cpn-ab-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(15, 35, 64, 0.78) 0%, rgba(15, 35, 64, 0.45) 38%, rgba(15, 35, 64, 0) 62%);
}
.cpn-ab-hero-inner {
width: 100%;
padding-block: 48px;
}
.cpn-ab-hero-inner > * {
max-width: 640px;
}
.cpn-ab-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
color: #fff;
font-size: 15px;
font-weight: 600;
}
.cpn-ab-eyebrow::before {
content: "";
width: 4px;
height: 18px;
background: var(--accent);
border-radius: 1px;
}
.cpn-ab-hero h1 {
margin: 0 0 18px;
color: #fff;
font-size: clamp(32px, 3.8vw, 58px);
font-weight: 800;
line-height: 1.22;
}
.cpn-ab-hero .cpn-ab-lead {
margin: 0 0 14px;
color: #fff;
font-size: clamp(16px, 1.35vw, 20px);
font-weight: 600;
line-height: 1.55;
}
.cpn-ab-hero .cpn-ab-note {
margin: 0;
color: rgba(255, 255, 255, 0.84);
font-size: 14.5px;
line-height: 1.7;
}
.cpn-ab-hero .cpn-ab-illus {
right: 16px;
bottom: 10px;
}
.cpn-ab-stats {
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.cpn-ab-stats-list {
list-style: none;
margin: 0;
padding: 30px 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cpn-ab-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 12px;
text-align: center;
position: relative;
}
.cpn-ab-stat + .cpn-ab-stat::before {
content: "";
position: absolute;
left: 0;
top: 8%;
bottom: 8%;
width: 1px;
background: var(--accent);
opacity: 0.55;
transform-origin: center;
}
.cpn-ab-stat-val {
color: var(--accent);
font-size: clamp(30px, 3vw, 46px);
font-weight: 800;
line-height: 1.1;
}
.cpn-ab-stat-val em {
font-style: normal;
}
.cpn-ab-stat-val .spec-metric-val,
.cpn-ab-stat-val .spec-metric-val em {
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: 0;
}
.cpn-ab-stat-label {
color: var(--ink);
font-size: 15.5px;
}
.cpn-ab-story-grid {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 44px;
align-items: start;
}
.cpn-ab-rail {
position: sticky;
top: 110px;
}
.cpn-ab-rail ul {
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid var(--line);
}
.cpn-ab-rail li + li {
border-top: 1px solid var(--line);
}
.cpn-ab-rail a {
display: block;
position: relative;
padding: 12px 0 12px 16px;
color: var(--ink-soft);
font-size: 15px;
text-decoration: none;
transition: color 0.2s ease;
}
.cpn-ab-rail a::before {
content: "";
position: absolute;
left: -2px;
top: 10px;
bottom: 10px;
width: 3px;
background: var(--accent);
border-radius: 2px;
transform: scaleY(0);
transition: transform 0.25s ease;
}
.cpn-ab-rail a:hover {
color: var(--head);
}
.cpn-ab-rail a[aria-current=true] {
color: var(--accent);
font-weight: 600;
}
.cpn-ab-rail a[aria-current=true]::before {
transform: scaleY(1);
}
.cpn-ab-values {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cpn-ab-value {
padding: 4px 28px;
}
.cpn-ab-value:first-child {
padding-left: 0;
}
.cpn-ab-value + .cpn-ab-value {
border-left: 1px solid var(--line);
}
.cpn-ab-value-icon {
color: var(--accent);
font-size: 52px;
margin-bottom: 16px;
}
.cpn-ab .cpn-ab-value h3 {
margin: 0 0 10px;
color: var(--head);
font-size: 19px;
font-weight: 700;
line-height: 1.4;
}
.cpn-ab .cpn-ab-value p {
margin: 0;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.75;
}
.cpn-ab .section.cpn-ab-prod {
background: var(--ab-navy);
color: #fff;
}
.cpn-ab-prod-head {
display: flex;
align-items: center;
gap: 24px;
max-width: none;
margin: 0 0 28px;
}
.cpn-ab .cpn-ab-prod-head h2 {
color: #fff;
flex: 0 1 auto;
min-width: 0;
}
.cpn-ab-prod-rule {
flex: 1 1 auto;
border-top: 2px dashed var(--accent);
opacity: 0.9;
transform-origin: left center;
}
.cpn-ab-steps {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 30px;
}
.cpn-ab-step {
position: relative;
min-width: 0;
}
.cpn-ab-step-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.cpn-ab-step-num {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 15px;
font-weight: 700;
}
.cpn-ab .cpn-ab-step h3 {
margin: 0;
color: #fff;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
}
.cpn-ab-step-fig {
position: relative;
margin: 0;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 4/3;
}
.cpn-ab-step-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cpn-ab .cpn-ab-step p {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
line-height: 1.65;
}
.cpn-ab-step-media {
position: relative;
}
.cpn-ab-step-arrow {
position: absolute;
top: 50%;
right: -28px;
width: 26px;
height: 12px;
margin-top: -6px;
color: var(--accent);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.cpn-ab-company-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 44px;
align-items: start;
}
.cpn-ab-facts {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--line);
background: var(--surface);
}
.cpn-ab-facts th,
.cpn-ab-facts td {
padding: 14px 18px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
font-size: 15px;
line-height: 1.6;
}
.cpn-ab-facts tr:last-child th,
.cpn-ab-facts tr:last-child td {
border-bottom: 0;
}
.cpn-ab-facts th {
width: 32%;
border-right: 1px solid var(--line);
color: var(--head);
font-weight: 600;
white-space: nowrap;
}
.cpn-ab-facts th > * {
vertical-align: middle;
}
.cpn-ab-facts th {
display: table-cell;
}
.cpn-ab-facts th .cpn-ab-fact-icon {
display: inline-block;
font-size: 21px;
margin-right: 14px;
color: var(--head);
position: relative;
top: -1px;
}
.cpn-ab-facts td {
color: var(--ink);
}
.cpn-ab-facts td a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--line-strong);
}
.cpn-ab-facts td a:hover {
color: var(--accent);
border-color: currentColor;
}
.cpn-ab-company-fig {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 4px;
}
.cpn-ab-company-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
}
.cpn-ab .section.cpn-ab-faq {
padding-top: 0;
}
.cpn-ab-faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
align-items: start;
}
.cpn-ab-faq-col {
display: grid;
gap: 12px;
}
.cpn-ab-faq-item {
border: 1px solid var(--line-strong);
background: var(--surface);
}
.cpn-ab-faq-item summary {
display: flex;
align-items: center;
gap: 16px;
padding: 15px 20px;
cursor: pointer;
list-style: none;
color: var(--head);
font-size: 15.5px;
font-weight: 600;
}
.cpn-ab-faq-item summary::-webkit-details-marker {
display: none;
}
.cpn-ab-faq-sign {
flex: none;
font-size: 18px;
color: var(--head);
}
.cpn-ab-faq-sign .is-minus,
.cpn-ab-faq-item[open] .cpn-ab-faq-sign .is-plus {
display: none;
}
.cpn-ab-faq-item[open] .cpn-ab-faq-sign .is-minus {
display: block;
}
.cpn-ab-faq-a {
padding: 2px 20px 20px 54px;
}
.cpn-ab-faq-col.is-lead .cpn-ab-faq-a {
padding-left: 20px;
}
.cpn-ab .cpn-ab-faq-a p {
margin: 0;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.8;
}
.cpn-ab-faq-col.is-lead .cpn-ab-faq-item {
min-height: 100%;
}
.cpn-ab .section.cpn-ab-next {
padding-top: 0;
}
.cpn-ab-next-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.cpn-ab-next-card a {
display: flex;
height: 100%;
border: 1px solid var(--line);
background: var(--surface);
color: inherit;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cpn-ab-next-card a:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.cpn-ab-next-fig {
flex: 0 0 40%;
overflow: hidden;
}
.cpn-ab-next-img {
display: block;
width: 100%;
height: 100%;
min-height: 120px;
object-fit: cover;
transition: transform 0.5s ease;
}
.cpn-ab-next-card a:hover .cpn-ab-next-img {
transform: scale(1.04);
}
.cpn-ab-next-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 18px 14px;
min-width: 0;
}
.cpn-ab-next-title {
color: var(--head);
font-size: 16.5px;
font-weight: 700;
}
.cpn-ab-next-desc {
color: var(--ink-soft);
font-size: 13.5px;
line-height: 1.55;
}
.cpn-ab-next-arrow {
align-self: flex-end;
margin-top: auto;
color: var(--accent);
font-size: 18px;
transition: transform 0.2s ease;
}
.cpn-ab-next-card a:hover .cpn-ab-next-arrow {
transform: translateX(4px);
}
.cpn-ab .section.cpn-ab-cta {
background: var(--ab-navy);
color: #fff;
padding-block: clamp(32px, 3.4vw, 48px);
}
.cpn-ab-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.cpn-ab .cpn-ab-cta h2 {
margin: 0 0 6px;
color: #fff;
font-size: clamp(22px, 2.2vw, 32px);
font-weight: 800;
line-height: 1.3;
}
.cpn-ab .cpn-ab-cta p {
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 15px;
}
.cpn-ab-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
flex: none;
}
.cpn-ab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 24px;
border: 1.5px solid rgba(255, 255, 255, 0.85);
border-radius: 2px;
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cpn-ab-btn .cpn-ab-icon {
font-size: 20px;
}
.cpn-ab-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.cpn-ab-btn.is-primary {
background: var(--accent);
border-color: var(--accent);
}
.cpn-ab-btn.is-primary:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
}
.cpn-ab-btn.is-primary .cpn-ab-icon {
font-size: 18px;
}
@media (max-width: 1199px) {
.cpn-ab-hero::before {
background: linear-gradient(90deg, rgba(15, 35, 64, 0.9) 0%, rgba(15, 35, 64, 0.74) 55%, rgba(15, 35, 64, 0.3) 100%);
}
.cpn-ab-cta-inner {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 959px) {
.cpn-ab-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 34px;
}
.cpn-ab-step-arrow {
display: none;
}
.cpn-ab-story-grid {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.cpn-ab-rail {
display: none;
}
.cpn-ab-company-grid,
.cpn-ab-faq-grid {
grid-template-columns: minmax(0, 1fr);
}
.cpn-ab-next-grid {
grid-template-columns: minmax(0, 1fr);
}
.cpn-ab-next-fig {
flex-basis: 34%;
}
}
@media (max-width: 759px) {
.cpn-ab-stats-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 20px;
padding: 24px 0;
}
.cpn-ab-stat:nth-child(3)::before {
display: none;
}
.cpn-ab-values {
grid-template-columns: minmax(0, 1fr);
}
.cpn-ab-value,
.cpn-ab-value:first-child {
padding: 22px 0;
}
.cpn-ab-value + .cpn-ab-value {
border-left: 0;
border-top: 1px solid var(--line);
}
.cpn-ab-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 16px;
}
.cpn-ab-prod-head {
flex-wrap: wrap;
gap: 10px;
}
.cpn-ab-prod-rule {
flex-basis: 100%;
}
.cpn-ab-facts th {
width: auto;
white-space: normal;
}
.cpn-ab-facts th, .cpn-ab-facts td {
padding: 12px 12px;
font-size: 14px;
}
.cpn-ab-facts th .cpn-ab-fact-icon {
margin-right: 8px;
font-size: 18px;
}
.cpn-ab-cta-actions {
width: 100%;
}
.cpn-ab-btn {
flex: 1 1 100%;
}
}
@media (max-width: 479px) {
.cpn-ab-steps {
grid-template-columns: minmax(0, 1fr);
}
.cpn-ab-facts, .cpn-ab-facts tbody, .cpn-ab-facts tr, .cpn-ab-facts th, .cpn-ab-facts td {
display: block;
width: 100%;
}
.cpn-ab-facts th {
border-right: 0;
border-bottom: 0;
padding-bottom: 2px;
}
.cpn-ab-facts td {
padding-top: 0;
padding-left: 44px;
}
.cpn-ab-next-fig {
flex-basis: 30%;
}
}
.cpn-ab {
overflow-x: clip;
}
.cpn-contact-map {
margin: 0;
}
.cpn-contact-map > a {
display: block;
overflow: hidden;
background: #fff;
cursor: zoom-in;
}
.cpn-contact-map img {
display: block;
width: 100%;
height: auto;
transition: transform 0.35s ease;
}
.cpn-contact-map > a:hover img {
transform: scale(1.02);
}
.cpn-contact-map-note {
margin: 0;
padding: 12px 20px 16px;
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-soft);
}
.cpn-contact-map-note a {
color: var(--accent-dark);
font-weight: 600;
white-space: nowrap;
}
.cpn-mapblock .cpn-contact-map-note {
padding: 10px 0 0;
}
.form-project {
margin: 4px 0 18px;
padding: 14px 16px;
border: 1px dashed var(--accent);
border-radius: var(--radius);
background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.form-project-head {
margin: 0 0 8px;
font-size: 14px;
color: var(--ink-soft);
}
.form-project-head b {
color: var(--head);
}
.form-project ul {
margin: 0;
padding-left: 20px;
display: grid;
gap: 4px;
}
.form-project li {
font-size: 14.5px;
color: var(--ink);
}
.form-project li span {
color: var(--ink-soft);
white-space: nowrap;
}
.cpn-ab > section,
.cpn-ab > .cpn-ab-hero {
position: relative;
z-index: 1;
}
.cpn-ab .cpn-ab-stats,
.cpn-ab .section.cpn-ab-company,
.cpn-ab .section.cpn-ab-next {
background: var(--bg);
}
.cpn-ab .section.cpn-ab-story,
.cpn-ab .section.cpn-ab-faq {
background: var(--surface);
}
.cpn-ab-step > .cpn-ab-illus {
position: static;
display: block;
margin-top: 6px;
text-align: right;
color: rgba(255, 255, 255, 0.7);
text-shadow: none;
}
.cpn-ab-step-fig {
aspect-ratio: 158/112;
}
@media (min-width: 960px) {
.cpn-ab {
--u: clamp(1.1px, calc(100vw / 882), 1.55px);
}
.cpn-ab .wrap {
max-width: none;
padding-inline: calc(38 * var(--u));
}
.cpn-ab .section {
padding-block: 0;
}
.cpn-ab .cpn-ab-head {
margin-bottom: calc(14 * var(--u));
}
.cpn-ab .cpn-ab-head h2 {
font-size: calc(26 * var(--u));
line-height: 1.3;
}
.cpn-ab-hero {
min-height: calc(279 * var(--u));
}
.cpn-ab-hero-inner {
padding-block: calc(26 * var(--u));
padding-inline: calc(44 * var(--u));
}
.cpn-ab-hero-inner > * {
max-width: calc(440 * var(--u));
}
.cpn-ab-eyebrow {
font-size: calc(12.5 * var(--u));
margin-bottom: calc(10 * var(--u));
gap: calc(14 * var(--u));
}
.cpn-ab-eyebrow::before {
width: calc(3 * var(--u));
height: calc(12 * var(--u));
}
.cpn-ab-hero h1 {
font-size: calc(39 * var(--u));
line-height: 1.12;
margin-bottom: calc(12 * var(--u));
}
.cpn-ab-hero .cpn-ab-lead {
font-size: calc(15.5 * var(--u));
line-height: 1.45;
margin-bottom: calc(12 * var(--u));
}
.cpn-ab-hero .cpn-ab-note {
font-size: calc(12.5 * var(--u));
line-height: 1.6;
}
.cpn-ab-stats-list {
padding-block: calc(18 * var(--u));
}
.cpn-ab-stat {
gap: calc(2 * var(--u));
padding-block: calc(4 * var(--u));
}
.cpn-ab-stat + .cpn-ab-stat::before {
top: 8%;
bottom: 8%;
opacity: 0.7;
}
.cpn-ab-stat-val {
font-size: calc(31 * var(--u));
}
.cpn-ab-stat-label {
font-size: calc(14 * var(--u));
}
.cpn-ab .section.cpn-ab-story {
padding-block: calc(10 * var(--u)) calc(10 * var(--u));
}
.cpn-ab-story-grid {
grid-template-columns: calc(104 * var(--u)) minmax(0, 1fr);
gap: calc(22 * var(--u));
}
.cpn-ab-story-main {
border-left: 1px solid var(--line);
padding-left: calc(22 * var(--u));
}
.cpn-ab-rail {
top: calc(96 * var(--u));
}
.cpn-ab-rail ul {
border-left: 0;
}
.cpn-ab-rail a {
padding: calc(11 * var(--u)) 0 calc(11 * var(--u)) calc(14 * var(--u));
font-size: calc(13 * var(--u));
}
.cpn-ab-rail a::before {
left: 0;
top: calc(8 * var(--u));
bottom: calc(8 * var(--u));
width: 2px;
transform: scaleY(1);
background: var(--line-strong);
}
.cpn-ab-rail a[aria-current=true]::before {
background: var(--accent);
}
.cpn-ab-values {
margin-top: calc(6 * var(--u));
}
.cpn-ab-value {
padding: 0 calc(18 * var(--u));
}
.cpn-ab-value:first-child {
padding-left: calc(4 * var(--u));
}
.cpn-ab-value-icon {
font-size: calc(50 * var(--u));
margin-bottom: calc(10 * var(--u));
}
.cpn-ab .cpn-ab-value h3 {
font-size: calc(16.5 * var(--u));
margin-bottom: calc(6 * var(--u));
}
.cpn-ab .cpn-ab-value p {
font-size: calc(13.5 * var(--u));
line-height: 1.6;
}
.cpn-ab .section.cpn-ab-prod {
padding-block: calc(14 * var(--u)) calc(10 * var(--u));
}
.cpn-ab-prod-head {
margin-bottom: calc(18 * var(--u));
gap: calc(14 * var(--u));
}
.cpn-ab .cpn-ab-prod-head h2 {
font-size: calc(26 * var(--u));
line-height: 1.3;
margin: 0;
}
.cpn-ab-steps {
gap: calc(16 * var(--u));
}
.cpn-ab-step-top {
gap: calc(10 * var(--u));
margin-bottom: calc(8 * var(--u));
}
.cpn-ab-step-num {
width: calc(28 * var(--u));
height: calc(28 * var(--u));
font-size: calc(13.5 * var(--u));
}
.cpn-ab .cpn-ab-step h3 {
font-size: calc(13.5 * var(--u));
white-space: nowrap;
}
.cpn-ab-step-arrow {
right: calc(-16 * var(--u));
width: calc(16 * var(--u));
height: calc(10 * var(--u));
margin-top: calc(-5 * var(--u));
}
.cpn-ab-step > .cpn-ab-illus {
font-size: calc(9 * var(--u));
margin-top: calc(5 * var(--u));
}
.cpn-ab .section.cpn-ab-company {
padding-block: calc(8 * var(--u)) calc(6 * var(--u));
}
.cpn-ab-company-grid {
grid-template-columns: minmax(0, 462fr) minmax(0, 323fr);
gap: calc(24 * var(--u));
}
.cpn-ab-company-main .cpn-ab-head {
margin-top: 0;
}
.cpn-ab-facts {
border-right: 0;
background: transparent;
}
.cpn-ab-facts th, .cpn-ab-facts td {
padding: calc(7 * var(--u)) calc(14 * var(--u));
font-size: calc(13 * var(--u));
line-height: 1.6;
}
.cpn-ab-facts th {
width: calc(124 * var(--u));
font-weight: 500;
}
.cpn-ab-facts th .cpn-ab-fact-icon {
font-size: calc(17 * var(--u));
margin-right: calc(16 * var(--u));
}
.cpn-ab-company-img {
aspect-ratio: 323/254;
}
.cpn-ab .section.cpn-ab-faq {
padding-block: calc(6 * var(--u)) calc(6 * var(--u));
}
.cpn-ab-faq-grid {
grid-template-columns: minmax(0, 442fr) minmax(0, 354fr);
gap: calc(16 * var(--u));
}
.cpn-ab-faq-col {
gap: calc(8 * var(--u));
}
.cpn-ab-faq-item {
border-color: var(--line);
}
.cpn-ab-faq-item summary {
padding: calc(6 * var(--u)) calc(18 * var(--u));
gap: calc(26 * var(--u));
font-size: calc(13.5 * var(--u));
font-weight: 500;
line-height: 1.6;
}
.cpn-ab-faq-sign {
font-size: calc(15 * var(--u));
}
.cpn-ab-faq-a {
padding: 0 calc(18 * var(--u)) calc(18 * var(--u));
}
.cpn-ab .cpn-ab-faq-a p {
font-size: calc(12.5 * var(--u));
line-height: 1.75;
}
.cpn-ab-faq-col.is-lead .cpn-ab-faq-item {
min-height: calc(156 * var(--u));
}
.cpn-ab .section.cpn-ab-next {
padding-block: calc(8 * var(--u)) calc(10 * var(--u));
}
.cpn-ab-next-grid {
gap: calc(10 * var(--u));
}
.cpn-ab-next-card a {
min-height: calc(85 * var(--u));
}
.cpn-ab-next-fig {
flex-basis: 33%;
}
.cpn-ab-next-img {
min-height: 0;
}
.cpn-ab-next-body {
padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
gap: calc(2 * var(--u));
}
.cpn-ab-next-title {
font-size: calc(13 * var(--u));
}
.cpn-ab-next-desc {
font-size: calc(10.5 * var(--u));
line-height: 1.45;
}
.cpn-ab-next-arrow {
font-size: calc(12 * var(--u));
}
.cpn-ab .section.cpn-ab-cta {
padding-block: calc(18 * var(--u));
}
.cpn-ab .cpn-ab-cta h2 {
font-size: calc(22.5 * var(--u));
margin-bottom: calc(3 * var(--u));
}
.cpn-ab .cpn-ab-cta p {
font-size: calc(12.5 * var(--u));
}
.cpn-ab-cta-actions {
gap: calc(10 * var(--u));
}
.cpn-ab-btn {
min-height: calc(39 * var(--u));
padding: 0 calc(18 * var(--u));
font-size: calc(13 * var(--u));
gap: calc(8 * var(--u));
}
.cpn-ab-btn .cpn-ab-icon {
font-size: calc(17 * var(--u));
}
}