/* ─────────────────────────────────────────────────────────────
   GTD Desco — Contact.

   WHAT WAS WRONG

   The page the whole site points at was a WPForms shortcode
   under one line of copy, four addresses as bare <ul>s in
   Bootstrap quarters, an inline <style> block forcing the form
   to 80% width, and a `<div id="contact-us-block">` reusing the
   id of the site's closing CTA. No map. No indication of who
   picks it up. "SOUTH KORIA", twice.

   The form asked five things — name, email, phone, location,
   message — so every enquiry started with the same round of
   questions on the phone.

   WHAT THIS DOES

   The form is the page, and it is directly under the banner:
   nobody scrolls past marketing to reach the thing the page
   exists for. It asks what a driller would be asked anyway, in
   one pass, and it works with JavaScript blocked.

   Below it, a drawn world map — real Natural Earth coastline on
   a square grid, in the site's own red and ink, with no API key
   and no third-party script.

   THE MOMENT

   The map draws itself west to east, a column at a time, and
   the four pins land after it.
   ───────────────────────────────────────────────────────────── */

.gtd-enq,
.gtd-where {
	--k-red:    var(--gtd-red, #c60000);
	--k-onDark: #ff5b4a;
	--k-ink:    #141313;
	--k-quiet:  #5c6666;
	--k-line:   #c9cfcf;
	--k-ease:   cubic-bezier(.16, 1, .3, 1);
}

/* ═════════════════════════════════════════════════════════════
   THE FORM
   ═════════════════════════════════════════════════════════════ */

.gtd-enq { padding-block: clamp(3rem, 7vw, 6rem); }

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

.gtd-enq__aside { position: sticky; top: clamp(8rem, 14vh, 11rem); }

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

.gtd-enq__title {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	/* !important answers css/type.css's `h2 { … !important }`. */
	font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3.6rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--gtd-ink, #101d1d) !important;
	text-wrap: balance;
}

.gtd-enq__lede {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-size: clamp(1rem, .95rem + .3vw, 1.18rem) !important;
	line-height: 1.62;
	max-width: 40ch;
	color: var(--k-quiet) !important;
}

.gtd-enq__promises {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--k-line);
}

.gtd-enq__promises li {
	padding: .85rem 0 .85rem 1.6rem;
	border-bottom: 1px solid var(--k-line);
	font-size: .95rem !important;
	line-height: 1.5;
	color: var(--gtd-ink, #101d1d) !important;
	position: relative;
}

/* Square, like everything else here. */
.gtd-enq__promises li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35em;
	width: 8px;
	height: 8px;
	background: var(--k-red);
}

/* ── the fields ─────────────────────────────────────────────── */

.gtd-enq__form { margin: 0; }

.gtd-enq__set {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	padding: 0;
	border: 0;
}

.gtd-enq__legend,
.gtd-enq__field label,
.gtd-enq__optin label {
	display: block;
	margin-bottom: .6rem;
	padding: 0;
	font-size: .78rem !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gtd-ink, #101d1d) !important;
}

.gtd-enq__req {
	margin-left: .5rem;
	font-size: .95em;
	letter-spacing: .1em;
	color: var(--k-red);
}

/* Enquiry type as square chips — a radio group you can hit with a glove on. */
.gtd-enq__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.gtd-enq__chip { position: relative; }

.gtd-enq__chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gtd-enq__chip span {
	display: block;
	padding: .8rem 1.1rem;
	border: 1px solid var(--k-line);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	color: var(--gtd-ink, #101d1d);
	transition: background-color .2s var(--k-ease), border-color .2s var(--k-ease), color .2s var(--k-ease);
}

.gtd-enq__chip input:hover + span { border-color: var(--gtd-ink, #101d1d); }
.gtd-enq__chip input:checked + span {
	background: var(--k-red);
	border-color: var(--k-red);
	color: #fff;
}
.gtd-enq__chip input:focus-visible + span {
	outline: 3px solid var(--k-red);
	outline-offset: 3px;
}

.gtd-enq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 1.75rem);
}

.gtd-enq__field { margin: 0; }
.gtd-enq__field--wide { grid-column: 1 / -1; }

.gtd-enq__field :is(input, select, textarea) {
	display: block;
	width: 100%;
	padding: .95rem 1rem;
	background: #fff;
	border: 1px solid var(--k-line);
	border-radius: 0;
	font-family: inherit;
	font-size: 1rem !important;
	line-height: 1.4;
	color: var(--gtd-ink, #101d1d);
	transition: border-color .2s var(--k-ease), box-shadow .2s var(--k-ease);
	-webkit-appearance: none;
	appearance: none;
}

.gtd-enq__field textarea { resize: vertical; min-height: 9rem; }

/* The chevron, drawn — no background-image request for one arrow. */
.gtd-enq__field select {
	padding-right: 2.75rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--gtd-ink, #101d1d) 50%),
		linear-gradient(135deg, var(--gtd-ink, #101d1d) 50%, transparent 50%);
	background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.gtd-enq__field :is(input, select, textarea):hover { border-color: #8e9797; }

.gtd-enq__field :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--k-red);
	box-shadow: inset 0 0 0 2px var(--k-red);
}

.gtd-enq__field [aria-invalid="true"] { border-color: var(--k-red); }

.gtd-enq__hint {
	display: block;
	margin-top: .5rem;
	font-size: .85rem;
	line-height: 1.45;
	color: var(--k-quiet);
}

.gtd-enq__msg {
	display: block;
	margin: .5rem 0 0;
	font-size: .85rem !important;
	font-weight: 700;
	line-height: 1.4;
	color: var(--k-red) !important;
}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.gtd-enq__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gtd-enq__optin {
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--k-line);
}

.gtd-enq__optin label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
	margin: 0;
	font-size: .95rem !important;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--k-quiet) !important;
	cursor: pointer;
}

.gtd-enq__optin input {
	width: 1.25rem;
	height: 1.25rem;
	margin: .1rem 0 0;
	accent-color: var(--k-red);
}

.gtd-enq__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.gtd-enq__button {
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.gtd-enq__privacy {
	font-size: .82rem;
	line-height: 1.5;
	max-width: 34ch;
	color: var(--k-quiet);
}

.gtd-enq__privacy a { color: var(--gtd-ink, #101d1d); }

/* ── it did not send ────────────────────────────────────────── */

.gtd-enq__errors {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.5vw, 1.75rem);
	background: #fdf0f0;
	border-top: 3px solid var(--k-red);
}

.gtd-enq__errorsTitle {
	margin: 0 0 .6rem;
	font-size: 1rem !important;
	font-weight: 700;
	color: var(--gtd-ink, #101d1d) !important;
}

.gtd-enq__errors ul { margin: 0; padding-left: 1.1rem; }
.gtd-enq__errors li { font-size: .95rem !important; line-height: 1.5; }
.gtd-enq__errors a { color: var(--k-red) !important; }

/* ── it sent ────────────────────────────────────────────────── */

.gtd-enq__done {
	padding: clamp(2rem, 4vw, 3.25rem);
	background: var(--k-ink);
}

.gtd-enq__doneRule { background: #fff; }

.gtd-enq__doneTitle {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem) !important;
	font-weight: 900;
	line-height: .96;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
}

.gtd-enq__done p {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-size: 1.08rem !important;
	line-height: 1.62;
	max-width: 50ch;
	color: rgba(255, 255, 255, .8) !important;
}

.gtd-enq__done a { color: #fff; }
.gtd-enq__done .red-info-button { color: #fff !important; }

/* ═════════════════════════════════════════════════════════════
   WHERE WE ARE
   ═════════════════════════════════════════════════════════════ */

.gtd-where {
	padding-block: clamp(3rem, 7vw, 6rem);
	background: var(--k-ink);
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	color: #fff;
}

.gtd-where__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.gtd-where__title {
	margin: 0 0 1rem;
	font-size: clamp(1.7rem, 1.05rem + 2.1vw, 3.4rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

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

/* ── the map ────────────────────────────────────────────────── */

.gtd-map { margin: 0 0 clamp(2rem, 4vw, 3.5rem); }

.gtd-map__frame {
	position: relative;
	width: 100%;
}

.gtd-map__svg {
	display: block;
	width: 100%;
	height: auto;
	color: rgba(255, 255, 255, .26);
}

.gtd-map__pin {
	position: absolute;
	left: var(--px);
	top: var(--py);
	display: flex;
	align-items: center;
	gap: .55rem;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.gtd-map__pin--left { flex-direction: row-reverse; }

.gtd-map__dot {
	flex: none;
	display: block;
	width: clamp(9px, .75vw, 13px);
	height: clamp(9px, .75vw, 13px);
	background: var(--k-red);
	box-shadow: 0 0 0 4px rgba(198, 0, 0, .28);
}

.gtd-map__name {
	font-size: clamp(.62rem, .5rem + .3vw, .82rem);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 6px rgba(13, 20, 20, .9);
	transform: translateY(var(--ny, 0));
}

/* ── the addresses ──────────────────────────────────────────── */

.gtd-where__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
	padding: 0;
	list-style: none;
}

.gtd-where__place {
	padding-top: clamp(1rem, 2vw, 1.4rem);
	border-top: 3px solid var(--k-red);
}

.gtd-where__placeName {
	margin: 0 0 .6rem;
	font-size: clamp(1rem, .92rem + .35vw, 1.3rem) !important;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: #fff !important;
}

.gtd-where__placeNote {
	display: block;
	margin-top: .3rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--k-onDark);
}

.gtd-where__address {
	font-style: normal;
	font-size: .92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
}

.gtd-where__tel {
	display: inline-block;
	margin-top: .5rem;
	font-size: .92rem;
	font-weight: 700;
	color: #fff !important;
}

.gtd-where__mail {
	margin: 0;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: clamp(1rem, .95rem + .3vw, 1.18rem) !important;
	color: rgba(255, 255, 255, .72) !important;
}

.gtd-where__mail a { color: #fff !important; text-decoration: underline; text-decoration-color: var(--k-onDark); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* ═════════════════════════════════════════════════════════════
   THE MOMENT
   The map draws west to east, then the pins land.
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes gtdMapCol { from { opacity: 0; } to { opacity: 1; } }
		@keyframes gtdMapPin { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
		@keyframes gtdEnqRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }

		/*
		 * One column of the grid is one path, which is exactly the unit this
		 * animates on: 89 delays instead of 1,169.
		 */
		.gtd-map__col {
			animation: gtdMapCol .5s var(--k-ease) backwards;
			animation-delay: calc(var(--c) * 9ms);
		}

		.gtd-map__pin {
			animation: gtdMapPin .55s var(--k-ease) backwards;
			animation-delay: calc(900ms + var(--pi) * 110ms);
		}

		.gtd-where__head,
		.gtd-where__place { animation: gtdEnqRise linear both; animation-timeline: view(); animation-range: entry 14% cover 10%; }
		.gtd-where__place:nth-child(2) { animation-range: entry 17% cover 13%; }
		.gtd-where__place:nth-child(3) { animation-range: entry 20% cover 16%; }
		.gtd-where__place:nth-child(4) { animation-range: entry 23% cover 19%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtd-enq__chip span,
	.gtd-enq__field :is(input, select, textarea) { transition: none !important; }
}

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

@media (max-width: 1100px) {
	.gtd-enq__inner { grid-template-columns: minmax(0, 1fr); }
	.gtd-enq__aside { position: static; }
	.gtd-enq__lede { max-width: 60ch; }
	.gtd-where__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.gtd-enq__grid { grid-template-columns: minmax(0, 1fr); }
	/*
	 * The pin labels stop fitting long before the map does, so below this the
	 * map is the picture and the addresses underneath are the names.
	 */
	.gtd-map__name { display: none; }
}

@media (max-width: 560px) {
	.gtd-where__list { grid-template-columns: minmax(0, 1fr); }
	.gtd-enq__submit { flex-direction: column; align-items: flex-start; }
}