/* ─────────────────────────────────────────────────────────────
   GTD Desco — the About page.

   WHAT WAS WRONG

   The page said NOTHING about the company. Its editor content
   was empty, so `the_content()` printed a single blank <p>, and
   everything else on the page was a promo: three full-width
   slabs pointing at three other pages, then the partner row,
   then the video block, then the contact CTA.

   Those three slabs shared the ids #brochure-outter,
   #brochure-block and #brochure-content — each used three times
   on one page, which is invalid — carried inline background
   colours (red, a green #217d5a used nowhere else on this site,
   and rgb(44,44,44)), inline background-images with no alt path
   and no srcset, `alt` attributes on <a> elements, and three
   buttons all reading "MORE INFO".

   WHAT THIS DOES

   Puts the company on its own About page, in its own published
   words. The structure is the company's history read left to
   right — what it was, what changed, what it is — because GTD
   desco is the only rig manufacturer that was its own first
   customer, and that is the single fact a competitor cannot
   copy.

   The three other pages become routes underneath, named.
   ───────────────────────────────────────────────────────────── */

.gtd-about__hinge,
.gtd-about__pause,
.gtd-about__routes,
.gtd-about__body {
	--a-red:    var(--gtd-red, #c60000);
	--a-onDark: #ff5b4a;
	--a-ink:    #141313;
	--a-quiet:  #5c6666;
	--a-line:   rgba(16, 29, 29, .14);
	--a-ease:   cubic-bezier(.16, 1, .3, 1);

	/*
	 * The three columns have to start their headings on the same line. The
	 * outer two are led by a label, the middle one by the seam, so both are
	 * held to one box height and one gap rather than being eyeballed.
	 */
	--a-lead:   1.25rem;
	--a-gap:    clamp(1rem, 2vw, 1.5rem);
}

.gtd-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ═════════════════════════════════════════════════════════════
   THE HINGE
   Left to right: what the company was, what changed, what it is.
   ═════════════════════════════════════════════════════════════ */

.gtd-about__hinge {
	position: relative;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: var(--a-ink);
	padding-block: clamp(4rem, 9vw, 8rem);
}

.gtd-about__hingeInner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: start;
}

.gtd-about__label {
	display: flex;
	align-items: center;
	min-height: var(--a-lead);
	margin: 0 0 var(--a-gap);
	font-size: .74rem !important;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--a-onDark) !important;
}

.gtd-about__colTitle {
	margin: 0 0 clamp(1rem, 2vw, 1.4rem);
	/* !important answers css/type.css's `h3 { … !important }`. */
	font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.9rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

.gtd-about__colText {
	margin: 0;
	font-size: clamp(1rem, .95rem + .3vw, 1.18rem) !important;
	line-height: 1.65;
	max-width: 42ch;
	color: rgba(255, 255, 255, .72) !important;
}

/* ── the pivot ───────────────────────────────────────────────
   The middle column is the crossing itself: red rules top and
   bottom, and the sentence that turns the left column into the
   right one.
   ───────────────────────────────────────────────────────────── */

.gtd-about__pivot { position: relative; }

.gtd-about__seam {
	display: block;
	width: 100%;
	height: 3px;
	background: var(--a-red);
	transform-origin: left;
}

/* Sits in the same band the labels occupy, so all three headings line up. */
.gtd-about__seam { margin-bottom: calc(var(--a-gap) + var(--a-lead) - 3px); }
.gtd-about__seam--end {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: 0;
}

.gtd-about__pivotTitle {
	margin: 0 0 clamp(1rem, 2vw, 1.4rem);
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.9rem) !important;
	font-weight: 900;
	line-height: .96;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

.gtd-about__pivotText {
	margin: 0;
	font-size: clamp(1rem, .95rem + .3vw, 1.18rem) !important;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78) !important;
}

/* ═════════════════════════════════════════════════════════════
   THE PAUSE
   One line, at the scale the claim deserves. Their own sentence.
   ═════════════════════════════════════════════════════════════ */

.gtd-about__pause {
	padding-block: clamp(4rem, 9vw, 8rem);
	background: #fff;
}

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

.gtd-about__pauseText {
	margin: 0;
	font-size: clamp(2rem, 1.1rem + 3.1vw, 5rem) !important;
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--gtd-ink, #101d1d) !important;
	max-width: 22ch;
	text-wrap: balance;
}

.gtd-about__pauseText em {
	font-style: normal;
	color: var(--a-red);
}

/* ═════════════════════════════════════════════════════════════
   THE EDITOR CONTENT
   Prints only when someone writes some.
   ═════════════════════════════════════════════════════════════ */

.gtd-about__body {
	padding-bottom: clamp(3rem, 6vw, 5rem);
	max-width: 68ch;
}

.gtd-about__body p {
	font-size: clamp(1.02rem, .96rem + .3vw, 1.22rem) !important;
	line-height: 1.7;
	color: #23302f !important;
}

/* ═════════════════════════════════════════════════════════════
   THE ROUTES
   Three signposts, not three slabs.
   ═════════════════════════════════════════════════════════════ */

.gtd-about__routes { padding-block: clamp(1rem, 2vw, 2rem) clamp(3.5rem, 7vw, 6rem); }

.gtd-about__routesHead {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.gtd-about__routesRule {
	flex: none;
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	background: var(--a-red);
	transform-origin: left;
}

.gtd-about__routesTitle {
	margin: 0;
	font-size: clamp(1.35rem, 1.05rem + .95vw, 2.1rem) !important;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--gtd-ink, #101d1d) !important;
}

.gtd-about__routeList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtd-about__route {
	position: relative;
	list-style: none;
	padding-top: clamp(1rem, 2vw, 1.4rem);
	border-top: 1px solid var(--a-line);
}

.gtd-about__routeFigure {
	overflow: hidden;
	margin-bottom: clamp(1rem, 2vw, 1.4rem);
	aspect-ratio: 16 / 10;
	background: #e9ebeb;
}

.gtd-about__routeImg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .7s var(--a-ease);
}

.gtd-about__route:hover .gtd-about__routeImg { transform: scale(1.04); }

.gtd-about__routeTitle {
	margin: 0 0 .5rem;
	font-size: clamp(1.15rem, 1rem + .55vw, 1.6rem) !important;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--gtd-ink, #101d1d) !important;
}

/*
 * The label's text lives inside this anchor, and css/type.css sets
 * `p, a, li { font-size: var(--t-body) !important }` — which beats the heading
 * that wraps it. Same trap as the downloads and news pages.
 */
.gtd-about__routeTitle .gtd-about__routeLink {
	font: inherit !important;
	letter-spacing: inherit;
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--a-red), var(--a-red));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 3px;
	transition: background-size .45s var(--a-ease);
}

.gtd-about__route:hover .gtd-about__routeLink,
.gtd-about__routeLink:focus-visible { background-size: 100% 3px; }

.gtd-about__routeLink::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

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

.gtd-about__routeText {
	margin: 0;
	font-size: clamp(.92rem, .88rem + .2vw, 1.05rem) !important;
	line-height: 1.55;
	color: var(--a-quiet) !important;
}

/* ═════════════════════════════════════════════════════════════
   THE MOMENT
   The hinge assembles as it is scrolled to: the left column, the
   seam drawing across, then the right — the crossing happening
   in the order it happened.
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes gtdAboutRise {
			from { opacity: 0; transform: translate3d(0, 28px, 0); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes gtdAboutDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

		.gtd-about__col--then { animation: gtdAboutRise linear both; animation-timeline: view(); animation-range: entry 12% cover 8%; }
		.gtd-about__seam      { animation: gtdAboutDraw linear both; animation-timeline: view(); animation-range: entry 18% cover 12%; }
		.gtd-about__pivot > :not(.gtd-about__seam) { animation: gtdAboutRise linear both; animation-timeline: view(); animation-range: entry 20% cover 14%; }
		.gtd-about__col--now  { animation: gtdAboutRise linear both; animation-timeline: view(); animation-range: entry 26% cover 20%; }

		.gtd-about__pauseRule { animation: gtdAboutDraw linear both; animation-timeline: view(); animation-range: entry 20% cover 6%; }
		.gtd-about__pauseText { animation: gtdAboutRise linear both;  animation-timeline: view(); animation-range: entry 18% cover 8%; }

		.gtd-about__route { animation: gtdAboutRise linear both; animation-timeline: view(); animation-range: entry 12% cover 10%; }
		.gtd-about__route:nth-child(2) { animation-range: entry 16% cover 14%; }
		.gtd-about__route:nth-child(3) { animation-range: entry 20% cover 18%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtd-about__routeImg { transition: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   SMALLER SCREENS
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.gtd-about__hingeInner { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); }
	.gtd-about__colText { max-width: 60ch; }
	/* Stacked, the seam is the join between the column above and the one below. */
	.gtd-about__seam { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
}

@media (max-width: 900px) {
	.gtd-about__routeList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.gtd-about__routeList { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════════════════════════════════════════════
   THE CLAIM
   Shared by Our Facilities, Driller Focused Support and Our
   Story — see includes/our-story-content-area-1.php.

   Was a pale grey #E8EAED band with the line centred inside it
   and a green quotation mark hanging 25px outside each corner,
   diagonally opposite one another. All three lines it wrapped
   are the company's own assertions, so the quote marks read as
   a citation nobody could produce; and the About page already
   sets one of those three sentences as a plain statement, so
   the site disagreed with itself about the same words.

   Red, because on these pages this is the loudest thing said
   and it should be the loudest thing on the screen. The rule
   inverts to white, the way the red CTA panel inverts its
   button.
   ═════════════════════════════════════════════════════════════ */

.gtd-claim {
	--c-red: var(--gtd-red, #c60000);

	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: var(--c-red);
	padding-block: clamp(3rem, 7vw, 6rem);
	/*
	 * No margin of its own: the prose sections above and below already carry
	 * their padding, and stacking a margin on top of that put nearly 200px of
	 * white on each side of the band.
	 */
	margin-block: 0;
}

.gtd-claim__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem);
	background: #fff;
	transform-origin: left;
}

.gtd-claim__text {
	margin: 0;
	font-size: clamp(1.8rem, 1rem + 2.7vw, 4.5rem) !important;
	font-weight: 900;
	line-height: .94;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: #fff !important;
	max-width: 22ch;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/*
 * The trailing paragraph sits under the body column rather than running the
 * full width of the container — it was setting about 120 characters a line.
 */
.gtd-fac__say--tail .gtd-fac__sayBody { grid-column: 2; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.gtd-claim__rule {
			animation: gtdAboutDraw linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 10%;
		}
		.gtd-claim__text {
			animation: gtdAboutRise linear both;
			animation-timeline: view();
			animation-range: entry 22% cover 12%;
		}
	}
}

@media (max-width: 1100px) {
	.gtd-fac__say--tail .gtd-fac__sayBody { grid-column: 1; }
}