/* ─────────────────────────────────────────────────────────────
   GTD Desco — the productivity argument and the evidence.

   Four sections that run consecutively on six templates, and
   were the last untouched stretch of the drill rigs and drilling
   support equipment pages.

   WHAT WAS WRONG

   Seven paragraphs of undifferentiated body copy either side of
   a grey strip. The strongest claim on the page — 30% to 50%
   higher productivity — set at exactly the size of everything
   around it. Four paragraphs of hard specification with NO
   HEADING AT ALL. And a grey `.full-width-text-banner` between
   them that was 50px of #E8EAED with a centred <h3> in it, which
   is a gap with a colour rather than a pause.

   Then a carousel of six YouTube iframes, all six booted on
   every page view, one of them a duplicate of another.

   WHAT THIS DOES

   The same words, given the structure they were always making.

     the claim   heading left, copy right; the number lifted
                 INSIDE its sentence rather than hoisted into a
                 statistic panel — a figure that stays in its
                 claim reads as evidence, one pulled out into a
                 big coloured box reads as marketing
     the pause   full bleed, brand ink, one line at display
                 scale: the single hard break in a long white
                 stretch of these pages
     the spec    a definition run — label, hairline, paragraph —
                 so it can be scanned by somebody comparing rigs
     the videos  a mosaic of poster images, all five visible at
                 once, because a carousel hides five sixths of
                 the evidence on a block whose whole argument is
                 "see for yourself"

   THE MOMENT

   Each part has its own, and they are different on purpose: the
   claim's rule draws and its copy staggers, the pause wipes its
   line up from behind a mask, the spec's hairlines draw one
   after another, and the video tiles settle out of a scale. All
   scroll-driven, all behind @supports, no JavaScript.
   ───────────────────────────────────────────────────────────── */

.gtd-arg,
.gtd-arg-pause,
.gtd-evid {
	--a-ink:    var(--gtd-ink, #101d1d);
	--a-red:    var(--gtd-red, #c60000);
	--a-onDark: #ff5b4a;                 /* the brand red on a dark field */
	--a-quiet:  #4a5757;
	--a-hair:   rgba(16, 29, 29, .14);
	--a-ease:   cubic-bezier(.16, 1, .3, 1);
}

/* ── the claim, and the specification ─────────────────────────
   One layout, twice. Heading left at display scale, copy right
   at a reading measure — which is what the old single-column
   .row could not do, because a 1520px container gives body copy
   a 190-character line.
   ───────────────────────────────────────────────────────────── */

.gtd-arg {
	margin-top: clamp(4rem, 8vw, 7.5rem);
	margin-bottom: clamp(4rem, 8vw, 7.5rem);
}

.gtd-arg__inner {
	display: grid;
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: start;
}

.gtd-arg__lede { position: relative; }

/* The rule the rig cards, upsell panels, quote banner, CTA panels and closing
   block all use — doing the same job a sixth time. */
.gtd-arg__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin: 0 0 clamp(1rem, 2vw, 1.75rem);
	background: var(--a-red);
	transform-origin: left;
}

.gtd-arg__title {
	margin: 0;
	/* !important answers css/type.css's `h2 { … !important }`. */
	font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.6rem) !important;
	font-weight: 900;
	line-height: .96;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--a-ink) !important;
	text-wrap: balance;
	max-width: 16ch;
}

.gtd-arg__body { padding-top: .35rem; }

.gtd-arg__p,
.gtd-arg__text {
	margin: 0 0 1.05em;
	/* !important answers css/type.css's blanket `p { … !important }`. */
	font-size: clamp(1rem, .95rem + .28vw, 1.2rem) !important;
	line-height: 1.62;
	/* 62–70 characters. The old rule let these run the full 1520px container. */
	max-width: 66ch;
	color: var(--a-ink) !important;
}

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

/*
 * The lead paragraph carries the claim, so it is set a step larger than the
 * two supporting it — the hierarchy the original had no way to express.
 */
.gtd-arg__p[data-lead] {
	font-size: clamp(1.15rem, 1rem + .55vw, 1.6rem) !important;
	line-height: 1.44;
	max-width: 54ch;
}

/*
 * The number, lifted where it stands. Weight and colour, not size — the
 * sentence has to keep reading as a sentence.
 */
.gtd-arg__lift {
	color: var(--a-red);
	font-weight: 900;
	white-space: nowrap;
}

/* ── the definition run ───────────────────────────────────────
   Not cards. A label, a hairline and a paragraph, three times —
   the difference being that a card would box each one and make
   the set look like navigation.
   ───────────────────────────────────────────────────────────── */

.gtd-arg__defs { margin: 0; padding: 0; }

.gtd-arg__def {
	position: relative;
	padding-top: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* The hairline is an element rather than a border so it can be drawn. */
.gtd-arg__def::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--a-hair);
	transform-origin: left;
}

.gtd-arg__def:first-child { margin-top: 0; }

.gtd-arg__label {
	margin: 0 0 .5rem;
	font-size: clamp(.72rem, .68rem + .18vw, .82rem);
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--a-red);
}

.gtd-arg__text { margin: 0; }

.gtd-arg__close {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	font-size: clamp(1rem, .95rem + .28vw, 1.2rem) !important;
	line-height: 1.62;
	max-width: 66ch;
	color: var(--a-quiet) !important;
}

/* The copy says "don't hesitate to contact us". It is a link now. */
.gtd-arg__link {
	color: var(--a-red);
	font-weight: 700;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 0 currentColor;
	transition: box-shadow .25s var(--a-ease), color .25s var(--a-ease);
}

.gtd-arg__link:hover,
.gtd-arg__link:focus-visible {
	box-shadow: inset 0 -.75em 0 0 rgba(198, 0, 0, .14), inset 0 -2px 0 0 currentColor;
}

/* ── the pause ────────────────────────────────────────────────
   Full bleed, ink, one line. No photograph and no button, which
   is what keeps it from reading as a fourth CTA panel.
   ───────────────────────────────────────────────────────────── */

.gtd-arg-pause {
	position: relative;
	isolation: isolate;
	overflow: clip;

	display: block;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);

	background: var(--a-ink);
	padding: clamp(4rem, 9vw, 8rem) 0;
	margin-top: clamp(4rem, 8vw, 7.5rem);
	margin-bottom: clamp(4rem, 8vw, 7.5rem);
}

.gtd-arg-pause__seam {
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--a-red);
	transform-origin: left;
	pointer-events: none;
}

.gtd-arg-pause__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
	background: var(--a-onDark);
	transform-origin: left;
}

.gtd-arg-pause__line {
	margin: 0;
	/* The old h3 was a flat 50px centred under 220px of side padding. */
	font-size: clamp(1.9rem, 1.1rem + 3vw, 4.5rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
	max-width: 22ch;
	text-wrap: balance;
}

/* ── the evidence ─────────────────────────────────────────── */

.gtd-evid {
	margin-top: clamp(4rem, 8vw, 7.5rem);
	margin-bottom: clamp(4rem, 8vw, 7.5rem);
}

.gtd-evid__head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

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

.gtd-evid__title {
	margin: 0 0 clamp(.9rem, 1.8vw, 1.4rem);
	font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.6rem) !important;
	font-weight: 900;
	line-height: .96;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--a-ink) !important;
}

/*
 * The line break is a block element, not `</br>` — which is not a tag, and was
 * in the markup for both of these headings.
 */
.gtd-evid__line { display: block; }
.gtd-evid__line + .gtd-evid__line { color: var(--a-red); }

.gtd-evid__lede {
	margin: 0;
	font-size: clamp(1rem, .95rem + .28vw, 1.2rem) !important;
	line-height: 1.62;
	color: var(--a-quiet) !important;
}

/* ── the mosaic ───────────────────────────────────────────────
   Five clips, all visible. The first is large because it is the
   one being recommended; the other four sit beside it.
   ───────────────────────────────────────────────────────────── */

.gtd-evid__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.6rem, 1.2vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtd-evid__cell {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--a-ink);
}

/* Two columns and two rows: the four small cells fill the rest exactly. */
.gtd-evid__cell--lead {
	grid-column: span 2;
	grid-row: span 2;
}

.gtd-evid__play {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
	text-align: left;
}

.gtd-evid__poster {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	/* The posters are five different grades of YouTube compression; a light,
	   consistent hold-back lets them sit as one set until pointed at. */
	filter: saturate(.85) contrast(1.03);
	transform: scale(1.001);
	transition: transform .8s var(--a-ease), filter .5s var(--a-ease);
}

.gtd-evid__play:hover .gtd-evid__poster,
.gtd-evid__play:focus-visible .gtd-evid__poster {
	transform: scale(1.045);
	filter: saturate(1) contrast(1);
}

/*
 * A light, even veil rather than a bottom scrim. The scrim was there to carry
 * a caption; the caption is gone — these thumbnails are designed video cards
 * with their own titles burned into them, and laying a second set of words
 * over the top was printing words on words. The veil now does one job: hold
 * the play mark off a busy frame. It lifts on hover.
 */
.gtd-evid__play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(6, 14, 14, .28);
	pointer-events: none;
	transition: background-color .45s var(--a-ease);
}

.gtd-evid__play:hover::after,
.gtd-evid__play:focus-visible::after {
	background: rgba(6, 14, 14, .1);
}

.gtd-evid__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: 2;

	display: grid;
	place-items: center;
	width: clamp(3rem, 5vw, 4.5rem);
	aspect-ratio: 1;

	background: var(--a-red);
	color: #fff;
	box-shadow: 0 10px 30px rgba(6, 14, 14, .45);
	transition: transform .35s var(--a-ease), background-color .35s var(--a-ease);
}

/* Square, like every other control on this site — a round play button is
   YouTube's mark, not GTD's. */
.gtd-evid__play:hover .gtd-evid__mark,
.gtd-evid__play:focus-visible .gtd-evid__mark {
	transform: scale(1.1);
	background: var(--gtd-red-lift, #e11414);
}

.gtd-evid__mark svg { display: block; translate: 2px 0; }

.gtd-evid__play:focus-visible {
	outline: 3px solid var(--a-red);
	outline-offset: -3px;
}

/* The player, once someone has asked for it. */
.gtd-evid__frame {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	border: 0;
}

.gtd-evid__cell.is-playing .gtd-evid__play { opacity: 0; pointer-events: none; }

/* ── the moments ──────────────────────────────────────────────
   Different per part, on purpose: four identical fade-ups in a
   row is the fault this whole run is being rebuilt to fix.
   ───────────────────────────────────────────────────────────── */

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

		@keyframes gtdArgDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
		@keyframes gtdArgRise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
		/* The pause's line comes up from behind its own bottom edge. */
		@keyframes gtdArgWipe {
			from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 14px, 0); }
			to   { opacity: 1; clip-path: inset(0 0 -30% 0); transform: none; }
		}
		@keyframes gtdArgSettle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

		.gtd-arg__rule,
		.gtd-evid__rule {
			animation: gtdArgDraw linear both;
			animation-timeline: view();
			animation-range: entry 18% cover 4%;
		}

		.gtd-arg__title,
		.gtd-evid__title {
			animation: gtdArgRise linear both;
			animation-timeline: view();
			animation-range: entry 16% cover 6%;
		}

		.gtd-arg__body > *,
		.gtd-evid__lede {
			animation: gtdArgRise linear both;
			animation-timeline: view();
			animation-range: entry 24% cover 14%;
		}

		/* Each definition's hairline draws as it arrives, so the run reads as
		   being ruled off one entry at a time. */
		.gtd-arg__def::before {
			animation: gtdArgDraw linear both;
			animation-timeline: view();
			animation-range: entry 28% cover 12%;
		}

		.gtd-arg-pause__seam {
			animation: gtdArgDraw linear both;
			animation-timeline: view();
			animation-range: entry 6% entry 78%;
		}

		.gtd-arg-pause__rule {
			animation: gtdArgDraw linear both;
			animation-timeline: view();
			animation-range: entry 26% cover 4%;
		}

		.gtd-arg-pause__line {
			animation: gtdArgWipe linear both;
			animation-timeline: view();
			animation-range: entry 22% cover 10%;
		}

		/*
		 * The timeline is on the CELL, not on the poster — a filter or a
		 * transform on the image's own container is the P5e trap, and the
		 * poster already carries a hover transform of its own.
		 */
		.gtd-evid__cell {
			animation: gtdArgSettle linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 10%;
		}

		.gtd-evid__cell:nth-child(2) { animation-range: entry 23% cover 13%; }
		.gtd-evid__cell:nth-child(3) { animation-range: entry 26% cover 16%; }
		.gtd-evid__cell:nth-child(4) { animation-range: entry 29% cover 19%; }
		.gtd-evid__cell:nth-child(5) { animation-range: entry 32% cover 22%; }
	}
}

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

@media (max-width: 900px) {
	.gtd-arg__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.25rem, 4vw, 2rem);
	}

	.gtd-arg__title { max-width: 100%; }
	.gtd-arg__p,
	.gtd-arg__text,
	.gtd-arg__close { max-width: 100%; }

	.gtd-arg-pause__line { max-width: 100%; }

	/* Two across, and the lead clip takes the full width above them. */
	.gtd-evid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gtd-evid__cell--lead { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 560px) {
	.gtd-evid__grid { grid-template-columns: minmax(0, 1fr); }
	.gtd-evid__cell--lead { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
	.gtd-evid__poster,
	.gtd-evid__mark,
	.gtd-arg__link { transition: none !important; }
}