/* ==========================================================================
   Zio Marble
   Structure modelled on technoprofil.ca: fixed transparent header with an
   overlay menu, full-bleed hero, mission block with hover-follow thumbnails,
   oversized statement over a photo, a four-column catalogue grid on near-black,
   and a project/market grid.
   Measurements are theirs: h1 100/90, statement 120/114, cards 365×438 r20,
   feature image radius 70px 0 0 0, container padding 100px 30px 135px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	--ink:      #141414;
	--black:    #000000;
	--btn:      #2c2c2c;
	--grey-1:   #f4f4f4;
	--grey-2:   #ededed;
	--rule:     #676767;
	--white:    #ffffff;

	--text:       var(--ink);
	--text-muted: #6b6b6b;
	--surface:    var(--white);

	--font: "Switzer", "Aeonik", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

	/* Their type scale, made fluid. */
	--t-hero:      clamp(2.75rem, 1.1rem + 7vw, 6.25rem);   /* → 100px */
	--t-statement: clamp(2.5rem,  0.6rem + 8vw, 7.5rem);    /* → 120px */
	--t-h2:        clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); /* → 44px */
	--t-h3:        clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	--t-card:      1.375rem;                                 /* 22px */
	--t-body:      1.125rem;                                 /* 18px */
	--t-small:     0.875rem;                                 /* 14px */

	--gutter:  clamp(1.25rem, 0.6rem + 2vw, 1.875rem);       /* → 30px */
	--pad-top: clamp(3.5rem, 2rem + 5vw, 6.25rem);           /* → 100px */
	--pad-bot: clamp(4rem, 2rem + 7vw, 8.4375rem);           /* → 135px */
	--wrap:    95rem;

	--r-card:   20px;
	--r-thumb:  10px;
	--r-btn:    7px;
	--r-feature: 70px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur:  0.5s;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
	font-family: var(--font);
	font-size: var(--t-body);
	line-height: 1.35;
	font-weight: 400;
	color: var(--text);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

:lang(zh) { font-family: var(--font-cjk); }

img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }

h1, h2, h3, h4 { font-weight: 400; letter-spacing: normal; line-height: 1.1; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; z-index: 999; padding: 1rem 1.5rem; background: var(--ink); color: var(--white); }
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: var(--pad-top) var(--pad-bot); }
.band--dark  { background: var(--ink);  color: var(--white); }
.band--black { background: var(--black); color: var(--white); }
.band--grey  { background: var(--grey-1); }

/* The hairline + small label that opens each major band. */
.band-label {
	position: relative;
	padding-top: 1.25rem;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.75rem);
	font-size: var(--t-small);
	font-weight: 400;
}
.band-label::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--gutter) * -1);
	right: calc(var(--gutter) * -1);
	height: 1px;
	background: var(--rule);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	padding: 17px 20px;
	border: 0;
	border-radius: var(--r-btn);
	background: var(--btn);
	color: var(--white);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.btn:hover { background: var(--black); }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--grey-2); }

.arrow { width: 19px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* --------------------------------------------------------------------------
   5. Masthead — logo, language, Menu trigger. No inline nav.
   -------------------------------------------------------------------------- */

.masthead {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	height: 69px;
	display: flex;
	align-items: center;
	color: var(--white);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.masthead[data-solid] { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 rgb(20 20 20 / 0.1); }

.masthead__inner {
	width: 100%; max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.brand { font-size: 1.375rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.masthead__right { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 3vw, 3.5rem); }

.menu-toggle {
	display: flex; align-items: center; gap: 0.9rem;
	background: none; border: 0; cursor: pointer;
	font-size: 0.9375rem; font-weight: 500;
}
.menu-toggle__bars { display: grid; gap: 5px; width: 34px; }
.menu-toggle__bars span { display: block; height: 1.5px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child  { transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen overlay menu. */
.overlay {
	position: fixed; inset: 0; z-index: 55;
	background: var(--ink); color: var(--white);
	padding: 6rem var(--gutter) 3rem;
	display: grid; align-content: center;
	opacity: 0; visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility var(--dur);
	overflow-y: auto;
}
.overlay[data-open] { opacity: 1; visibility: visible; }
.overlay__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; display: grid; gap: 3rem; }
@media (min-width: 60rem) { .overlay__inner { grid-template-columns: 2fr 1fr; gap: 5rem; } }

.overlay__list { display: grid; gap: 0.35rem; }
.overlay__list > li > a {
	display: inline-block;
	font-size: clamp(2rem, 1rem + 4vw, 3.75rem);
	line-height: 1.15;
	opacity: 0.92;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.overlay__list > li > a:hover { opacity: 1; transform: translateX(10px); }

.overlay__meta { display: grid; gap: 1.5rem; align-content: start; font-size: var(--t-small); color: rgb(255 255 255 / 0.66); }
.overlay__meta a:hover { color: var(--white); }
.overlay__langs { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.overlay__langs a[aria-current] { color: var(--white); }

/* --------------------------------------------------------------------------
   6. Hero — full-bleed media, oversized title bottom-left
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: min(100svh, 904px);
	display: grid;
	align-items: end;
	background: var(--black);
	color: var(--white);
	overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.1) 45%, rgb(0 0 0 / 0.75) 100%);
}
.hero__inner {
	position: relative;
	width: 100%; max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gutter) clamp(2.5rem, 1rem + 5vw, 5rem);
	display: grid;
	gap: 2rem;
}
.hero__title { font-size: var(--t-hero); line-height: 0.9; }
.hero__foot { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) {
	.hero__foot { grid-template-columns: minmax(0, 34rem) auto; align-items: end; justify-content: space-between; }
}
.hero__lede { font-size: var(--t-body); color: rgb(255 255 255 / 0.8); }

/* --------------------------------------------------------------------------
   7. Mission — statement + button left, service list with cursor thumbnails right
   -------------------------------------------------------------------------- */

.mission__grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 5rem); }
@media (min-width: 64rem) { .mission__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 609px); align-items: start; } }

.mission__title { font-size: var(--t-h2); line-height: 1.2; max-width: 22ch; margin-bottom: 2rem; }

.mission__list { border-top: 1px solid rgb(20 20 20 / 0.14); }
.mission__item {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 15px 0;
	min-height: 57px;
	border-bottom: 1px solid rgb(20 20 20 / 0.14);
	transition: padding-left var(--dur) var(--ease);
}
.mission__item:hover { padding-left: 12px; }
.mission__service { font-size: 1rem; font-weight: 500; line-height: 1.25; }

/* The thumbnail follows the cursor and only appears on hover — their signature move. */
.mission__thumb {
	position: absolute;
	top: 0; left: 0;
	width: 212px; height: 144px;
	object-fit: cover;
	border-radius: var(--r-thumb);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.94);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
	z-index: 2;
}
.mission__item:hover .mission__thumb { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 63.999rem) { .mission__thumb { display: none; } }

/* --------------------------------------------------------------------------
   8. Statement over a full-bleed photograph
   -------------------------------------------------------------------------- */

.statement {
	position: relative;
	min-height: clamp(28rem, 20rem + 26vw, 782px);
	display: grid; align-items: center;
	color: var(--white);
	background: var(--ink);
	overflow: hidden;
}
.statement__media { position: absolute; inset: 0; }
.statement__media img { width: 100%; height: 100%; object-fit: cover; }
.statement__media::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.42); }
.statement__inner { position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.statement__title { font-size: var(--t-statement); line-height: 0.95; max-width: 14ch; }

/* --------------------------------------------------------------------------
   9. Catalogue grid — their four-column products layout
   -------------------------------------------------------------------------- */

.catalogue { background: var(--ink); color: var(--white); }
.catalogue__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: var(--pad-top) var(--gutter) var(--pad-bot); }

.catalogue__grid { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) {
	.catalogue__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
	/* Feature photo occupies the left half across two rows; header sits beside it. */
	.catalogue__feature { grid-column: 1 / 3; grid-row: 1 / 3; }
	.catalogue__head    { grid-column: 3 / 5; grid-row: 1; align-self: start; }
}

.catalogue__feature { position: relative; border-radius: var(--r-feature) 0 0 0; overflow: hidden; min-height: 26rem; }
.catalogue__feature img { width: 100%; height: 100%; object-fit: cover; }
.catalogue__caption { font-size: var(--t-small); line-height: 1.35; margin-bottom: 0.75rem; color: rgb(255 255 255 / 0.8); }

.catalogue__head { display: grid; gap: 1.25rem; align-content: start; padding-block: 1rem; }
.catalogue__title { font-size: var(--t-h2); }
.catalogue__text { font-size: var(--t-body); color: rgb(255 255 255 / 0.72); max-width: 34ch; }
.catalogue__head .btn { justify-self: start; }

/* Stone card: photo tile, number top-left, meta under it, name pinned bottom. */
.stone-card {
	position: relative;
	display: block;
	aspect-ratio: 365 / 438;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--black);
	color: var(--white);
	isolation: isolate;
}
.stone-card__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.8s var(--ease), opacity var(--dur) var(--ease);
}

/* Marble is pale — without a scrim the white type vanishes into the stone. */
.stone-card::after {
	content: "";
	position: absolute; inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.5) 26%, rgb(0 0 0 / 0.12) 52%, rgb(0 0 0 / 0.8) 100%);
	transition: opacity var(--dur) var(--ease);
}
.stone-card:hover::after { opacity: 0.88; }
.stone-card:hover .stone-card__img { transform: scale(1.05); }

.stone-card__n {
	position: absolute; z-index: 2; top: 30px; left: 30px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 0.8px solid var(--white);
	border-radius: 50%;
	font-size: var(--t-small);
	font-weight: 300;
}
.stone-card__meta {
	position: absolute; z-index: 2; top: 110px; left: 30px; right: 30px;
	font-size: var(--t-small);
	line-height: 1.4;
	display: grid; gap: 0.15rem;
}
.stone-card__meta strong { font-weight: 500; }
.stone-card__name {
	position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 30px;
	padding-top: 15px;
	border-top: 1px solid rgb(255 255 255 / 0.35);
	font-size: var(--t-card);
	font-weight: 500;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.stone-card:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   10. Market / reference grid
   -------------------------------------------------------------------------- */

.tiles { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile {
	position: relative;
	display: grid; align-content: end; gap: 0.5rem;
	min-height: 22rem;
	padding: 1.75rem;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--grey-2);
	color: var(--white);
	isolation: isolate;
}
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.8s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.72)); }
.tile__kicker, .tile__name { position: relative; z-index: 2; }
.tile:hover .tile__img { transform: scale(1.05); }
.tile__kicker { font-size: var(--t-small); color: rgb(255 255 255 / 0.75); }
.tile__name { font-size: var(--t-h3); font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tile--plain { background: var(--grey-1); color: var(--ink); min-height: 0; }
.tile--plain::after { display: none; }

/* --------------------------------------------------------------------------
   11. Editorial pages
   -------------------------------------------------------------------------- */

.page-hero { padding: calc(69px + var(--pad-top)) 0 var(--pad-top); }
.page-hero__inner { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 5rem; align-items: end; } }
.page-hero__title { font-size: clamp(2.25rem, 1rem + 5vw, 4.5rem); line-height: 1; }
.page-hero__lede { font-size: var(--t-body); color: var(--text-muted); }

.crumbs { font-size: var(--t-small); color: var(--text-muted); padding-top: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4em; list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4em; opacity: 0.5; }

.prose { max-width: 46rem; font-size: var(--t-body); line-height: 1.6; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { font-size: var(--t-h2); margin-top: 3.5rem; }
.prose h3 { font-size: var(--t-h3); margin-top: 2.5rem; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul, .prose ul[class] { list-style-type: disc; }
.prose ol, .prose ol[class] { list-style-type: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose a { text-decoration: underline; text-underline-offset: 0.2em; }
.prose img { border-radius: var(--r-card); }

.specs { border-top: 1px solid rgb(20 20 20 / 0.14); }
.specs__row { display: grid; gap: 0.25rem; padding-block: 1rem; border-bottom: 1px solid rgb(20 20 20 / 0.14); }
@media (min-width: 40rem) { .specs__row { grid-template-columns: 15rem 1fr; gap: 1.5rem; } }
.specs dt { font-size: var(--t-small); color: var(--text-muted); }

.faq details, .prose details { border-bottom: 1px solid rgb(20 20 20 / 0.14); padding-block: 1.25rem; }
.prose summary, .faq summary {
	cursor: pointer; list-style: none;
	font-size: var(--t-h3); font-weight: 500;
	display: flex; justify-content: space-between; gap: 1.5rem;
}
summary::-webkit-details-marker { display: none; }
.prose summary::after, .faq summary::after { content: "+"; font-weight: 400; transition: transform var(--dur) var(--ease); }
details[open] > summary::after { transform: rotate(45deg); }
details > *:not(summary) { margin-top: 1rem; max-width: 62ch; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; max-width: 46rem; }
@media (min-width: 44rem) { .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-small); color: var(--text-muted); }
.field input, .field textarea, .field select {
	width: 100%; padding: 0.85em 1em;
	background: var(--white);
	border: 1px solid rgb(20 20 20 / 0.18);
	border-radius: var(--r-btn);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); outline: none; }
.field textarea { min-height: 10rem; resize: vertical; }
.field--hp { position: absolute; left: -9999px; }
.notice { padding: 1rem 1.25rem; border-radius: var(--r-btn); background: var(--grey-1); border-left: 3px solid var(--ink); font-size: var(--t-small); }
.notice--error { border-color: #a33; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--black); color: rgb(255 255 255 / 0.7); padding-top: var(--pad-top); font-size: var(--t-small); }
.footer__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gutter) 3rem; display: grid; gap: 3rem; }
@media (min-width: 56rem) { .footer__inner { grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; } }
.footer__wordmark { font-size: 1.5rem; font-weight: 500; text-transform: uppercase; color: var(--white); }
.footer__tagline { margin-top: 0.75rem; max-width: 32ch; }
.footer__contact { font-style: normal; display: grid; gap: 0.3rem; }
.footer__contact a:hover, .footer__list a:hover { color: var(--white); }
.footer__list { display: grid; gap: 0.55rem; }
.footer__bar { border-top: 1px solid rgb(255 255 255 / 0.14); }
.footer__bar-inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 1.25rem var(--gutter); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.footer__legal { display: flex; gap: 1.5rem; list-style: none; padding: 0; }

.stack > * + * { margin-top: 1.5rem; }
[hidden] { display: none !important; }

.masthead[data-menu-open] { background: transparent; color: var(--white); box-shadow: none; }

/* --------------------------------------------------------------------------
   Language control
   Sits in the masthead at all times. Quiet enough not to compete with the
   wordmark, obvious enough that an Italian or Chinese buyer finds it in the
   first second — a globe reads across every alphabet the site serves.
   -------------------------------------------------------------------------- */

.lang { position: relative; }

.lang__btn {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.4rem 0.15rem;
	background: none; border: 0; cursor: pointer;
	color: inherit;
	font-size: 0.9375rem; font-weight: 500;
	opacity: 0.85;
	transition: opacity var(--dur) var(--ease);
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { opacity: 1; }
.lang__globe { width: 18px; height: 18px; flex: none; }
.lang__code { letter-spacing: 0.04em; }

.lang__menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 70;
	min-width: 15rem;
	padding: 0.4rem;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--r-btn);
	box-shadow: 0 18px 44px rgb(0 0 0 / 0.22);
	display: grid;
	gap: 1px;
}
.lang__menu a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: 0.6rem 0.75rem;
	border-radius: 5px;
	font-size: 0.9375rem;
	transition: background-color 0.2s var(--ease);
}
.lang__menu a:hover { background: var(--grey-1); }
.lang__menu a[aria-current] { background: var(--ink); color: var(--white); }
.lang__native { font-weight: 500; }
.lang__en { font-size: var(--t-small); opacity: 0.55; }

/* Inside the overlay the languages are already listed in full. */
.overlay .lang { display: none; }

/* --------------------------------------------------------------------------
   CookieYes
   The plugin ships its own look; these overrides pull it into the site's
   system — same radii, same button shape, same monochrome palette, sentence
   case rather than the plugin's defaults.

   Reject and Customise are kept visually equal to Accept on purpose. A buried
   reject button is a consent-law liability, not a conversion win.
   -------------------------------------------------------------------------- */

.cky-consent-container .cky-consent-bar,
.cky-modal .cky-preference-center {
	background: var(--white) !important;
	border: 1px solid rgb(20 20 20 / 0.1) !important;
	border-radius: var(--r-card) !important;
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.24) !important;
	font-family: var(--font) !important;
	color: var(--ink) !important;
}
.cky-overlay { background: rgb(0 0 0 / 0.6) !important; }

.cky-title,
.cky-preference-title {
	font-family: var(--font) !important;
	font-weight: 500 !important;
	font-size: 1.25rem !important;
	letter-spacing: normal !important;
	color: var(--ink) !important;
}

.cky-notice-des,
.cky-notice-des p,
.cky-preference-content-wrapper,
.cky-preference-content-wrapper p,
.cky-accordion-header-des,
.cky-accordion-header-des p,
.cky-gpc-wrapper .cky-gpc-desc {
	color: var(--text-muted) !important;
	font-size: var(--t-small) !important;
	line-height: 1.6 !important;
}

/* Buttons take the site's shape exactly: 7px, 17/20 padding, 15px, weight 500. */
.cky-btn {
	font-family: var(--font) !important;
	border-radius: var(--r-btn) !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	padding: 17px 20px !important;
	line-height: 1 !important;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
}

.cky-btn-accept {
	background: var(--btn) !important;
	border: 1px solid var(--btn) !important;
	color: var(--white) !important;
}
.cky-btn-accept:hover { background: var(--black) !important; border-color: var(--black) !important; }

.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
	background: transparent !important;
	color: var(--ink) !important;
	border: 1px solid rgb(20 20 20 / 0.22) !important;
}
.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
	border-color: var(--ink) !important;
	background: var(--grey-1) !important;
}

.cky-accordion-btn {
	font-family: var(--font) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	color: var(--ink) !important;
}
.cky-always-active { color: var(--ink) !important; font-size: var(--t-small) !important; letter-spacing: normal !important; }

.cky-audit-table {
	background: var(--grey-1) !important;
	color: var(--ink) !important;
	border: 1px solid rgb(20 20 20 / 0.1) !important;
	border-radius: var(--r-btn) !important;
}
.cky-accordion,
.cky-preference-header { border-bottom: 1px solid rgb(20 20 20 / 0.1) !important; }
.cky-footer-wrapper { border-top: 1px solid rgb(20 20 20 / 0.1) !important; }
.cky-switch input[type="checkbox"] { accent-color: var(--ink) !important; }

.cky-consent-container a,
.cky-preference-center a { color: var(--ink) !important; text-underline-offset: 3px; }

/* The small re-open control. */
.cky-btn-revisit-wrapper {
	background: var(--ink) !important;
	border-radius: var(--r-btn) !important;
}
.cky-btn-revisit-wrapper:hover { background: var(--black) !important; }
.cky-btn-close { opacity: 0.65; }
.cky-btn-close:hover { opacity: 1; }

@media (max-width: 40rem) {
	.cky-consent-container .cky-consent-bar { padding: 20px 18px !important; }
	.cky-btn { width: 100%; text-align: center; justify-content: center; }
}

/* Chinese needs its own stack inside the banner too. */
:lang(zh) .cky-consent-container,
:lang(zh) .cky-modal { font-family: var(--font-cjk) !important; }