/* ==========================================================================
   TheCodeWork — Contact
   The page at /contact/. Scoped entirely under .tcwc so nothing here can
   reach another template. Plain CSS outside the Tailwind bundle, on the same
   terms as the homepage and the blog: one bespoke composition, loaded only
   where it renders, and an edit here never needs a build.
   Sizing is in px on purpose: the theme sets html{font-size:15px} and 18px at
   md, which makes rem unreliable across breakpoints.

   The page has one dark band, Other conversations (section 11), and there
   the "never #46659b on navy" rule of the blue ramp applies: its lines and
   links take --tcwc-blue-light and a lighter glow, not --tcwc-blue.

   Contents
     1. Tokens
     2. Shell, type and shared components
     3. Drafting furniture
     4. Hero: the left column
     5. The node curve
     6. The choice card
     7. Path A: Pathfinder
     8. Path B: the brief form
     9. The three-step band
    10. The stats row
    11. The lower sections
    12. Motion
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

.tcwc {
	/* Colour: the site's one blue ramp, the logo's own #46659B in the middle -- */
	--tcwc-bg: #eef3fa;
	--tcwc-surface: #ffffff;
	--tcwc-ice: #e5eaf3;
	--tcwc-ink: #0f1e3a;
	--tcwc-ink-2: #3d4d6b;
	--tcwc-ink-3: #6c7c99;
	--tcwc-blue: #46659b;
	--tcwc-blue-dark: #38517d;
	--tcwc-blue-deep: #2d4164;
	--tcwc-blue-soft: #e5eaf3;
	--tcwc-blue-light: #a9bad8;
	--tcwc-green: #1eb980;
	--tcwc-line: rgba(15, 30, 58, 0.10);
	--tcwc-line-2: rgba(15, 30, 58, 0.16);

	/* Type ------------------------------------------------------------------- */
	--tcwc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;

	/* Space and shape: the site shell, so every page keeps one measure -------- */
	--tcwc-content: var(--tcw-content, 1280px);
	--tcwc-pad: var(--tcw-gutter, 24px);
	--tcwc-section: clamp(40px, 4.6vw, 72px);
	--tcwc-gap: clamp(16px, 1.6vw, 24px);
	--tcwc-r-card: 18px;
	--tcwc-r-sm: 10px;
	--tcwc-r-pill: 999px;

	/* Elevation and motion --------------------------------------------------- */
	--tcwc-shadow-sm: 0 1px 2px rgba(15, 30, 58, 0.05);
	--tcwc-shadow: 0 1px 2px rgba(15, 30, 58, 0.04), 0 16px 36px -24px rgba(15, 30, 58, 0.30);
	--tcwc-shadow-lg: 0 2px 4px rgba(15, 30, 58, 0.04), 0 28px 60px -30px rgba(15, 30, 58, 0.36);
	--tcwc-t: 200ms;
	--tcwc-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	position: relative;
	background: var(--tcwc-bg);
	color: var(--tcwc-ink);
	font-family: var(--tcwc-font);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.tcwc *,
.tcwc *::before,
.tcwc *::after {
	box-sizing: border-box;
}

/* The site header gives every page's first section a full measure of air beneath its card
   (site-header.css). This page opens on a drawing rather than a band of colour, and that much
   empty grid reads as a mistake, so it takes the room the header needs and a little more. Two
   classes, because the header's rule counts its :nth-child() as well as its id. */
#main > .tcwc.no-reveal {
	padding-top: calc(var(--hd-h, 70px) + var(--hd-top, 0px) + 34px) !important;
}


/* ==========================================================================
   2. Shell, type and shared components
   ========================================================================== */

.tcwc-shell {
	position: relative;
	width: 100%;
	max-width: calc(var(--tcwc-content) + (var(--tcwc-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--tcwc-pad);
}

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

/* The eyebrow carries a rule to its right, as the mockup draws it. */
.tcwc-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tcwc-blue);
}

.tcwc-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	max-width: 88px;
	background: var(--tcwc-blue-light);
}

.tcwc-eyebrow--plain::after {
	display: none;
}

.tcwc-h2 {
	margin: 0;
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.18;
	color: var(--tcwc-ink);
}

.tcwc-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tcwc-blue);
	text-decoration: none;
}

.tcwc-link svg {
	transition: transform var(--tcwc-t) var(--tcwc-ease);
}

.tcwc-link:hover {
	color: var(--tcwc-blue-dark);
}

.tcwc-link:hover svg {
	transform: translateX(3px);
}

.tcwc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--tcwc-r-sm);
	background: var(--tcwc-blue);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tcwc-t) var(--tcwc-ease), border-color var(--tcwc-t) var(--tcwc-ease), color var(--tcwc-t) var(--tcwc-ease);
}

.tcwc-btn:hover {
	background: var(--tcwc-blue-dark);
	color: #fff;
}

.tcwc-btn svg {
	flex: none;
	transition: transform var(--tcwc-t) var(--tcwc-ease);
}

.tcwc-btn:hover svg {
	transform: translateX(3px);
}

/* The second path's button: the same shape, quieter, so the recommended one leads. */
.tcwc-btn--ghost {
	background: var(--tcwc-surface);
	border-color: var(--tcwc-line-2);
	color: var(--tcwc-ink);
}

.tcwc-btn--ghost:hover {
	background: var(--tcwc-blue-soft);
	border-color: var(--tcwc-blue-light);
	color: var(--tcwc-blue-dark);
}

/* Icons::outline() puts its size on a Tailwind class, and these views pass an empty one so the
   bundle's utilities do not leak into a plain-CSS page. That means the sizes live here. An SVG
   with a viewBox and no width fills whatever box it is given, so every one of them needs a size. */
.tcwc-btn svg,
.tcwc-link svg,
.tcwc-tick svg,
.tcwc-choice__note svg,
.tcwc-file__face svg {
	width: 16px;
	height: 16px;
}

.tcwc-btn svg {
	width: 15px;
	height: 15px;
}

.tcwc-assurance__icon svg,
.tcwc-office__icon svg {
	width: 17px;
	height: 17px;
}

/* A focused control inside a card must show on the card, not behind it. */
.tcwc a:focus-visible,
.tcwc button:focus-visible,
.tcwc input:focus-visible,
.tcwc select:focus-visible,
.tcwc textarea:focus-visible {
	outline: 2px solid var(--tcwc-blue);
	outline-offset: 3px;
	border-radius: 4px;
}


/* ==========================================================================
   3. Drafting furniture
   ==========================================================================
   Marks on paper: the grid, the cross ticks, the small notes and the four
   vertical labels down the edges. Every one of them sits inside a single
   aria-hidden container and repeats nothing that is written on the page, so
   they are decoration in the accessibility tree and content nowhere. They are
   still kept near a 3:1 ratio so they read as drafting marks rather than
   disappearing on a dim screen.
   ========================================================================== */

.tcwc-furniture {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* The faint drafting grid, as the homepage draws it: fine 26px lines with a
   heavier 130px line every fifth one. */
.tcwc-paper-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(70, 101, 155, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(70, 101, 155, 0.05) 1px, transparent 1px),
		linear-gradient(to right, rgba(70, 101, 155, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(70, 101, 155, 0.08) 1px, transparent 1px);
	background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

.tcwc-mark {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	color: rgba(70, 101, 155, 0.32);
}

.tcwc-mark::before,
.tcwc-mark::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.tcwc-mark::before {
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
}

.tcwc-mark::after {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
}

@media (max-width: 1099px) {
	.tcwc-mark {
		display: none;
	}
}

/* The vertical labels down the two edges. */
.tcwc-edge {
	position: absolute;
	left: var(--x);
	top: var(--y);
	margin: 0;
	writing-mode: vertical-rl;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(70, 101, 155, 0.68);
}

.tcwc-edge--up {
	rotate: 180deg;
}

@media (max-width: 1279px) {
	.tcwc-edge {
		display: none;
	}
}


/* ==========================================================================
   4. Hero: the left column
   ==========================================================================
   The air above the hero is a margin, not padding. site-header.css zeroes the
   top padding of the first child of the page's first section (it has already
   given that space once, on #main), so padding here would be thrown away.
   ========================================================================== */

.tcwc-hero {
	position: relative;
	margin-top: clamp(18px, 2.4vw, 34px);
	padding-bottom: var(--tcwc-section);
}

.tcwc-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 3.6vw, 52px);
	align-items: start;
}

@media (min-width: 1100px) {
	.tcwc-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
		gap: clamp(36px, 4vw, 64px);
	}
}

.tcwc-hero__title {
	margin: 18px 0 0;
	max-width: 17ch;
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;
	color: var(--tcwc-ink);
}

.tcwc-hero__lead {
	margin: 18px 0 0;
	max-width: 52ch;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.6;
	color: var(--tcwc-ink-2);
}

/* The three assurances. */
.tcwc-assurances {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.tcwc-assurance {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--tcwc-line);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--tcwc-ink-2);
}

.tcwc-assurance:last-child {
	border-bottom: 1px solid var(--tcwc-line);
}

.tcwc-assurance__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tcwc-blue-soft);
	color: var(--tcwc-blue);
}

.tcwc-assurance__icon svg {
	width: 17px;
	height: 17px;
}

.tcwc-hero__more {
	margin: 22px 0 0;
}


/* ==========================================================================
   5. The node curve
   ==========================================================================
   Two stacked paths, because a dotted line and a line that draws itself both
   want stroke-dasharray and cannot share one path: the dotted one is the
   route, always there, and the solid one is drawn along it on scroll.
   ========================================================================== */

.tcwc-curve {
	display: block;
	width: 100%;
	height: auto;
	margin-top: clamp(26px, 3vw, 42px);
	overflow: visible;
}

.tcwc-curve__dots {
	fill: none;
	stroke: var(--tcwc-blue);
	stroke-width: 1.4;
	stroke-dasharray: 2 6;
	stroke-linecap: round;
	stroke-opacity: 0.45;
}

.tcwc-curve__draw {
	fill: none;
	stroke: var(--tcwc-blue);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-opacity: 0.75;
}

/* One rule draws the path at any size: the dash is a hair longer than the
   path so a full offset leaves no cap showing. */
html.js .tcwc-curve__draw {
	stroke-dasharray: 1.001;
	stroke-dashoffset: calc(1.001 - var(--p, 0) * 1.001);
	transition: stroke-dashoffset 1100ms var(--tcwc-ease);
}

.tcwc-curve__node circle {
	fill: var(--tcwc-surface);
	stroke: var(--tcwc-blue);
	stroke-width: 2;
}

.tcwc-curve__halo {
	fill: var(--tcwc-blue-soft);
	stroke: none;
	opacity: 0;
	transition: opacity 420ms var(--tcwc-ease);
}

.tcwc-curve__node text {
	fill: var(--tcwc-ink-2);
	font-family: var(--tcwc-font);
	font-size: 13px;
	font-weight: 600;
	text-anchor: middle;
}

html.js .tcwc-curve__node {
	opacity: 0;
	transition: opacity 420ms var(--tcwc-ease);
	transition-delay: calc(var(--i, 0) * 110ms);
}

html.js .tcwc-curve__node.is-on {
	opacity: 1;
}

html.js .tcwc-curve__node.is-on .tcwc-curve__halo {
	opacity: 1;
}

@media (max-width: 760px) {
	.tcwc-curve {
		display: none;
	}
}

/* The miniature echo inside the recommended card. */
.tcwc-curve--mini {
	margin-top: 0;
}

.tcwc-curve--mini .tcwc-curve__node text {
	font-size: 15px;
}

@media (max-width: 760px) {
	.tcwc-curve--mini {
		display: block;
	}
}


/* ==========================================================================
   6. The choice card
   ========================================================================== */

.tcwc-choice {
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--tcwc-surface);
	border: 1px solid var(--tcwc-line);
	border-radius: var(--tcwc-r-card);
	box-shadow: var(--tcwc-shadow-lg);
}

.tcwc-choice__title {
	margin: 12px 0 0;
	font-size: clamp(19px, 1.9vw, 23px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--tcwc-ink);
}

.tcwc-choice__sub {
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tcwc-ink-2);
}

.tcwc-options {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-top: 20px;
}

@media (min-width: 900px) {
	.tcwc-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tcwc-option {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--tcwc-line-2);
	border-radius: 14px;
	background: var(--tcwc-surface);
	transition: border-color var(--tcwc-t) var(--tcwc-ease), box-shadow var(--tcwc-t) var(--tcwc-ease), background-color var(--tcwc-t) var(--tcwc-ease);
}

/* The chosen path carries the emphasis. :has() means this works with no
   script at all, which is why the choice is a radio group and not a button. */
.tcwc-option:has(:checked) {
	border-color: var(--tcwc-blue);
	box-shadow: 0 0 0 3px rgba(70, 101, 155, 0.12);
}

.tcwc-option:has(:focus-visible) {
	outline: 2px solid var(--tcwc-blue);
	outline-offset: 3px;
}

/* The head is a label so the whole block selects the path. The body is
   outside it on purpose: a label wrapping a button would toggle the radio
   every time the button was pressed. */
.tcwc-option__head {
	display: block;
	cursor: pointer;
}

.tcwc-option__badge {
	display: inline-block;
	margin-bottom: 9px;
	padding: 4px 10px;
	border-radius: var(--tcwc-r-pill);
	background: var(--tcwc-blue-soft);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcwc-blue-dark);
}

.tcwc-option__title {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--tcwc-ink);
}

.tcwc-option__text {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tcwc-ink-2);
}

.tcwc-option__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin-top: 14px;
}

/* Narrow: only the chosen path is open, so the card is not two long forms
   stacked. Wide: both are open, as the design draws them, and the choice
   shows as emphasis rather than as a fold. */
@media (max-width: 899px) {
	.tcwc-option:not(:has(:checked)) .tcwc-option__body {
		display: none;
	}

	.tcwc-option:not(:has(:checked)) .tcwc-option__head::after {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		margin: 10px auto 0;
		border-right: 2px solid var(--tcwc-blue-light);
		border-bottom: 2px solid var(--tcwc-blue-light);
		transform: rotate(45deg);
	}
}

.tcwc-ticks {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.tcwc-tick {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 7px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--tcwc-ink-2);
}

.tcwc-tick:last-child {
	margin-bottom: 0;
}

.tcwc-tick svg {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	color: var(--tcwc-green);
}

.tcwc-option__action {
	margin-top: auto;
	padding-top: 16px;
}

/* The note across the foot of the card. */
.tcwc-choice__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--tcwc-line);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tcwc-ink-3);
}

.tcwc-choice__note svg {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 1px;
	color: var(--tcwc-blue);
}

/* The third way to begin: email the founders. A soft band at the foot of the
   card, icon, two lines and the address as a pill, so it carries the same
   weight as a real option without competing with the two cards above it.
   The pill wraps under the text on a narrow screen. */
.tcwc-direct {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--tcwc-line);
	border-radius: var(--tcwc-r-sm);
	background: var(--tcwc-blue-soft);
}

.tcwc-direct__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--tcwc-surface);
	color: var(--tcwc-blue);
	box-shadow: var(--tcwc-shadow-sm);
}

.tcwc-direct__icon svg {
	width: 18px;
	height: 18px;
}

.tcwc-direct__body {
	flex: 1 1 220px;
	min-width: 0;
}

.tcwc-direct__title {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.3;
	color: var(--tcwc-ink);
}

.tcwc-direct__text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tcwc-ink-2);
}

/* Specific enough to beat the page's own link colour. */
.tcwc-choice .tcwc-direct__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 1px solid var(--tcwc-blue);
	border-radius: var(--tcwc-r-pill);
	background: var(--tcwc-surface);
	color: var(--tcwc-blue-deep);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--tcwc-t) var(--tcwc-ease), color var(--tcwc-t) var(--tcwc-ease);
}

.tcwc-choice .tcwc-direct__link:hover {
	background: var(--tcwc-blue);
	color: #ffffff;
}

.tcwc-direct__link svg {
	width: 14px;
	height: 14px;
}


/* ==========================================================================
   7. Path A: Pathfinder
   ==========================================================================
   The card holds the button and an empty container, and the container stays
   empty: the conversation happens in a dialog that the Enquries plugin prints
   at the end of the document, out of this page's reach. That is deliberate.
   Inside .tcwc the dialog picked up the focus ring below, which is written
   loud for a page of links and far too heavy around a field someone is typing
   into, and it would have been caught by the script that marks a collapsed
   card inert. The page is complete without an engine at all, in which case
   the button opens the brief form instead.
   ========================================================================== */

.tcwc-pf__figure {
	padding: 14px;
	border-radius: 12px;
	background: var(--tcwc-bg);
}

.tcwc-pf__mount:empty {
	display: none;
}


/* ==========================================================================
   8. Path B: the brief form
   ==========================================================================
   The preview fields on the option card are the theme's own markup, so they
   are styled here with plain selectors. The full form inside the dialog is
   the Enquries plugin's, Tailwind classes and all, and is left as it is:
   this theme's Tailwind ships every utility with !important, so restyling
   that markup from here would mean fighting it on each property. That
   restyle, through the plugin's enquries_form_template filter, is the parked
   phase two of the contact page.
   ========================================================================== */

.tcwc-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 11px;
}

.tcwc-field__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--tcwc-ink-2);
}

.tcwc-field input[type="text"],
.tcwc-field input[type="email"],
.tcwc-field input[type="tel"],
.tcwc-field select,
.tcwc-field textarea {
	width: 100%;
	min-height: 40px;
	padding: 9px 12px;
	border: 1px solid var(--tcwc-line);
	border-radius: var(--tcwc-r-sm);
	background: #fbfcfe;
	font-family: inherit;
	font-size: 14px;
	color: var(--tcwc-ink);
	appearance: none;
}

.tcwc-field textarea {
	min-height: 74px;
	resize: vertical;
}

.tcwc-field input::placeholder,
.tcwc-field textarea::placeholder {
	color: var(--tcwc-ink-3);
}

.tcwc-field input:focus,
.tcwc-field select:focus,
.tcwc-field textarea:focus {
	outline: none;
	border-color: var(--tcwc-blue-light);
	box-shadow: 0 0 0 3px rgba(70, 101, 155, 0.14);
}

/* The attachment. The input stays a real file input and stays focusable: a
   control that is hidden but still in the tab order strands a keyboard, so it
   is clipped rather than removed and its face lights when it is focused. */
.tcwc-file {
	margin-top: 4px;
}

.tcwc-file__face {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	border: 1px dashed var(--tcwc-line-2);
	border-radius: var(--tcwc-r-sm);
	background: #fbfcfe;
	font-size: 13px;
	font-weight: 600;
	color: var(--tcwc-blue);
	cursor: pointer;
	transition: border-color var(--tcwc-t) var(--tcwc-ease), background-color var(--tcwc-t) var(--tcwc-ease);
}

.tcwc-file__face:hover {
	border-color: var(--tcwc-blue-light);
	background: var(--tcwc-blue-soft);
}

.tcwc-file input:focus-visible + .tcwc-file__face {
	outline: 2px solid var(--tcwc-blue);
	outline-offset: 3px;
}

.tcwc-file__face svg {
	width: 16px;
	height: 16px;
}

.tcwc-file__help {
	margin: 7px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--tcwc-ink-3);
}

.tcwc-file__status {
	margin: 5px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--tcwc-blue);
}

.tcwc-file__status:empty {
	display: none;
}


/* The full brief form, a <dialog> opened by either path. It has its own room
   because the enquiry form asks for more than either option card has space
   for: a budget and a captcha as well as the three fields the cards preview.
   Those are required by the endpoint, and loosening that to match a narrower
   card would trade spam protection for symmetry.

   A dialog since 16 September 2026; before that a section the page scrolled
   down to. It sits outside .tcwc (see the template), so the tokens it needs
   are declared again here, the same values. The dialog lives in the top
   layer, so nothing here needs a z-index. Sized and dressed like the
   Pathfinder dialog in the Enquries plugin, so the two ways to begin open
   the same kind of window. */
.tcwc-brief {
	--tcwc-surface: #ffffff;
	--tcwc-ink: #0f1e3a;
	--tcwc-ink-2: #3d4d6b;
	--tcwc-blue: #46659b;
	--tcwc-blue-deep: #2d4164;
	--tcwc-blue-soft: #e5eaf3;
	--tcwc-line: rgba(15, 30, 58, 0.10);
	--tcwc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Lato", Helvetica, Arial, sans-serif;
	--tcwc-r-card: 18px;
	--tcwc-t: 200ms;
	--tcwc-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	width: min(760px, calc(100vw - 32px));
	max-height: min(920px, calc(100vh - 48px));
	padding: 0;
	border: 1px solid var(--tcwc-line);
	border-radius: var(--tcwc-r-card);
	background: var(--tcwc-surface);
	color: var(--tcwc-ink);
	font-family: var(--tcwc-font);
	-webkit-font-smoothing: antialiased;
	box-shadow: 0 2px 6px rgba(15, 30, 58, 0.06), 0 40px 90px -40px rgba(15, 30, 58, 0.45);
	overflow: hidden;
}

.tcwc-brief::backdrop {
	background: rgba(15, 30, 58, 0.55);
	backdrop-filter: blur(2px);
}

.tcwc-brief[open] {
	animation: tcwc-brief-in 180ms var(--tcwc-ease) both;
}

@keyframes tcwc-brief-in {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}

/* showModal() does not stop the page behind from scrolling. */
html:has(.tcwc-brief[open]) {
	overflow: hidden;
}

.tcwc-brief__inner {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tcwc-brief__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--tcwc-line);
	background: var(--tcwc-surface);
}

.tcwc-brief__eyebrow {
	margin: 0 0 4px;
	color: var(--tcwc-blue);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tcwc-brief__title {
	margin: 0;
	font-size: clamp(19px, 2.2vw, 23px);
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.tcwc-brief__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--tcwc-line);
	border-radius: 50%;
	background: var(--tcwc-surface);
	color: var(--tcwc-ink-2);
	cursor: pointer;
	transition: background var(--tcwc-t) var(--tcwc-ease), color var(--tcwc-t) var(--tcwc-ease);
}

.tcwc-brief__close:hover {
	background: var(--tcwc-blue-soft);
	color: var(--tcwc-blue-deep);
}

.tcwc-brief__close:focus-visible {
	outline: 2px solid rgba(70, 101, 155, 0.55);
	outline-offset: 2px;
}

/* The plugin's form brings its own padding; this only keeps its title bar off
   the dialog's own header. */
.tcwc-brief__form {
	padding: 10px 6px 12px;
}

@media (max-width: 560px) {
	.tcwc-brief {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	.tcwc-brief__inner {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcwc-brief[open] {
		animation: none;
	}
}


/* ==========================================================================
   9. The three-step band
   ========================================================================== */

.tcwc-steps {
	padding-bottom: var(--tcwc-section);
}

.tcwc-steps__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 900px) {
	.tcwc-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}
}

.tcwc-step {
	position: relative;
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid var(--tcwc-line-2);
}

@media (min-width: 900px) {
	.tcwc-step {
		padding-right: 32px;
	}

	/* The line that runs from one step to the next, drawn on scroll. */
	.tcwc-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: -1px;
		right: 0;
		left: 0;
		height: 1px;
		background: var(--tcwc-blue);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 900ms var(--tcwc-ease);
		transition-delay: calc(var(--i, 0) * 160ms);
	}

	.tcwc-step.is-in::after {
		transform: scaleX(1);
	}
}

.tcwc-step__n {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--tcwc-blue);
}

.tcwc-step__text {
	display: block;
	margin-top: 8px;
	font-size: clamp(16px, 1.5vw, 18px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--tcwc-ink);
}


/* ==========================================================================
   10. The stats row
   ========================================================================== */

.tcwc-stats {
	padding-bottom: var(--tcwc-section);
}

.tcwc-stats__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px var(--tcwc-gap);
	margin: 0;
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--tcwc-line);
	border-radius: var(--tcwc-r-card);
	background: var(--tcwc-surface);
	box-shadow: var(--tcwc-shadow-sm);
}

@media (min-width: 860px) {
	.tcwc-stats__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tcwc-stat {
	min-width: 0;
}

.tcwc-stat dd {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--tcwc-ink);
}

.tcwc-stat dt {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--tcwc-ink-3);
}


/* ==========================================================================
   11. The lower sections
   ==========================================================================
   Other conversations and Our office, both this page's own markup. The logo
   marquee that sat between the stats and these was removed on 16 September
   2026 (Ashish), and the two mailto cards became Other conversations.
   ========================================================================== */

/* Other conversations: careers and guest posts on a navy band, wired to a
   hub. Drawn 16 September 2026 from Ashish's mockup. The page's only dark
   band, so the blue ramp's rule applies: lines, numbers and links take
   --tcwc-blue-light and a lighter glow, never --tcwc-blue. */
.tcwc-routes {
	--r-navy: #0b1a33;
	--r-navy-2: #10223f;
	--r-line: rgba(169, 186, 216, 0.55);
	--r-grid: rgba(169, 186, 216, 0.07);
	--r-glow: #cfe0ff;
	--r-text: rgba(255, 255, 255, 0.72);

	position: relative;
	margin-top: var(--tcwc-section);
	padding: clamp(48px, 5.4vw, 84px) 0 clamp(40px, 4.4vw, 64px);
	overflow: hidden;
	background:
		linear-gradient(var(--r-grid) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, var(--r-grid) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(180deg, var(--r-navy) 0%, var(--r-navy-2) 100%);
	color: #ffffff;
}

.tcwc-routes__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
}

@media (min-width: 1024px) {
	.tcwc-routes__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: 150px;
		align-items: start;
	}
}

.tcwc-routes__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tcwc-blue-light);
}

.tcwc-routes__eyebrow::before {
	content: "";
	width: 64px;
	height: 1px;
	background: var(--r-line);
}

.tcwc-routes__title {
	max-width: 22ch;
	margin: 18px 0 0;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.tcwc-routes__lead {
	max-width: 54ch;
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--r-text);
}

.tcwc-routes__list {
	position: relative;
}

/* Equal rows, so the centre of the first route is a quarter of the way down
   less a quarter of the gap, and the second's three quarters down plus a
   quarter of the gap: what the hub, trunk and spine below are placed by. */
.tcwc-routes__items {
	--routes-gap: 40px;
	display: grid;
	grid-auto-rows: 1fr;
	gap: var(--routes-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The wiring: only from the two-column layout up. */
.tcwc-routes__trunk,
.tcwc-routes__hub,
.tcwc-routes__spine,
.tcwc-route::before,
.tcwc-route::after {
	display: none;
}

@media (min-width: 1024px) {
	/* The spine: up from the hub, then a bend towards the first route. Its
	   top edge is the start of the first route's stub. */
	.tcwc-routes__spine {
		position: absolute;
		top: calc(25% - 10px);
		left: -100px;
		display: block;
		width: 60px;
		height: calc(50% + 20px);
		border-top: 1.5px solid var(--tcwc-blue-light);
		border-left: 1.5px solid var(--tcwc-blue-light);
		border-top-left-radius: 30px;
		pointer-events: none;
	}

	/* From each route's centre back to the spine. */
	.tcwc-route::after {
		content: "";
		position: absolute;
		top: 50%;
		left: -100px;
		display: block;
		width: 100px;
		height: 1.5px;
		background: var(--tcwc-blue-light);
		transform: translateY(-50%);
	}

	/* The hub, 100px left of the routes, level with the second route, with a
	   halo. Level with the second rather than between the two so the trunk
	   passes under the copy on the left instead of through it. */
	.tcwc-routes__hub {
		position: absolute;
		top: calc(75% + 10px);
		left: -100px;
		display: block;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: var(--r-glow);
		box-shadow: 0 0 0 10px rgba(207, 224, 255, 0.14), 0 0 0 22px rgba(207, 224, 255, 0.06);
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	/* Where a branch meets its route: a ring on the route's left edge. */
	.tcwc-route::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		z-index: 1;
		display: block;
		width: 12px;
		height: 12px;
		border: 2px solid var(--r-glow);
		border-radius: 50%;
		background: var(--r-navy);
		transform: translate(-50%, -50%);
	}

	/* From the page's left edge to the hub, at the hub's height. */
	.tcwc-routes__trunk {
		position: absolute;
		top: calc(75% + 10px);
		right: calc(100% + 100px);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 18px;
		width: 100vw;
		margin: 0;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.tcwc-routes__trunk-start {
		position: relative;
		flex: 1 1 auto;
		height: 1px;
		background: var(--r-line);
	}

	.tcwc-routes__trunk-start::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 20%;
		width: 10px;
		height: 10px;
		border: 2px solid var(--r-glow);
		border-radius: 50%;
		background: var(--r-navy);
		transform: translateY(-50%);
	}

	.tcwc-routes__trunk-label {
		flex: none;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--tcwc-blue-light);
	}

	.tcwc-routes__trunk::after {
		content: "";
		flex: none;
		width: 220px;
		height: 1px;
		background: var(--r-line);
	}
}

/* A route. The border is the outer box's background showing through a 1px
   inset of the inner, both cut to the same notched shape, which is the only
   way to get a border along the diagonal corners. */
.tcwc-route {
	--notch: 16px;
	position: relative;
	display: flex;
}

.tcwc-route__frame {
	flex: 1 1 auto;
	display: flex;
}

.tcwc-route__inner {
	flex: 1 1 auto;
}

.tcwc-route__frame {
	padding: 1px;
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
	background: var(--r-line);
}

.tcwc-route__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px 20px;
	min-height: 172px;
	padding: 24px 26px;
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
		var(--r-navy-2);
}

/* From 720px the number, icon and copy share a row. The actions join that
   row only from 1280px: between 1024px and 1280px the routes sit in the
   narrower right column, where a fourth column left the copy too little
   room and broke the titles a word to a line, so there the actions take a
   row of their own under a rule. */
@media (min-width: 720px) {
	.tcwc-route__inner {
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: center;
		gap: 0 24px;
		padding: 26px 30px;
	}
}

@media (min-width: 1280px) {
	.tcwc-route__inner {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
	}
}

.tcwc-route__n {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--tcwc-blue-light);
}

.tcwc-route__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--tcwc-blue-light);
}

.tcwc-route__icon svg {
	width: 28px;
	height: 28px;
}

@media (min-width: 720px) {
	.tcwc-route__icon {
		padding-left: 24px;
		border-left: 1px solid var(--r-line);
		width: auto;
		height: 44px;
	}
}

.tcwc-route__body {
	grid-column: 1 / -1;
}

@media (min-width: 720px) {
	.tcwc-route__body {
		grid-column: auto;
	}
}

.tcwc-route__title {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.tcwc-route__text {
	max-width: 34ch;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--r-text);
}

.tcwc-route__actions {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 720px) {
	.tcwc-route__actions {
		flex-direction: row;
		align-items: center;
		gap: 10px 24px;
		margin-top: 18px;
		padding-top: 16px;
		border-top: 1px solid var(--r-line);
	}
}

@media (min-width: 1280px) {
	.tcwc-route__actions {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-top: 0;
		padding: 0 0 0 26px;
		border-top: 0;
		border-left: 1px solid var(--r-line);
	}
}

.tcwc .tcwc-route__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--r-glow);
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.tcwc .tcwc-route__link svg {
	width: 18px;
	height: 18px;
	transition: transform var(--tcwc-t) var(--tcwc-ease);
}

.tcwc .tcwc-route__link:hover svg {
	transform: translateX(4px);
}

.tcwc .tcwc-route__mail {
	color: var(--r-text);
	font-size: 14.5px;
	text-decoration: none;
}

.tcwc .tcwc-route__mail:hover {
	color: #ffffff;
	text-decoration: underline;
}

.tcwc-routes__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: clamp(32px, 4vw, 52px) 0 0;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--r-text);
	text-align: center;
}

.tcwc-routes__foot::before,
.tcwc-routes__foot::after {
	content: "";
	flex: none;
	width: 96px;
	height: 1px;
	background: var(--r-line);
}

@media (max-width: 560px) {
	.tcwc-routes__foot::before,
	.tcwc-routes__foot::after {
		display: none;
	}
}

/* Our office: heading and a place pill on one line, a wide map, and the
   details in a bar that overlaps the map's foot. Redrawn 16 September 2026
   from Ashish's mockup. */
.tcwc-office {
	padding-top: var(--tcwc-section);
	padding-bottom: var(--tcwc-section);
}

.tcwc-office__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 clamp(18px, 2.2vw, 28px);
}

.tcwc-office__title {
	max-width: 24ch;
}

.tcwc-office__intro {
	max-width: 62ch;
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tcwc-ink-2);
}

.tcwc-office__place {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	padding: 10px 18px;
	border: 1px solid var(--tcwc-blue);
	border-radius: var(--tcwc-r-pill);
	background: var(--tcwc-surface);
	color: var(--tcwc-blue-deep);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tcwc-office__place svg {
	width: 15px;
	height: 15px;
	color: var(--tcwc-blue);
}

/* The map. The embed is greyed and then tinted by a multiply layer in the
   page's own blue, so it reads as part of the page rather than a Google
   window cut into it. Every layer over the iframe takes no pointer events,
   so the map still pans and zooms underneath them. */
.tcwc-office__map {
	position: relative;
	height: clamp(300px, 36vw, 420px);
	overflow: hidden;
	border: 1px solid var(--tcwc-blue-light);
	border-radius: var(--tcwc-r-card);
	background: var(--tcwc-ice);
	box-shadow: var(--tcwc-shadow);
}

.tcwc-office__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) brightness(1.12) contrast(0.86);
}

.tcwc-office__tint {
	position: absolute;
	inset: 0;
	background: #d6e1f4;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.tcwc-office__route {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.tcwc-office__route path {
	fill: none;
	stroke: var(--tcwc-blue);
	stroke-width: 3;
	stroke-dasharray: 9 8;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.tcwc-office__route circle {
	fill: var(--tcwc-surface);
	stroke: var(--tcwc-blue);
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
}

/* The office label. The frame is centred on the office, so this sits at the
   centre with the pin's point on it. */
.tcwc-office__pin {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 10px;
	transform: translate(-22px, -100%);
	pointer-events: none;
}

.tcwc-office__pin-mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tcwc-blue);
	color: #ffffff;
	box-shadow: 0 0 0 6px rgba(70, 101, 155, 0.18), var(--tcwc-shadow);
}

.tcwc-office__pin-mark svg {
	width: 22px;
	height: 22px;
}

.tcwc-office__pin-label {
	padding: 9px 14px;
	border-radius: 9px;
	background: var(--tcwc-ink);
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	box-shadow: var(--tcwc-shadow-lg);
}

/* The bar across the map's foot. */
.tcwc-office__bar {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px 0;
	margin: -48px var(--tcwc-pad) 0;
	padding: 20px 22px;
	border: 1px solid var(--tcwc-line);
	border-radius: 16px;
	background: var(--tcwc-surface);
	box-shadow: var(--tcwc-shadow-lg);
}

@media (min-width: 1024px) {
	.tcwc-office__bar {
		grid-template-columns: 1.25fr 1.15fr 1fr auto;
		align-items: center;
		gap: 0;
		padding: 18px 22px;
	}

	.tcwc-office__cell + .tcwc-office__cell,
	.tcwc-office__actions {
		padding-left: 22px;
		border-left: 1px solid var(--tcwc-line);
	}

	.tcwc-office__cell {
		padding-right: 22px;
	}
}

.tcwc-office__cell {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	min-width: 0;
}

.tcwc-office__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--tcwc-blue-soft);
	color: var(--tcwc-blue);
}

.tcwc-office__icon svg {
	width: 17px;
	height: 17px;
}

.tcwc-office__label {
	display: block;
	margin-bottom: 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tcwc-ink-3);
}

.tcwc-office__value {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tcwc-ink-2);
}

.tcwc-office__value a {
	color: var(--tcwc-ink-2);
	text-decoration: none;
}

.tcwc-office__value a:hover {
	color: var(--tcwc-blue);
	text-decoration: underline;
}

.tcwc-office__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
}

.tcwc-office__actions .tcwc-btn {
	flex: none;
	width: auto;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.tcwc-office__actions {
		flex-wrap: nowrap;
	}
}

.tcwc .tcwc-office__visit {
	color: var(--tcwc-blue);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
	white-space: nowrap;
}

.tcwc .tcwc-office__visit:hover {
	color: var(--tcwc-blue-deep);
}

.tcwc-office__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 22px 0 0;
	font-size: 13px;
	color: var(--tcwc-ink-3);
}

.tcwc-office__note svg {
	color: var(--tcwc-blue);
}


/* ==========================================================================
   12. Motion
   ==========================================================================
   Enhancement only. Every element is styled to its finished state and hidden
   only once html.js is present, a class the document sets synchronously in the
   head, so the page is complete and readable with scripting off and while
   contact.js is still downloading.
   ========================================================================== */

html.js .tcwc [data-reveal] {
	opacity: 0;
	transform: translateY(12px);
}

html.js .tcwc [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition: opacity 520ms var(--tcwc-ease), transform 520ms var(--tcwc-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {

	html.js .tcwc [data-reveal] {
		opacity: 1;
		transform: none;
	}

	html.js .tcwc-curve__node {
		opacity: 1;
	}

	.tcwc *,
	.tcwc *::before,
	.tcwc *::after {
		transition-duration: 1ms !important;
	}
}