/* ===================================
   Hero, page titles and title links
   - carousel controls (.slider_control)
   - home hero (.full_slider) and its animated gradient
   - page title area (.page_title_box) and its line-by-line heading reveal
   - title links ("Let's start a project together."): letter morph, underline sweep, ↗ arrow
   - the shared ↗ arrow with an extending tail
=================================== */

/* -----------------------------------
   Carousels (assets/js/carousels.mjs keeps the old caroufredsel_wrapper class on the Swiper
   viewport, so these still apply) and their controls
----------------------------------- */
.carousel .caroufredsel_wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

.carousel .caroufredsel_wrapper ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 32%;
}

.carousel .caroufredsel_wrapper ul li > div {
	margin: 0 10px;
	height: 100%;
	overflow: hidden;
}

.slider_control {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	align-items: center;
	width: 100%;
	margin-top: 70px;
}
.slider_control .pager {
	display: flex;
	gap: 5px;
}
.slider_control .pager:not(.hidden) {
	display: flex !important;
}
.slider_control .pager a {
	font-size: 0;
	display: block;
	width: 12px;
	height: 12px;
	background-color: #d9d9d9;
	border-radius: 50px;
}
.slider_control .pager a.selected {
	background-color: var(--wp--preset--color--green);
}

.slider_control .directional_nav {
	display: flex;
	gap: 25px;
}

.slider_control .directional_nav a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--darkgreen);
	color: var(--wp--preset--color--darkgreen);
	padding: 0;
	font-size: 0;
	line-height: 0;
	outline: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
}
.slider_control .directional_nav a:not(.hidden) {
	display: flex !important;
}

.slider_control .directional_nav a.disabled {
	opacity: 0.3;
	cursor: inherit;
}
.slider_control .directional_nav a::before {
	content: "\E80B";
	font-family: excentric;
	font-size: 20px;
	text-align: center;
}

.slider_control .directional_nav a.prev::before {
	content: "\E80B";
	transform: rotate(180deg);
}

.slider_control .directional_nav a:focus,
.slider_control .directional_nav a:active {
	background-color: var(--wp--preset--color--darkgreen);
	color: var(--wp--preset--color--white);
}
@media (hover: hover) and (pointer: fine) {
	.slider_control .directional_nav a:hover {
		background-color: var(--wp--preset--color--darkgreen);
		color: var(--wp--preset--color--white);
	}
}

.has_active_slider {
	position: relative;
}
.has_active_slider .slider_control {
	justify-content: space-around;
}
.has_active_slider .directional_nav {
	position: absolute;
	top: -97px;
	right: 0;
}
.has_active_slider .directional_nav.drn-prev {
	right: 50px;
}

/* -----------------------------------
   Home hero (.full_slider)
----------------------------------- */
.full_slider {
	position: relative;
	background-color: var(--wp--preset--color--darkgreen);
	overflow: hidden;
}

.full_slider,
.slide_item .slide_item_inner,
.slider_text .slider_text_inner {
	height: 100dvh;
	max-height: 1072px;
}

.full_slider .overlay {
	display: none;
}

.full_slider ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.full_slider ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Slides share one grid cell, so the hero is as tall as one slide. Only the current slide shows,
   and with two or more they crossfade (assets/js/theme.js initSlider). */
.full_slider .slides {
	display: grid;
}
.full_slider .slides > li {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 600ms var(--ease-in-out);
}
.full_slider .slides > li.is-active {
	opacity: 1;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.full_slider .slides > li {
		transition: none;
	}
}

/* the slide pager (global/components.css): on the right, centred; at the bottom on smaller screens */
.full_slider .exc-pager {
	position: absolute;
	z-index: 4;
	top: 50%;
	right: max(30px, calc((100% - 1540px) / 2 - 20px));
	transform: translateY(-50%);
}
@media only screen and (max-width: 979px) {
	.full_slider .exc-pager {
		top: auto;
		right: auto;
		left: 20px;
		bottom: 30px;
		transform: none;
	}
}

.slide_item {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.slide_item .slide_item_inner {
	margin: 0 auto;
	display: table;
	width: 100%;
	position: relative;
	z-index: 2;
}

.slide_item .slide_item_inner .slide_item_text {
	display: table-cell;
	vertical-align: middle;
}

.slide_item .slide_item_inner .slide_item_text .slide_title,
.slider_text .slider_text_inner .slider_text_inner_text .slider_title {
	margin-bottom: 70px;
}
.slide_item .slide_item_inner .slide_item_text .slide_sub_heading,
.slider_text .slider_text_inner .slider_text_inner_text .slider_sub_heading {
	display: block;
	margin-bottom: 0;
	letter-spacing: -0.64px;
}

.slide_item .slide_item_inner .slide_item_text .slide_description,
.slider_text .slider_text_inner .slider_text_inner_text .slider_description {
	display: block;
	max-width: 1000px;
}

.slider_btn_wrap {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.full_slider .slider_text {
	z-index: 3;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.slider_text .slider_text_inner {
	margin: 0 auto;
	display: table;
	width: 100%;
	position: relative;
	z-index: 3;
}

.slider_text .slider_text_inner .slider_text_inner_text {
	display: table-cell;
	vertical-align: bottom;
	padding: 124px 0 136px;
}

.full_slider .is-active .slide_item_text .slide_sub_heading,
.full_slider .is-active .slide_item_text .slide_title,
.full_slider .is-active .slide_item_text .slide_description,
.full_slider .is-active .slide_item_text .button {
	animation-name: fadeInUp;
	animation-play-state: running;
	visibility: visible;
	opacity: 1;
}

@media only screen and (max-width: 1920px) {
	.slide_item .slide_item_inner .slide_item_text .slide_title,
	.slider_text .slider_text_inner .slider_text_inner_text .slider_title {
		margin-bottom: 4vw; /* 70px at 1750px */
	}
}
@media only screen and (max-width: 1100px) {
	.full_slider,
	.slide_item .slide_item_inner,
	.slider_text .slider_text_inner {
		min-height: 620px;
		height: auto;
	}
	.slider_text .slider_text_inner .slider_text_inner_text {
		padding: 96px 0;
	}
}

@media only screen and (max-width: 768px) {
	.full_slider,
	.slide_item .slide_item_inner,
	.slider_text .slider_text_inner {
		min-height: 520px;
	}
	.slider_text .slider_text_inner .slider_text_inner_text {
		padding: 81px 0 50px;
	}
}

@media only screen and (max-width: 480px) {
	.full_slider,
	.slide_item .slide_item_inner,
	.slider_text .slider_text_inner {
		min-height: 450px;
	}
	.slide_item .slide_item_inner .slide_item_text .slide_title,
	.slider_text .slider_text_inner .slider_text_inner_text .slider_title {
		margin-bottom: 20px;
	}
	.slider_btn_wrap {
		margin-top: 30px;
	}
	.slider_btn_wrap .button {
		min-width: 207px;
	}
}

/* -----------------------------------
   Page title area (template-parts/page-title.php)
----------------------------------- */
.page_title_box {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: var(--wp--preset--color--white);
	position: relative;
	overflow: hidden;
}

.page_title_box .title_banner_image {
	width: 100%;
	display: block;
}

.page_title_box .container {
	display: table;
	width: 100%;
	min-height: 295px;
}

.page_title_box .page_title_box_inner .above_title {
	font-size: 15px;
	color: var(--wp--preset--color--black);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 30px;
	display: block;
}

.page_title_box .page_title_box_inner .page_title {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--x-large-105);
	font-style: normal;
	font-weight: 400;
	letter-spacing: -5%; /* 5.25px */
}

.page_title_box .page_title_box_inner {
	padding: 144px 0 44px;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	z-index: 3;
}

.page_title_box .page_title_box_inner .title_description {
	max-width: 600px;
	margin: 40px 0 0 0;
	color: var(--wp--preset--color--darkblue);
	font-size: var(--wp--preset--font-size--small-24);
	font-weight: 400;
	letter-spacing: -0.48px;
}

.page_title_box .page_title_box_inner .title_description p {
	margin: 0;
}

.page_title_box .page_title_box_inner .description_logo {
	margin: 50px 0 0 0;
}

.page_title_box .page_title_box_inner .button {
	margin-top: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.page_title_box .page_title_box_inner .button:hover {
		background-color: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--black);
	}
}

.page_title_box.about_title .page_title_box_inner .title_description {
	max-width: 500px;
	margin-left: 49%;
	margin-top: -89px;
}

.page_title_box .action_link {
	margin-top: 40px;
}
/* the title link ("Let's start a project together."): its underline is a background line, so it
   can sweep out to the right and redraw from the left on hover without the text moving. The ↗
   arrow after it is the shared arrow (end of this file). With the letter morph (.has-char-roll,
   below) the underline moves onto the words. */
.page_title_box .action_link a {
	display: inline-flex;
	align-items: baseline;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--playfairdisplay);
	font-size: var(--wp--preset--font-size--small-24);
	font-style: normal;
	font-weight: 400;
	line-height: 34px;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position-x: 0;
	background-position-y: calc(100% - 4px);
	transition: none;
}
/* assets/js/motion.js adds .is-sweeping on hover, until the sweep ends (keyboard focus: no sweep) */
.page_title_box .action_link a.is-sweeping {
	animation: exc-underline-sweep 900ms var(--ease-in-out);
}
@keyframes exc-underline-sweep {
	0% {
		background-size: 100% 1px;
		background-position-x: 100%;
	}
	45% {
		background-size: 0% 1px;
		background-position-x: 100%;
	}
	46% {
		background-size: 0% 1px;
		background-position-x: 0;
	}
	100% {
		background-size: 100% 1px;
		background-position-x: 0;
	}
}

.page_title_box.has_swing_lines {
	padding-bottom: 352px;
}
@media screen and (max-width: 1920px) {
	.page_title_box.has_swing_lines {
		padding-bottom: 18.3vw;
	}
}
@media screen and (max-width: 1500px) {
	.page_title_box.has_swing_lines {
		padding-bottom: 13.3vw;
	}
}
@media screen and (max-width: 1024px) {
	.page_title_box .page_title_box_inner {
		padding-top: 70px;
	}
	.page_title_box.about_title .page_title_box_inner .title_description {
		margin-left: 0;
		margin-top: 40px;
	}
	.page_title_box.has_swing_lines {
		padding-bottom: 9.3vw;
	}
}
@media screen and (max-width: 768px) {
	.page_title_box .container {
		min-height: 200px;
	}
	.page_title_box .page_title_box_inner {
		padding-top: 50px;
	}
	.page_title_box .page_title_box_inner .above_title {
		font-size: 14px;
		letter-spacing: 2px;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 600px) {
	.page_title_box .page_title_box_inner .button {
		margin-top: 15px;
	}
}

/* -----------------------------------
   Animated gradient mesh (assets/js/hero-gradient.js): under the hero content, fading in over the
   slide's background image, which stays as the fallback.
----------------------------------- */
.gradient-mesh-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.8s var(--ease-out);
}
.gradient-mesh-canvas.is-ready {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.gradient-mesh-canvas {
		transition: none;
	}
}

/* -----------------------------------
   Hero heading: line-by-line reveal (assets/js/motion.js). Each line slides up out of a blur, one
   after another. No clipping mask: it would slice the italic letters mid-rise.
----------------------------------- */
.js-motion .js-line-reveal:not(.is-line-reveal) {
	visibility: hidden;
	animation: exc-unhide 0s 2s forwards; /* safety net: show anyway if the script never runs */
}
@keyframes exc-unhide {
	to {
		visibility: visible;
	}
}
.is-line-reveal .line {
	display: block;
	padding-bottom: 0.25em;
	margin-bottom: -0.25em;
}
.is-line-reveal .line-inner {
	display: block;
	animation: exc-line-rise 1.5s var(--ease-out) both;
	animation-delay: calc(250ms + var(--line, 0) * 160ms);
}
@keyframes exc-line-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 0.45em, 0);
		filter: blur(14px);
	}
	60% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

/* -----------------------------------
   Animated background images (assets/js/image-flow.js): the canvas sits behind the section's
   content but above its own CSS background (which stays as the fallback).
----------------------------------- */
.has-image-flow {
	position: relative;
	isolation: isolate;
}
.image-flow-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.9s var(--ease-out);
}
.image-flow-canvas.is-ready {
	opacity: 1;
}

/* -----------------------------------
   Letter morph: upright -> italic (assets/js/motion.js charRoll; title links and menu items)
   Each letter holds an upright copy (.cr-n) and an italic copy (.cr-i) in one grid cell, aligned on
   their shared baseline (the italic font file has different vertical metrics). On hover/focus a wave
   runs left to right: each upright letter drifts up a little and dissolves through a soft blur while
   its italic rises into focus, and the letter's width eases to the italic width. The underline
   lives on the words; the letter layers never take the pointer (the offset italic copies would
   overlap the next menu item), so the link itself is the hit area.
----------------------------------- */
.has-char-roll .cr-word {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position-x: 0;
	background-position-y: calc(100% - 4px); /* no padding: the words are a flex item, padding would add height */
	pointer-events: none;
}
.has-char-roll .cr-w {
	display: inline-block;
	white-space: nowrap;
}
.has-char-roll .cr-char {
	display: inline-grid;
	justify-items: start;
	align-items: baseline;
	vertical-align: baseline;
}
.has-char-roll .cr-n,
.has-char-roll .cr-i {
	grid-area: 1 / 1;
	white-space: pre;
}
/* timing: a gentle cubic-out; the letter's width eases on the same curve and duration, and the two
   copies crossfade with no gap */
.has-char-roll {
	--roll-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--roll-in: 620ms;
	--roll-in-step: 26ms;
	--roll-out: 440ms;
	--roll-out-step: 14ms;
}
.has-char-roll.is-measured .cr-char {
	width: var(--wn);
	transition: width var(--roll-out) var(--roll-ease) calc(var(--i) * var(--roll-out-step));
}
.has-char-roll .cr-n {
	transition:
		transform var(--roll-out) var(--roll-ease) calc(var(--i) * var(--roll-out-step)),
		opacity 300ms var(--roll-ease) calc(var(--i) * var(--roll-out-step)),
		filter 300ms var(--roll-ease) calc(var(--i) * var(--roll-out-step));
}
.has-char-roll .cr-i {
	font-style: italic;
	opacity: 0;
	filter: blur(4px);
	transform: translate3d(0, 0.32em, 0);
	transition:
		transform var(--roll-out) var(--roll-ease) calc(var(--i) * var(--roll-out-step)),
		opacity 300ms var(--roll-ease) calc(var(--i) * var(--roll-out-step)),
		filter 300ms var(--roll-ease) calc(var(--i) * var(--roll-out-step));
}
/* hover / keyboard focus: a slightly slower, wider wave going in */
.has-char-roll:focus-visible.is-measured .cr-char {
	width: var(--wi);
	transition: width var(--roll-in) var(--roll-ease) calc(var(--i) * var(--roll-in-step));
}
@media (hover: hover) and (pointer: fine) {
	.has-char-roll:hover.is-measured .cr-char {
		width: var(--wi);
		transition: width var(--roll-in) var(--roll-ease) calc(var(--i) * var(--roll-in-step));
	}
}
.has-char-roll:focus-visible .cr-n {
	opacity: 0;
	filter: blur(4px);
	transform: translate3d(0, -0.32em, 0);
	transition:
		transform var(--roll-in) var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
		opacity 380ms var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
		filter 380ms var(--roll-ease) calc(var(--i) * var(--roll-in-step));
}
@media (hover: hover) and (pointer: fine) {
	.has-char-roll:hover .cr-n {
		opacity: 0;
		filter: blur(4px);
		transform: translate3d(0, -0.32em, 0);
		transition:
			transform var(--roll-in) var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
			opacity 380ms var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
			filter 380ms var(--roll-ease) calc(var(--i) * var(--roll-in-step));
	}
}
.has-char-roll:focus-visible .cr-i {
	opacity: 1;
	filter: none;
	transform: none;
	transition:
		transform var(--roll-in) var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
		opacity 380ms var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
		filter 460ms var(--roll-ease) calc(var(--i) * var(--roll-in-step));
}
@media (hover: hover) and (pointer: fine) {
	.has-char-roll:hover .cr-i {
		opacity: 1;
		filter: none;
		transform: none;
		transition:
			transform var(--roll-in) var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
			opacity 380ms var(--roll-ease) calc(var(--i) * var(--roll-in-step)),
			filter 460ms var(--roll-ease) calc(var(--i) * var(--roll-in-step));
	}
}
/* with the letter morph, the link's own underline is off (it's on the words) */
.page_title_box .action_link a.has-char-roll {
	background-image: none;
	animation: none;
}
.has-char-roll.is-sweeping .cr-word {
	animation: exc-underline-sweep 900ms var(--ease-in-out);
}
/* any section using the gradient shader as its background (e.g. the Awards header): the canvas
   sits behind the section's content, above its CSS background (the fallback). */
.has-gradient-mesh:not(.slide_item) {
	position: relative;
	isolation: isolate;
}
.has-gradient-mesh:not(.slide_item) > .gradient-mesh-canvas {
	z-index: -1;
}

.full_screen_navigation a.has-char-roll {
	display: inline-block;
}
/* menu links are text-transform: capitalize, which capitalised every split letter */
.full_screen_navigation a.has-char-roll .cr-char {
	text-transform: none;
}
/* no underline in the menu, just the letter wave */
.full_screen_navigation a.has-char-roll .cr-word,
.full_screen_navigation a.has-char-roll:focus-visible .cr-word {
	background-image: none;
	animation: none;
}
@media (hover: hover) and (pointer: fine) {
	.full_screen_navigation a.has-char-roll:hover .cr-word {
		background-image: none;
		animation: none;
	}
}

/* -----------------------------------
   Diagonal arrows with an extending tail
   The standard for every up-right (↗) arrow: the design's arrow (14x14 artboard: 2.28 stroke, square
   corner, butt ends), drawn as three mask layers over the brand green:
     1. the corner head (the design's own path),
     2. the shaft, a diagonal band of the same thickness,
     3. minus a cut that squares off the shaft's tail end (mask-composite: subtract).
   The tail end stays put; on hover/focus the shaft grows and pushes the head further up and right
   (--tail, a registered length), like the Previous/Next arrows. The resting arrow sits in the box's
   bottom-left corner; the extra room above and to the right is cancelled with negative margins, so
   layout is unchanged. Per use: --ar (size at rest), --ar-gap (space from the text), --arrow-c
   (colour), and the hover --tail.
   Used by: the menu's LinkedIn link, the title link, the bio's article and LinkedIn links, and pill
   buttons that open another site. Links to pages of this site use → (global/components.css, the
   work list and work tags).
----------------------------------- */
@property --tail {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
:root {
	--arrow-ne-head: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M12.506 11.23V1.14H2.416' fill='none' stroke='%23000' stroke-width='2.28' stroke-miterlimit='10'/%3E%3C/svg%3E");
	/* the whole arrow in one image, for small static uses (the work carousel's "Work" tag) */
	--arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M12.506 1.14L.806 12.84M12.506 11.23V1.14H2.416' fill='none' stroke='%23000' stroke-width='2.28' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
.full_screen_menu .linkedin_link a::after,
.page_title_box .action_link a::after,
.profile_popup_content .article_wrap a::after,
.profile_popup_content .linkedin_link a::after,
.button:is([target="_blank"], .is-external)::after {
	--ab: calc(var(--ar) * 1.75);
	--tail: var(--ar);
	content: "";
	display: inline-block;
	flex: none;
	width: var(--ab);
	height: var(--ab);
	margin-left: var(--ar-gap, 12px);
	margin-right: calc((var(--ab) - var(--ar)) * -1);
	margin-top: calc((var(--ab) - var(--ar)) * -1);
	vertical-align: baseline;
	background: var(--arrow-c, var(--wp--preset--color--darkgreen));
	font-size: inherit;
	/* head: its top-right corner rides the end of the shaft. shaft: the band along the box's
     bottom-left to top-right diagonal, 2.28/14 of --ar thick, nudged as in the artboard.
     cut: removes the corner beyond the tail's square end. */
	-webkit-mask:
		var(--arrow-ne-head) calc(var(--tail) - var(--ar)) calc(100% - var(--tail) + var(--ar)) / var(--ar) var(--ar)
			no-repeat,
		linear-gradient(
				to bottom right,
				transparent calc(50% - var(--ar) * 0.0993),
				#000 0 calc(50% + var(--ar) * 0.0635),
				transparent 0
			)
			left bottom / var(--tail) var(--tail) no-repeat,
		linear-gradient(to bottom left, transparent calc(100% - var(--ar) * 0.0993), #000 0) left bottom / var(--tail)
			var(--tail) no-repeat;
	mask:
		var(--arrow-ne-head) calc(var(--tail) - var(--ar)) calc(100% - var(--tail) + var(--ar)) / var(--ar) var(--ar)
			no-repeat,
		linear-gradient(
				to bottom right,
				transparent calc(50% - var(--ar) * 0.0993),
				#000 0 calc(50% + var(--ar) * 0.0635),
				transparent 0
			)
			left bottom / var(--tail) var(--tail) no-repeat,
		linear-gradient(to bottom left, transparent calc(100% - var(--ar) * 0.0993), #000 0) left bottom / var(--tail)
			var(--tail) no-repeat;
	-webkit-mask-composite: source-over, source-out, source-over;
	mask-composite: add, subtract, add;
	transform: none;
	transition:
		--tail 600ms var(--ease-out),
		background-color var(--dur-short) var(--ease-out);
}
.full_screen_menu .linkedin_link a::after {
	--ar: 0.82em;
	--ar-gap: 0.4em;
	top: 0;
	color: inherit;
}
.full_screen_menu .linkedin_link a:focus-visible::after {
	--tail: calc(var(--ar) * 1.7);
	transform: none;
}
@media (hover: hover) and (pointer: fine) {
	.full_screen_menu .linkedin_link a:hover::after {
		--tail: calc(var(--ar) * 1.7);
		transform: none;
	}
}
.page_title_box .action_link a::after {
	--ar: 0.62em;
	--ar-gap: 12px;
}
.page_title_box .action_link a:focus-visible::after {
	--tail: calc(var(--ar) * 1.45);
}
@media (hover: hover) and (pointer: fine) {
	.page_title_box .action_link a:hover::after {
		--tail: calc(var(--ar) * 1.45);
	}
}
/* the tail extends as the letter wave reaches the last letter */
.page_title_box .action_link a.has-char-roll:focus-visible::after {
	transition: --tail 700ms var(--ease-out) calc(var(--n, 20) * var(--roll-in-step, 26ms) - 60ms);
}
@media (hover: hover) and (pointer: fine) {
	.page_title_box .action_link a.has-char-roll:hover::after {
		transition: --tail 700ms var(--ease-out) calc(var(--n, 20) * var(--roll-in-step, 26ms) - 60ms);
	}
}