/*
 * Homepage v2 — "Desktop - 9" mockup (Bernard — Brand works, node 4001-2862).
 * Loaded on the front page only, after style.css and responsive-fixes.css.
 */

:root {
	--hp9-gold: #b17e20; /* brand gold per design */
	/* Lighter on hover so dark button text keeps AA contrast (5.5:1). */
	--hp9-gold-hover: #c08a26;
	--hp9-dark: #232120;
	--hp9-dark-2: #1e1e1c;
	--hp9-dark-3: #100e0c;
	--hp9-cream: #e5e0d9; /* Figma card surface */
	--hp9-text-light: #d9d6d0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Shared pieces                                                       */
/* ------------------------------------------------------------------ */

/* Figma section title: Erbaum Bold 36/42, #E5E0D9, no tracking.
   Doubled class so the colour beats style.css's `body.home h2`. */
.hp9-heading.hp9-heading {
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #e5e0d9;
	font-size: 36px;
	line-height: 42px;
	letter-spacing: 0;
	margin: 0 0 30px;
}

/* Doubled class beats style.css's `body.home h2 { color: #fff }`.
   Figma news title: #262524 with -1px tracking. */
.hp9-heading--dark.hp9-heading--dark {
	color: #262524;
	letter-spacing: -1px;
}

.hp9-btn,
.hp9-btn:visited {
	display: inline-block;
	background-color: var(--hp9-gold);
	color: #1e1e1e !important; /* dark text on gold, per design */
	font-family: "Erbaum", sans-serif;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none !important;
	padding: 12px 28px;
	border: 1px solid var(--hp9-gold);
	transition: background-color 0.25s ease-out;
}

.hp9-btn:hover {
	background-color: var(--hp9-gold-hover);
	border-color: var(--hp9-gold-hover);
}

/* Figma card button: 167x46 (14px text with generous padding). */
.hp9-btn--small {
	font-size: 14px;
	padding: 14px 30px;
}

.hp9-btn-outline,
.hp9-btn-outline:visited {
	display: inline-block;
	background: transparent;
	color: #fff !important;
	font-family: "Erbaum", sans-serif;
	font-weight: 500;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none !important;
	text-align: center;
	padding: 11px 20px;
	border: 1px solid var(--hp9-gold);
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

.hp9-btn-outline:hover {
	background-color: var(--hp9-gold);
	color: #1e1e1e !important;
}

.hp9-btn-outline--gold,
.hp9-btn-outline--gold:visited {
	color: var(--hp9-gold) !important;
}

.hp9-btn-outline--gold:hover {
	color: #1e1e1e !important;
}

.hp9-gold-link,
.hp9-gold-link:visited {
	color: var(--hp9-gold) !important;
	font-family: "Erbaum", sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: underline !important;
	text-underline-offset: 5px;
	letter-spacing: 0.03em;
}

.hp9-gold-link:hover {
	color: var(--hp9-gold-hover) !important;
}

/* ------------------------------------------------------------------ */
/* Hero — restyle the existing slider to the centered mockup layout    */
/* ------------------------------------------------------------------ */

/* Overlay from the mockup (Figma "Rectangle 23" above the hero media),
   translated from the node's exported SVG: elliptical radial gradient,
   #15191C at 47% opacity fading to 0 by 94.23%, blend mode Multiply.
   Centre/radii converted from the rectangle's geometry to slide-relative
   percentages. Applies to image and video slides. */
.treg-home-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(36.5% 43% at 40.3% 47%, rgba(21, 25, 28, 0.47) 0%, rgba(21, 25, 28, 0) 94.23%);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

.treg-home-slide__content {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

/* Play/pause control for the slider's autoplay, bottom right. */
.treg-hp-slider {
	position: relative;
}

.treg-hp-slider__autoplay-toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 12; /* above slides and pagination */
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	border: none;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 15px;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s ease-out;
}

.treg-hp-slider__autoplay-toggle:hover {
	background: rgba(0, 0, 0, 0.7);
	color: #b17e20; /* gold icon on hover */
}

/* Restore the browser's default focus ring (style.css globally removes it
   via `button:focus { outline: none }`). :focus-visible keeps the default
   behaviour: ring for keyboard focus, none for mouse clicks. */
.treg-hp-slider__autoplay-toggle:focus-visible {
	outline: auto;
	outline-offset: 2px;
}

.treg-home-slide__content-wrapp {
	background: none;
	max-width: 1300px;
	align-items: center;
	text-align: center;
	padding: 25px;
}

/* Two classes so the colour beats style.css's `body.home h2`. */
.treg-hp-slider .treg-home-slide__content h2,
.treg-hp-slider .treg-home-slide__content-text {
	color: #e5e0d9; /* hero copy per design */
	text-align: center;
}

.treg-home-slide__content h2 {
	font-family: "Erbaum", sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(34px, 4.5vw, 62px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
	margin-bottom: 12px;
}

.treg-home-slide__content-text {
	font-size: 18px;
	line-height: 1.45;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
	max-width: 520px;
	margin: 0 auto 26px;
}

.treg-home-slide__content-btn {
	background-color: var(--hp9-gold);
	color: #1e1e1e !important;
	font-family: "Erbaum", sans-serif;
	letter-spacing: 0.05em;
	padding: 0 30px;
	max-width: none;
	width: auto;
}

.treg-home-slide__content-btn:hover {
	background-color: var(--hp9-gold-hover);
}

/* ------------------------------------------------------------------ */
/* Product triad + catalog CTA                                         */
/* ------------------------------------------------------------------ */

/* Figma: hero ends 808, cards at 952.6 (145 top); catalog button ends
   1479.9, selector starts 1580.9 (101 bottom). Section bg #262524. */
.hp9-products {
	background-color: #262524;
	padding: 145px 0 101px;
}

.hp9-products__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 46px;
}

.hp9-products__card {
	position: relative;
	background-color: #343230;
	padding-bottom: 74px;
}

/* The media box reserves the card's image area even when the image is
   missing or fails to load, so the title/button never collapse upward. */
.hp9-products__media {
	display: block;
	aspect-ratio: 578 / 448;
	background-color: #3a3835;
	overflow: hidden;
}

.hp9-products__media img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.hp9-products__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 74px;
	margin: 0;
	text-align: center;
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0 15px 18px;
}

.hp9-products__title a {
	color: #fff;
	text-decoration: none;
}

.hp9-products__card .hp9-btn-outline {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
}

.hp9-products__catalog {
	margin-top: 70px;
	text-align: center;
}

.hp9-products__catalog p {
	text-align: center;
	color: var(--hp9-text-light);
	font-family: "Erbaum", sans-serif;
	font-weight: 300;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin: 0 0 18px;
}

/* ------------------------------------------------------------------ */
/* Product selector diagram                                            */
/* ------------------------------------------------------------------ */

.hp9-selector {
	/* Exactly the SVG artwork's own background, so letterboxing from the
	   contain-fit below is invisible at any viewport. */
	background-color: #1e1e1e;
	border-top: 1px solid #35332f;
}

/* Full-bleed: the diagram spans the whole section, not the .inner column.
   The text overlays keep the content column's side inset (max 1300px wide,
   centred) so they still line up with the rest of the page. */
.hp9-selector__stage {
	position: relative;
}

.hp9-selector__art {
	display: block;
	width: 100%;
	height: auto;
	/* Cap the section at 867px; `contain` scales the vector down instead of
	   cropping it, and the matching section background hides any letterbox. */
	max-height: 867px;
	-o-object-fit: contain;
	object-fit: contain;
}

.hp9-selector__intro {
	position: absolute;
	top: 7%;
	left: max(7.5%, (100% - 1300px) / 2);
	max-width: 48%;
	text-align: left;
}

/* Figma: Erbaum Bold 30/38, #E5E0D9; scales with the full-bleed art
   (30px at the 1440px design width). Two classes beat `body.home h2`. */
.hp9-selector .hp9-selector__intro h2 {
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #e5e0d9;
	font-size: clamp(18px, 2.08vw, 30px);
	line-height: 1.27;
	letter-spacing: 0;
	margin: 0;
}

.hp9-selector__dial {
	position: absolute;
	right: max(7.5%, (100% - 1300px) / 2);
	bottom: 7%;
	text-align: left;
}

.hp9-selector__dial p {
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #e5e0d9;
	font-size: clamp(18px, 2.08vw, 30px);
	line-height: 1.27;
	letter-spacing: 0;
	margin: 0;
}

/* Links share the same 30/38 type as the line above them. */
.hp9-selector__intro .hp9-gold-link,
.hp9-selector__dial .hp9-gold-link {
	font-size: clamp(18px, 2.08vw, 30px);
	line-height: 1.27;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Already purchased? support links                                    */
/* ------------------------------------------------------------------ */

.hp9-support {
	background-image: url("../images/hp9-already-purchased.jpg");
	background-size: cover;
	background-position: center top;
	background-color: #0b0b0b;
	/* Photo area: 550px padding + the 100px link row = 650px tall. */
	padding-top: 550px;
	position: relative;
	z-index: 2;
}

.hp9-support__links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	transform: translateY(50%);
}

/* Figma: 344x100 card, 16px padding — the gold chevron square sits inset
   from the card edges rather than bleeding to them. */
/* Figma card: #262524 with a faint diagonal white sheen, no shadow. */
.hp9-support__link {
	display: flex;
	align-items: center;
	padding: 8px;
	background-color: #262524;
	background-image: linear-gradient(18deg, rgba(255, 255, 255, 0.1) 23.74%, rgba(255, 255, 255, 0.01) 123.88%);
	text-decoration: none !important;
	transition: background-color 0.25s ease-out;
}

.hp9-support__link:hover {
	background-color: #32302e;
}

/* Tag line over a custom background photo (the fallback mockup photo has it
   baked in, in which case the heading is screen-reader-only instead).
   Figma: Erbaum Bold 36/40, centred, #E5E0D9.
   Doubled class so the colour beats style.css's `body.home h2`. */
.hp9-support__heading.hp9-support__heading {
	position: absolute;
	left: 0;
	right: 0;
	top: 40%;
	margin: 0;
	text-align: center;
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 40px;
	text-transform: uppercase;
	color: #e5e0d9;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.hp9-support__chevron {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #b17e20;
	color: #e5e0d9;
}

.hp9-support__chevron svg {
	display: block;
	width: 26px;
	height: auto;
}

/* Figma: Erbaum Bold 20.41/22, no letter-spacing, #E5E0D9, 23px from icon. */
.hp9-support__label {
	display: flex;
	align-items: center;
	padding: 0 23px;
	color: #e5e0d9;
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 22px;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Latest innovations + robotic products                               */
/* ------------------------------------------------------------------ */

/* Figma: section bg #262524. The hex-outline grid ("Group 10151") is not a
   full-section repeat — it is one 1678x1197.5 pattern block rotated 38.45deg,
   hugging the section's bottom-left (rotated bounding box: left -1113px,
   ending 1037px above the section bottom in the 1440 frame). */
.hp9-innovations {
	position: relative;
	overflow: hidden;
	background-color: #262524;
	padding: 130px 0 100px;
}

.hp9-innovations::before {
	content: "";
	position: absolute;
	left: -923px;
	bottom: -553px;
	width: 1678px;
	height: 1198px;
	background-image: url("../images/hp9-hex-grid.svg");
	background-repeat: repeat;
	background-size: 235.8px 524.2px;
	transform: rotate(38.45deg);
	pointer-events: none;
}

.hp9-innovations > .inner {
	position: relative;
}

.hp9-innovations__cols {
	display: grid;
	/* Figma: equal 589px columns with a 20px gutter. */
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	/* Stretch so the Robotic Products card matches the left column height. */
	align-items: stretch;
}

.hp9-innovations__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.hp9-innovations__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--hp9-cream);
	min-height: 206px; /* Figma card height */
	overflow: hidden;
}

.hp9-innovations__card-content {
	position: relative;
	z-index: 2;
	align-self: stretch;
	padding: 22px 0 27px 25px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
	align-items: flex-start;
}

/* Figma card title: Erbaum Bold ~29.6/33, #1E1E1E. */
.hp9-innovations__card h3,
.hp9-innovations__feature h3 {
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	font-size: 29px;
	line-height: 33px;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 0;
}

.hp9-innovations__card h3 a,
.hp9-innovations__feature h3 a {
	color: #1e1e1e;
	text-decoration: none;
}

.hp9-innovations__card img {
	display: block;
	width: 62%;
	max-width: 352px;
	height: auto;
	flex-shrink: 0;
}

/* min-width: 0 stops the slider's slide row from blowing the grid track
   wider than its 1fr share (grid items default to min-width: auto). */
.hp9-innovations__latest,
.hp9-innovations__robotic {
	min-width: 0;
}

/* The robotic column fills the row height; the card (or slider) takes all
   the space under its heading, so its bottom lines up with the left cards.
   position: relative anchors the dots, which hang BELOW the aligned bottom
   and do not count toward the column's height. */
.hp9-innovations__robotic {
	display: flex;
	flex-direction: column;
	position: relative;
}

.hp9-innovations__feature {
	background-color: var(--hp9-cream);
	background-size: cover;
	background-position: center;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
}

.hp9-innovations__robotic > .hp9-innovations__feature {
	flex: 1 1 auto;
}

/* --------------------------------------------- robotic products slider */

.hp9-robotic-slider {
	flex: 1 1 auto;
	width: 100%;
	min-height: 480px;
	overflow: hidden;
	position: relative;
}

.hp9-robotic-slider .swiper-wrapper {
	height: 100%;
}

.hp9-robotic-slider .hp9-innovations__feature {
	height: 100%;
	min-height: 480px;
}

/* Figma "Frame 10/11": 31px circle, 1.7px #52504E stroke, dark #262524
   chevron, resting at 24% opacity on the cream card (full opacity on
   hover/focus for usability). */
.hp9-robotic-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 31px;
	height: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid #52504e;
	background: transparent;
	color: #262524;
	padding: 0;
	cursor: pointer;
	opacity: 0.24;
	transition: opacity 0.25s ease-out;
}

.hp9-robotic-slider__arrow svg {
	display: block;
	width: 13px;
	height: auto;
}

.hp9-robotic-slider__arrow--prev svg {
	transform: rotate(180deg);
}

.hp9-robotic-slider__arrow:hover,
.hp9-robotic-slider__arrow:focus-visible {
	opacity: 1;
}

.hp9-robotic-slider__arrow:focus-visible {
	outline: auto;
	outline-offset: 2px;
}

.hp9-robotic-slider__arrow--prev {
	left: 30px;
}

.hp9-robotic-slider__arrow--next {
	right: 30px;
}

/* Dots below the card, as in the mockup — absolutely positioned so they do
   not add to the slider's height (the card bottom stays flush with the
   left column). */
.hp9-robotic-slider__dots {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 16px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.hp9-robotic-slider__dots .swiper-pagination-bullet {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	opacity: 1;
	margin: 0;
}

.hp9-robotic-slider__dots .swiper-pagination-bullet-active {
	background: #e5e0d9;
}

.hp9-innovations__feature-content {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.hp9-innovations__feature h3 {
	font-size: 28px;
	line-height: 31px;
	/* Keep the title clear of the product photo on the right. */
	max-width: 273px;
}

/* ------------------------------------------------------------------ */
/* Who we are                                                          */
/* ------------------------------------------------------------------ */

/* Full-section background photo; the content sits over its darkened lower
   half. Geometry and type from Figma Desktop-9. */
.hp9-who {
	position: relative;
	background-color: #000;
	padding: 83px 0 70px;
}

.hp9-who__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* Figma "Rectangle 42": black scrim over the lower half so the statement,
   cards and button read over the photo. */
.hp9-who::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 18.75%, #000 40.4%);
	pointer-events: none;
}

/* The pre-statement gap lives here as padding (not as margin on the
   statement): a top margin would collapse through .inner and drag the
   absolutely-positioned title down with it. 563px at the 1440px design. */
.hp9-who .inner {
	position: relative;
	z-index: 2;
	padding-top: clamp(200px, 39vw, 563px);
}

/* Same 36/42 title treatment as the other sections; sits at the top of the
   section, over the photo. */
.hp9-who__title.hp9-who__title {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 42px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: #e5e0d9;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* Figma: Erbaum 25/37, +1px tracking, #E5E0D9 — first sentence Bold, rest
   Book. The large top margin keeps the statement over the scrimmed lower
   half of the photo (563px at the 1440px design width). */
.hp9-who__statement {
	color: #e5e0d9;
	font-family: "Erbaum", sans-serif;
	font-weight: normal;
	font-size: 25px;
	line-height: 37px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 34px;
}

.hp9-who__statement strong {
	color: #e5e0d9;
	font-weight: 700;
	display: block;
}

.hp9-who__brands {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 56px;
}

/* Figma "Rectangle 54/55": transparent card, 1px #3A3B39 border, 143px tall. */
.hp9-who__brand {
	display: flex;
	align-items: center;
	gap: 26px;
	border: 1px solid #3a3b39;
	padding: 22px 26px;
	min-height: 143px;
}

.hp9-who__brand img {
	width: 170px;
	height: auto;
	flex-shrink: 0;
}

.hp9-who__brand-text,
.hp9-who__brand-text p {
	color: var(--hp9-text-light);
	font-size: 17px; /* Figma card body */
	line-height: 24px;
	margin: 0;
}

.hp9-who__brand-text a,
.hp9-who__brand-text a:visited {
	color: var(--hp9-gold);
	text-decoration: none;
}

.hp9-who__brand-text a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Stay in the know                                                    */
/* ------------------------------------------------------------------ */

.hp9-news {
	background-color: #fff;
	padding: 80px 0 90px;
}

.hp9-news__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 45px;
}

.hp9-news__header .hp9-heading {
	margin: 0;
}

.hp9-news__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px; /* Figma gutter */
}

/* Figma card: #F4F4F4, full-bleed image, 20px content insets. */
.hp9-news__card {
	background-color: #f4f4f4;
	display: flex;
	flex-direction: column;
	padding: 0 0 19px;
}

.hp9-news__thumb {
	display: block;
	margin-bottom: 16px;
}

.hp9-news__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 284 / 240;
	-o-object-fit: cover;
	object-fit: cover;
	height: auto;
}

.hp9-news__body {
	flex: 1 1 auto;
	padding: 0 20px;
}

/* Figma: Erbaum Bold 18/23, #262524. */
.hp9-news__body h3 {
	font-family: "Erbaum", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 23px;
	text-transform: uppercase;
	letter-spacing: 0;
	margin: 0 0 12px;
}

.hp9-news__body h3 a {
	color: #262524;
	text-decoration: none;
}

.hp9-news__body h3 a:hover {
	color: var(--hp9-gold);
}

.hp9-news__body p {
	color: #4a4844;
	font-size: 13px;
	line-height: 21px;
	margin: 0 0 20px;
}

/* Figma: full-width outline button (246 in a 284 card), 14/24, 11px pad. */
.hp9-news__card .hp9-btn-outline {
	margin: 0 19px;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	padding: 10px 10px;
	letter-spacing: 0;
}

.hp9-news__all-mobile {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media only screen and (max-width: 1024px) {

	.hp9-products__grid {
		gap: 24px;
	}

	.hp9-products__title {
		font-size: 19px;
	}

	.hp9-innovations__cols {
		grid-template-columns: 1fr;
	}

	.hp9-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media only screen and (max-width: 782px) {

	.hp9-products {
		padding: 55px 0 65px;
	}

	.hp9-products__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}

	.hp9-selector {
		padding: 45px 0 40px;
	}

	/* Stack: intro text, then the full-bleed diagram, then the dial text.
	   Flex `order` re-sequences them since the image sits first in the DOM. */
	.hp9-selector__stage {
		display: flex;
		flex-direction: column;
	}

	.hp9-selector__intro,
	.hp9-selector__dial {
		position: static;
		max-width: none;
		padding: 0 7.5%;
	}

	.hp9-selector__intro {
		order: 1;
		margin: 0 0 22px;
	}

	.hp9-selector__art {
		order: 2;
	}

	.hp9-selector__dial {
		order: 3;
		margin: 22px 0 0;
	}

	.hp9-support {
		padding-top: 200px;
		padding-bottom: 30px;
	}

	/* Stack the support links so long labels cannot overflow the viewport.
	   No translate hang here: the stacked column is tall, and the hang would
	   spill over the Latest Innovations heading below. */
	.hp9-support__links {
		grid-template-columns: 1fr;
		gap: 14px;
		transform: none;
	}

	/* In flow on mobile (not overlaid at 40%): the stacked link column is
	   tall, so an absolute heading would collide with it. Doubled class to
	   match the base rule's specificity. */
	.hp9-support__heading.hp9-support__heading {
		position: static;
		margin: 0 0 28px;
		padding: 0 7.5%;
		font-size: 26px;
		line-height: 30px;
	}

	.hp9-support__link {
		padding: 10px;
	}

	.hp9-support__chevron {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	.hp9-support__chevron svg {
		width: 20px;
	}

	.hp9-support__label {
		font-size: 15px;
		line-height: 18px;
		padding: 0 12px;
	}

	.hp9-heading.hp9-heading {
		font-size: 28px;
		line-height: 34px;
	}

	.hp9-innovations {
		padding: 90px 0 60px;
	}

	.hp9-innovations__card h3,
	.hp9-innovations__feature h3 {
		font-size: 22px;
		line-height: 26px;
	}

	.hp9-innovations__card img {
		width: 55%;
	}

	.hp9-innovations__feature {
		min-height: 420px;
	}

	.hp9-who__brands {
		grid-template-columns: 1fr;
	}

	/* Logo above the copy on phones instead of squeezing the text beside it. */
	.hp9-who__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.hp9-news {
		padding: 55px 0 60px;
	}

	.hp9-news__grid {
		grid-template-columns: 1fr;
	}

	.hp9-news__header .hp9-btn {
		display: none;
	}

	.hp9-news__all-mobile {
		display: block;
		margin-top: 30px;
		text-align: center;
	}
}