/* ─────────────────────────────────────────────────────────────
   GTD Desco — rig cards.

   WHAT WAS WRONG

   The rig display was a 700px-tall box with everything inside it
   absolutely positioned, and the positions were tuned per model:

     .GT65DR-title-position { left:-62px; top:222px }
     .GT45DR-title-position { left:-79px; top:222px }
     .RC45DR-title-position { left:-4px;  top:244px }
     …eleven of these

   That meant a new rig needed a new CSS rule, and the numbers only
   held at one width. The image was `max-width:450px` inside a
   column that fell to ~320px at 1024 and 1280, which is where the
   page's horizontal scrollbar came from. Below 800px the whole
   arrangement changed to something else.

   WHAT THIS DOES

   The same composition — machine full-frame, model name behind it,
   specs overlaying the upper right — expressed in percentages of
   the card and container query units. Nothing is measured in
   viewport pixels, so it holds its proportions in a 480px hero
   slot, a three-up grid, and a carousel slide, and no model needs
   a rule of its own.

   Plain CSS in css/, not a Sass partial, for the same reason as
   hero/buttons/footer/type: the theme compiles through Compass
   (config.rb, Ruby) and nobody has confirmed that build still runs.
   Loaded after sass/style.css and css/type.css, so it overrides by
   order where specificity ties.
   ───────────────────────────────────────────────────────────── */

/*
 * The tokens live on the card, not on the grid: on the homepage the same card
 * is a slide inside the slick carousel with no .gtd-rigs wrapper above it, and
 * a card whose custom properties resolve to nothing has no colour at all.
 */
.gtd-rig {
	--rig-ink:   #1d1d1d;
	--rig-quiet: #6f6f6f;
	--rig-rule:  #c9c9c9;
	--rig-mark:  #adadad;
	--rig-mark-hover: #8f8f8f;
	--rig-red:   #c60000;
	--rig-ease:  cubic-bezier(.16, 1, .3, 1);
}

.gtd-rigs {
	display: grid;
	/*
	 * auto-fill from a minimum, so a card is never asked to be narrower than
	 * its own composition — the failure the old fixed-pixel layout had. 360
	 * and not 320: at four-up the cards fall to ~280px, where the spec block
	 * grows tall enough to run down over the dark body of the machine.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2.5rem);

	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── the card ─────────────────────────────────────────────── */

.gtd-rig {
	position: relative;
	display: block;
	container-type: inline-size;

	/* The reference proportion, less the transparent padding the source
	   images carry. */
	aspect-ratio: 500 / 630;
	/* Explicit, so the max-width below never makes this a shrink-to-fit box:
	   every child is absolutely positioned, so shrink-to-fit would resolve to
	   zero and collapse the card to 0×0. */
	width: 100%;
	max-width: 480px;      /* past this the frame only gets emptier */
	margin-inline: auto;   /* one card in a wider track sits centred rather
	                          than stranded against the left */

	isolation: isolate;
	overflow: clip;        /* the model name is clipped, never escapes */
	text-decoration: none;
	color: var(--rig-ink);
}

.gtd-rig:hover,
.gtd-rig:focus { text-decoration: none; color: var(--rig-ink); }

.gtd-rig:focus-visible {
	outline: 2px solid var(--rig-red);
	outline-offset: 6px;
}

/* ── the machine ──────────────────────────────────────────── */

/*
 * The frame is inset from the right rather than full-bleed, because the source
 * photographs are cropped tight — measured across all nine, the machine and
 * its mound touch the left edge and come within 0.5% of the right, with no
 * transparent margin to give back. Full-bleed therefore centres the mast
 * directly under the spec column and the figures become unreadable. Holding
 * the machine to the left 82% puts the mast clear and leaves only the deck and
 * mound under the text, which is what the reference composition does anyway.
 */
.gtd-rig__figure {
	position: absolute;
	inset: 0 24% 0 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
}

.gtd-rig__img {
	width: 100%;
	height: 100%;
	/* contain, not cover: a drill rig is a silhouette on a transparent
	   ground and must never be cropped. */
	object-fit: contain;
	object-position: bottom left;
	max-width: none;   /* answers the theme's global img{max-width:100%} */
	transition: transform .6s var(--rig-ease);
}

.gtd-rig:hover .gtd-rig__img { transform: translateY(-8px) scale(1.025); }

/* ── model name ───────────────────────────────────────────────
   Behind the machine, so the mast crosses it and the letters show
   through the gaps in the structure.

   SVG rather than a rotated heading, for a measured reason: on a
   `writing-mode: vertical-rl` element the container unit resolved
   against the wrong axis — 146px where 52px was asked for — while
   cqi on the sibling spec text resolved correctly. Inside an SVG
   the rotation happens in the coordinate system, the element stays
   an ordinary upright box, and preserveAspectRatio does the
   per-model sizing: GT65DR and GT45 occupy the same slot with no
   rule of their own.
   ───────────────────────────────────────────────────────────── */

.gtd-rig__model {
	position: absolute;
	left: 3%;
	top: 50%;
	z-index: 0;
	width: 32%;
	height: 56%;
	transform: translateY(-50%);
	pointer-events: none;
	user-select: none;
	transition: transform .6s var(--rig-ease);
}

.gtd-rig__model svg { width: 100%; height: 100%; display: block; }

.gtd-rig__model text {
	font-family: "eurostile", sans-serif;
	font-weight: 900;
	letter-spacing: -.02em;
	fill: var(--rig-mark);
	transition: fill .5s var(--rig-ease);
}

.gtd-rig:hover .gtd-rig__model { transform: translateY(-50%) translateX(7px); }
.gtd-rig:hover .gtd-rig__model text { fill: var(--rig-mark-hover); }

/* ── specs ────────────────────────────────────────────────── */

.gtd-rig__specs {
	position: absolute;
	z-index: 2;
	right: 0;
	top: 8%;
	width: 50%;

	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.gtd-rig__spec {
	padding-block: clamp(.3rem, 1.4cqi, .7rem);
	list-style: none;
}

/*
 * A short rule above each group. It grows on hover, one row after the next —
 * the single authored moment on this card, and the reason the rows read as a
 * sequence rather than five separate things.
 */
.gtd-rig__spec::before {
	content: "";
	display: block;
	width: 11cqi;
	height: 2px;
	margin-bottom: clamp(.3rem, 1.2cqi, .6rem);
	background: var(--rig-rule);
	transform-origin: left;
	transition:
		transform .5s var(--rig-ease),
		background-color .45s var(--rig-ease);
}

.gtd-rig:hover .gtd-rig__spec::before { transform: scaleX(2.6); background: var(--rig-red); }
.gtd-rig:hover .gtd-rig__spec:nth-child(1)::before { transition-delay: 0ms; }
.gtd-rig:hover .gtd-rig__spec:nth-child(2)::before { transition-delay: 50ms; }
.gtd-rig:hover .gtd-rig__spec:nth-child(3)::before { transition-delay: 100ms; }
.gtd-rig:hover .gtd-rig__spec:nth-child(4)::before { transition-delay: 150ms; }
.gtd-rig:hover .gtd-rig__spec:nth-child(5)::before { transition-delay: 200ms; }

/*
 * The spec value is a WYSIWYG field. Its two lines come through as text plus
 * a <strong>, in whichever order the author wrote them — figure first for
 * "65,000 LBS / PULL-BACK", name first for "EURODRILL TOP DRIVE / TORQUE OF
 * 17,700 LB-FT". So the emphasis is taken from the markup rather than from
 * the row position, and the editing experience is unchanged.
 *
 * !important throughout because css/type.css sets `p, a, li` !important, and
 * !important beats non-important regardless of specificity.
 */
.gtd-rig__spec p {
	margin: 0;
	font-size: 4cqi !important;
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: .005em;
	color: var(--rig-quiet);
	transition: color .4s var(--rig-ease);
}

.gtd-rig__spec strong,
.gtd-rig__spec b {
	display: block;
	font-size: 4cqi !important;
	font-weight: 700;
	line-height: 1.28;
	color: var(--rig-ink);
}

/* The stored HTML wraps some groups in a .line_1 div and leaves others bare;
   both must behave the same. */
.gtd-rig__spec > div,
.gtd-rig__spec .line_1 { display: contents; }

/* wpautop joins the two lines with a <br>, and the bold line is a block here,
   so the break would add an empty line on top of the one it already gets. */
.gtd-rig__spec br { display: none; }

.gtd-rig:hover .gtd-rig__spec p { color: #4a4a4a; }

/* Bare text nodes — a group authored without a paragraph wrapper. The
   !important answers css/type.css's blanket `li { … !important }`. */
.gtd-rig__spec {
	font-size: 4cqi !important;
	line-height: 1.28;
	color: var(--rig-quiet);
}

/* ── the affordance ───────────────────────────────────────── */

/*
 * The whole card is the link, which leaves nothing on screen saying so. This
 * is the smallest thing that answers that without adding furniture: quiet
 * until the card is hovered or keyboard-focused.
 */
.gtd-rig__cta {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 2%;
	display: flex;
	align-items: center;
	gap: .55rem;

	/* !important answers css/type.css's `span { font-size: inherit
	   !important }`, which would otherwise pull this to the card's
	   inherited body size. */
	font-size: 3.5cqi !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rig-red);

	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity .45s var(--rig-ease),
		transform .45s var(--rig-ease);
}

.gtd-rig:hover .gtd-rig__cta,
.gtd-rig:focus-visible .gtd-rig__cta { opacity: 1; transform: none; }

.gtd-rig__cta svg { width: 1em; height: .75em; flex: none; fill: currentColor; }

/* ── the single-page feature ──────────────────────────────── */

/*
 * On a rig's own page the card is the subject, not a link to it: no
 * permalink, no "more info", and the hover moment plays on load instead of
 * on hover, because there is no second state to move to.
 */
.gtd-rig--feature { max-width: 560px; }
.gtd-rig--feature .gtd-rig__spec::before { transform: scaleX(1.6); background: var(--rig-red); }

/* ── on the gradient ──────────────────────────────────────────
   The RC sections sit inside .dark-background-gradient, which runs
   #333 at its top to white at its bottom. The cards land on the
   mid-to-light part of that ramp, so the quiet line is darkened
   until it clears 4.5:1 against the darkest ground it can meet
   there, and the model mark is lightened so it still reads as set
   behind the machine rather than printed on it.
   ───────────────────────────────────────────────────────────── */

.dark-background-gradient .gtd-rig {
	--rig-ink:   #0d0d0d;
	--rig-quiet: #333333;
	--rig-rule:  #8f8f8f;
	--rig-mark:  #c4c4c4;
	--rig-mark-hover: #d8d8d8;
}

.dark-background-gradient .gtd-rig:hover .gtd-rig__spec p { color: #111; }

/* ── narrow cards ─────────────────────────────────────────── */

@container (max-width: 360px) {
	.gtd-rig__specs { width: 54%; top: 5%; }

	/* cqi on its own keeps falling: on a 280px card — a 320px phone — 4.4cqi
	   is 12.3px, under the readable floor. The clamp keeps the proportion on
	   the way down and then stops. */
	.gtd-rig__spec,
	.gtd-rig__spec p,
	.gtd-rig__spec strong,
	.gtd-rig__spec b { font-size: clamp(13.5px, 4.4cqi, 1rem) !important; }

	.gtd-rig__spec { padding-block: .34rem; }
	.gtd-rig__model { width: 30%; left: 5%; }
}

/*
 * The card's own proportion cannot be set from the @container block above —
 * .gtd-rig IS the container — so the one thing that needs a viewport query is
 * the frame. On a phone the spec stack is a fixed number of lines while the
 * card shrinks with the screen, so without this the text ends up covering the
 * whole machine.
 */
@media (max-width: 430px) {
	.gtd-rig { aspect-ratio: 500 / 760; }
}

@media (prefers-reduced-motion: reduce) {
	.gtd-rig__img,
	.gtd-rig__model,
	.gtd-rig__model text,
	.gtd-rig__spec::before,
	.gtd-rig__spec p,
	.gtd-rig__cta { transition: none !important; }

	.gtd-rig__cta { opacity: 1; transform: none; }
}

/* ── the partner callout, as a grid sibling ───────────────────
   Two of these sections put a EURODRILL or Metzke panel in the
   third column alongside the rigs. Its old geometry was tuned to
   the 700px Bootstrap row it used to sit in — `padding: 117px
   !important` with the right side zeroed, `top: 118px`, and a logo
   absolutely positioned 25px above the panel — so in the grid it
   overflowed its track and the copy was clipped.

   Here it takes the card's own footprint and squares off to match
   the button and hero geometry, so the row reads as one set of
   objects rather than two systems side by side.

   The same panels are slides in the homepage sliders, which is why
   every selector below names both contexts: at 326px the untouched
   `padding: 117px` left the inner box no width at all and the copy
   wrapped to one word per line, 1,190px tall.
   ───────────────────────────────────────────────────────────── */

.gtd-rigs > .eurodrill-blue-box-outter,
.gtd-rigs > .metzke-blue-box-outter,
.gtd-rig-slider__slide > .eurodrill-blue-box-outter,
.gtd-rig-slider__slide > .metzke-blue-box-outter {
	padding: 0 !important;
	top: 0;
	float: none;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	align-self: stretch;
	/* The outer is the flex parent so the panel can fill the track without a
	   percentage height: `min-height: 100%` on the inner resolves against a
	   height the outer is still deriving from that same content, and the box
	   ends up overflowing its own track.

	   Column, because the RC sections put two panels — a Metzke one and a
	   EURODRILL one — inside a single .metzke-blue-box-outter. As a flex row
	   they were squeezed side by side into one track. */
	display: flex;
	flex-direction: column;
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.gtd-rigs .eurodrill-blue-box-inner,
.gtd-rigs .metzke-blue-box-inner,
.gtd-rig-slider__slide .eurodrill-blue-box-inner,
.gtd-rig-slider__slide .metzke-blue-box-inner {
	/* Fills the outer when the copy is short, and makes the outer taller when
	   it is not — the row then grows with it instead of clipping. */
	flex: 1;
	height: auto;
	border-radius: 0;              /* square, as the buttons and hero now are */
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
}

/* The logo was absolutely positioned so it could hang over the top edge of
   the old panel. In flow it simply sits at the top of the panel. */
.gtd-rigs .eurodrill-blue-box-inner img,
.gtd-rigs .metzke-blue-box-inner img,
.gtd-rig-slider__slide .eurodrill-blue-box-inner img,
.gtd-rig-slider__slide .metzke-blue-box-inner img {
	position: static;
	left: auto;
	top: auto;
	max-width: 125px;
	height: auto;
	margin: 0 0 auto;
}

/* Was margin-top: 85px, the clearance for the hanging logo. */
.gtd-rigs .eurodrill-blue-box-inner p,
.gtd-rigs .metzke-blue-box-inner p,
.gtd-rig-slider__slide .eurodrill-blue-box-inner p,
.gtd-rig-slider__slide .metzke-blue-box-inner p {
	margin: 1.75rem 0 0 !important;
	/* Was 22px, then the site-wide body scale — either way it set uppercase
	   copy at headline size inside a supporting panel, and the longer of the
	   two callouts ran past the bottom of its own box. This is the same
	   supporting register the spec type uses. */
	font-size: clamp(.95rem, .85rem + .4vw, 1.15rem) !important;
	line-height: 1.45;
}

@media (max-width: 430px) {
	.gtd-rigs > .eurodrill-blue-box-outter,
	.gtd-rigs > .metzke-blue-box-outter,
	.gtd-rig-slider__slide > .eurodrill-blue-box-outter,
	.gtd-rig-slider__slide > .metzke-blue-box-outter { min-height: 20rem; }
}

/* ── the exploration band ─────────────────────────────────────
   .dark-background-gradient wraps the RC introduction and the RC
   rig sections on three templates. Its ground was a five-stop ramp
   from #333 at the top to white at the bottom — a shape that only
   worked because the old rig rows were 700px tall each and pushed
   the cards down into the near-white end of it.

   With the cards at their real height the block is a third as
   tall, and the grid now lands where the ramp reads #7d7d7d.
   Measured there, the quiet spec line came out at 3.07:1 — under
   the 4.5:1 floor — and no single ink clears the floor across a
   ground that runs from #7d7d7d to white inside one card.

   So the band is a band: one dark ground for the whole section
   and the cards inverted onto it. That is the distinction the
   ramp was reaching for anyway — the exploration range on its own
   ground, separate from the geothermal sections above it. How
   that ground is built is documented where it is written, below.
   ───────────────────────────────────────────────────────────── */

/* ── the exploration band ─────────────────────────────────────
   THIRD PASS, and the first two are worth naming because they
   are both the same mistake.

   Pass one was a flat charcoal rectangle. Pass two answered that
   with a soft white glow in the middle of it and a badge floating
   in the corner — which is the default gesture for "make a dark
   box less flat", and it reads exactly like one: a light with no
   source, a mark with no reason to be where it is, and two soft
   edges so the whole thing had no shape at all. Neutral grey,
   blurred light, floating ornament. Every part of that is the
   cheap move.

   This is built from the things the section is actually about.

     GROUND    Not neutral grey. #101d1d is the brand's own ink —
               the colour on every button on the site — and it is
               a green-black, not a grey. Deepened and lit
               directionally, from upper left to lower right, so
               the light has a direction and therefore a source.

     SURFACE   A hexagonal lattice at hairline weight. The GTD
               mark is a hex; the footer graphic is a hex; this is
               that geometry at architectural scale, drawn rather
               than placed — the section sits inside the structure
               instead of having a picture of it stuck in the
               corner. At 5% white it is felt before it is seen,
               which is the whole point.

     GRAIN     A fine noise film. Two jobs: it kills the banding
               that any large dark gradient shows on an 8-bit
               display, and it gives the surface tooth. Flat
               colour is what makes a big dark area look printed
               on a screen instead of made of something.

     EDGE      The top is a cut, not a smudge — a hard edge marked
               with the brand red, the same 2px rule the hero and
               the footer headings use. You enter the band
               deliberately. The bottom still releases into white,
               because the content that follows should not be
               walked into.
   ───────────────────────────────────────────────────────────── */

.dark-background-gradient {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	/* The brand ink, deepened. Reads as near-black with a cool cast rather
	   than as grey — the difference is small in a swatch and the whole
	   character of the section at this size. */
	background-color: #0e1919;

	background-image:
		/*
		 * The release into the section below. Multi-stop, not a two-stop
		 * ramp: a linear white-to-transparent fade over a dark ground moves
		 * through the middle greys at a constant rate and the eye reads that
		 * even band as a smoky stripe. Easing the alpha puts most of the
		 * distance in values that cannot be separated, and the edge goes.
		 */
		linear-gradient(0deg,
			#ffffff 0,
			rgba(255, 255, 255, .88) 20px,
			rgba(255, 255, 255, .62) 52px,
			rgba(255, 255, 255, .34) 96px,
			rgba(255, 255, 255, .14) 148px,
			rgba(255, 255, 255, .04) 200px,
			rgba(255, 255, 255, 0) 250px),

		/*
		 * The hex lattice. Authored inline rather than loaded, because the
		 * stroke has to stay hairline at this scale — the footer's artwork
		 * carries a 3px stroke that becomes a 7px rope once it is enlarged
		 * enough to work as a ground.
		 *
		 * Outline only. The first version of this tile carried the three
		 * interior spokes as well, and that reads as a wall of isometric
		 * cubes — a pattern-library texture, which is the exact thing this
		 * pass exists to get away from. Without them it is a honeycomb, and
		 * a honeycomb is the mark.
		 */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-opacity='0.042' stroke-width='0.7'/%3E%3C/svg%3E"),

		/*
		 * The light, with a direction. A radial glow in the middle of a box
		 * is light from nowhere; this falls across the band from the upper
		 * left, which is where light falls in every photograph on this site.
		 */
		linear-gradient(158deg,
			#1a2a2a 0%,
			#152323 26%,
			#101c1c 58%,
			#0b1414 100%);

	background-repeat: no-repeat, repeat, no-repeat;
	background-size: auto, 132px 236px, auto;
	background-position: bottom, top left, top;

	/* The cut at the top, marked. Inset rather than a border so it sits
	   inside the box and needs no extra element. */
	box-shadow: inset 0 2px 0 0 #c60000;

	/* The bottom fade has to stay clear of type, or white copy ends up on a
	   ground that is halfway to white. The top no longer fades, so it only
	   needs the section's own air. */
	padding-top: clamp(4.5rem, 8vw, 7rem);
	padding-bottom: clamp(14rem, 20vw, 17.5rem);

	/* White before the cut. Without it the band's top edge lands straight on
	   the last row of the geothermal section and the two read as one run;
	   with it the change of ground is something you arrive at. */
	margin-top: clamp(4rem, 8vw, 7.5rem);
}

/*
 * The grain. Masked out over the bottom fade so it never speckles the part of
 * the ground that is on its way to white, and pinned behind the content.
 */
.dark-background-gradient::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: .055;

	-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 270px);
	mask-image: linear-gradient(0deg, transparent 0, #000 270px);
}

@media (prefers-reduced-transparency: reduce) {
	.dark-background-gradient::after { display: none; }
}

/* ── the RC introduction, paired with its slider ──────────────
   On the homepage this block is the RC introduction and the RC
   slider side by side. It mirrors the GT block above it — copy
   left, rigs right — which meant the page ran the same way twice.
   Turning this one around gives the two halves of the range a
   left and a right, and the eye a reason to keep going.

   The markup order stays copy-then-slider, because that is the
   order it should be read and the order it should stack on a
   phone; only the desktop placement is reversed. :has() scopes
   all of this to the homepage instance — the same section on
   /gtd-desco-drill-rigs/ has no slider in it and is left alone.
   ───────────────────────────────────────────────────────────── */

@media (min-width: 992px) {
	.rc-rigs-introduction:has(.gtd-rig-slider) .row {
		display: grid;
		grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
		gap: clamp(2rem, 5vw, 5.5rem);
		align-items: center;
	}

	/* Bootstrap's col-* still carry float, width and the offset margin; the
	   grid owns the layout now, so they are neutralised rather than fought. */
	.rc-rigs-introduction:has(.gtd-rig-slider) .row > [class*="col-"],
	.rc-rigs-introduction:has(.gtd-rig-slider) .row [class*="col-"] {
		float: none;
		width: auto;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.rc-rigs-introduction:has(.gtd-rig-slider) .gtd-rig-slider {
		grid-column: 1;
		grid-row: 1;
	}

	.rc-rigs-introduction:has(.gtd-rig-slider) .row > *:not(.gtd-rig-slider) {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}

	/*
	 * Right-aligned copy has a ragged left edge, and the further the lines
	 * travel the more it wanders. Holding the measure to ~46 characters and
	 * pushing the block to the right keeps the rag tight enough to read as
	 * deliberate.
	 */
	.rc-rigs-introduction:has(.gtd-rig-slider) .row > *:not(.gtd-rig-slider) p {
		max-width: 46ch;
		margin-left: auto;
		margin-right: 0;
	}

	.rc-rigs-introduction:has(.gtd-rig-slider) .row > *:not(.gtd-rig-slider) h2 {
		max-width: 15ch;
		margin-left: auto;
		margin-right: 0;
	}
}

/*
 * Below the grid breakpoint everything is back in source order — copy first,
 * then the slider — and left aligned, because a ragged left edge on a phone
 * measure is all rag and no edge.
 */
@media (max-width: 991px) {
	.rc-rigs-introduction:has(.gtd-rig-slider) .row > *,
	.rc-rigs-introduction:has(.gtd-rig-slider) .row > * > * {
		text-align: left;
	}

	.rc-rigs-introduction:has(.gtd-rig-slider) .gtd-rig-slider {
		margin-top: clamp(2rem, 6vw, 3rem);
	}
}

/*
 * The band wraps both RC sections now — single- and dual-rotary — rather than
 * ending after the first, which left half the exploration range on white. The
 * dual-rotary heading uses .drill-rig-section-title, which the theme sets to
 * #000; on this ground that is an invisible heading.
 */
.dark-background-gradient .drill-rig-section-title,
.dark-background-gradient .drill-rig-section-title-white,
.dark-background-gradient .drill-rig-section-header-styles { color: #fff; }

.dark-background-gradient .gtd-rig {
	--rig-ink:   #ffffff;                    /* 15.2:1 on #262626 */
	--rig-quiet: #c9c9c9;                    /*  8.9:1 */
	--rig-rule:  rgba(255, 255, 255, .42);
	--rig-mark:  rgba(255, 255, 255, .17);
	--rig-mark-hover: rgba(255, 255, 255, .28);
}

.dark-background-gradient .gtd-rig:hover,
.dark-background-gradient .gtd-rig:focus { color: #fff; }
.dark-background-gradient .gtd-rig:hover .gtd-rig__spec p { color: #ececec; }

/*
 * On the homepage the RC slider sits inside .rc-rigs-introduction, and the
 * theme paints everything in there white:
 *
 *   .dark-background-gradient .rc-rigs-introduction p { color: #fff }   (0,3,1)
 *
 * which outranks .gtd-rig__spec p (0,2,1) and flattened the card's two-tone
 * spec — figure and label both arriving white, with weight as the only
 * difference. These match that specificity and win on load order.
 */
.dark-background-gradient .gtd-rig .gtd-rig__spec p { color: var(--rig-quiet); }
.dark-background-gradient .gtd-rig .gtd-rig__spec strong,
.dark-background-gradient .gtd-rig .gtd-rig__spec b { color: var(--rig-ink); }
.dark-background-gradient .gtd-rig:hover .gtd-rig__spec p { color: #ececec; }

/* The red used on the light sections is #c60000 on white at 5.9:1; on this
   ground it drops to 2.6:1, so the hovered rule and the CTA take the lifted
   red the hero pairs with dark. */
.dark-background-gradient .gtd-rig { --rig-red: #ff5b4a; }
.dark-background-gradient .gtd-rig:focus-visible { outline-color: #fff; }

/* ── the slider ───────────────────────────────────────────────
   Replaces slick on the two homepage rig carousels. slick moves
   one long track, so a card arrives as a flat rectangle; this
   moves the card's own layers — machine, model name, spec rows —
   because that is what a rig card is made of.

   js/rig-slider.js wraps the slides at DOMContentLoaded. Until it
   has, the `:not(.is-ready)` rule below shows the first slide
   only, so there is no flash of a stacked column, no layout shift,
   and with JS off the section still shows a rig.
   ───────────────────────────────────────────────────────────── */

.gtd-rig-slider {
	--rs-ink:    var(--gtd-ink, #101d1d);
	--rs-red:    var(--gtd-red, #c60000);
	--rs-rule:   #c9c9c9;
	--rs-border: rgba(198, 0, 0, .22);
	--rs-face:   #fff;
	position: relative;
}

.gtd-rig-slider:not(.is-ready) > * + * { display: none; }

.gtd-rig-slider__viewport {
	display: grid;               /* every slide in one cell, so no absolute
	                                positioning and no per-slide measuring */
	align-items: start;
	overflow: hidden;            /* the layered movement is clipped here */
	touch-action: pan-y;         /* horizontal is ours, vertical is the page's */

	/* The slider sets an explicit height from the active slide — see
	   measure() — because a grid stack is otherwise always as tall as its
	   tallest slide. The transition makes that part of the change rather
	   than a jump. */
	transition: height .5s var(--rig-ease, cubic-bezier(.16, 1, .3, 1));
}

.gtd-rig-slider__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.gtd-rig-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.gtd-rig-slider__slide.is-dragging {
	transition: transform .12s linear;
	will-change: transform;
}

/* ── the change ───────────────────────────────────────────────
   One authored moment, in four parts that arrive in the order the
   eye reads the card: the machine, then the name behind it, then
   the spec rows from the top down, each with its rule drawing in.

   --rs-dir is set to 1 or -1 by the slider, so one pair of
   keyframes covers both directions instead of four near-identical
   rules.
   ───────────────────────────────────────────────────────────── */

@keyframes gtdRsOut {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateX(calc(var(--rs-dir, 1) * -4%)); }
}

@keyframes gtdRsIn {
	from { opacity: 0; transform: translateX(calc(var(--rs-dir, 1) * 6%)); }
	to   { opacity: 1; transform: none; }
}

@keyframes gtdRsFigure {
	from { opacity: 0; transform: translateY(22px) scale(1.035); }
	to   { opacity: 1; transform: none; }
}

@keyframes gtdRsModel {
	from { opacity: 0; transform: translateY(-50%) translateX(calc(var(--rs-dir, 1) * -16%)); }
	to   { opacity: 1; transform: translateY(-50%); }
}

@keyframes gtdRsSpec {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@keyframes gtdRsRule {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.gtd-rig-slider__slide.is-leaving {
	visibility: visible;
	animation: gtdRsOut .28s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)) forwards;
}

.gtd-rig-slider__slide.is-entering {
	animation: gtdRsIn .56s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)) .1s both;
}

.gtd-rig-slider__slide.is-entering .gtd-rig__img {
	animation: gtdRsFigure .72s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)) .06s both;
}

.gtd-rig-slider__slide.is-entering .gtd-rig__model {
	animation: gtdRsModel .74s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)) .12s both;
}

.gtd-rig-slider__slide.is-entering .gtd-rig__spec {
	animation: gtdRsSpec .5s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

.gtd-rig-slider__slide.is-entering .gtd-rig__spec::before {
	animation: gtdRsRule .52s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

/* Top down, 55ms apart — the same cadence as the hover rules, so the two
   moments read as one behaviour rather than two. */
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(1),
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(1)::before { animation-delay: .18s; }
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(2),
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(2)::before { animation-delay: .235s; }
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(3),
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(3)::before { animation-delay: .29s; }
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(4),
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(4)::before { animation-delay: .345s; }
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(5),
.gtd-rig-slider__slide.is-entering .gtd-rig__spec:nth-child(5)::before { animation-delay: .4s; }

/* The partner panels are slides too. They have no layers to stagger, so they
   take the wrapper's move and nothing else. */

/* ── controls ─────────────────────────────────────────────── */

.gtd-rig-slider__controls {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.25rem);
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.gtd-rig-slider__arrow {
	flex: none;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;

	background: var(--rs-face);
	color: var(--rs-red);
	border: 1px solid var(--rs-border);
	border-radius: 0;              /* square, as the buttons and cards are */
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	transition:
		background-color .25s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)),
		border-color .25s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)),
		color .25s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)),
		transform .25s var(--rig-ease, cubic-bezier(.16, 1, .3, 1));
}

.gtd-rig-slider__arrow:hover {
	background: var(--rs-red);
	border-color: var(--rs-red);
	color: #fff;
	transform: translateY(-2px);
}

.gtd-rig-slider__arrow:active { transform: translateY(0); }

.gtd-rig-slider__arrow:focus-visible {
	outline: 2px solid var(--rs-red);
	outline-offset: 3px;
}

.gtd-rig-slider__arrow svg {
	width: 20px;
	height: 15px;
	display: block;
	fill: currentColor;
	/* The chevron follows the button's text colour, exactly as it does on
	   .info-button — one artwork, no second file for the hover state. */
	transition: transform .25s var(--rig-ease, cubic-bezier(.16, 1, .3, 1));
}

/* One asset for both directions. */
.gtd-rig-slider__arrow[data-dir="prev"] svg { transform: scaleX(-1); }

.gtd-rig-slider__arrow[data-dir="next"]:hover svg { transform: translateX(3px); }
.gtd-rig-slider__arrow[data-dir="prev"]:hover svg { transform: scaleX(-1) translateX(3px); }

/* ── dots ─────────────────────────────────────────────────────
   Rules, not circles: the card already says "spec group" with a
   short rule above it, and the slider position is the same idea
   one level up.
   ───────────────────────────────────────────────────────────── */

.gtd-rig-slider__dots {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtd-rig-slider__dots li { margin: 0; }

.gtd-rig-slider__dot {
	/* 44px of touch target around a 2px rule. */
	width: 34px;
	height: 44px;
	display: block;
	position: relative;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.gtd-rig-slider__dot::before {
	content: "";
	position: absolute;
	left: 5px;
	right: 5px;
	top: 50%;
	height: 2px;
	background: var(--rs-rule);
	transform: translateY(-50%) scaleX(.7);
	transform-origin: center;
	transition:
		background-color .35s var(--rig-ease, cubic-bezier(.16, 1, .3, 1)),
		transform .35s var(--rig-ease, cubic-bezier(.16, 1, .3, 1));
}

.gtd-rig-slider__dot:hover::before { transform: translateY(-50%) scaleX(1); }

.gtd-rig-slider__dot.is-current::before {
	background: var(--rs-red);
	transform: translateY(-50%) scaleX(1);
}

.gtd-rig-slider__dot:focus-visible {
	outline: 2px solid var(--rs-red);
	outline-offset: -6px;
}

/* Announced, not shown. */
.gtd-rig-slider__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── on the dark band ─────────────────────────────────────── */

.dark-background-gradient .gtd-rig-slider {
	--rs-face:   transparent;
	--rs-red:    #ff5b4a;          /* #c60000 falls to 2.6:1 on #262626 */
	--rs-border: rgba(255, 255, 255, .28);
	--rs-rule:   rgba(255, 255, 255, .34);
}

.dark-background-gradient .gtd-rig-slider__arrow { color: #fff; }

.dark-background-gradient .gtd-rig-slider__arrow:hover {
	background: #fff;
	border-color: #fff;
	color: #101d1d;
}

.dark-background-gradient .gtd-rig-slider__arrow:focus-visible { outline-color: #fff; }

/* ── small screens ────────────────────────────────────────── */

@media (max-width: 700px) {
	.gtd-rig-slider__controls { gap: .5rem; }
	.gtd-rig-slider__arrow { width: 44px; height: 44px; }
	.gtd-rig-slider__dot { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.gtd-rig-slider__slide,
	.gtd-rig-slider__slide.is-entering,
	.gtd-rig-slider__slide.is-leaving,
	.gtd-rig-slider__slide.is-entering .gtd-rig__img,
	.gtd-rig-slider__slide.is-entering .gtd-rig__model,
	.gtd-rig-slider__slide.is-entering .gtd-rig__spec,
	.gtd-rig-slider__slide.is-entering .gtd-rig__spec::before {
		animation: none !important;
	}
	.gtd-rig-slider__arrow,
	.gtd-rig-slider__arrow svg,
	.gtd-rig-slider__dot::before { transition: none !important; }
}

/* ── the Metzke / Mincon panel ────────────────────────────────
   Ground changed from #00bedf to #ffcc00.

   The copy has to come with it: the theme sets it to #fff
   !important, which is 1.6:1 on this yellow and unreadable. The
   brand ink reads 11.9:1 on it.
   ───────────────────────────────────────────────────────────── */

/*
 * Both selectors carry the outer class deliberately: the theme's own rules are
 * `.metzke-blue-box-outter .metzke-blue-box-inner`, and a single-class selector
 * loses to that on specificity however late it is loaded — which is exactly
 * what happened on the first attempt.
 */
.metzke-blue-box-outter .metzke-blue-box-inner { background-color: #ffcc00; }

.metzke-blue-box-outter .metzke-blue-box-inner p,
.metzke-blue-box-outter .metzke-blue-box-inner p strong,
.metzke-blue-box-outter .metzke-blue-box-inner p b,
.metzke-blue-box-outter .metzke-blue-box-inner p span,
.metzke-blue-box-outter .metzke-blue-box-inner p a {
	color: #101d1d !important;     /* answers the theme's `color: #fff !important` */
}