/*
 * Site-specific overrides, loaded last so it wins over the theme stylesheets.
 * Everything here exists because our photography differs from the demo's.
 */

/* ---------------------------------------------------------------------------
 * Preloader — club crest with the theme's spinner above it
 *
 * The crest is added here rather than in the page markup because all 14 pages
 * in content/pages carry byte-identical preloader markup; a background image on
 * the container covers every one of them at once and keeps the HTML untouched.
 *
 * Layout is a flex COLUMN in `column-reverse`. The spinner is the first child
 * in source order but has to render above the logo, and reversing the column
 * does that without needing an `order` on a theme-owned element.
 *
 * The theme absolutely positions the spinner (top/left 50% with a negative
 * margin) to centre it in the old layout. That has to be undone or it lifts out
 * of the flex flow and sits back on top of the crest.
 * ------------------------------------------------------------------------ */
.preload-container {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	gap: 34px;
}

.preload-container .swapping-squares-spinner {
	position: relative;
	top: auto;
	left: auto;
	margin: 0;
	flex: 0 0 auto;
}

/*
 * The crest as a ::before rather than a background on the container itself:
 * the container is a full-viewport fixed overlay, so a background would have to
 * be sized and positioned against the whole screen and could not take part in
 * the flex column. A pseudo-element is a real flex item, so the gap above keeps
 * it a fixed distance from the spinner at any viewport size.
 */
.preload-container::before {
	content: "";
	flex: 0 0 auto;
	width: clamp(132px, 20vw, 190px);
	aspect-ratio: 1;
	background-image: url("../gua_nobg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * The overlay is white, so the theme's gold spinner is legible as-is, but the
 * crest carries its own navy — pairing them needs no recolouring. Fading the
 * crest in avoids a hard pop on first paint, since the PNG decodes slightly
 * after the overlay itself is painted.
 */
@media (prefers-reduced-motion: no-preference) {
	.preload-container::before {
		animation: gua-preload-logo-in 420ms ease-out both;
	}
}

@keyframes gua-preload-logo-in {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---------------------------------------------------------------------------
 * Hero slider height
 *
 * The banner has no explicit height -- it is driven entirely by the padding on
 * .slide-item (132px / 214px in the theme). Trimming both brings the fold up
 * without touching the slider's internals.
 * ------------------------------------------------------------------------ */
.tf-slider-widget .slide-item {
	padding-top: 104px;
	padding-bottom: 150px;
}

@media only screen and (max-width: 991px) {
	.tf-slider-widget .slide-item {
		padding-top: 80px;
		padding-bottom: 100px;
	}
}

/* ---------------------------------------------------------------------------
 * About-us image collage
 *
 * Two slanted parallelograms that read as windows cut out of ONE photograph:
 * the image continues across the gap between them, rather than each shape
 * holding a separate picture.
 *
 * That is what drives the implementation. The photo cannot be an <img> inside
 * each shape -- two <img>s means two independently-positioned pictures, and
 * the subject jumps at the seam. Instead both shapes share a single background
 * image sized to the *whole collage* (--collage-w x --collage-h) and each one
 * offsets that background by its own position within the collage, so the two
 * windows sample different parts of the same continuous image.
 *
 * The demo's diagonal slices were baked into its mask1/mask2 PNGs as
 * transparent corners; ours come from clip-path, so the intrinsic sizes have
 * to be pinned or the photos render at full resolution and blow the section
 * open. The layout rules below duplicate shortcodes.css, which the theme never
 * loads on any page.
 * ------------------------------------------------------------------------ */
.tf-about-us .image-wraper .media {
	/*
	 * ONE fluid base unit drives the whole collage; every other measurement is a
	 * ratio of it. That is what makes the section responsive -- the shapes scale
	 * with the viewport instead of being pinned to fixed pixel sizes, so there is
	 * no breakpoint at which they suddenly jump to a new hardcoded geometry.
	 *
	 * clamp() keeps it sane at the extremes: it tracks the viewport in the middle
	 * but stops shrinking on small phones and stops growing on wide monitors.
	 */
	--u: clamp(240px, 34vw, 560px);

	/* Widths. The left window is the narrower of the two. */
	--shape-a-w: calc(var(--u) * 0.56);
	--shape-b-w: calc(var(--u) * 0.80);

	/*
	 * Heights. Both windows share a top edge; the right one is the tall one and
	 * sets the collage height.
	 *
	 * The left window plus the checkerboard beneath it add up to exactly the
	 * right window's height -- that is the alignment being asked for, so it is
	 * expressed as arithmetic rather than left to hand-tuned numbers. The
	 * checkerboard's own height and the space above it are the two other terms,
	 * so the three always sum to --shape-b-h at every viewport size.
	 */
	--shape-b-h: calc(var(--u) * 0.99);
	--checker-w: calc(var(--u) * 0.28);
	--checker-h: calc(var(--checker-w) * (74 / 181));  /* graphic.png is 181x74 */
	--checker-space: calc(var(--u) * 0.035);           /* clear gap under the photo */
	--shape-a-h: calc(var(--shape-b-h) - var(--checker-h) - var(--checker-space));

	/*
	 * NEGATIVE, so the two shapes interlock instead of sitting side by side.
	 * Their edges lean, so square boxes placed next to each other leave a
	 * wedge-shaped gap that widens down the collage -- shrinking a positive gap
	 * never closes it. Pulling the right window back by most of one slant run
	 * slides it into that wedge, which is what actually tightens the spacing.
	 */
	--gap: calc(var(--slant) * -0.72);

	/*
	 * Slant is a LENGTH, not a percentage. A percentage resolves against each
	 * element's own width, so two windows of different widths would lean at two
	 * different angles and the edges would visibly splay. Deriving it from the
	 * shared base unit gives both the same run while still scaling fluidly.
	 */
	--slant: calc(var(--u) * 0.26);

	/* The photo spans both windows plus the seam, so the two sample one
	   continuous image. Height tracks the taller window. */
	--collage-w: calc(var(--shape-a-w) + var(--gap) + var(--shape-b-w));
	--collage-h: var(--shape-b-h);

	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;
	padding-right: 49px;
	padding-left: 3px;
}

/*
 * Both windows: same photo, same slant. Only the background offset differs,
 * which is what makes them read as one picture behind a mask.
 *
 * NOTE the shapes have different heights, and --slant is the horizontal run
 * over the FULL height of each. A shorter shape therefore needs a proportionally
 * shorter run to hold the same angle; that is what --slant-a below corrects.
 * Using one run for both would make the short shape lean more steeply than the
 * tall one -- the exact splay this whole approach is meant to avoid.
 */
.tf-about-us .image-wraper img.mask-media,
.tf-about-us .image-wraper .media > img.image-gr {
	background-image: url("../images/about/collage.jpg");
	background-size: var(--collage-w) var(--collage-h);
	background-repeat: no-repeat;
	position: relative;
	z-index: 2;
}

/* Right window: the reference shape, leaning by the full --slant run. */
.tf-about-us .image-wraper .media > img.image-gr {
	-webkit-clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
	clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

/* Left window: run scaled by its share of the right window's height, so both
   edges sit at the same angle. */
.tf-about-us .image-wraper img.mask-media {
	--slant-a: calc(var(--slant) * (var(--shape-a-h) / var(--shape-b-h)));
	-webkit-clip-path: polygon(var(--slant-a) 0, 100% 0, calc(100% - var(--slant-a)) 100%, 0 100%);
	clip-path: polygon(var(--slant-a) 0, 100% 0, calc(100% - var(--slant-a)) 100%, 0 100%);
}

/*
 * The markup still carries two <img> elements, and their src files would show
 * through on top of the shared background. Making them transparent turns each
 * one into a pure window: the element keeps its box, clip-path and background,
 * but contributes no picture of its own.
 */
.tf-about-us .image-wraper img.mask-media,
.tf-about-us .image-wraper .media > img.image-gr {
	opacity: 0.9999;      /* keeps the element composited on its own layer */
	object-fit: cover;
	color: transparent;   /* hides the alt text if the src 404s */
}

.tf-about-us .image-wraper img.mask-media {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

.tf-about-us .image-wraper .media > img.image-gr {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

/*
 * Left window: shorter than the right one and top-aligned with it, so both
 * share a top edge and the left one stops short at the bottom. That shortfall
 * is what leaves the checkerboard below it visible.
 *
 * With no vertical offset the background needs no vertical correction either --
 * both windows sample the same photo from the same top edge.
 */
.tf-about-us .image-wraper img.mask-media {
	width: var(--shape-a-w);
	height: var(--shape-a-h);
	margin-left: 12px;
	margin-top: 0;
	background-position: 0 0;
}

/*
 * Checkerboard graphic, sitting in the clear space below the shorter left
 * window.
 *
 * Anchored from the top rather than the bottom: the media box is as tall as the
 * taller RIGHT window, so `bottom` would push this far below the shape it
 * belongs to. Deriving `top` from --shape-a-h pins it to the left window's lower
 * edge instead.
 *
 * Because --shape-a-h was defined as (right height - this graphic - the space
 * above it), the left window and this graphic together end exactly level with
 * the right window's bottom edge -- at any viewport size, with no per-breakpoint
 * correction.
 */
.tf-about-us .image-wraper img.shape-media {
	position: absolute;
	left: 0;
	top: calc(var(--shape-a-h) + var(--checker-space));
	bottom: auto;
	z-index: 3;
	width: var(--checker-w);
	height: auto;
}

/*
 * Right window: wider and taller, separated from the left by --gap rather than
 * overlapping it (the theme's -91px margin interlocked the two; the reference
 * has clear space between them instead).
 *
 * Its background is shifted left by exactly the distance from the collage's
 * origin to this shape, so the photo continues from where the left window
 * stops -- the gap reads as a slice cut out of one picture.
 */
.tf-about-us .image-wraper .media > img.image-gr {
	width: var(--shape-b-w);
	height: var(--shape-b-h);
	margin-left: var(--gap);
	background-position: calc(-1 * (var(--shape-a-w) + var(--gap))) 0;
}

/*
 * Gold accent slash. It sits BEHIND the photos (z-index 1) and is deliberately
 * overlapped by the right window, so only the sliver past that window's edge
 * shows -- which is the thin accent the reference has. Anchoring it fully clear
 * of the window instead would expose the whole graphic and it would read as a
 * solid block.
 *
 * Positioned off the right window's edge and sized from the same base unit, so
 * the overlap stays proportional as the collage scales.
 */
.tf-about-us .image-wraper .media .intersect-img {
	position: absolute;
	left: calc(var(--shape-a-w) + var(--gap) + var(--shape-b-w) - var(--u) * 0.16);
	bottom: 8%;
	right: auto;
	z-index: 1;
	width: calc(var(--u) * 0.22);
	height: auto;
}

.tf-about-us .about-box {
	padding-left: 7px;
}

.tf-about-us .about-box > img {
	margin-top: 28px;
	margin-bottom: 28px;
}

.tf-about-us .about-box p.post {
	max-width: 522px;
	color: var(--secondary);
}

.tf-about-us .about-button-group {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.tf-about-us .infor-about {
	display: flex;
	align-items: center;
}

.tf-about-us .infor-about img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	margin-right: 12px;
	border: 1px solid var(--primary);
	border-radius: 100px;
}

/*
 * Below the md breakpoint the two columns stack, so the collage is centred
 * rather than left-aligned against a full-width text block.
 *
 * No shape variables are redeclared here. The old version re-pinned every
 * dimension in pixels at each breakpoint, which both defeated the fluid scaling
 * and broke the "left window + checkerboard == right window" relationship, since
 * that sum only holds while the heights stay derived. Sizing now comes entirely
 * from --u, so the collage scales continuously and this block only has to deal
 * with the change in layout.
 */
@media only screen and (max-width: 991px) {
	.tf-about-us .image-wraper .media {
		/* Once stacked, the collage has the full column to itself and no longer
		   has to share the row with the text, so it can take a larger share of
		   the viewport than the two-column case allows. */
		--u: clamp(230px, 52vw, 420px);

		justify-content: center;
		padding-right: 0;
		margin-bottom: 40px;
	}
}

/* ---------------------------------------------------------------------------
 * "რატომ ჩვენ" — scroll-driven ball sequence in the benefit circle
 *
 * The theme shipped a still photo with a YouTube lightbox in the middle of the
 * benefit ring. It is now a canvas playing a 96-frame WebP sequence of a ball
 * hitting the net, scrubbed by scroll position rather than by time.
 *
 * THE PIN IS NATIVE STICKY POSITIONING, NOT A SCROLL LOCK.
 *
 * An earlier version tried to hold the page from script: it let the browser
 * scroll, then snapped it back with scrollTo on every wheel event. That fights
 * the browser's own smooth-scroll animation, which is already in flight when
 * the handler runs, and the result was the section visibly shaking rather than
 * holding still.
 *
 * So the section pins the ordinary way instead. `benefit-scroll-track` is
 * taller than the section; `benefit-scroll-stage` sticks inside it. While the
 * document scrolls through the track's surplus height the stage stays put on
 * screen -- genuinely motionless, because the browser composites it rather than
 * anything correcting it each frame -- and that scroll distance is what drives
 * the frame sequence. When the track runs out the stage unsticks and the page
 * carries on scrolling normally.
 *
 * THE STAGE IS ITS CONTENT'S HEIGHT, NOT 100vh.
 *
 * This matters and an earlier version got it wrong. Making the stage a full
 * viewport tall and centring the content inside it means the stage is ~590px of
 * section plus ~310px of dead filler, and that filler is visible as empty bands
 * above and below the section for the entire pin. Painting the filler navy does
 * not fix it -- it is still empty space, just a different colour.
 *
 * So the stage is `height: auto`: exactly as tall as the section, no filler, no
 * bands, and the sections above and below sit flush against it. It is centred in
 * the viewport by the `top` offset instead -- calc((100vh - 100%) / 2), where
 * 100% is the stage's own height -- which positions it without adding any box.
 * ------------------------------------------------------------------------ */
.benefit-scroll-track {
	position: relative;
	/*
	 * The scrub distance is added with a ::after spacer, NOT with padding-bottom.
	 * A sticky element is constrained to its containing block's CONTENT box, and
	 * padding is outside that box -- so padding here gave the stage no travel room
	 * at all and it scrolled straight off screen instead of pinning. A real
	 * in-flow block extends the content box, which is what sticky actually needs.
	 *
	 * Keep SCRUB_VH in benefit-sequence.js in step with the height below.
	 */
}

.benefit-scroll-track::after {
	content: "";
	display: block;
	height: 150vh;
}

.benefit-scroll-stage {
	position: sticky;
	/*
	 * Centres the section in the viewport WITHOUT giving the stage any height it
	 * does not need. In a sticky `top`, a percentage resolves against the
	 * containing block's height, so `100%` here is not usable for the element's
	 * own size -- but the section is a known-ish height and the circle is capped
	 * in vh, so half the difference from the viewport is the right offset and it
	 * degrades gracefully: if the section is taller than the viewport the offset
	 * clamps to 0 and it simply pins to the top.
	 */
	/*
	 * Full-viewport stage. It used to be content-height and centred with a top
	 * offset, which kept the flat black ground from painting bands above and
	 * below the section. With stadium footage as the ground that reasoning
	 * inverts: the video has to fill the screen, so the stage takes the whole
	 * viewport and centres the composition inside itself instead.
	 */
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background-color: var(--black);
}

/*
 * The theme's own section padding, unchanged. The stage no longer constrains the
 * height, so the composition needs no vh-based compression to fit -- it defines
 * the stage's height instead of being squeezed into it.
 */
.benefit-scroll-stage .tf-widget-benefit {
	width: 100%;
	padding: 80px 0 60px 0;
	background-color: transparent;
}

/* --- the circle ---------------------------------------------------------- */
.benefit-sequence {
	/* Matches the footprint of the still photo this replaced: the circle sits in
	   the middle column as one element of the composition, not as a hero that
	   dominates it. Capped in px so it does not keep growing on wide monitors. */
	--size: min(19vw, 44vh, 370px);

	/*
	 * width + aspect-ratio, NOT width + height. The parent column is a flex
	 * container, so the stretch default overrides the height and lets the box
	 * resolve taller than it is wide -- and a border-radius:100% box that is
	 * 450x560 renders as an egg, not a circle. Deriving the height from the
	 * ratio and opting out of the stretch keeps it round at every viewport.
	 */
	width: var(--size);
	aspect-ratio: 1 / 1;
	height: auto;
	align-self: center;
	flex: 0 0 auto;
	margin: 0 auto;
	padding: 0;
	/* The theme's 1px ring sits on .benefit-video; the sequence keeps it and
	   adds the translucent inner ring that used to live on the img. */
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.benefit-sequence-canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	/* Same 24px translucent ring the theme put around the still photo, moved
	   to the canvas so the frames sit inside it exactly as the photo did. */
	border: clamp(10px, 1.6vh, 24px) solid rgba(255, 177, 133, 0.2);
	background-color: #0b1017;
	object-fit: cover;
}

/*
 * Progress ring — the one signature device. It traces the same circle the ring
 * already describes, so it reads as the aperture filling rather than as a new
 * widget. Stroke length is driven from JS through --benefit-progress.
 */
.benefit-sequence-ring {
	position: absolute;
	inset: 0;
	/* inset:0 already matches the square parent; width/height:100% on an SVG in
	   this flex context resolves against the wrong axis and makes the ring an
	   ellipse independently of the canvas. */
	width: auto;
	height: auto;
	transform: rotate(-90deg);
	pointer-events: none;
}

.benefit-sequence-ring-track,
.benefit-sequence-ring-fill {
	fill: none;
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
}

.benefit-sequence-ring-track {
	stroke: rgba(255, 255, 255, 0.12);
}

.benefit-sequence-ring-fill {
	stroke: var(--primary);
	stroke-linecap: round;
	/* r=48 -> circumference 301.6; the dash is the drawn arc and the gap hides
	   the rest, so offsetting by (1 - progress) sweeps it clockwise. */
	stroke-dasharray: 301.6;
	stroke-dashoffset: calc(301.6 * (1 - var(--benefit-progress, 0)));
}

/* --- the four benefits --------------------------------------------------- */

/*
 * The benefit copy is static. It is fully readable the moment the section is on
 * screen and never fades, slides or reveals -- the film in the circle is the
 * only thing scroll drives. These rules exist to hold that: the theme ships
 * `wow`/`animated` classes on these elements sitewide, and this section's
 * markup drops them, so nothing here should reintroduce entrance motion.
 */
.benefit-scroll-stage .benefit-item,
.benefit-scroll-stage .benefit-number span.number {
	opacity: 1;
	transform: none;
	animation: none;
}

/*
 * The engine sets .is-ready once the first frame is on the canvas. Until then
 * the decorative infographics stay hidden so they do not float around an empty
 * circle on a cold load.
 */
.benefit-sequence .shape-video-1,
.benefit-sequence .shape-video-2,
.benefit-sequence .shape-video-3,
.benefit-sequence .shape-video-4 {
	opacity: 0;
	transition: opacity 700ms ease;
}

.benefit-sequence.is-ready .shape-video-1,
.benefit-sequence.is-ready .shape-video-2,
.benefit-sequence.is-ready .shape-video-3,
.benefit-sequence.is-ready .shape-video-4 {
	opacity: 1;
}

/* --- narrow screens ------------------------------------------------------ */

/*
 * Below 991px the theme stacks the three columns, and the stacked composition is
 * far taller than one viewport -- it cannot be pinned without clipping it. So
 * the pin is dropped entirely here: the track collapses to its content height
 * and the stage becomes a normal block, which also means no scroll distance is
 * added on the devices least able to spare it. The sequence plays off the
 * section's own travel through the viewport instead -- see benefit-sequence.js.
 */
@media only screen and (max-width: 991px) {
	.benefit-scroll-track::after {
		display: none;
	}

	.benefit-scroll-stage {
		position: static;
		top: auto;
	}

	.benefit-scroll-stage .tf-widget-benefit {
		padding: 60px 0 50px 0;
	}

	.benefit-sequence {
		--size: min(64vw, 320px);

		margin: 8px auto 40px;
	}
}

/*
 * The theme's 80px benefit number is sized for the three-column desktop row. Once
 * the columns stack it shares a single narrow row with the copy, and at 390px the
 * number overflows the container and is clipped at the screen edge. Letting it
 * shrink and capping the row keeps both parts on screen.
 */
@media only screen and (max-width: 767px) {
	.benefit-scroll-stage .benefit-item {
		gap: 12px;
	}

	.benefit-scroll-stage .benefit-number {
		flex: 0 0 auto;
	}

	.benefit-scroll-stage .benefit-number span.number {
		font-size: clamp(44px, 13vw, 64px);
		line-height: 1.1;
	}

	.benefit-scroll-stage .benefit-content {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/*
 * Reduced motion: no hold, no scrubbing. The script paints one frame from the
 * middle of the sequence -- the ball at the deepest point of the net -- and the
 * section behaves like the static composition it replaced. The progress ring is
 * hidden because it has nothing left to report.
 */
@media (prefers-reduced-motion: reduce) {
	.benefit-sequence-ring-fill {
		display: none;
	}

	/* Nothing scrubs, so the pin has no purpose -- and its surplus height would
	   be pure dead scroll. The section returns to a normal block in the flow. */
	.benefit-scroll-track::after {
		display: none;
	}

	.benefit-scroll-stage {
		position: static;
		top: auto;
	}
}

/* ---------------------------------------------------------------------------
   Hero registration form
   Replaces the old "free trial session" event card in the slider. It keeps the
   .box-events-slide container so the theme's existing card and responsive
   rules still apply; everything below styles the form inside it.
--------------------------------------------------------------------------- */
.hero-register {
	background-color: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	/* The card sits on the dark hero photo, but its contents inherit the page's
	   navy body colour and read as black-on-black. Force the card to white and
	   let the accent rules below opt back out. */
	color: #fff;
}

/*
 * The "რეგისტრაცია" badge above the card title.
 *
 * The stock `span.new-event` rule lives in shortcodes.css, which the manifest
 * never loads, so the badge arrives here completely unstyled -- no fill, no
 * padding, no radius. It is restated in full rather than inherited.
 *
 * The original rounded only the top corners (`6px 6px 0 0`) because in the
 * theme's markup the badge sat flush on an event photo directly beneath it. In
 * this card it is a standalone pill with a gap below, so all four corners are
 * rounded.
 */
.hero-register .new-event {
	display: inline-block;
	padding: 4px 20px;
	border-radius: 6px;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.08em;
	color: var(--navy, #16244f);
	background-color: var(--primary, #c9a227);
}

.hero-register .title-event {
	color: #fff;
	margin-bottom: 4px;
}

.hero-register-note {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	margin-bottom: 16px;
}

.hero-register-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 10px;
}

/*
 * The four text fields.
 *
 * style.css sets `input[type="text"], input[type="email"], ... { color:
 * var(--secondary-one) }` -- grey -- at specificity (0,1,1), exactly tying a
 * plain `.hero-register-form input`. That tie only resolved our way because
 * custom.css happens to load last, which is too fragile for the thing that
 * decides whether the form is readable. Naming the type attribute alongside the
 * form class takes it to (0,2,1) and wins outright.
 */
.hero-register-form input,
.hero-register-form input[type="text"],
.hero-register-form input[type="tel"],
.hero-register-form input[type="email"] {
	width: 100%;
	height: auto;
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 15px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/*
 * Placeholder colour.
 *
 * style.css styles the *vendor-prefixed* pseudo-elements
 * (`input::-webkit-input-placeholder`, `::-moz-placeholder`,
 * `:-ms-input-placeholder`) and sets them to `--secondary-one` (#8a93a8, grey).
 * A modern `::placeholder` rule does not override those: in each engine the
 * prefixed and unprefixed names are *different selectors*, and an engine that
 * recognises its own prefixed form applies it independently. So the grey kept
 * winning on the empty fields even though `::placeholder` said white.
 *
 * Every spelling therefore has to be restated. They must also stay in SEPARATE
 * rules -- a browser discards an entire selector list containing a pseudo-element
 * it does not recognise, so grouping them would void the whole block.
 */
.hero-register-form input::placeholder {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}

.hero-register-form input::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}

.hero-register-form input::-moz-placeholder {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}

.hero-register-form input:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.hero-register-form input:focus {
	outline: none;
	border-color: var(--gold, #c9a227);
	background-color: rgba(255, 255, 255, 0.16);
}

/* Chrome paints autofilled fields with its own near-white background and dark
   text, which breaks the white-on-translucent look. The inset shadow is the
   only way to override that background. */
.hero-register-form input:-webkit-autofill,
.hero-register-form input:-webkit-autofill:hover,
.hero-register-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px rgba(38, 38, 38, 0.92) inset;
}

/* Marks a field the server or the browser rejected. */
.hero-register-form input[aria-invalid="true"] {
	border-color: #e57373;
}

.hero-register-submit {
	width: 100%;
	margin-top: 4px;
	cursor: pointer;
	border: 0;
}

.hero-register-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Feedback line injected by the form handler after a submit. */
.hero-register-status {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.4;
}

.hero-register-status[data-state="ok"] {
	color: #a5d6a7;
}

.hero-register-status[data-state="error"] {
	color: #ef9a9a;
}

/* The slider is short on vertical room on phones, so tighten the form up. */
@media only screen and (max-width: 767px) {
	.hero-register-form input {
		padding: 10px 14px;
		font-size: 14px;
	}

	.hero-register-form fieldset {
		margin-bottom: 8px;
	}
}

/* ---------------------------------------------------------------------------
   Hero registration wizard
   The card now collects the full application (the same field set the
   registration page posts) across four steps. Everything above still applies:
   these rules add the step chrome, the parent tabs, the file rows and the
   consent line, and they pin the card's height so stepping does not make the
   hero jump.
--------------------------------------------------------------------------- */

/*
 * Fixed height, sized to the tallest step (step 3, four inputs plus the tabs).
 * Without it the card grows and shrinks between steps and the whole hero
 * reflows under the parent's cursor. `min-height` rather than `height` so an
 * error message or a long filename can still push it out rather than overflow.
 */
.hero-register-wizard .hero-wizard-step {
	min-height: 296px;
}

/* --- progress ---------------------------------------------------------- */
.hero-wizard-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.hero-wizard-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-wizard-dot {
	width: 26px;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.22);
	transition: background-color 0.2s ease;
}

.hero-wizard-dot[data-state="done"] {
	background-color: rgba(201, 162, 39, 0.55);
}

.hero-wizard-dot[data-state="current"] {
	background-color: var(--gold, #c9a227);
}

.hero-wizard-count {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

/* --- step headings and helper text ------------------------------------- */
.hero-wizard-legend {
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
}

.hero-wizard-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}

/*
 * Labels for the inputs a placeholder cannot describe: `type="date"` and
 * `type="time"` render their own format hint and ignore `placeholder`
 * entirely, and a bare file input says nothing about what to attach.
 */
.hero-wizard-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

/* --- errors ------------------------------------------------------------ */
.hero-wizard-error {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.35;
	color: #ef9a9a;
}

.hero-wizard-error[hidden] {
	display: none;
}

/* --- date, time and select share the text inputs' look ----------------- */
/*
 * Restated per type for the same reason the text inputs are: style.css targets
 * `input[type="date"]` at (0,1,1), which ties a plain `.hero-register-form
 * input`. Naming the type alongside the form class wins outright.
 */
.hero-register-form input[type="date"],
.hero-register-form input[type="time"] {
	width: 100%;
	padding: 11px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 14px;
}

/* Chrome's calendar and clock glyphs are near-black by default, which is
   invisible on the translucent card. */
.hero-register-form input[type="date"]::-webkit-calendar-picker-indicator,
.hero-register-form input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.7;
	cursor: pointer;
}

/* --- two fields on one row (school hours) ------------------------------ */
.hero-wizard-pair {
	display: flex;
	gap: 10px;
}

.hero-wizard-field {
	display: block;
	flex: 1 1 0;
	min-width: 0;
}

/* --- parent tabs ------------------------------------------------------- */
/*
 * The API accepts either parent as long as one block is complete, so the card
 * collects one and lets the parent switch, rather than showing eight inputs.
 */
.hero-wizard-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.hero-wizard-tab {
	flex: 1 1 0;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	background-color: transparent;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.hero-wizard-tab[aria-selected="true"] {
	border-color: var(--gold, #c9a227);
	background-color: rgba(201, 162, 39, 0.18);
	color: #fff;
}

.hero-wizard-parent[hidden] {
	display: none;
}

/* --- file rows --------------------------------------------------------- */
.hero-wizard-file {
	margin-bottom: 14px;
}

/*
 * The native control cannot be restyled beyond its button, so the button is
 * what gets styled: the rest of the row is the label above it and the filename
 * list below.
 */
.hero-register-form input[type="file"] {
	width: 100%;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

.hero-register-form input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}

.hero-register-form input[type="file"]::-webkit-file-upload-button {
	margin-right: 10px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}

.hero-wizard-files {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.35;
	word-break: break-word;
	color: #a5d6a7;
}

.hero-wizard-files[hidden] {
	display: none;
}

/* --- consent ----------------------------------------------------------- */
.hero-wizard-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 4px 8px;
	margin-top: 4px;
}

.hero-wizard-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--gold, #c9a227);
	cursor: pointer;
}

.hero-wizard-consent label {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
}

/* Spans both columns so it lines up under the text, not beside the box. */
.hero-wizard-consent .hero-wizard-error {
	grid-column: 1 / -1;
}

/* --- navigation -------------------------------------------------------- */
.hero-wizard-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

/* The Continue and Submit buttons are `.hero-register-submit`, which is
   `width: 100%`; in the row they share, flex sizing takes over. */
.hero-wizard-nav .hero-register-submit {
	flex: 1 1 auto;
	margin-top: 0;
	width: auto;
}

.hero-wizard-back {
	flex: 0 0 auto;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	background-color: transparent;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-wizard-back:hover {
	border-color: var(--gold, #c9a227);
	color: #fff;
}

.hero-wizard-back[disabled] {
	opacity: 0.5;
	cursor: default;
}

.hero-wizard-nav [hidden] {
	display: none;
}

/* --- link to the standalone page --------------------------------------- */
/*
 * The card is a convenience, not the only way in. Anyone who would rather have
 * the whole form on one screen -- or hits trouble attaching a file here -- gets
 * a way out on every step.
 */
.hero-wizard-fallback {
	margin: 10px 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.hero-wizard-fallback a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
}

.hero-wizard-fallback a:hover {
	color: var(--gold, #c9a227);
}

/* ---------------------------------------------------------------------------
   Hero CTA card (slides 2 and 3)
   Only slide 1 carries a live form -- three copies would mean duplicate ids,
   three sets of step state, and a half-filled form stranded on a slide the
   parent has left. These slides point at /registration instead.
--------------------------------------------------------------------------- */
.hero-register-needs {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.hero-register-needs li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.8);
}

.hero-register-needs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--gold, #c9a227);
}

/* `.hero-register-submit` is a <button> on slide 1 and an <a> here, so the
   anchor needs the text centred and the block behaviour spelled out. */
a.hero-register-submit {
	display: block;
	width: 100%;
	text-align: center;
}

/* --- phones ------------------------------------------------------------ */
/*
 * The slider is short on vertical room on phones. The steps get shorter and
 * tighter, and the school-hours pair stacks -- two time inputs side by side
 * leave neither wide enough to read.
 */
@media only screen and (max-width: 767px) {
	.hero-register-wizard .hero-wizard-step {
		min-height: 0;
	}

	.hero-wizard-pair {
		flex-direction: column;
		gap: 8px;
	}

	.hero-wizard-legend {
		margin-bottom: 10px;
		font-size: 14px;
	}

	.hero-register-form input[type="date"],
	.hero-register-form input[type="time"] {
		padding: 10px 12px;
	}
}

/* File attachment field on the contact form. */
.files-wrap {
	margin-bottom: 20px;
}

.files-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.files-wrap input[type="file"] {
	display: block;
	width: 100%;
	padding: 12px;
	border: 1px dashed var(--line, #dde3ef);
	border-radius: 8px;
	background: var(--surface, #f5f7fb);
	cursor: pointer;
}

.files-hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--secondary-one, #8a93a8);
}

/* Header wordmark — crest plus the academy name
 * ------------------------------------------------------------------------
 * The crest alone does not read as a name at header size, so the Latin
 * wordmark sits beside it. The theme's `#logo` is a plain block with a
 * float, so the anchor is what turns into the flex row -- putting the flex
 * on `#logo` itself would fight the float rather than lay out the two
 * children.
 *
 * The header sits on the dark navy band, so the text takes `--white` with
 * the gold reserved for the hover state, matching how the nav links behave.
 * ------------------------------------------------------------------------ */
.header-inner .logo > a,
#logo-mobie > a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.logo-wordmark {
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--white);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.logo > a:hover .logo-wordmark {
	color: var(--primary);
}

/* Below the desktop breakpoint the header has to hold the crest, the
 * wordmark and the burger on one line, so the wordmark wraps to two lines
 * at a smaller size instead of pushing the burger off the row. */
@media (max-width: 991px) {
	.logo-wordmark {
		font-size: 15px;
		white-space: normal;
		max-width: 9em;
	}
}

/* --- stadium video behind the pinned benefit section --------------------- */
/*
 * The stage already establishes a positioning context (position: sticky), so the
 * video absolutely positions against the stage itself and covers exactly the
 * pinned section -- no extra box, so the pin geometry and the SCRUB_VH contract
 * with benefit-sequence.js are untouched.
 *
 * The stage keeps its --black background as the fallback ground: it shows while
 * the video buffers, if the file fails, and wherever the video is suppressed
 * (reduced motion, narrow screens).
 */
.benefit-scroll-stage {
	overflow: hidden;
}

.benefit-stage-video,
.benefit-stage-scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.benefit-stage-video {
	object-fit: cover;
	/* Footage of a bright green pitch behind white type: dimming and slightly
	   desaturating it at the source means the scrim above does not have to be
	   opaque enough to hide the stadium altogether. */
	filter: brightness(0.55) saturate(0.85);
}

/* Vertical scrim, heaviest top and bottom where the section title and the
   benefit rows sit, so the headings keep their contrast over moving footage. */
.benefit-stage-scrim {
	background: linear-gradient(
		to bottom,
		rgba(6, 8, 18, 0.88) 0%,
		rgba(6, 8, 18, 0.62) 35%,
		rgba(6, 8, 18, 0.62) 65%,
		rgba(6, 8, 18, 0.88) 100%
	);
}

/*
 * The widget and the circle must sit above both layers. The stage's children are
 * otherwise all z-index auto, so a single stacking step is enough.
 */
.benefit-scroll-stage .tf-widget-benefit {
	position: relative;
	z-index: 1;
}

/* Reduced motion: hold a still ground rather than looping footage. The rest of
   the section already drops its pin under this query. */
@media (prefers-reduced-motion: reduce) {
	.benefit-stage-video {
		display: none;
	}
}

/*
 * Isometric pitch render in the About text column, replacing the small
 * checkerboard graphic that sat above the section heading.
 *
 * The image it replaces was a 201x80 decorative block, so the theme rule only
 * needed margins. This one is an 840x560 illustration with real detail, so it
 * needs an explicit cap: without a width it would render at intrinsic size and
 * overflow the column. Capped in `ch`-independent terms against the copy width
 * below it (p.post is max-width 522px) so the render and the paragraph share an
 * edge instead of the image out-denting the text block.
 *
 * `height: auto` with the width/height attributes on the tag preserves the 3:2
 * ratio while still giving the browser the aspect box up front, so the heading
 * below does not shift as the PNG loads.
 */
.tf-about-us .about-box > img.about-pitch {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	/* Trims the top margin the theme rule applies: the cutout carries its own
	   transparent padding, so the theme's 28px read as a much larger gap. */
	margin-top: -8px;
	margin-bottom: 12px;
	margin-left: -14px;
}

/*
 * Below the md breakpoint the two columns stack and the copy goes full-bleed,
 * so the render is centred over it rather than left-hung, and shrunk so it does
 * not dominate the fold on a phone.
 */
@media (max-width: 767px) {
	.tf-about-us .about-box > img.about-pitch {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------------------------------------------------------------------------
   Text colour on the navy sections
   ---------------------------------------------------------------------------
   `.background-black` (color1.css) paints these blocks navy but never sets a
   text colour, so everything inside still inherits `body { color: var(--black) }`
   -- which is that same navy. The result is navy-on-navy: the benefit cards,
   testimonial cards and footer copy read as washed-out grey rather than white.

   The theme's own light-text rules for these blocks live in shortcodes.css,
   which content/manifest.json never loads, so nothing was supplying them.

   Set on the section so every descendant inherits white, then let the existing
   accent rules (gold eyebrows, gold headings, gold links) override on their own
   higher specificity -- none of them are weaker than this single-class rule.
--------------------------------------------------------------------------- */
.background-black {
	color: var(--white, #fff);
}

/*
 * Headings inside the navy blocks need naming directly: style.css sets
 * `h1..h6 { color: var(--black) }`, which is a same-specificity rule that would
 * otherwise win on source order over the inherited white above.
 */
.background-black h1,
.background-black h2,
.background-black h3,
.background-black h4,
.background-black h5,
.background-black h6 {
	color: var(--white, #fff);
}

/*
 * The benefit and testimonial card copy. These carry no colour of their own, so
 * inheriting white is enough -- stated explicitly because the paragraph is the
 * whole point of the card and should not silently depend on an ancestor.
 */
.background-black .description-benefit,
.background-black p.testimonial,
.background-black .testimonial-box span {
	color: var(--white, #fff);
}

/*
 * About page banner. The shared .page-title image is the theme default used by
 * every other page, so the pitch photo is scoped to this page only.
 */
.page-title.page-title-about {
	background-image: url(../mini-futbol-sahasi-ozellikleri-ve-olculeri.jpg);
}

/*
 * Widget Mission -- image pair alignment.
 *
 * The stock template assumes image-v1 is a tall portrait and image-v2 a smaller
 * portrait sized by its own natural dimensions. Our photos are a landscape
 * 1280x960 (tab1) and a panoramic 1152x442 (gua_hero22), so image-v1 rendered
 * short and wide while the absolutely-positioned image-v2 stood taller than its
 * own parent -- it spilled past the bottom and broke the overlap.
 *
 * image-v2 is a 3:2 landscape crop, not the stock portrait: gua_hero22 is a
 * 2.6:1 panorama of a match against the mountains, and a portrait slot cropped
 * away most of its width. Its own ratio at this width would be a thin sliver,
 * so 3:2 is the compromise -- wide enough to keep the frame, tall enough to
 * still read as a photo. Width is 52% to match.
 *
 * Only the sizing is corrected here. The offsets stay in responsive.css, which
 * already walks image-v2 inward at 1199px and 991px and hides it below 767px;
 * custom.css loads after it, so re-declaring bottom/right here would override
 * those and reintroduce the overflow at tablet widths.
 */
.image-mission-wrap img.image-v1 {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.image-mission-wrap .image-v2 {
	width: 52%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	display: block;
}

/*
 * Below 767px image-v2 is hidden and the wrap padding is zeroed, so image-v1 is
 * alone and full width -- a 4:5 crop is too tall there. Landscape reads better.
 */
@media only screen and (max-width: 767px) {
	.image-mission-wrap img.image-v1 {
		aspect-ratio: 3 / 2;
	}
}

/*
 * Parallax CTA banner.
 * The theme leaves this banner's alignment to an inherited text-align, which
 * centred the headline while the CTA button sat left. Pin the whole block left
 * so headline, logo lockup and button share one edge.
 */
.tf-widget-banner .tf-banne-paralax {
	text-align: left;
}

/*
 * Logo lockup row: crest + the "გლდანი იუნაითედ აკადემია" wordmark. The theme's
 * `.tf-widget-banner img` sets display:block + 36px/64px margins on every image
 * in the banner -- the row carries that vertical rhythm now, so the children
 * reset it and are sized explicitly to keep the lockup's proportions.
 */
.tf-widget-banner .banner-wordmark {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	margin: 36px 0 64px 0;
	flex-wrap: nowrap;
}

.tf-widget-banner .banner-wordmark img {
	margin: 0;
}

.tf-widget-banner .banner-wordmark .banner-crest {
	width: auto;
	height: 132px;
	flex: 0 0 auto;
	object-fit: contain;
}

/* The wordmark is live text rather than a bitmap, so it scales cleanly and
   stays selectable. Uses the display face (`--font-display`) that colors/color1.css
   already applies to `.title-banner` directly above, so the lockup matches the
   headline -- note Oswald is NOT available here, the theme's Google Fonts import
   was removed. `--font-display` has no Latin-specific fallback issue: Dachi The
   Lynx covers Latin as well as Georgian. */
.tf-widget-banner .banner-wordmark .banner-text {
	font-family: var(--font-display);
	font-size: 54px;
	line-height: 1.1;
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--white);
	white-space: nowrap;
}

@media only screen and (max-width: 991px) {
	.tf-widget-banner .banner-wordmark .banner-crest {
		height: 104px;
	}

	.tf-widget-banner .banner-wordmark .banner-text {
		font-size: 42px;
	}
}

@media only screen and (max-width: 767px) {
	.tf-widget-banner .banner-wordmark {
		gap: 14px;
		margin: 28px 0 44px 0;
	}

	.tf-widget-banner .banner-wordmark .banner-crest {
		height: 76px;
	}

	.tf-widget-banner .banner-wordmark .banner-text {
		font-size: 28px;
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
   Registration page  (/registration)
   ---------------------------------------------------------------------------
   The enrolment application: child details, parent details, photo, documents.

   Styled from scratch rather than reusing the theme form classes, because the
   theme component styles live in shortcodes.css, which content/manifest.json
   never loads. Anything here that looked "inherited from the theme" would in
   fact be unstyled, so every rule this page needs is stated outright.

   Light surface, navy text -- the opposite of the hero card, which is why the
   colours are written out here instead of shared with it.
--------------------------------------------------------------------------- */
.tf-registration-page {
	padding: 80px 0 100px;
	background-color: var(--white, #fff);
}

.registration-layout {
	/* The aside is reference material, the form is the task. Side by side the
	   form leads; the row gap only matters once they stack. */
	row-gap: 48px;
}

/* --- left column: guidance ----------------------------------------------- */

.registration-aside {
	padding-right: 24px;
}

.registration-aside .content-page-title span {
	display: block;
	margin-bottom: 8px;
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--gold-dark, #a5821c);
}

.registration-aside .content-page-title h2 {
	font-size: 34px;
	line-height: 44px;
	margin-bottom: 16px;
}

.registration-aside .content-page-title p.post {
	color: var(--secondary, #4a5570);
	margin-bottom: 0;
}

.registration-aside-title {
	font-family: "Oswald", sans-serif;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 16px;
	color: var(--navy, #16244f);
}

.registration-steps,
.registration-docs,
.registration-help {
	margin-top: 36px;
}

/*
 * The four enrolment steps. A real <ol> so the order survives without CSS and
 * reads correctly to a screen reader; the visible numerals are spans because
 * the counter needs the gold disc treatment.
 */
.registration-step-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.registration-step-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.registration-step-num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 100%;
	background-color: var(--gold, #c9a227);
	color: var(--navy, #16244f);
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
	text-align: center;
}

.registration-step-text {
	color: var(--secondary, #4a5570);
	line-height: 26px;
}

.registration-doc-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.registration-doc-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 10px;
	color: var(--secondary, #4a5570);
}

/* A gold tick drawn in CSS, so the list needs no icon font or image. */
.registration-doc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 10px;
	border-right: 2px solid var(--gold, #c9a227);
	border-bottom: 2px solid var(--gold, #c9a227);
	transform: rotate(45deg);
}

.registration-docs-note,
.registration-help p {
	font-size: 14px;
	line-height: 22px;
	color: var(--secondary-one, #8a93a8);
}

.registration-help {
	padding: 24px;
	border-radius: 12px;
	background-color: var(--surface, #f5f7fb);
	border: 1px solid var(--line, #dde3ef);
}

.registration-help-phone,
.registration-help-mail {
	display: block;
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	color: var(--navy, #16244f);
}

.registration-help-phone {
	font-size: 20px;
	margin-bottom: 4px;
}

.registration-help-mail {
	font-size: 15px;
	word-break: break-all;
}

.registration-help-phone:hover,
.registration-help-mail:hover {
	color: var(--gold-dark, #a5821c);
}

/* --- right column: the form ---------------------------------------------- */

.registration-form-wrap {
	padding: 40px;
	border-radius: 16px;
	background-color: var(--white, #fff);
	border: 1px solid var(--line, #dde3ef);
	box-shadow: 0 18px 50px rgba(22, 36, 79, 0.07);
}

/*
 * Each <fieldset> is one titled section. The theme ships no fieldset styling
 * and browsers apply a default border and padding, so both are reset.
 */
.registration-group {
	border: 0;
	padding: 0;
	margin: 0 0 32px;
}

.registration-group:last-of-type {
	margin-bottom: 24px;
}

.registration-legend {
	/* A legend is not an ordinary flow box: display:block plus the float reset
	   is what makes the border-bottom span the fieldset in every engine. */
	display: block;
	width: 100%;
	float: none;
	padding: 0 0 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--line, #dde3ef);
	font-family: "Oswald", sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--navy, #16244f);
}

/*
 * Two columns on desktop. The grid lives on a wrapper rather than the fieldset
 * because a fieldset as grid container has historically been unreliable, and
 * the legend would otherwise become a grid item.
 */
.registration-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.registration-field-wide {
	grid-column: 1 / -1;
}

.registration-field {
	display: flex;
	flex-direction: column;
}

.registration-field label {
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--navy, #16244f);
}

.req {
	color: #c62828;
}

/*
 * Inputs.
 *
 * style.css sets `input[type="text"], input[type="email"], ... { color:
 * var(--secondary-one); border-color: var(--secondary-one); height: 56px }` at
 * specificity (0,1,1). A plain `.registration-form input` only ties that and
 * would depend on load order, so the type attributes are named alongside the
 * class to win outright -- the same fix the hero form needed.
 */
.registration-form input[type="text"],
.registration-form input[type="tel"],
.registration-form input[type="email"],
.registration-form input[type="date"],
.registration-form input[type="time"],
.registration-form textarea {
	width: 100%;
	height: auto;
	padding: 12px 14px;
	border: 1px solid var(--line, #dde3ef);
	border-radius: 8px;
	background-color: var(--white, #fff);
	color: var(--navy, #16244f);
	font-family: "Jost", sans-serif;
	font-size: 15px;
	line-height: 24px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.registration-form textarea {
	resize: vertical;
	min-height: 110px;
}

.registration-form input[type="text"]:focus,
.registration-form input[type="tel"]:focus,
.registration-form input[type="email"]:focus,
.registration-form input[type="date"],
.registration-form input[type="time"]:focus,
.registration-form textarea:focus {
	outline: none;
	border-color: var(--gold, #c9a227);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

/* Placeholders: every spelling restated, for the reason documented on the hero
   form -- style.css styles the vendor-prefixed pseudo-elements, and those are
   separate selectors that an unprefixed rule does not override. Separate blocks
   because a browser discards a whole selector list containing one it rejects. */
.registration-form ::placeholder {
	color: var(--secondary-one, #8a93a8);
	opacity: 1;
}

.registration-form ::-webkit-input-placeholder {
	color: var(--secondary-one, #8a93a8);
	opacity: 1;
}

.registration-form ::-moz-placeholder {
	color: var(--secondary-one, #8a93a8);
	opacity: 1;
}

/* A rejected field, marked by the form handler. */
.registration-form [aria-invalid="true"] {
	border-color: #c62828;
	background-color: #fff8f8;
}

.registration-form [aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.14);
}

.registration-hint {
	margin-top: 6px;
	font-size: 13px;
	line-height: 18px;
	color: var(--secondary-one, #8a93a8);
}

/*
 * Sits under the father's block and explains the one rule the field labels
 * cannot: both parent sections are optional individually, but at least one has
 * to be completed. Spaced away from the grid above so it reads as a note about
 * the section rather than as a hint on the last field.
 */
.registration-parent-note {
	margin-top: 14px;
	margin-bottom: 0;
}

.registration-error {
	margin-top: 6px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #c62828;
}

/* --- file inputs ---------------------------------------------------------- */

/*
 * The native control is kept rather than swapped for a styled label: it is
 * keyboard-accessible, announces the chosen file, and on a phone it opens the
 * camera/gallery picker parents expect. Only its frame is themed.
 */
.registration-form input[type="file"] {
	display: block;
	width: 100%;
	padding: 12px;
	border: 1px dashed var(--line, #dde3ef);
	border-radius: 8px;
	background-color: var(--surface, #f5f7fb);
	color: var(--navy, #16244f);
	font-size: 14px;
	cursor: pointer;
}

.registration-form input[type="file"]:focus-visible {
	outline: 2px solid var(--gold, #c9a227);
	outline-offset: 2px;
}

.registration-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: 0;
	border-radius: 6px;
	background-color: var(--navy, #16244f);
	color: var(--white, #fff);
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.registration-form input[type="file"]::file-selector-button:hover {
	background-color: var(--gold-dark, #a5821c);
}

/* What is actually attached, listed by the form handler with sizes -- a file
   input on its own shows only the first name, or an unhelpful "n files". */
.registration-file-list {
	margin-top: 8px;
	font-size: 13px;
	line-height: 20px;
	color: var(--navy, #16244f);
	word-break: break-word;
}

/* --- consent, submit, status --------------------------------------------- */

.registration-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 10px;
	align-items: start;
	padding: 18px;
	margin-bottom: 24px;
	border-radius: 10px;
	background-color: var(--surface, #f5f7fb);
}

.registration-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--gold-dark, #a5821c);
	cursor: pointer;
}

.registration-consent label {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--secondary, #4a5570);
	cursor: pointer;
}

/* The error belongs under both columns, not beside the checkbox. */
.registration-consent .registration-error {
	grid-column: 1 / -1;
}

/*
 * The submit button.
 *
 * `.flat-button` lives in shortcodes.css and so never loads; the gold fill and
 * navy label are set here rather than inherited.
 */
.registration-submit {
	display: inline-block;
	width: 100%;
	padding: 16px 40px;
	border: 0;
	border-radius: 8px;
	background-color: var(--gold, #c9a227);
	color: var(--navy, #16244f);
	font-family: "Oswald", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.registration-submit:hover {
	background-color: var(--navy, #16244f);
	color: var(--gold, #c9a227);
}

.registration-submit[disabled] {
	opacity: 0.65;
	cursor: default;
}

.registration-required-note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--secondary-one, #8a93a8);
}

/* Result of a submit, injected by the form handler. */
.registration-status {
	margin: 18px 0 0;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 24px;
}

.registration-status[data-state="ok"] {
	background-color: #e8f5e9;
	border: 1px solid #a5d6a7;
	color: #1b5e20;
}

.registration-status[data-state="error"] {
	background-color: #fdecea;
	border: 1px solid #ef9a9a;
	color: #b71c1c;
}

/* --- responsive ----------------------------------------------------------- */

@media only screen and (max-width: 991px) {
	.registration-aside {
		padding-right: 0;
	}
}

@media only screen and (max-width: 767px) {
	.tf-registration-page {
		padding: 56px 0 72px;
	}

	/* One column: two 50% fields leave neither enough room for a Georgian
	   label, which then wraps and misaligns the rows. */
	.registration-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.registration-form-wrap {
		padding: 24px 20px;
		border-radius: 12px;
	}

	.registration-aside .content-page-title h2 {
		font-size: 28px;
		line-height: 38px;
	}

	/* iOS zooms the page in on focus for any font-size below 16px. */
	.registration-form input[type="text"],
	.registration-form input[type="tel"],
	.registration-form input[type="email"],
	.registration-form input[type="date"],
	.registration-form input[type="time"],
	.registration-form textarea {
		font-size: 16px;
	}
}

/* =======================================================================
   Date and time pickers
   =======================================================================
   `<input type="date">` and `<input type="time">` are replaced at runtime by
   app/components/datePickers.js with a row of selects -- day/month/year, and
   24-hour hour/minute -- because the native calendar takes a decade of paging
   to reach a birth year and the native clock renders an AM/PM segment that
   means nothing to a Georgian audience.

   The original input becomes a hidden field carrying the same name and the
   same YYYY-MM-DD / HH:MM value, so only the visible row needs styling. That
   hidden input is also where the form puts `aria-invalid`, which is why the
   error state below is matched on the group with :has() rather than on the
   selects themselves. */

.picker-group {
	display: flex;
	gap: 6px;
	align-items: stretch;
}

.picker-group select {
	flex: 1 1 0;
	min-width: 0;
	/* Trims the browser's default row height, which is what makes an unstyled
	   select look taller than the text inputs beside it. */
	text-overflow: ellipsis;
}

/*
 * The month name is much longer than a day or a year, so the three do not
 * split evenly: the month takes the slack and the two numbers stay narrow.
 */
.picker-date select[data-part="day"] {
	flex: 0 0 20%;
}

.picker-date select[data-part="year"] {
	flex: 0 0 26%;
}

/* Hour and minute are both two digits -- an even split, kept narrow. */
.picker-time select {
	flex: 1 1 50%;
}

/* --- on the hero card (white on translucent) --------------------------- */
/*
 * Named alongside the form class for the reason the inputs are: style.css
 * targets bare `select` at a specificity a lone `.hero-register-form select`
 * only ties.
 */
.hero-register-form .picker-group select {
	height: auto;
	padding: 9px 8px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	/*
	 * White rather than the translucent dark the text inputs use. A `select`
	 * paints its dropdown list from its own background, so a dark closed field
	 * opened a dark grey list -- fine for one line, heavy for the 31/12/15-row
	 * lists these carry. White keeps the open list light and compact.
	 */
	background-color: #fff;
	color: var(--navy, #16244f);
	font-family: inherit;
	font-size: 13px;
	line-height: 18px;
	appearance: none;
	-webkit-appearance: none;
	/* Room for the chevron drawn below, so a long month name cannot run under it. */
	padding-right: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2316244f' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 9px 6px;
}

/* The placeholder row reads as a hint, not as a chosen value. */
.hero-register-form .picker-group select:invalid,
.hero-register-form .picker-group select option[value=""] {
	color: var(--secondary-one, #8a93a8);
}

.hero-register-form .picker-group select option {
	color: var(--navy, #16244f);
	background-color: #fff;
}

.hero-register-form .picker-group select:focus {
	outline: none;
	border-color: var(--gold, #c9a227);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

.hero-register-form .picker-group:has([aria-invalid="true"]) select {
	border-color: #e57373;
}

/* --- on the registration page (navy on white) -------------------------- */
.registration-form .picker-group select {
	height: auto;
	padding: 12px 10px;
	padding-right: 28px;
	border: 1px solid var(--line, #dde3ef);
	border-radius: 8px;
	background-color: var(--white, #fff);
	color: var(--navy, #16244f);
	font-family: "Jost", sans-serif;
	font-size: 15px;
	line-height: 24px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2316244f' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px 7px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.registration-form .picker-group select:focus {
	outline: none;
	border-color: var(--gold, #c9a227);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

.registration-form .picker-group:has([aria-invalid="true"]) select {
	border-color: #c62828;
	background-color: #fff8f8;
}

/* The school-hours pair puts two time pickers side by side; below ~380px the
   four selects that makes get too narrow to read, so the pair stacks. */
@media (max-width: 380px) {
	.hero-wizard-pair {
		flex-direction: column;
	}
}

/*
 * Registration and contact page banners. Same scoping as .page-title-about
 * above: .page-title carries the theme default image for every other page,
 * so each photo is pinned to the one page that uses it. Paths are relative
 * to this stylesheet, hence ../ up to public/.
 */
.page-title.page-title-registration {
	background-image: url(../gldaniregister.jpg);
}

.page-title.page-title-contact {
	background-image: url(../stadium-football-league-soccer-ball-soccer-2026-03-25-08-29-22-utc.jpg);
}

/*
 * About page contact section (map + enquiry form) background.
 *
 * The whole rule has to live here, not just the image. The theme styles this
 * section in shortcodes.css -- background, `position: relative`, and a 0.6
 * black `:before` overlay -- but manifest.json never loads that file (same gap
 * documented for .background-black above), so none of it was ever applied.
 *
 * That makes all three parts load-bearing:
 *   - `position: relative` scopes the overlay to the section. Without it the
 *     absolute `:before` resolves against the page and covers the viewport.
 *   - the overlay keeps the form legible. gua_hero3 is a floodlit stadium with
 *     a bright sunlit pitch, and .background-black paints the form's text
 *     white -- white on that grass is unreadable without it.
 *   - `z-index: 1` on the two columns lifts them above the overlay, which the
 *     theme did via the same missing file.
 *
 * Only the about page uses this section, so no page-scoping class is needed.
 */
.tf-widget-form-contact {
	position: relative;
	background-image: url(../gua_hero3.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
}

.tf-widget-form-contact:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(18, 18, 18, 0.6);
	z-index: 0;
}

.tf-widget-form-contact .tf-form-contact {
	position: relative;
	z-index: 1;
}

/*
 * Event cards on the home page -- image as the card backdrop.
 *
 * Same shortcodes.css gap as the section above. The theme builds these cards as
 * a flex row with the <img> absolutely positioned to cover the whole card and
 * the copy layered over it in a black panel. None of that loads, so the img was
 * rendering as a plain inline block at its natural size -- landing after the
 * text instead of behind it, and stretching the card to the photo's full height.
 *
 * Restored here is only what makes the photo read as a backdrop; the theme's
 * decorative angled panels and striped dividers are left out deliberately,
 * since they are a larger redesign than these cards currently need.
 *
 * `align-items: stretch` matters: it gives .event-infomation a definite height
 * for the absolutely-positioned image to fill. Without it the image collapses.
 */
.widget-event .item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.widget-event .item:not(:last-child) {
	margin-bottom: 38px;
}

.widget-event .event-infomation {
	position: relative;
	min-height: 320px;
}

.widget-event .event-infomation img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/*
 * The copy sits above the photo. A translucent black plate rather than the
 * theme's opaque clip-path panel -- it keeps the white text readable over a
 * sunlit pitch while still letting the photo show through.
 */
.widget-event .event-infomation .info {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: 460px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgba(18, 18, 18, 0.72);
}

.widget-event .event-infomation .info h4,
.widget-event .event-infomation .info h4 a,
.widget-event .event-infomation .info p {
	color: var(--white, #fff);
}

.widget-event .tf-info-price {
	position: relative;
	z-index: 2;
	padding: 54px 40px;
	background-color: var(--black);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
}

.widget-event .tf-info-price h4,
.widget-event .tf-info-price .price,
.widget-event .tf-info-price .price span {
	color: var(--white, #fff);
}

/*
 * Below 767px responsive.css stacks the card (flex-direction: column) and takes
 * both halves to full width, so the photo half needs its own height again --
 * the flex row is gone and nothing else gives it one.
 */
@media only screen and (max-width: 767px) {
	.widget-event .event-infomation {
		min-height: 260px;
	}
}

/* Contact form — question enquiry, sent over WhatsApp
 * ------------------------------------------------------------------------
 * The theme lays this form out as a 2x2 float grid (name/phone left,
 * email/age right). The form is now three fields, so the shortcodes rules
 * strand the email field in a half-width right float with a hole beside it.
 * Name and phone keep the pair; email spans the row underneath.
 */
.contact-page .name-wrap {
	width: 48%;
	float: left;
	margin-bottom: 24px;
}

.contact-page .phone-wrap {
	width: 48%;
	float: right;
	margin-bottom: 24px;
}

.contact-page .email-wrap {
	clear: both;
	float: none;
	width: 100%;
	margin-bottom: 24px;
}

@media only screen and (max-width: 767px) {
	.contact-page .name-wrap,
	.contact-page .phone-wrap {
		width: 100%;
		float: none;
	}
}

/* ---------------------------------------------------------------------------
   Registration success modal
   Shown by app/components/successModal.js after either registration form is
   accepted. The overlay is appended to <body>, so nothing here may depend on
   an ancestor in the page markup.
   ------------------------------------------------------------------------- */

.success-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.success-modal-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(11, 18, 40, 0.62);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.success-modal.is-open .success-modal-backdrop {
	opacity: 1;
}

.success-modal-card {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 40px 32px 32px;
	border-radius: 14px;
	background-color: #fff;
	box-shadow: 0 24px 60px rgba(11, 18, 40, 0.35);
	text-align: center;

	/* Rises and settles rather than just fading, so it reads as a card that
	   arrived in response to the submit. */
	opacity: 0;
	transform: translateY(18px) scale(0.96);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.success-modal.is-open .success-modal-card {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.success-modal-x {
	position: absolute;
	top: 10px;
	right: 14px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--secondary-one, #8a93a8);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.success-modal-x:hover {
	background-color: #f1f3f7;
	color: var(--navy, #16244f);
}

/* --- the tick ------------------------------------------------------------ */

.success-modal-icon {
	width: 84px;
	height: 84px;
	margin: 0 auto 20px;
}

.success-modal-icon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.success-modal-ring {
	stroke: #2e9e5b;
	stroke-width: 3;
	/* 2*pi*r, so the dash can draw the circle exactly once. */
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}

.success-modal-tick {
	stroke: #2e9e5b;
	stroke-width: 4;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
}

/* Drawn only once the card is in place: the ring sweeps, then the tick follows
   it, which is what makes the confirmation feel like it happened just now. */
.success-modal.is-open .success-modal-ring {
	animation: success-modal-draw 0.5s ease-out 0.12s forwards;
}

.success-modal.is-open .success-modal-tick {
	animation: success-modal-draw 0.32s ease-out 0.5s forwards;
}

@keyframes success-modal-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* --- copy ---------------------------------------------------------------- */

.success-modal-title {
	margin: 0 0 12px;
	font-family: "Oswald", sans-serif;
	font-size: 24px;
	line-height: 32px;
	color: var(--navy, #16244f);
}

.success-modal-body {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 26px;
	color: var(--secondary-one, #5c667e);
}

.success-modal-ok {
	min-width: 160px;
	padding: 13px 28px;
	border: 0;
	border-radius: 6px;
	background-color: var(--gold, #c9a227);
	color: var(--navy, #16244f);
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.success-modal-ok:hover {
	background-color: var(--navy, #16244f);
	color: var(--gold, #c9a227);
}

.success-modal-ok:focus-visible,
.success-modal-x:focus-visible {
	outline: 2px solid var(--navy, #16244f);
	outline-offset: 2px;
}

@media only screen and (max-width: 575px) {
	.success-modal-card {
		padding: 34px 22px 26px;
	}

	.success-modal-title {
		font-size: 21px;
		line-height: 29px;
	}

	.success-modal-body {
		font-size: 15px;
		line-height: 24px;
	}
}

/* Movement is decoration here; the card must still appear for anyone who has
   asked the system for less of it. */
@media (prefers-reduced-motion: reduce) {
	.success-modal-backdrop,
	.success-modal-card {
		transition-duration: 0.01ms;
	}

	.success-modal-card {
		transform: none;
	}

	.success-modal.is-open .success-modal-ring,
	.success-modal.is-open .success-modal-tick {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/*
 * Email addresses inside headings -- keep them on the body face.
 *
 * colors/color1.css applies `--font-display` (Dachi The Lynx) to h1-h6 with
 * `!important`. That face carries only 148 glyphs: `@` is mapped in its cmap
 * and reserves a normal advance width (859), but draws no outline -- so
 * `gldani.united@gmail.com` renders as "GLDANI.UNITED  GMAIL.COM" with a blank
 * gap where the `@` should be. It reads as a typo in the content, but the
 * markup is correct; the glyph is simply missing from the font.
 *
 * `--font-body` (BPG SuperSquare) has verified Latin, digit and punctuation
 * coverage, so the address renders intact there. `!important` is required to
 * beat the `!important` on the display-face rule.
 *
 * Scoped to mailto: links so only addresses move off the display face --
 * Georgian headings keep it. Applies wherever the pattern occurs, not just the
 * contact page, since the same h6 + mailto markup is used in the footer.
 */
h1 a[href^="mailto:"],
h2 a[href^="mailto:"],
h3 a[href^="mailto:"],
h4 a[href^="mailto:"],
h5 a[href^="mailto:"],
h6 a[href^="mailto:"],
a[href^="mailto:"] h1,
a[href^="mailto:"] h2,
a[href^="mailto:"] h3,
a[href^="mailto:"] h4,
a[href^="mailto:"] h5,
a[href^="mailto:"] h6 {
	font-family: var(--font-body) !important;
	text-transform: none;
	letter-spacing: 0;
}