/* ==========================================================================
   YIMEIDE — inner pages (About / Products / Cases / Articles / Contact)
   Page banner, sidebar, list/detail layouts. Style tokens come from style.css.
   ========================================================================== */

/* ---------- override body for inner pages (light bg instead of ink) ---------- */
body.inner-page {
	background: #fff;
}
/* inner pages keep the white scrolled look at the very top.
   NOTE: no backdrop-filter here — it would create a containing block for the
   fixed mobile .nav overlay inside the header and clip it to the header bar */
.site-header.is-top {
	background: rgba(255,255,255,1);
	box-shadow: 0 1px 0 rgba(6,10,18,.07), 0 22px 46px -34px rgba(6,10,18,.6);
}
.site-header.is-top .nav-link {
	color: #000;
}
.site-header.is-top .nav-link:hover {
	color: var(--blue);
}
.site-header.is-top .logo img {
	filter: none;
}
.site-header.is-top .btn-primary {
	color: #000;
	border-color: #000;
}
.site-header.is-top .btn-primary:hover {
	color: #fff;
	background: var(--blue);
	border-color: var(--blue);
}
/* inner pages keep the light header from the start, so the language switch
   uses the same dark-on-white treatment as the scrolled state on the homepage */
.site-header.is-top .lang-toggle {
	color: rgba(16,24,42,.82);
	border-color: rgba(16,24,42,.22);
}
.site-header.is-top .lang-toggle:hover,
.site-header.is-top .lang-select.is-open .lang-toggle {
	color: #fff;
	background: #499de4;
	border-color: #499de4;
}
@media (max-width:860px) {
.site-header.is-top .menu-toggle span {
	background: var(--ink-text);
}
.site-header.is-top.nav-open .menu-toggle span {
	background: #fff;
}
.site-header.is-top.nav-open .logo img {
	filter: brightness(0) invert(1);
}
/* the rules above are not scoped to desktop, so they would paint the
     full-screen overlay's links black on dark — restore the overlay colors */
.site-header.is-top.nav-open .nav-link {
	color: #fff;
}
.site-header.is-top.nav-open .nav-link:hover {
	color: var(--frost);
}
.site-header.is-top.nav-open .btn-primary {
	color: #fff;
	border-color: rgba(255,255,255,.45);
}
.site-header.is-top.nav-open .btn-primary:hover {
	color: #fff;
	background: var(--blue);
	border-color: var(--blue);
}
.site-header.is-top.nav-open .lang-toggle {
	color: #fff;
	border-color: rgba(255,255,255,.4);
	background: none;
}
}
/* ==========================================================================
   PAGE BANNER
   ========================================================================== */
.page-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--hdr) + 72px) 0 clamp(48px, 6vw, 80px);
	color: #fff;
	background: #0a2a7a;
	background-image: linear-gradient(135deg, #0a2a7a 0%, #1138a0 45%, #0d3194 100%);
}
.page-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: radial-gradient(ellipse at 85% 20%, rgba(158,203,255,.22) 0%, transparent 55%),  radial-gradient(ellipse at 10% 85%, rgba(10,68,196,.4) 0%, transparent 55%);
}
.page-banner.has-img::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -3;
	background-size: cover;
	background-position: center;
	opacity: .26;
}
.page-banner.has-img .page-banner-veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(135deg, rgba(10,42,122,.2) 0%, rgba(13,49,148,.5) 100%);
}
.banner-arcs {
	position: absolute;
	right: -6%;
	bottom: -40%;
	width: clamp(320px, 38vw, 640px);
	z-index: -1;
	pointer-events: none;
	opacity: .55;
	animation: arcPulse 10s ease-in-out infinite;
}
.page-banner-inner {
	position: relative;
	z-index: 1;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--edge, 0);
}
.banner-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font: 500 11px/1 var(--font-d);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #fff;
}
.banner-eyebrow::before {
	content: '';
	width: 22px;
	height: 1px;
	background: var(--frost);
}
.banner-title {
	margin-top: 20px;
	font: 500 clamp(1.9rem, 3.6vw, 3rem)/1.06 var(--font-d);
	letter-spacing: -.032em;
	color: #fff;
}
.banner-desc {
	margin-top: 18px;
	/* max-width: 56ch; */
	font-size: 16px;
	line-height: 1.78;
	color: #fff;
}
/* breadcrumb */
.breadcrumb {
	margin-top: clamp(20px, 3vw, 34px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font: 500 12px/1 var(--font-d);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}
.breadcrumb a {
	transition: color .3s;
}
/* house icon in front of the leading "Home" crumb, drawn with currentColor
   so it follows the link colour on hover */
.breadcrumb a:first-child::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 7px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 10.6 12 3l9.2 7.6'/%3E%3Cpath d='M5.6 9.7V21h12.8V9.7'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 10.6 12 3l9.2 7.6'/%3E%3Cpath d='M5.6 9.7V21h12.8V9.7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.breadcrumb a:hover {
	color: #fff;
}
.breadcrumb .sep {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}
.breadcrumb .current {
	color: #fff;
	font-weight: bold;
}
/* ==========================================================================
   SIDEBAR + CONTENT LAYOUT
   ========================================================================== */
.inner-main {
	background: #fff;
	padding: clamp(56px, 7vw, 88px) 0 clamp(72px, 9vw, 120px);
}
.layout {
	display: grid;
 grid-template-columns: minmax(200px, .7fr) minmax(0, 2.3fr);
	gap: clamp(36px, 4vw, 64px);
	align-items: start;
}
.sidebar {
}
.sidebar-title {
	font: 500 11px/1 var(--font-d);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: 18px;
}
.sidebar-block + .sidebar-block {
	margin-top: clamp(32px, 4vw, 44px);
}
.side-menu {
	border-top: 1px solid var(--line-light);
}
.side-menu li {
	border-bottom: 1px solid var(--line-light);
}
.side-menu a {
	position: relative;
	display: block;
	padding: 14px 0 14px 18px;
	font: 500 14px/1.3 var(--font-d);
	letter-spacing: .02em;
	color: var(--ink-text);
	transition: color .3s, padding-left .3s var(--ease);
}
.side-menu a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--blue);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .35s var(--ease);
}
.side-menu a:hover, .side-menu a.is-active {
	color: var(--blue);
	padding-left: 22px;
}
.side-menu a:hover::before, .side-menu a.is-active::before {
	transform: scaleY(1);
}
/* sidebar contact card */
.side-card {
	padding: 24px;
	background: var(--paper);
	border-radius: 4px;
}
.side-card h3 {
	font: 500 1rem/1.3 var(--font-d);
	letter-spacing: -.01em;
	color: var(--ink-text);
}
.side-card ul {
	margin-top: 16px;
	display: grid;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted);
}
.side-card ul a {
	color: var(--blue);
}
.side-card .btn {
	margin-top: 18px;
	width: 100%;
	border: 1px solid var(--blue);
	color: var(--blue);
}
.side-card .btn:hover {
	background: var(--blue);
	color: #fff;
}
/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-lead {
	font: 500 clamp(1.4rem, 2.3vw, 1.9rem)/1.25 var(--font-d);
	letter-spacing: -.024em;
	color: var(--ink-text);
}
/* standfirst — lead paragraph with accent bar */
.about-standfirst {
	margin-top: clamp(22px, 3vw, 30px);
	padding-left: clamp(18px, 2vw, 26px);
	border-left: 3px solid var(--blue);
	font-size: clamp(16.5px, 1.45vw, 19px);
	line-height: 1.85;
	color: var(--ink-text);
}
/* two-column body copy */
.about-cols {
	margin-top: clamp(28px, 3.6vw, 42px);
	display: grid;
	/*grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);*/
	gap: clamp(24px, 3vw, 44px);
}
.about-cols p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--muted);
}
.about-cols > p:first-child::first-letter {
	font: 500 clamp(2rem, 4vw, 2.6rem)/1 var(--font-d);
	float: left;
	margin: 6px 10px 0 0;
	color: var(--blue);
}
/* third paragraph spans both columns */
.about-cols-wide {
	grid-column: 1 / -1;
	padding-top: clamp(18px, 2.4vw, 26px);
	border-top: 1px solid var(--line-light);
}
/* about section divider */
.sec-gap {
	margin-top: clamp(56px, 7vw, 88px);
}
.sec-mini {
	font: 500 11px/1 var(--font-d);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 16px;
}
/* company image row */
.img-row {
	margin-top: clamp(28px, 4vw, 44px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}
.img-row figure {
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--paper);
}
.img-row img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.img-row figure:hover img {
	transform: scale(1.04);
}
/* blue contact card under the category tree */
.side-contact {
	margin-top: clamp(28px, 3.4vw, 40px);
	padding: clamp(22px, 2.4vw, 28px);
	border-radius: 5px;
	color: #fff;
	background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 62%),  linear-gradient(155deg, var(--blue) 0%, #06275f 100%);
	box-shadow: 0 18px 34px -26px rgba(2, 24, 61, .8);
}
.sc-eyebrow {
	font: 500 10px/1 var(--font-d);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255,255,255,.66);
}
.sc-title {
	margin-top: 10px;
	font: 600 19px/1.2 var(--font-d);
	letter-spacing: -.01em;
}
.sc-text {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255,255,255,.76);
}
.sc-list {
	margin-top: 16px;
}
.sc-list li {
	border-top: 1px solid rgba(255,255,255,.16);
}
.sc-list a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 0;
	font: 500 12px/1.4 var(--font-d);
	color: #fff;
	transition: transform .25s var(--ease);
}
.sc-list a:hover {
	transform: translateX(3px);
}
.sc-ico {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,.15);
}
.sc-ico svg {
	width: 14px;
	height: 14px;
}
.sc-btn {
	margin-top: 18px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 3px;
	background: #fff;
	color: var(--blue);
	font: 600 11.5px/1 var(--font-d);
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background .25s;
}
.sc-btn svg {
	width: 14px;
	height: 14px;
	transition: transform .25s var(--ease);
}
.sc-btn:hover {
	background: rgba(255,255,255,.88);
}
.sc-btn:hover svg {
	transform: translateX(3px);
}
/* ==========================================================================
   NEWS LAYOUT — content left, recent-news sidebar right
   ========================================================================== */
.layout--news {
 grid-template-columns: minmax(0, 2.3fr) minmax(240px, .7fr);
}
.recent-news {
	border-top: 1px solid var(--line-light);
}
.recent-news li {
	border-bottom: 1px solid var(--line-light);
}
.recent-news a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
}
.rn-thumb {
	flex: 0 0 88px;
	width: 88px;
	height: 64px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--paper);
}
.rn-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
.recent-news a:hover .rn-thumb img {
	transform: scale(1.07);
}
.rn-date {
	font: 500 10px/1 var(--font-d);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.rn-title {
	margin-top: 6px;
	font: 500 13.5px/1.4 var(--font-d);
	letter-spacing: -.005em;
	color: var(--ink-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .25s;
}
.recent-news a:hover .rn-title {
	color: var(--blue);
}
/* ==========================================================================
   PRODUCT / CASE LIST PAGES (filter bar + grid)
   ========================================================================== */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line-light);
	margin-bottom: clamp(22px, 3vw, 32px);
}
.filter-chip {
	padding: 8px 18px;
	border: 1px solid var(--line-light);
	border-radius: 999px;
	font: 500 12px/1 var(--font-d);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color .25s, background .25s, border-color .25s;
}
.filter-chip:hover {
	color: var(--blue);
	border-color: var(--blue);
}
.filter-chip.is-active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
/* grid reuse prod-card from style.css, plus case-card */
.case-card {
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--line-light);
	transition: box-shadow .45s var(--ease), transform .45s var(--ease);
	background: #fff;
}
.case-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0,49,159,.26);
	box-shadow: 0 30px 56px -32px rgba(6,10,18,.36);
}
.case-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper);
}
.case-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.case-card:hover .case-media img {
	transform: scale(1.05);
}
.case-body {
	padding: 18px 18px 20px;
	border-top: 1px solid var(--line-light);
}
.case-tag {
	font: 500 10px/1 var(--font-d);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--blue);
}
.case-name {
	margin-top: 8px;
	font: 500 15px/1.35 var(--font-d);
	letter-spacing: -.008em;
	color: var(--ink-text);
}
.case-excerpt {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* news list: one article per row, media left / copy right */
.news-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(16px, 1.8vw, 22px);
}
/* the card's <a> wrapper is the real flex item, so the row layout lives on it */
.news-list .case-card > a {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.news-list .case-media {
	flex: 0 0 240px;
	aspect-ratio: auto;
}
.news-list .case-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 0;
	border-left: 1px solid var(--line-light);
	padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
}
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
}
.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}
/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pager {
	margin-top: clamp(32px, 4vw, 48px);
}
/* pagination markup comes from the CMS: <div class="showpage">首页 上一页 …</div>
   the bare words stay as muted labels, the page numbers become pill buttons */
.showpage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 500 12px/1 var(--font-d);
	letter-spacing: .04em;
	color: var(--muted-2);
}
.showpage a, .showpage .current {
	min-width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	padding: 0 13px;
	border-radius: 999px;
	border: 1px solid var(--line-light);
	background: #fff;
	font: 500 13px/1 var(--font-d);
	color: var(--ink-text);
	transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.showpage a:hover {
	color: #fff;
	background: var(--blue);
	border-color: var(--blue);
	box-shadow: 0 10px 20px -12px var(--blue);
}
.showpage .current {
	color: #fff;
	background: var(--blue);
	border-color: var(--blue);
}
/* ==========================================================================
   DETAIL PAGES (product / case / article)
   ========================================================================== */
.detail-head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}
.detail-gallery {
	border-radius: 4px;
	overflow: hidden;/* border: 1px solid var(--line-light);
  background: var(--paper); */
}
.detail-gallery .main-img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.detail-gallery .main-img img {
	max-width: 100%;
	/* margin: 10px auto; */
  /* height: 100%;
  object-fit: cover; */
	border: 1px solid #ddd;
}
.detail-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	border-top: 1px solid var(--line-light);
}
.detail-thumbs button {
	/* aspect-ratio: 1 / 1; */
	overflow: hidden;
	border-right: 1px solid var(--line-light);
	border-bottom: 1px solid var(--line-light);
	background: var(--paper);
	padding: 0;
	cursor: pointer;
	margin-top: 10px;
}
.detail-thumbs button:last-child {
	border-right: 0;
}
.detail-thumbs img {
	width: 100%;
	/* height: 100%;
  object-fit: cover; */
	transition: opacity .25s;
	opacity: 0.3;
	border:1px solid #ddd;
}
.detail-thumbs button.is-active img {
	opacity: 1;
}
.detail-cat {
	font: 500 11px/1 var(--font-d);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--blue);
}
.detail-title {
	margin-top: 16px;
	font: 500 clamp(1.5rem, 2.8vw, 2.2rem)/1.15 var(--font-d);
	letter-spacing: -.028em;
	color: var(--ink-text);
}
.detail-meta {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 13px;
	color: var(--muted);
}
.detail-meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.detail-meta .dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--blue);
}
.detail-desc {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--line-light);
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--muted);
}
.detail-desc h3 {
	margin: 28px 0 10px;
	font: 500 1.05rem/1.3 var(--font-d);
	color: var(--ink-text);
	letter-spacing: -.01em;
}
.detail-desc h3:first-child {
	margin-top: 0;
}
.detail-desc p {
	margin-top: 12px;
}
.detail-desc ul {
	margin-top: 12px;
	padding-left: 18px;
	list-style: disc;
}
.detail-desc li {
	margin-top: 6px;
}
/* the six sectors from the homepage, shown as tag cards */
.detail-desc ul.app-tags {
	margin-top: 14px;
	padding-left: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.detail-desc ul.app-tags li {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 14px 15px;
	border: 1px solid var(--line-light);
	border-radius: 3px;
	background: #fff;
	text-align: center;
	transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.at-ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #eef4ff;
	color: var(--blue);
	transition: background .25s, color .25s;
}
.at-ico svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}
.at-label {
	font: 500 12.5px/1.45 var(--font-d);
	color: var(--ink-text);
	letter-spacing: .01em;
}
.detail-desc ul.app-tags li:hover {
	border-color: var(--blue);
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -18px rgba(2, 24, 61, .55);
}
.detail-desc ul.app-tags li:hover .at-ico {
	background: var(--blue);
	color: #fff;
}
@media (max-width: 560px) {
.detail-desc ul.app-tags {
	grid-template-columns: minmax(2, 1fr);
}
}
.detail-cta {
	margin-top: 70px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.detail-cta .btn-primary {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
.detail-cta .btn-primary:hover {
	background: var(--blue-hi);
	border-color: var(--blue-hi);
}
.detail-cta .btn-ghost {
	color: var(--blue);
	border: 1px solid var(--blue);
	background: transparent;
	backdrop-filter: none;
}
.detail-cta .btn-ghost:hover {
	color: #fff;
	background: var(--blue);
	border-color: var(--blue);
}
/* the phone icon should stay put instead of sliding like the arrow icons */
.detail-cta .btn-phone:hover svg {
	transform: none;
}
/* article detail */
.article-detail .detail-desc {
	font-size: 16px;
}
/* .article-detail .detail-desc p { text-indent: 2em; } */
/* article detail */
.article-detail img {
	max-width: 100%;
	margin: 10px auto;
}
/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 48px);
}
.contact-block-title {
	font: 500 clamp(1.2rem, 2vw, 1.5rem)/1.15 var(--font-d);
	letter-spacing: -.02em;
	color: var(--ink-text);
}
.contact-block-sub {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--muted);
}
.contact-info {
	margin-top: 32px;
	border-top: 1px solid var(--line-light);
}
.contact-info li {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line-light);
	font-size: 15px;
	color: var(--ink-text);
}
.contact-info li span {
	display: flex;
	align-items: center;
	gap: 7px;
	font: 500 10.5px/1 var(--font-d);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted-2);
	padding-top: 4px;
	white-space: nowrap;
}
/* row icons, masked so they inherit the label colour */
.contact-info li span::before {
	content: "";
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--ico) no-repeat center / contain;
	mask: var(--ico) no-repeat center / contain;
}
.contact-info li:nth-child(1) span {
 --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.contact-info li:nth-child(2) span {
 --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.contact-info li:nth-child(3) span {
 --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1'/%3E%3Cpath d='m3.6 7 8.4 6 8.4-6'/%3E%3C/svg%3E");
}
.contact-info li:nth-child(4) span {
 --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.3 7.6L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E");
}
.contact-info li a {
	color: var(--blue);
	transition: color .25s;
}
.contact-info li a:hover {
	color: var(--blue-hi);
}
/* contact form */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(20px, 3vw, 32px);
	background: var(--paper);
	border-radius: 4px;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.form-field label {
	display: block;
	margin-bottom: 8px;
	font: 500 11px/1 var(--font-d);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.form-field input, .form-field select, .form-field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--line-light);
	border-radius: 3px;
	font: 400 14px/1.5 var(--font-b);
	color: var(--ink-text);
	background: #fff;
	transition: border-color .25s, box-shadow .25s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0,49,159,.1);
}
.form-field textarea {
	resize: vertical;
	min-height: 100px;
}
.form-submit {
	margin-top: 4px;
}
.form-submit .btn-primary {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
.form-submit .btn-primary:hover {
	background: var(--blue-hi);
	border-color: var(--blue-hi);
}
/* map */
.map-wrap {
	margin-top: clamp(32px, 4vw, 52px);
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 16 / 7;
	background: var(--paper);
	border: 1px solid var(--line-light);
}
.map-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* ==========================================================================
   RELATED / NEXT-PREV BLOCK
   ========================================================================== */
.related {
	margin-top: clamp(56px, 7vw, 88px);
}
.related-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-bottom: clamp(20px, 2.4vw, 28px);
}
.related-head h3 {
	font: 500 clamp(1.2rem, 2vw, 1.5rem)/1.15 var(--font-d);
	letter-spacing: -.02em;
	color: var(--ink-text);
}
.related-head a {
	font: 500 11px/1 var(--font-d);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blue);
}
.related-head a:hover {
	color: var(--blue-hi);
}
/* ==========================================================================
   PRODUCT SPECIFICATION — full-width block under the gallery
   ========================================================================== */
.pd-spec {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(26px, 3vw, 36px);
	border-top: 1px solid var(--line-light);
}
.pd-eyebrow {
	font: 500 10px/1 var(--font-d);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--blue);
}
.pd-spec-head h2 {
	/* margin-top: 10px; */
	font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--font-d);
	letter-spacing: -.02em;
	color: var(--ink-text);
	margin-bottom: 20px;
	margin-top: 40px;
}
.pd-spec-head h2:first-child {
	margin-top: 0;
}
.pd-lede {
	margin-top: 12px;
	max-width: 74ch;
	font-size: 14px;
	line-height: 1.7;
	color: var(--muted-2);
}
.spec-table {
	width: 100%;
	margin-top: clamp(24px, 2.6vw, 34px);
	border-collapse: collapse;
	font-size: 14px;
	border-top: 2px solid var(--ink-text);
}
.spec-table tr {
	border-bottom: 1px solid var(--line-light);
}
.spec-table tr:nth-child(even) {
	background: var(--paper);
}
.spec-table td {
	padding: 13px 18px;
	vertical-align: top;
	line-height: 1.55;
}
.spec-table td:first-child {
	width: 34%;
	font: 500 12px/1.5 var(--font-d);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.spec-table td:last-child {
	color: var(--ink-text);
	font-weight: 500;
}
.pd-note {
	margin-top: 18px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--muted-2);
}
@media (max-width: 640px) {
.spec-table td {
	padding: 11px 12px;
}
.spec-table td:first-child {
	width: 42%;
}
}
.nav-links {
	margin-top: clamp(28px, 4vw, 40px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--line-light);
}
.nav-links a {
	display: block;
	padding: 16px 20px;
	border: 1px solid var(--line-light);
	border-radius: 4px;
	transition: border-color .25s, background .25s;
}
.nav-links a:hover {
	border-color: var(--blue);
	background: var(--paper);
}
.nav-links .nav-label {
	display: block;
	font: 500 10.5px/1 var(--font-d);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: 30px;
}
.nav-links .nav-title {
	display: block;
	margin-top: 8px;
	font: 500 14px/1.4 var(--font-d);
	color: var(--ink-text);
}

/* ==========================================================================
   RESPONSIVE — inner pages
   ========================================================================== */
@media (max-width: 1080px) {
.layout {
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
}
.layout--news {
	grid-template-columns: minmax(0, 1fr);
}
.layout--news .sidebar {
	order: 0;
}
.sidebar {
	position: static;
	order: -1;
}
.detail-head {
	grid-template-columns: minmax(0, 1fr);
}
.img-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-grid {
	grid-template-columns: minmax(0, 1fr);
}
.grid-3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.news-list .case-media {
	flex: 0 0 200px;
}
}
@media (max-width: 700px) {
.page-banner {
	padding-top: calc(var(--hdr) + 48px);
	padding-bottom: 44px;
}
.banner-title {
	margin-top: 14px;
}
.breadcrumb {
	margin-top: 18px;
}
.grid-3 {
	grid-template-columns: minmax(0, 1fr);
}
.form-row {
	grid-template-columns: minmax(0, 1fr);
}
/* news rows stack back to image-on-top on narrow screens */
.news-list .case-card > a {
	flex-direction: column;
}
.news-list .case-media {
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
}
.news-list .case-body {
	border-left: 0;
	border-top: 1px solid var(--line-light);
}
.contact-info li {
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
}
.img-row {
	grid-template-columns: minmax(0, 1fr);
}
.about-cols {
	grid-template-columns: minmax(0, 1fr);
}
.about-cols-wide {
	grid-column: auto;
}
.nav-links {
	grid-template-columns: minmax(0, 1fr);
}
.related-head {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.detail-thumbs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
}