/* ─────────────────────────────────────────────────────────────
   GTD Desco — the drilling support equipment page.

   Two blocks: the equipment run, and the GeoWeights placement.

   WHAT WAS WRONG

   The equipment rows alternated with `flex-direction: row-reverse`
   AND `text-align: right`, so two of the three products had body
   copy with a ragged LEFT edge — the reader hunting for the start
   of every line. The band behind them tiled a "GTD" watermark at
   full strength, competing with the product photography that is
   the whole reason the section exists. Every row ended in a
   button reading "MORE INFO", three times.

   The GeoWeights block was a 368px circle with a 34px solid
   orange ring holding "NEXT DAY DELIVERY", beside a flat PNG
   screenshot of the product dimensions, with the logo printed at
   80% of a column width inside the copy and a 31px pill button in
   a system where nothing else is a pill.

   WHAT THIS DOES

   Each product's photograph bleeds to the outer edge of the page
   on its own side and the copy stays in the container, so the
   product gets the full width of the band rather than half of it.
   The side alternates; the type never does.

   GeoWeights reads as its own brand — white ground, #F2562D
   orange, the dark grey from the wordmark — with the weight
   silhouette as the motif and the three sizes drawn to TRUE
   RELATIVE SCALE in SVG, each one drawing itself as it arrives.
   ───────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════
   THE EQUIPMENT RUN
   ═════════════════════════════════════════════════════════════ */

/*
 * The band. `.other-equipment-gtd-background` keeps its id-free class so the
 * legacy rule still sets the ground, and this quiets what was on top of it.
 */
.other-equipment-gtd-background {
	--eq-ink:   #1b1a1a;
	--eq-red:   var(--gtd-red, #c60000);
	--eq-quiet: rgba(255, 255, 255, .78);
	--eq-ease:  cubic-bezier(.16, 1, .3, 1);

	position: relative;
	isolation: isolate;
	overflow: clip;

	background-color: #161515 !important;
	/*
	 * The watermark is the band's identity, so it is meant to be SEEN — the
	 * first pass took it to a texture you could not read, which lost the mark
	 * entirely. `cover` is back, so the GTD letters are as large as the band
	 * is wide, and the veil below carries the whole job of holding it back.
	 *
	 * No blend mode: the source is already near-monochrome, and blending it
	 * only muted the letters a second time.
	 */
	background-size: cover !important;
	background-position: center top !important;
	background-repeat: no-repeat !important;
	padding: 0 !important;
	margin-top: clamp(4rem, 8vw, 7.5rem) !important;
	margin-bottom: clamp(4rem, 8vw, 7.5rem);
}

/*
 * The veil is the one control on how visible the mark is. At .82 the letters
 * were gone; at .5 they read as a watermark without competing with the cut-out
 * photography sitting on top of them.
 *
 * Text contrast is not the constraint here — the mark is dark-on-dark, so it
 * barely moves the ground under white copy. What the veil is protecting is the
 * PHOTOGRAPHY: the machines are cut out against nothing, and they need a ground
 * quiet enough to read as objects rather than as collage.
 */
.other-equipment-gtd-background::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(20, 19, 19, .5);
	pointer-events: none;
}

.other-equipment-gtd-background > * { position: relative; z-index: 1; }

/* A red hairline top and bottom, so the band has an edge rather than a fade. */
.other-equipment-gtd-background { box-shadow: inset 0 4px 0 0 var(--eq-red), inset 0 -4px 0 0 var(--eq-red); }

.gtd-eq {
	display: flex;
	flex-direction: column;
}

/* ── one product ──────────────────────────────────────────────
   The photograph runs to the outer edge of the page on its own
   side; the copy stays in the container's measure.
   ───────────────────────────────────────────────────────────── */

.gtd-eq__row {
	position: relative;
	display: grid;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

/*
 * The panel has to start exactly where `.container`'s CONTENT starts, or the
 * copy in this band sits out of line with every other section on the page.
 *
 * That edge is NOT `(100vw - 1520px) / 2`. Bootstrap's container is 1520px
 * wide INCLUDING 12px of padding on each side, so its content edge is that
 * figure plus 12px — measured, the container box begins at 513 and its text
 * begins at 525. The first version padded to 513 and put the entire equipment
 * run 12px to the left of the rest of the page.
 */
.gtd-eq {
	--eq-edge: max(1.25rem, calc((100vw - 1520px) / 2 + 12px));
}

.gtd-eq__row--right {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	padding-left: var(--eq-edge);
}

.gtd-eq__row--left {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	padding-right: var(--eq-edge);
}

/*
 * Both children are placed explicitly, in BOTH axes.
 *
 * The column half is because the figure comes first in the markup — it is the
 * thing being shown — so without it auto-placement put the figure in column 1
 * on every row and the "--right" rows bled to the side their padding was not
 * on.
 *
 * The ROW half is the one that actually broke the page. Placing the figure in
 * column 2 while it is still the first item moves the auto-placement cursor
 * past column 1; sparse packing (the default) will not send the next item
 * BACKWARDS to fill it, so the panel was pushed onto grid row 2 — the copy
 * landed a full row underneath the photograph, leaving most of a screen empty
 * and nothing lining up with anything. `grid-row: 1` on both is the fix.
 */
.gtd-eq__row--left .gtd-eq__figure  { grid-column: 1; grid-row: 1; }
.gtd-eq__row--left .gtd-eq__panel   { grid-column: 2; grid-row: 1; }

.gtd-eq__row--right .gtd-eq__figure { grid-column: 2; grid-row: 1; }
.gtd-eq__row--right .gtd-eq__panel  { grid-column: 1; grid-row: 1; }

.gtd-eq__figure { margin: 0; min-width: 0; }

.gtd-eq__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	/* The cut-outs are photographed at different scales; this stops the
	   smallest from arriving as a stamp beside the largest. */
	max-height: clamp(18rem, 36vw, 32rem);
	object-fit: contain;
	transition: transform 1s var(--eq-ease);
}

.gtd-eq__row:hover .gtd-eq__img { transform: scale(1.03); }

/* ── the panel ────────────────────────────────────────────── */

.gtd-eq__panel { min-width: 0; }

.gtd-eq__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin: 0 0 clamp(1rem, 2vw, 1.6rem);
	background: var(--eq-red);
	transform-origin: left;
}

/*
 * Scoped through the band, not just the class. sass/style.css sets
 *
 *     .other-equipment-gtd-background h2 { font-size: 106px !important }
 *
 * above 1500px — (0,2,1) with !important, which beat a bare `.gtd-eq__title`
 * (0,1,0) even with !important of its own, because when both are important
 * specificity decides. 106px put the machine's name at twice the weight of the
 * machine.
 */
.other-equipment-gtd-background .gtd-eq__title {
	margin: 0 0 clamp(1rem, 2vw, 1.6rem);
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 4rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
	max-width: 15ch;
}

/*
 * text-align is set explicitly, because the legacy rule right-aligned every
 * even row and that is the defect this file exists to remove.
 */
.gtd-eq__text,
.gtd-eq__text p {
	margin: 0 0 1em;
	text-align: left !important;
	font-size: clamp(1rem, .95rem + .28vw, 1.15rem) !important;
	line-height: 1.62;
	max-width: 58ch;
	color: var(--eq-quiet) !important;
}

.gtd-eq__text p:last-child { margin-bottom: 0; }

.gtd-eq__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.gtd-eq__cta:hover,
.gtd-eq__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

/* ═════════════════════════════════════════════════════════════
   GEOWEIGHTS
   Its own brand. White ground, orange, the wordmark's grey.
   ═════════════════════════════════════════════════════════════ */

.gtd-gw {
	--gw-orange: #f2562d;
	--gw-lift:   #d9451f;
	--gw-ink:    #3f3b3a;
	--gw-quiet:  #6a6462;
	--gw-line:   rgba(63, 59, 58, .16);
	--gw-ease:   cubic-bezier(.16, 1, .3, 1);

	position: relative;
	background: #fff;
	color: var(--gw-ink);

	/* Full bleed, with an orange rule top and bottom — GeoWeights owns white
	   and orange where the rest of this page owns ink and red, so the
	   placement announces itself as a different brand without shouting. */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);

	border-top: 6px solid var(--gw-orange);
	border-bottom: 6px solid var(--gw-orange);
	padding-block: clamp(3.5rem, 8vw, 7rem);
	margin-top: clamp(4rem, 8vw, 7.5rem);
	margin-bottom: clamp(4rem, 8vw, 7.5rem);
}

/*
 * The copy column leads and carries the whole argument top to bottom; the aside
 * holds the delivery slab with the wordmark riding over it.
 */
.gtd-gw__inner {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

/* ── the aside ────────────────────────────────────────────────
   Reads top to bottom: who this is, what they make, how fast it
   ships. The wordmark stands on its own — it is the brand's
   signature, not a label on the delivery slab.
   ───────────────────────────────────────────────────────────── */

.gtd-gw__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

/*
 * Above the heading in the copy column — the wordmark introduces the brand,
 * then the brand makes its claim. No plate and no shadow: both existed only to
 * lift its dark-grey half off the ink slab it briefly overlapped, and it
 * stands on white here.
 */
.gtd-gw__logo {
	display: block;
	width: min(78%, 15.5rem);
	height: auto;
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.9rem);
}

.gtd-gw__title {
	margin: 0 0 clamp(.9rem, 1.8vw, 1.35rem);
	font-size: clamp(1.7rem, 1rem + 2.2vw, 3.2rem) !important;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--gw-ink) !important;
	text-wrap: balance;
}

/* The brand's own line, and the only italic on the page — it is a signature,
   not a heading. */
.gtd-gw__kicker {
	margin: 0;
	font-size: clamp(.95rem, .9rem + .25vw, 1.1rem) !important;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--gw-orange) !important;
}

/* ── the copy ─────────────────────────────────────────────── */

.gtd-gw__p {
	margin: 0 0 1.05em;
	font-size: clamp(1rem, .95rem + .28vw, 1.15rem) !important;
	line-height: 1.66;
	max-width: 62ch;
	color: var(--gw-quiet) !important;
}

.gtd-gw__p strong { color: var(--gw-ink); font-weight: 700; }

/* ── the delivery note ────────────────────────────────────── */

.gtd-gw__note {
	position: relative;
	margin: 0;
	padding: clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.25rem, 2.4vw, 1.9rem);
	background: var(--gw-ink);
	/* Square, like every other control and panel on this site. The roundel it
	   replaces was a 368px circle with a 34px ring, which is a costume rather
	   than a shape the brand uses anywhere. */
	box-shadow: inset 5px 0 0 0 var(--gw-orange);
}

.gtd-gw__note-label {
	margin: 0 0 .4rem;
	font-size: clamp(.72rem, .68rem + .18vw, .82rem) !important;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--gw-orange) !important;
}

.gtd-gw__note-text {
	margin: 0;
	font-size: clamp(.92rem, .88rem + .2vw, 1.02rem) !important;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88) !important;
	max-width: 46ch;
}

/*
 * The button keeps .geoweights-info-button's orange, and takes the square
 * geometry every other button on the site now has. css/buttons.css already
 * gives it the shared shell; only the lift is added.
 */
.gtd-gw__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.gtd-gw__cta:hover,
.gtd-gw__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(242, 86, 45, .34);
}

/* ── the range, drawn ─────────────────────────────────────────
   Was a flat PNG screenshot of a dimension drawing. It is SVG at
   true relative scale now: each drawing's width is its own
   millimetre figure as a percentage of the longest, so the 56kg
   really is 2.4 times the 20kg on screen.
   ───────────────────────────────────────────────────────────── */

.gtd-gw__range { margin: 0; }

.gtd-gw__range-title {
	margin: 0 0 clamp(1.1rem, 2.2vw, 1.6rem);
	font-size: clamp(.72rem, .68rem + .18vw, .84rem) !important;
	font-weight: 700;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--gw-quiet) !important;
}

.gtd-gw__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	/* Tighter than when this ran the full page width: the drawings are in a
	   column now, so they read as one spec block rather than three bands. */
	gap: clamp(1rem, 2.2vw, 1.75rem);
}

.gtd-gw__item {
	margin: 0;
	padding: 0 0 clamp(.8rem, 1.6vw, 1.15rem);
	list-style: none;
	border-bottom: 1px solid var(--gw-line);
	display: grid;
	gap: .35rem;
}

/* The width IS the data. */
.gtd-gw__draw {
	display: block;
	width: var(--gw-w);
	height: auto;
	overflow: visible;
	color: var(--gw-orange);
}

.gtd-gw__dim { color: var(--gw-quiet); stroke: var(--gw-quiet); }

.gtd-gw__spec {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem 1.1rem;
}

.gtd-gw__mass {
	font-size: clamp(1.1rem, .95rem + .5vw, 1.6rem);
	font-weight: 900;
	letter-spacing: -.02em;
	color: var(--gw-ink);
}

.gtd-gw__lb { font-weight: 700; color: var(--gw-quiet); }

.gtd-gw__len {
	font-size: clamp(.78rem, .74rem + .2vw, .9rem);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--gw-orange);
}

.gtd-gw__imp { color: var(--gw-quiet); letter-spacing: .08em; }

/* ═════════════════════════════════════════════════════════════
   THE MOMENTS
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		@keyframes gtdEqDraw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
		@keyframes gtdEqRise  { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
		/* The photograph arrives from the edge it bleeds to. */
		@keyframes gtdEqInR   { from { opacity: 0; transform: translate3d(46px, 0, 0); } to { opacity: 1; transform: none; } }
		@keyframes gtdEqInL   { from { opacity: 0; transform: translate3d(-46px, 0, 0); } to { opacity: 1; transform: none; } }
		/* The outline draws itself, the way it would be drawn. */
		@keyframes gtdGwDraw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

		.gtd-eq__rule {
			animation: gtdEqDraw linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 6%;
		}

		.gtd-eq__title,
		.gtd-eq__text,
		.gtd-eq__cta {
			animation: gtdEqRise linear both;
			animation-timeline: view();
			animation-range: entry 18% cover 8%;
		}

		.gtd-eq__text { animation-range: entry 24% cover 14%; }
		.gtd-eq__cta  { animation-range: entry 30% cover 20%; }

		/* The timeline is on the figure, never on the image, which carries its
		   own hover transform — the P5e lesson. */
		.gtd-eq__row--right .gtd-eq__figure {
			animation: gtdEqInR linear both;
			animation-timeline: view();
			animation-range: entry 14% cover 10%;
		}

		.gtd-eq__row--left .gtd-eq__figure {
			animation: gtdEqInL linear both;
			animation-timeline: view();
			animation-range: entry 14% cover 10%;
		}

		/* ── GeoWeights ─────────────────────────────────────── */

		.gtd-gw__logo,
		.gtd-gw__title,
		.gtd-gw__kicker,
		.gtd-gw__p,
		.gtd-gw__cta,
		.gtd-gw__aside {
			animation: gtdEqRise linear both;
			animation-timeline: view();
			animation-range: entry 18% cover 8%;
		}

		.gtd-gw__title  { animation-range: entry 21% cover 11%; }
		.gtd-gw__logo   { animation-range: entry 18% cover 8%; }
		.gtd-gw__kicker { animation-range: entry 24% cover 14%; }
		.gtd-gw__p      { animation-range: entry 26% cover 16%; }
		.gtd-gw__cta    { animation-range: entry 33% cover 23%; }
		/*
		 * The aside animates as ONE piece — the wordmark and the slab it rides on
		 * are a single object, and moving them independently would slide the plate
		 * off the thing it is overlapping.
		 */
		.gtd-gw__aside  { animation-range: entry 28% cover 18%; }

		/*
		 * pathLength="1" on every path in the markup, so one dasharray works for
		 * a 648mm outline and a 1558mm one without measuring either.
		 */
		.gtd-gw__draw path,
		.gtd-gw__draw circle {
			stroke-dasharray: 1;
			animation: gtdGwDraw linear both;
			animation-timeline: view();
		}

		/* Dimension line first, then the weight — the order it would be drawn in. */
		.gtd-gw__dim path { animation-range: entry 26% cover 4%; }
		.gtd-gw__body path,
		.gtd-gw__body circle { animation-range: entry 32% cover 16%; }

		.gtd-gw__item { --gw-step: calc(var(--gw-i) * 4%); }
	}
}

/* ═════════════════════════════════════════════════════════════
   SMALL SCREENS
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	.gtd-eq__row,
	.gtd-eq__row--left,
	.gtd-eq__row--right {
		grid-template-columns: minmax(0, 1fr);
		/* Same content edge as the container, both sides — see --eq-edge above. */
		padding-inline: var(--eq-edge);
	}

	/* The photograph leads on a phone: it is what identifies the machine. */
	.gtd-eq__row--left .gtd-eq__figure,
	.gtd-eq__row--right .gtd-eq__figure { grid-row: 1; grid-column: 1; }
	.gtd-eq__row--left .gtd-eq__panel,
	.gtd-eq__row--right .gtd-eq__panel  { grid-row: 2; grid-column: 1; }

	.gtd-eq__title { max-width: 100%; }

	.gtd-gw__inner { grid-template-columns: minmax(0, 1fr); }
	.gtd-gw__aside { margin-top: clamp(1.75rem, 5vw, 2.5rem); }

	.gtd-gw__logo  { width: min(70%, 13rem); }
}

@media (prefers-reduced-motion: reduce) {
	.gtd-eq__img,
	.gtd-eq__cta,
	.gtd-gw__cta { transition: none !important; }
	.gtd-gw__draw path,
	.gtd-gw__draw circle { stroke-dasharray: none !important; }
}