/* Demin's - About Us page (template about-us-page.php).
   Refitted to Figma file P9ot9MKdb8j6L6qxkG5KSM, frames
   "Desktop 1440 - ABOUT US" (68:242) and "Mobile 390 - ABOUT US" (73:361).

   Same scale system as the kitchen collection page, so the two pages grow at
   the same rate on the same screen: --dk-s is one px of a 1920 canvas, --dk-p
   one px of the 1440 Figma frame, and every desktop distance below is the
   measured Figma value written in --dk-p. Font sizes are clamps that reach
   their Figma value at 1440 and stop growing at 1920.

   The content column is 92.4% of the window at every width with no ceiling -
   the same column the kitchen page uses. The Figma frame gives each band a
   slightly different inset (32.25 for the hero, 87.19 for craftsmanship,
   71.25 for the values, 57.38 for the card grid, 43.5 for Made in Austria);
   those are dropped so every band starts and ends on one line, and only the
   proportions inside each band are kept from the frame. 92.4% also matches the
   phone frame, where 358 of 390 is 91.8%. */

/* ---- Astra chrome --------------------------------------------------- */
/* The template is full-bleed: Astra's centred content box would cap the page
   at its own max-width and fight the 92.4% column. */
body.demins-about-template { margin: 0; }
body.demins-about-template #page {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}
body.demins-about-template #content,
body.demins-about-template #content > .ast-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
body.demins-about-template #content > .ast-container { display: block; }
body.demins-about-template #primary.dk-premium-about {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ---- tokens --------------------------------------------------------- */
.dk-premium-about {
	--dk-about-green: #203429;
	--dk-about-gold: #cfa859;
	--dk-about-sand: #f2f0ed;
	--dk-about-cream: #f8f2e6;
	--dk-about-muted: #b3b7c3;
	--dk-s: max(.52px, .0520833vw);        /* 1 px of a 1920 canvas */
	--dk-p: calc(var(--dk-s) * 4 / 3);     /* 1 px of the 1440 Figma frame */
	/* The hero photo ends and the Craftsmanship photo begins on one vertical
	   rule. In the frame the two are 5px apart (804.375 against 799.5), which
	   reads as a misalignment rather than an offset, so both are pinned to the
	   hero's fraction of the column: 772.125 of its 1371.75 band. */
	--dk-photo-edge: calc(100% * 772.125 / 1371.75);
	--dk-craft-gap: calc(67.3 * var(--dk-p));
	--dk-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
	--dk-sans: Arial, Helvetica, sans-serif;
	/* Each clamp hits its Figma value at 1440 and caps at a 1920 window. */
	--dk-f-display: clamp(34px, 3.75vw, 72px);    /* 54   @1440 */
	--dk-f-page: clamp(15px, 2.0833vw, 40px);     /* 30   @1440 */
	--dk-f-lead: clamp(18px, 1.4583vw, 28px);     /* 21   @1440 */
	--dk-f-body: clamp(15px, 1.1458vw, 22px);     /* 16.5 @1440 */
	--dk-f-value: clamp(22px, 1.875vw, 36px);     /* 27   @1440 */
	--dk-f-card: clamp(20px, 1.5625vw, 30px);     /* 22.5 @1440 */
	--dk-f-badge: clamp(22px, 2.5vw, 48px);       /* 36   @1440 */
	--dk-f-catalog: clamp(26px, 2.2917vw, 44px);  /* 33   @1440 */
	--dk-f-post: clamp(26px, 2.5vw, 48px);        /* 36   @1440 - not in Figma */
	background: var(--dk-about-green);
	color: #fff;
	font-family: var(--dk-sans);
	-webkit-font-smoothing: antialiased;
}
.dk-premium-about *,
.dk-premium-about *::before,
.dk-premium-about *::after { box-sizing: border-box; }

/* The one content column, shared by every band. */
.dk-premium-about .dk-premium-about__container,
.dk-premium-about .dk-premium-about__craft-inner,
.dk-premium-about .dk-premium-about__values-grid,
.dk-premium-about .dk-premium-about__benefits-inner,
.dk-premium-about .dk-premium-about__hardware-inner,
.dk-premium-about .dk-premium-about__discover-inner {
	width: 92.4%;
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* ---- page title bar ------------------------------------------------- */
.dk-premium-about .dk-premium-about__titlebar { background: #fff; }
.dk-premium-about .dk-premium-about__titlebar h1 {
	margin: 0;
	padding-block: calc(12.75 * var(--dk-p)) calc(15.525 * var(--dk-p));
	color: var(--dk-about-green);
	font-family: var(--dk-display);
	font-size: var(--dk-f-page);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
}

/* ---- 1. hero -------------------------------------------------------- */
.dk-premium-about .dk-premium-about__body {
	padding-block: calc(10.803 * var(--dk-p)) calc(66.85 * var(--dk-p));
}
.dk-premium-about .dk-premium-about__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35em;
	margin: 0 0 calc(25.719 * var(--dk-p));
	color: var(--dk-about-muted);
	font-size: var(--dk-f-body);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: uppercase;
}
.dk-premium-about .dk-premium-about__breadcrumb a { color: inherit; text-decoration: none; }
.dk-premium-about .dk-premium-about__breadcrumb a:hover { color: #fff; }
.dk-premium-about .dk-premium-about__breadcrumb a:focus-visible {
	outline: 2px solid var(--dk-about-gold);
	outline-offset: 5px;
}
.dk-premium-about .dk-premium-about__breadcrumb [aria-current] { color: #fff; }

/* Photo 772.125 | copy 599.625, sharing one edge; the copy's own 29.625 of
   left padding is what separates them. The title sits in the copy column on
   desktop and above the photo on the phone, so it is its own grid item. */
.dk-premium-about .dk-premium-about__hero {
	display: grid;
	grid-template-columns: var(--dk-photo-edge) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "media title" "media copy";
	column-gap: 0;
	align-items: start;
}
.dk-premium-about .dk-premium-about__media { grid-area: media; margin: 0; }
.dk-premium-about .dk-premium-about__title { grid-area: title; }
.dk-premium-about .dk-premium-about__copy { grid-area: copy; }
.dk-premium-about .dk-premium-about__title,
.dk-premium-about .dk-premium-about__copy {
	min-width: 0;
	padding-left: calc(29.625 * var(--dk-p));
	text-align: center;
}
.dk-premium-about .dk-premium-about__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 772.125 / 515.853;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}
.dk-premium-about .dk-premium-about__title h2 {
	margin: 0;
	color: #fff;
	font-family: var(--dk-display);
	font-size: var(--dk-f-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.dk-premium-about .dk-premium-about__intro {
	margin: calc(24.613 * var(--dk-p)) 0 0;
	color: #fff;
	font-size: var(--dk-f-lead);
	font-weight: 700;
	line-height: 1.286;
	letter-spacing: .05em;
}
.dk-premium-about .dk-premium-about__description {
	margin: calc(30.8 * var(--dk-p)) 0 0;
	color: #fff;
	font-size: var(--dk-f-body);
	font-weight: 400;
	line-height: 1.636;
	letter-spacing: .01em;
}

/* ---- 2. austrian craftsmanship -------------------------------------- */
.dk-premium-about .dk-premium-about__craft {
	background: #fff;
	color: var(--dk-about-green);
}
/* Copy 645 | gap 67.3 | photo 613.5, the three measured spans of the band. */
.dk-premium-about .dk-premium-about__craft-inner {
	display: grid;
	grid-template-columns: calc(var(--dk-photo-edge) - var(--dk-craft-gap)) minmax(0, 1fr);
	column-gap: var(--dk-craft-gap);
	align-items: center;
	padding-block: calc(36.15 * var(--dk-p)) calc(35.7 * var(--dk-p));
}
.dk-premium-about .dk-premium-about__craft-copy { min-width: 0; text-align: center; }
/* "Austrian Craftsmanship" is wider than its column, and the frame lets it hang
   over both edges rather than break into a third line. The heading is sized to
   its own longest line, so the overhang is exactly what the type needs at any
   viewport with no tuned number. Centring is done by hand: both auto margins
   and justify-self clamp an overflowing box to the start edge, which would put
   the whole overhang on one side. */
.dk-premium-about .dk-premium-about__craft-copy h2 {
	position: relative;
	left: 50%;
	width: max-content;
	max-width: none;
	transform: translateX(-50%);
	margin: 0;
	color: var(--dk-about-green);
	font-family: var(--dk-display);
	font-size: var(--dk-f-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.dk-premium-about .dk-premium-about__craft-copy p {
	margin: calc(23.091 * var(--dk-p)) 0 0;
	color: var(--dk-about-green);
	font-size: var(--dk-f-body);
	font-weight: 400;
	line-height: 1.636;
	letter-spacing: .01em;
}
.dk-premium-about .dk-premium-about__craft-media { min-width: 0; margin: 0; }
.dk-premium-about .dk-premium-about__craft-media img {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 613.5 / 447.75;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* ---- 3. values ------------------------------------------------------ */
.dk-premium-about .dk-premium-about__values { background: var(--dk-about-green); }
.dk-premium-about .dk-premium-about__values-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: calc(27.5 * var(--dk-p));
	row-gap: 0;
	padding: calc(69.88 * var(--dk-p)) 0 calc(69.45 * var(--dk-p));
	list-style: none;
	text-align: center;
}
.dk-premium-about .dk-premium-about__values-grid li { min-width: 0; margin: 0; padding: 0; }
.dk-premium-about .dk-premium-about__values-grid li::before {
	content: "";
	display: block;
	width: calc(16.5 * var(--dk-p));
	height: calc(16.5 * var(--dk-p));
	margin: 0 auto calc(22.646 * var(--dk-p));
	border-radius: 50%;
	background: var(--dk-about-gold);
}
.dk-premium-about .dk-premium-about__values-grid h3 {
	margin: 0;
	color: var(--dk-about-gold);
	font-family: var(--dk-display);
	font-size: var(--dk-f-value);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .039em;
	text-transform: uppercase;
}
.dk-premium-about .dk-premium-about__values-grid p {
	margin: calc(18.176 * var(--dk-p)) 0 0;
	color: #fff;
	font-size: var(--dk-f-body);
	font-weight: 400;
	line-height: 1.636;
	letter-spacing: .01em;
}

/* ---- 4. what you get ------------------------------------------------ */
.dk-premium-about .dk-premium-about__benefits {
	background: #fff;
	color: var(--dk-about-green);
}
.dk-premium-about .dk-premium-about__benefits-inner {
	padding-block: calc(25.384 * var(--dk-p)) calc(48.03 * var(--dk-p));
}
.dk-premium-about .dk-premium-about__benefits-header { text-align: center; }
.dk-premium-about .dk-premium-about__benefits-header h2 {
	margin: 0;
	color: var(--dk-about-green);
	font-family: var(--dk-display);
	font-size: var(--dk-f-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
}
/* 760 keeps the intro on the frame's four lines without a hard line break. */
.dk-premium-about .dk-premium-about__benefits-intro {
	max-width: calc(760 * var(--dk-p));
	margin: calc(17.056 * var(--dk-p)) auto 0;
}
.dk-premium-about .dk-premium-about__benefits-intro p {
	margin: 0;
	color: var(--dk-about-green);
	font-size: var(--dk-f-body);
	font-weight: 400;
	line-height: 1.636;
	letter-spacing: .01em;
}
.dk-premium-about .dk-premium-about__benefits-intro strong { font-weight: 700; }
/* The green showing through the 1.5 gaps is the grid's own background; it
   never goes below 1px, or the hairlines disappear on a small screen. */
.dk-premium-about .dk-premium-about__benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: max(1px, calc(1.5 * var(--dk-p)));
	margin: calc(30.25 * var(--dk-p)) 0 0;
	padding: max(1px, calc(1.5 * var(--dk-p)));
	background: var(--dk-about-green);
	list-style: none;
}
.dk-premium-about .dk-premium-about__benefit {
	min-width: 0;
	margin: 0;
	padding: calc(31.336 * var(--dk-p)) calc(20 * var(--dk-p)) calc(31.415 * var(--dk-p));
	background: var(--dk-about-cream);
	text-align: center;
}
.dk-premium-about .dk-premium-about__benefit-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(62.7 * var(--dk-p));
	aspect-ratio: 1;
	margin: 0 auto;
	border: max(1px, calc(1.5 * var(--dk-p))) solid var(--dk-about-green);
	border-radius: 50%;
	color: var(--dk-about-green);
	font-family: var(--dk-display);
	font-size: var(--dk-f-badge);
	font-weight: 600;
	line-height: 1;
}
.dk-premium-about .dk-premium-about__benefit h3 {
	margin: calc(21.644 * var(--dk-p)) 0 0;
	color: var(--dk-about-green);
	font-family: var(--dk-display);
	font-size: var(--dk-f-card);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .037em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
/* Cormorant's default figures are old-style: 1 and 2 sit at x-height, 3, 4 and
   5 hang below the baseline and 6 rises above it. Centred in a circle they look
   like they are jumping, so every digit on this page is set in lining figures,
   which share one baseline and one cap height. */
.dk-premium-about .dk-premium-about__creative-3d,
.dk-premium-about .dk-premium-about__lead-time-number,
.dk-premium-about .dk-premium-about__benefit-number {
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
.dk-premium-about .dk-premium-about__benefit p {
	margin: calc(18.88 * var(--dk-p)) 0 0;
	color: var(--dk-about-green);
	font-size: var(--dk-f-body);
	font-weight: 400;
	line-height: 1.636;
	letter-spacing: .01em;
}

/* ---- 5. made in austria --------------------------------------------- */
.dk-premium-about .dk-premium-about__hardware { background: var(--dk-about-green); }
/* Photo 603 | copy 738.375, sharing one edge as in the hero; the copy's own
   40.875 of left padding is the gap. */
.dk-premium-about .dk-premium-about__hardware-inner {
	display: grid;
	grid-template-columns: 603fr 738.375fr;
	column-gap: 0;
	align-items: start;
	padding-block: calc(46.125 * var(--dk-p)) calc(45.75 * var(--dk-p));
}
.dk-premium-about .dk-premium-about__slider {
	position: relative;
	min-width: 0;
	touch-action: pan-y pinch-zoom;
}
.dk-premium-about .dk-premium-about__slides {
	position: relative;
	aspect-ratio: 603 / 512.625;
	overflow: hidden;
}
.dk-premium-about .dk-premium-about__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility .45s;
}
.dk-premium-about .dk-premium-about__slide.is-active { opacity: 1; visibility: visible; }
.dk-premium-about .dk-premium-about__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	user-select: none;
}
.dk-premium-about .dk-premium-about__slider:focus-visible {
	outline: 2px solid var(--dk-about-gold);
	outline-offset: 3px;
}
.dk-premium-about .dk-premium-about__hardware-copy {
	min-width: 0;
	padding-left: calc(40.875 * var(--dk-p));
	text-align: center;
}
.dk-premium-about .dk-premium-about__hardware-copy h2 {
	margin: calc(54.6 * var(--dk-p)) 0 0;
	color: #fff;
	font-family: var(--dk-display);
	font-size: var(--dk-f-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.dk-premium-about .dk-premium-about__hardware-copy p {
	margin: calc(17.805 * var(--dk-p)) auto 0;
	max-width: calc(720 * var(--dk-p));
	color: #fff;
	font-size: var(--dk-f-body);
	font-weight: 400;
	line-height: 1.636;
	letter-spacing: .01em;
}
/* Both marks are vector files in the theme folder, cropped to the wordmark
   itself, so each one only needs its Figma width: Blum 130 wide, Hettich 117,
   sitting on a shared baseline 36 apart. */
.dk-premium-about .dk-premium-about__hardware-logos {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc(36 * var(--dk-p));
	margin-top: calc(24 * var(--dk-p));
}
.dk-premium-about .dk-premium-about__blum { width: calc(130 * var(--dk-p)); }
.dk-premium-about .dk-premium-about__hettich { width: calc(117 * var(--dk-p)); }
.dk-premium-about .dk-premium-about__blum img,
.dk-premium-about .dk-premium-about__hettich img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- 6. editorial block (not in the Figma frame) --------------------- */
/* The page also carries an SEO text block between Made in Austria and
   Discover. The frame does not show it, so it is given the same column and
   the same type scale rather than a look of its own. */
.dk-premium-about .dk-premium-about__post { background: #fff; }
.dk-premium-about .dk-premium-about__post .dk-premium-about__container {
	padding-block: calc(45 * var(--dk-p)) calc(62 * var(--dk-p));
}
.dk-premium-about #dk-about-post-heading,
.dk-premium-about .dk-about-post-heading {
	margin: 0 0 calc(30 * var(--dk-p));
	padding: 0;
	color: var(--dk-about-green);
	font-family: var(--dk-display);
	font-size: var(--dk-f-post);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-align: center;
}
.dk-premium-about .dk-premium-about__post-content.entry-content {
	max-width: calc(860 * var(--dk-p));
	margin-inline: auto;
}
.dk-premium-about .dk-premium-about__post-content.entry-content,
.dk-premium-about .dk-premium-about__post-content.entry-content p {
	color: var(--dk-about-green);
	font-size: var(--dk-f-body);
	line-height: 1.636;
	letter-spacing: .01em;
	text-align: center;
}

/* ---- 7. discover ---------------------------------------------------- */
.dk-premium-about .dk-premium-about__discover {
	background: #fff;
	color: var(--dk-about-green);
	text-align: center;
}
.dk-premium-about .dk-premium-about__discover-inner {
	padding-block: calc(45.008 * var(--dk-p)) calc(62.475 * var(--dk-p));
}
.dk-premium-about .dk-premium-about__discover h2 {
	margin: 0;
	color: var(--dk-about-green);
	font-family: var(--dk-display);
	font-size: var(--dk-f-display);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
}
/* Same pair as Discover on /catalog/albero/: two halves of the content column
   with a 69.75 gap and a 27.4 inset, not the narrower centred pair of the
   About frame - the frame's 465 box is too tight for "Explore Our Kitchen
   Catalog" once the label is set at the Albero size. */
.dk-premium-about .dk-premium-about__discover-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: calc(69.75 * var(--dk-p));
	row-gap: calc(40 * var(--dk-p));
	width: 100%;
	margin: calc(87.482 * var(--dk-p)) auto 0;
	padding-inline: calc(27.4 * var(--dk-p));
}
/* Same button as the pair in Discover on /catalog/albero/ (.dk-btn--catalog):
   --dk-p capped at 1px so the 72 box is 72px and no more on wide screens, and
   the label on the same clamp. Both buttons here are that one style, which is
   also what the Figma frame shows. */
.dk-premium-about .dk-premium-about__discover-links a {
	--dk-p: min(calc(var(--dk-s) * 4 / 3), 1px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: calc(72 * var(--dk-p));
	padding: 0 calc(16 * var(--dk-p));
	border: 1px solid var(--dk-about-green);
	border-radius: 0;
	background: var(--dk-about-green);
	color: #fff;
	font-family: var(--dk-display);
	font-size: clamp(20px, 2.6vw, 37.5px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .009em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	overflow-wrap: break-word;
	transition: background-color .3s ease, color .3s ease;
}
.dk-premium-about .dk-premium-about__discover-links a:hover {
	background: #fff;
	color: var(--dk-about-green);
}
.dk-premium-about .dk-premium-about__discover-links a:focus-visible {
	outline: 3px solid var(--dk-about-gold);
	outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
	.dk-premium-about .dk-premium-about__slide,
	.dk-premium-about .dk-premium-about__discover-links a { transition: none; }
}

/* ---- tablet: 1024 and below ----------------------------------------- */
/* --dk-s stops scaling below a 998 window, so from here down the distances
   are plain px. Every two-column band becomes one column, in the order the
   phone frame uses. */
@media (max-width: 1024px) {
	.dk-premium-about .dk-premium-about__container,
	.dk-premium-about .dk-premium-about__craft-inner,
	.dk-premium-about .dk-premium-about__values-grid,
	.dk-premium-about .dk-premium-about__benefits-inner,
	.dk-premium-about .dk-premium-about__hardware-inner,
	.dk-premium-about .dk-premium-about__discover-inner {
		width: calc(100% - 48px);
	}
	.dk-premium-about {
		--dk-f-display: clamp(30px, 4.2vw, 42px);
		--dk-f-page: clamp(15px, 2.2vw, 22px);
		--dk-f-lead: clamp(17px, 2vw, 20px);
		--dk-f-body: clamp(15px, 1.7vw, 17px);
		--dk-f-value: clamp(22px, 2.6vw, 26px);
		--dk-f-card: clamp(20px, 2.4vw, 24px);
		--dk-f-badge: clamp(22px, 3.2vw, 32px);
		--dk-f-catalog: clamp(24px, 2.9vw, 30px);
		--dk-f-post: clamp(26px, 3.4vw, 34px);
	}
	.dk-premium-about .dk-premium-about__titlebar h1 { padding-block: 10px 12px; }
	.dk-premium-about .dk-premium-about__body { padding-block: 14px 44px; }
	.dk-premium-about .dk-premium-about__breadcrumb { margin-bottom: 0; }
	.dk-premium-about .dk-premium-about__hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "title" "media" "copy";
	}
	.dk-premium-about .dk-premium-about__title,
	.dk-premium-about .dk-premium-about__copy {
		padding-left: 0;
		text-align: left;
	}
	.dk-premium-about .dk-premium-about__title { margin-top: 24px; }
	.dk-premium-about .dk-premium-about__media { margin-top: 22px; }
	.dk-premium-about .dk-premium-about__media img { aspect-ratio: 358 / 240.836; }
	.dk-premium-about .dk-premium-about__intro { margin-top: 24px; line-height: 1.35; }
	.dk-premium-about .dk-premium-about__description { margin-top: 14px; line-height: 1.6; }
	.dk-premium-about .dk-premium-about__craft-inner {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		padding-block: 44px;
	}
	.dk-premium-about .dk-premium-about__craft-copy { text-align: left; }
	.dk-premium-about .dk-premium-about__craft-copy h2 {
		position: static;
		left: auto;
		width: auto;
		transform: none;
		margin-inline: 0;
	}
	.dk-premium-about .dk-premium-about__craft-copy p { margin-top: 14px; line-height: 1.6; }
	.dk-premium-about .dk-premium-about__craft-media { margin-top: 20px; }
	.dk-premium-about .dk-premium-about__craft-media img { aspect-ratio: 358 / 260.585; }
	.dk-premium-about .dk-premium-about__values-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 36px;
		padding-block: 44px;
	}
	.dk-premium-about .dk-premium-about__values-grid li::before {
		width: 11px;
		height: 11px;
		margin-bottom: 12px;
	}
	.dk-premium-about .dk-premium-about__values-grid h3 { line-height: 1.15; }
	.dk-premium-about .dk-premium-about__values-grid p { margin-top: 8px; line-height: 1.4; }
	.dk-premium-about .dk-premium-about__benefits-inner { padding-block: 44px; }
	.dk-premium-about .dk-premium-about__benefits-intro {
		max-width: none;
		margin-top: 12px;
	}
	.dk-premium-about .dk-premium-about__benefits-intro p { line-height: 1.6; }
	.dk-premium-about .dk-premium-about__benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px;
		margin-top: 22px;
		padding: 2px;
	}
	.dk-premium-about .dk-premium-about__benefit { padding: 24px 16px; }
	.dk-premium-about .dk-premium-about__benefit-number { width: 44px; border-width: 2px; }
	.dk-premium-about .dk-premium-about__benefit h3 { margin-top: 14px; line-height: 1.15; }
	.dk-premium-about .dk-premium-about__benefit p { margin-top: 13px; line-height: 1.6; }
	.dk-premium-about .dk-premium-about__hardware-inner {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 44px;
	}
	.dk-premium-about .dk-premium-about__slides { aspect-ratio: 358 / 303.59; }
	.dk-premium-about .dk-premium-about__hardware-copy {
		padding-left: 0;
		text-align: left;
	}
	.dk-premium-about .dk-premium-about__hardware-copy h2 { margin-top: 24px; }
	.dk-premium-about .dk-premium-about__hardware-copy p {
		max-width: none;
		margin-top: 13px;
		line-height: 1.6;
	}
	.dk-premium-about .dk-premium-about__hardware-logos {
		justify-content: flex-start;
		gap: 24px;
		margin-top: 20px;
	}
	.dk-premium-about .dk-premium-about__blum { width: 112px; }
	.dk-premium-about .dk-premium-about__hettich { width: 100px; }
	.dk-premium-about .dk-premium-about__post .dk-premium-about__container {
		padding-block: 40px 44px;
	}
	.dk-premium-about #dk-about-post-heading,
	.dk-premium-about .dk-about-post-heading { margin-bottom: 20px; }
	.dk-premium-about .dk-premium-about__post-content.entry-content { max-width: none; }
	.dk-premium-about .dk-premium-about__discover-inner { padding-block: 24px 48px; }
	.dk-premium-about .dk-premium-about__discover h2 { line-height: 1.08; }
	.dk-premium-about .dk-premium-about__discover-links {
		column-gap: 24px;
		row-gap: 12px;
		margin-top: 25px;
		padding-inline: 0;
	}
	.dk-premium-about .dk-premium-about__discover-links a {
		min-height: 64px;
		padding: 0 14px;
	}
}

/* ---- phone: 767 and below ------------------------------------------- */
/* The 390 frame, in its own values: 358 of 390 is the same 92% column, the
   copy is left-aligned, and the four values become a list separated by gold
   rules instead of a row. */
@media (max-width: 767px) {
	.dk-premium-about .dk-premium-about__container,
	.dk-premium-about .dk-premium-about__craft-inner,
	.dk-premium-about .dk-premium-about__values-grid,
	.dk-premium-about .dk-premium-about__benefits-inner,
	.dk-premium-about .dk-premium-about__hardware-inner,
	.dk-premium-about .dk-premium-about__discover-inner {
		width: calc(100% - 32px);
	}
	.dk-premium-about {
		--dk-f-display: 34px;
		--dk-f-page: 15px;
		--dk-f-lead: 18px;
		--dk-f-body: 15px;
		--dk-f-value: 22px;
		--dk-f-card: 22px;
		--dk-f-badge: 22px;
		--dk-f-catalog: 26px;
		--dk-f-post: 26px;
	}
	/* The strip is sand on the phone, not white. */
	.dk-premium-about .dk-premium-about__titlebar { background: var(--dk-about-sand); }
	.dk-premium-about .dk-premium-about__titlebar h1 {
		padding-block: 9px;
		font-weight: 700;
		line-height: 17px;
	}
	.dk-premium-about .dk-premium-about__breadcrumb { font-size: 12px; line-height: 1.4; }
	.dk-premium-about .dk-premium-about__title h2 { font-size: 40px; line-height: 1.1; }
	.dk-premium-about .dk-premium-about__title { margin-top: 23.8px; }
	.dk-premium-about .dk-premium-about__desktop-break,
	.dk-premium-about .dk-premium-about__craft-break { display: none; }
	.dk-premium-about .dk-premium-about__mobile-break { display: inline; }
	.dk-premium-about .dk-premium-about__values-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}
	.dk-premium-about .dk-premium-about__values-grid li + li {
		border-top: 1px solid var(--dk-about-gold);
		padding-top: 28px;
	}
	.dk-premium-about .dk-premium-about__benefits-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.dk-premium-about .dk-premium-about__discover-links {
		grid-template-columns: minmax(0, 1fr);
	}
	.dk-premium-about .dk-premium-about__discover-links a {
		min-height: 56px;
		font-size: 24px;
		letter-spacing: 0;
	}
	/* Keep the last two words of a centred paragraph together, so no line is
	   left with a single short word. */
	.dk-premium-about .dk-premium-about__keep-ending { white-space: nowrap; }
	.dk-premium-about :is(h1, h2, h3) {
		overflow-wrap: break-word;
		word-break: normal;
	}
	.dk-premium-about :is(h2, h3) br,
	.dk-premium-about .dk-premium-about__values-grid p br { display: none; }
}
/* Above the phone the mobile-only line break is not used. */
@media (min-width: 768px) {
	.dk-premium-about .dk-premium-about__mobile-break { display: none; }
}