/* ==========================================================================
   SUDAIR PHARMA — HOME "OUR JOURNEY" TIMELINE

   A horizontal year rail above a row of milestone cards. Scoped entirely under
   .sud-hj, a namespace that exists on one section of one page — it cannot reach
   the header, the footer, or any other section.

   Deliberately its own namespace, NOT the .sud-tj of the Company Overview
   timeline. That one is a vertical sticky rail with different markup and
   different behaviour; sharing classes would mean every future change to either
   had to be checked against both.

   Colours, radii, shadows, type and the container width all come from the
   design system's tokens rather than fresh values, so this section moves with
   the rest of the site if those are ever retuned.
   ========================================================================== */

.sud-hj {
	--hj-green: var(--sud-green-700, #006344);   /* the only text-safe green */
	--hj-bright: var(--sud-green-500, #43B649);  /* accents and graphics */
	--hj-ink: var(--sud-ink, #0B1F17);
	--hj-line: var(--sud-line, #E3EAE6);
	--hj-muted: #6C7D75;
	--hj-ease: cubic-bezier(.22, 1, .36, 1);

	--hj-gap: clamp(1rem, 1.6vw, 1.5rem);

	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.sud-hj__head {
	text-align: center;
	margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem);
}

/*
 * Both headings are selected at .sud-hj <el>, two classes, NOT one.
 *
 * Elementor's kit writes `.elementor-kit-5 h2 { color: …; font-size: … }`, which
 * is (0,1,1) and quietly outranked the single-class rules that used to be here —
 * the title was rendering in Elementor's global secondary colour at 48px rather
 * than anything this file asked for. Adding the section class settles it without
 * !important.
 */
.sud-hj .sud-hj__eyebrow {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: var(--sud-text-sm, .9375rem);
	font-weight: 700;
	letter-spacing: .14em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--hj-green);            /* #006344 */
	margin: 0 0 .75rem;
}

/* The short rule under the eyebrow, as in the reference. */
.sud-hj__eyebrow::after {
	content: '';
	display: block;
	inline-size: 46px;
	block-size: 3px;
	border-radius: 3px;
	margin: .7rem auto 0;
	background: var(--hj-bright);
}

.sud-hj .sud-hj__title {
	font-family: var(--sud-font-display, Roboto, sans-serif);

	/*
	 * Reduced from a 48px ceiling to 40px.
	 *
	 * Still the largest thing in the section and still clearly the heading —
	 * just no longer competing with the page's own hero for weight. The clamp's
	 * shape is unchanged so it keeps scaling the same way; only the ends move.
	 */
	font-size: clamp(1.625rem, 2.9vw, 2.5rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.015em;
	color: var(--hj-green);            /* #006344 */
	margin: 0 0 1rem;
}

.sud-hj__intro {
	font-size: var(--sud-text-lg, 1.0625rem);
	line-height: 1.65;
	color: var(--hj-muted);
	max-inline-size: 62ch;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   THE YEAR RAIL

   Horizontal at every width, per the brief. On a narrow screen it scrolls
   sideways INSIDE its own box rather than wrapping or turning vertical — and
   that box is the only thing that scrolls, so the page itself never gains a
   horizontal scrollbar.
   -------------------------------------------------------------------------- */

.sud-hj__railwrap {
	position: relative;
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

/*
 * The connecting line, drawn on the WRAPPER rather than the scrolling rail.
 *
 * On the rail it would scroll away with the years and stop short of the edges;
 * here it stays put and spans the full width whatever the rail is doing, which
 * is what the reference shows.
 */
.sud-hj__railwrap::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 9px;
	block-size: 2px;
	background: var(--hj-line);
	border-radius: 2px;
	pointer-events: none;
}

/* The two filled end caps that close the line in the reference. */
.sud-hj__railwrap::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 5px;
	block-size: 10px;
	pointer-events: none;
	background:
		radial-gradient(circle at left center, var(--hj-bright) 0 5px, transparent 5px),
		radial-gradient(circle at right center, var(--hj-bright) 0 5px, transparent 5px);
	background-repeat: no-repeat;
}

.sud-hj__rail {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(.25rem, 1.5vw, 1rem);
	position: relative;
	z-index: 1;

	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;                 /* the rail is driven by the tabs */
	-webkit-overflow-scrolling: touch;
	padding-inline: 1.75rem;               /* clear of the end caps */
	padding-block-end: 22px;               /* room for the dots on the line */

	/*
	 * The easing for "bring the active year into view" lives here, not in the
	 * script. The script assigns scrollLeft, which always lands; this animates
	 * that change where the browser supports it. Doing it the other way round —
	 * scrollTo with behavior:'smooth' — makes the movement an animation that can
	 * fail to run, leaving the active year off screen with no second attempt.
	 */
	scroll-behavior: smooth;
}

.sud-hj__rail::-webkit-scrollbar { display: none; }

.sud-hj__year {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: var(--sud-text-base, 1rem);
	font-weight: 700;
	color: var(--hj-muted);
	padding: .5rem .9rem;
	border-radius: 999px;
	line-height: 1;
	position: relative;
	transition:
		color .3s var(--hj-ease),
		background-color .3s var(--hj-ease),
		box-shadow .3s var(--hj-ease),
		transform .3s var(--hj-ease);
}

/*
 * The small dot under each year, sitting ON the connecting line.
 *
 * Drawn with a ring of page background so the line appears to pass behind it
 * rather than through it — the detail that makes the rail read as one
 * continuous line with stations on it.
 */
.sud-hj__year::after {
	content: '';
	position: absolute;
	inset-block-end: -22px;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: #C6D4CD;
	box-shadow: 0 0 0 4px var(--sud-surface, #fff);
	transition: background-color .3s var(--hj-ease);
}

@media (hover: hover) {
	.sud-hj__year:hover {
		color: var(--hj-green);
		background: var(--sud-surface-3, #EAF2ED);
	}

	.sud-hj__year:hover::after { background: var(--hj-bright); }
}

.sud-hj__year:focus-visible {
	outline: 2px solid var(--hj-green);
	outline-offset: 3px;
}

/* The active year: the filled green pill from the reference. */
.sud-hj__year.is-active {
	color: #fff;
	background: var(--hj-green);
	box-shadow: 0 6px 16px rgba(0, 99, 68, .28);
	padding: .8rem 1.3rem;
}

.sud-hj__year.is-active::after { background: var(--hj-green); }

/* The short underscore beneath the active pill, as in the reference. */
.sud-hj__year.is-active::before {
	content: '';
	position: absolute;
	inset-block-end: -10px;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: 26px;
	block-size: 3px;
	border-radius: 3px;
	background: var(--hj-green);
}

/* --------------------------------------------------------------------------
   THE CARD DECK

   A row of milestone cards, about seven across on a desktop, with the active
   one outlined in green — the reference's arrangement, not a single card being
   swapped in and out.
   -------------------------------------------------------------------------- */

/*
 * Everything from here to the end of this block is scoped to .sud-hj--deck.
 *
 * Option 1 sits on the same page using the same base classes, and the brief is
 * that only option 2 changes — so the sizing and typography below name the
 * variant explicitly rather than relying on option 1 happening to override
 * them. A shared rule that option 1 only partly overrides would leak.
 */
.sud-hj--deck {
	/*
	 * How many cards the deck shows at once.
	 *
	 * The card width is DERIVED from this rather than set directly, so "exactly
	 * four across" is arithmetic rather than a guess: four cards plus three gaps
	 * fill the track precisely, and changing --hj-per at a breakpoint is all it
	 * takes to show two or one.
	 *
	 * The previous build sized cards with a clamp and let as many fit as would,
	 * which is how seven ended up on screen at once — each too narrow for its
	 * title to sit on fewer than four lines.
	 */
	--hj-per: 4;
	--hj-card: calc((100% - (var(--hj-per) - 1) * var(--hj-gap)) / var(--hj-per));
}

.sud-hj__deck {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1vw, .9rem);
}

/*
 * scroll-behavior:auto, deliberately.
 *
 * It is the signal the script looks for before animating the scroll itself at a
 * fixed 260ms. The CSS keyword scales its duration with distance, so a jump of
 * several cards crawled while a step to the next was instant; a tween gives one
 * speed whatever the distance. Option 1 keeps `smooth` and is unaffected.
 */
.sud-hj--deck .sud-hj__track { scroll-behavior: auto; }

.sud-hj__track {
	/*
	 * position:relative so the track is its cards' offsetParent.
	 *
	 * Without it the nearest positioned ancestor is .sud-hj__deck, which also
	 * contains the previous arrow — so each card's offsetLeft included the
	 * arrow's width and the gap beside it, and scrolling to that value put the
	 * selected card 56px off the left edge. The window then showed the three
	 * years AFTER the one that had been clicked. The rail never had this
	 * problem only because it happens to be positioned already.
	 */
	position: relative;
	display: flex;
	gap: var(--hj-gap);
	align-items: stretch;                  /* every card the height of the tallest */
	flex: 1 1 auto;
	min-inline-size: 0;                    /* lets the flex item actually shrink */

	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;

	/* Room for the cards' shadow and the active card's lift, which would
	   otherwise be clipped by the scroll container. */
	padding: 6px 4px 14px;
}

.sud-hj__track::-webkit-scrollbar { display: none; }

.sud-hj__card {
	flex: 0 0 var(--hj-card);
	inline-size: var(--hj-card);
	display: flex;
	flex-direction: column;

	background: var(--sud-surface, #fff);
	border: 1px solid var(--hj-line);
	border-radius: var(--sud-radius-lg, 24px);
	overflow: hidden;
	box-shadow: var(--sud-shadow-sm, 0 2px 8px rgba(11, 31, 23, .04));

	/*
	 * Colour and shadow transition, but NOT the border width.
	 *
	 * The active card keeps the same 1px border and changes only its colour, so
	 * selecting a year cannot change any card's size. A thicker border on the
	 * active card would reflow the whole row on every tick of the autoplay.
	 */
	transition:
		border-color .2s var(--hj-ease),
		box-shadow .2s var(--hj-ease),
		transform .2s var(--hj-ease);
	cursor: pointer;
}

.sud-hj__card:focus-visible {
	outline: 2px solid var(--hj-green);
	outline-offset: 3px;
}

@media (hover: hover) {
	.sud-hj__card:hover {
		border-color: #BFD9C9;
		box-shadow: var(--sud-shadow, 0 12px 32px rgba(11, 31, 23, .07));
	}
}

.sud-hj__card.is-active {
	border-color: var(--hj-bright);
	box-shadow:
		0 0 0 1px var(--hj-bright),        /* the second ring, drawn not sized */
		0 14px 30px rgba(0, 99, 68, .14);
	transform: translateY(-4px);
}

.sud-hj__media {
	margin: 0;
	aspect-ratio: 4 / 3;                   /* fixed shape, so nothing reflows */
	overflow: hidden;
	background: var(--sud-surface-2, #F4F8F6);
	flex: 0 0 auto;
}

.sud-hj__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;                     /* fills without distorting */
	display: block;
}

/*
 * The deck shows each photograph WHOLE.
 *
 * `cover` fills the frame by cutting whatever does not fit, and the source
 * photographs are a mix of shapes — 1800x1125, 1449x1085, 1647x955 — so a
 * single fixed frame cropped several of them badly: the roofline of the building in
 * 2013, the top of the crane in 2015. `contain` fits the whole image inside the
 * frame instead, and the frame is set to 16:10 because eight of the eleven
 * sources are exactly that, so most sit edge to edge with no visible band at
 * all and the rest get a narrow one in the card's own background.
 *
 * Option 1 keeps `cover`: it has one large frame per milestone, where filling
 * it is the right choice.
 */
.sud-hj--deck .sud-hj__media {
	aspect-ratio: 16 / 10;
	background: var(--sud-surface-2, #F4F8F6);
	padding: 0;
	position: relative;
}

/*
 * The image is pinned to the frame rather than sized with block-size:100%.
 *
 * A percentage height needs a definite height on the parent to resolve
 * against, and a height that comes from `aspect-ratio` does not reliably count
 * as one — measured, the frame was 261x163 while the image inside it was
 * 261x196, overflowing by 33px and being cut off by the frame's overflow:hidden.
 * The crop this rule exists to remove was still there, just from a different
 * cause. Absolute positioning gives the image the frame's exact box, and
 * `contain` then fits the whole photograph inside it.
 */
.sud-hj--deck .sud-hj__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: center;
}

/*
 * FOUR SOURCES THAT DO NOT MATCH THE FRAME.
 *
 * The rule above shows every photograph whole, and that is right for the seven
 * whose shape already matches the 16:10 frame. It is wrong for the four that do
 * not, which sit inside a visible band instead of filling their card:
 *
 *     2013   768x575   1.336   too tall  -> band down each side
 *     2019   768x512   1.500   too tall  -> band down each side
 *     2021   768x461   1.666   too wide  -> band top and bottom
 *     2020   768x445   1.726   too wide  -> band top and bottom
 *
 *     2018   768x480   1.600   EXACTLY the frame -> fills it, no band
 *
 * 2018 is the reference the client picked, and it looks right for one reason
 * only: its ratio already equals the frame, so `contain` has nothing to crop.
 * Matching it means filling the frame, which is `cover`.
 *
 * THIS REVERSES THE DECISION DIRECTLY ABOVE, ON PURPOSE AND ONLY HERE.
 * That note chose `contain` so nothing is ever cut, and named the 2013 roofline
 * as what `cover` costs. Requested anyway, and confined to the four cards that
 * band — the other seven keep `contain` and are provably untouched, because the
 * selector names the file.
 *
 * What each one gives up, `cover` keeping the centre:
 *
 *     2013   16.5% of its height   (8.2% off top, 8.2% off bottom)
 *     2019    6.3% of its height
 *     2020    7.3% of its width
 *     2021    4.0% of its width
 *
 * 2013 is the deep one. `object-position: center top` on that image alone would
 * keep the roofline and crop from the bottom instead, if it turns out to matter.
 *
 * Every breakpoint: the frame is 16:10 at all of them (277x173 at 1440,
 * 364x227 at 834, 317x198 at 375), so the band appears at all of them and the
 * fix belongs at all of them. It was mobile-only for one revision; that block
 * has been removed from mobile-fixes.css so this is the single place it lives.
 */
.sud-hj--deck .sud-hj__img[src*="journey-2013"],
.sud-hj--deck .sud-hj__img[src*="journey-2019"],
.sud-hj--deck .sud-hj__img[src*="journey-2020"],
.sud-hj--deck .sud-hj__img[src*="journey-2021"] {
	object-fit: cover;
	object-position: center center;
}

.sud-hj__body {
	padding: 1.25rem 1.15rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 auto;
}

.sud-hj__cardyear {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(1.5rem, 1.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1;
	color: var(--hj-green);
	margin: 0;
}

.sud-hj__rule {
	display: block;
	inline-size: 28px;
	block-size: 3px;
	border-radius: 3px;
	background: var(--hj-bright);
	margin-block: .65rem .8rem;
}

.sud-hj__ms {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-weight: 700;
	color: var(--hj-ink);
	margin: 0 0 .7rem;

	/*
	 * Titles wrap on their own words.
	 *
	 * text-wrap:balance evens the lines out instead of leaving one word
	 * stranded on the last line - "The Company / Is Founded" rather than
	 * "The Company Is / Founded". Browsers without it just wrap normally.
	 */
	text-wrap: balance;
	hyphens: none;
	overflow-wrap: break-word;
}

.sud-hj--deck .sud-hj__ms {
	font-size: clamp(1.25rem, 1.35vw, 1.5rem);   /* 20-24px */
	line-height: 1.3;
}

.sud-hj__desc {
	color: var(--hj-muted);
	margin: 0;
}

.sud-hj--deck .sud-hj__desc {
	font-size: clamp(.9375rem, .95vw, 1rem);      /* 15-16px */
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   ARROWS
   -------------------------------------------------------------------------- */

.sud-hj__nav {
	flex: 0 0 auto;
	inline-size: 36px;
	block-size: 36px;
	align-self: center;                    /* vertically centred beside the row */
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid #CFE3D6;
	background: var(--sud-surface, #fff);
	color: var(--hj-green);
	cursor: pointer;
	box-shadow: var(--sud-shadow-sm, 0 2px 8px rgba(11, 31, 23, .04));
	transition:
		background-color .3s var(--hj-ease),
		color .3s var(--hj-ease),
		box-shadow .3s var(--hj-ease);
}

.sud-hj__nav svg { inline-size: 16px; block-size: 16px; }

@media (hover: hover) {
	.sud-hj__nav:hover {
		background: var(--hj-green);
		color: #fff;
		box-shadow: 0 6px 16px rgba(0, 99, 68, .24);
	}
}

.sud-hj__nav:focus-visible {
	outline: 2px solid var(--hj-green);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   PROGRESS DOTS
   Decorative and aria-hidden: the rail above already states the position, and
   announcing it twice helps nobody.
   -------------------------------------------------------------------------- */

.sud-hj__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-block-start: clamp(1rem, 2vw, 1.5rem);
}

.sud-hj__dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: #CFDCD6;
	transition: background-color .3s var(--hj-ease), transform .3s var(--hj-ease);
}

.sud-hj__dot.is-active {
	background: var(--hj-green);
	transform: scale(1.3);
}

/* --------------------------------------------------------------------------
   RESPONSIVE

   The rail and the deck both stay horizontal at every width, as the brief
   requires. Only how many cards fit changes.
   -------------------------------------------------------------------------- */

/* Laptop: still four, just tighter. */
@media (max-width: 1200px) {
	.sud-hj--deck { --hj-per: 4; }
}

/* Tablet: two. */
@media (max-width: 1024px) {
	.sud-hj--deck { --hj-per: 2; }
	.sud-hj--deck .sud-hj__ms { font-size: clamp(1.125rem, 2vw, 1.3125rem); }   /* 18-21px */
	.sud-hj--deck .sud-hj__desc { font-size: clamp(.875rem, 1.6vw, .9375rem); } /* 14-15px */
}

@media (max-width: 640px) {
	/*
	 * The rail now scrolls sideways rather than fitting. justify-content
	 * switches away from space-between because, once the content overflows,
	 * space-between can push the first item out of reach on the left in some
	 * engines. flex-start keeps the row scrollable from its true beginning.
	 */
	.sud-hj__rail {
		justify-content: flex-start;
		gap: .35rem;
		padding-inline: 1.25rem;
	}

	.sud-hj__year { font-size: var(--sud-text-sm, .9375rem); padding: .45rem .75rem; }
	.sud-hj__year.is-active { padding: .65rem 1rem; }

	.sud-hj--deck { --hj-per: 1; }
	.sud-hj--deck .sud-hj__ms { font-size: clamp(1.0625rem, 4.4vw, 1.1875rem); }  /* 17-19px */
	.sud-hj--deck .sud-hj__desc { font-size: .9375rem; }

	/* The arrows go: on a touch screen the deck is swiped, and two 40px targets
	   either side would eat a fifth of the width for nothing. */
	.sud-hj__nav { display: none; }

	.sud-hj__ms { font-size: 1rem; }
	.sud-hj__desc { font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION

   The selection still changes — it has to, or the section stops working — but
   it changes without sliding, and the script stops advancing on its own so
   nothing moves unless the reader asks for it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-hj__card,
	.sud-hj__year,
	.sud-hj__dot,
	.sud-hj__nav { transition: none; }

	.sud-hj__card.is-active { transform: none; }

	/* The rail and deck still move to show the active year — they just jump
	   there instead of gliding. Removing the scrolling as well would leave the
	   selected year off screen. */
	.sud-hj__rail,
	.sud-hj__track { scroll-behavior: auto; }
}

@media print {
	.sud-hj__track { overflow: visible; flex-wrap: wrap; }
	.sud-hj__railwrap,
	.sud-hj__dots,
	.sud-hj__nav { display: none; }
}

/* ==========================================================================
   OPTION 1 — ONE LARGE CARD

   The second layout the client asked to see: a single two-column card, image
   left and milestone right, whose contents the year rail swaps.

   Everything above is shared — the header, the rail, the dots, the green rule,
   the milestone type. Only the middle of the section differs, so only the
   middle is restated here.
   ========================================================================== */

/*
 * Every panel lives in the SAME grid cell.
 *
 * That is what stops the card resizing as the years change: the stage is as
 * tall as its tallest milestone and stays there, so nothing below it moves when
 * one description runs a line longer. Swapping panels in and out of the flow
 * instead would make the whole page jump on every tick of the autoplay.
 */
.sud-hj--single .sud-hj__stage {
	display: grid;
	background: var(--sud-surface, #fff);
	border-radius: var(--sud-radius-xl, 32px);
	box-shadow: var(--sud-shadow-lg, 0 24px 64px rgba(11, 31, 23, .10));
	overflow: hidden;
}

.sud-hj--single .sud-hj__panel {
	grid-area: 1 / 1;                      /* all panels stacked */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;

	opacity: 0;
	/*
	 * visibility, not display.
	 *
	 * It keeps the panel in the grid so it still contributes its height, while
	 * taking it out of the accessibility tree and out of tab order — so a screen
	 * reader and the Tab key only ever meet the milestone on screen.
	 * display:none would do the second part but lose the first, and the card
	 * would resize on every change.
	 */
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity .55s var(--hj-ease),
		transform .55s var(--hj-ease),
		visibility 0s linear .55s;
}

.sud-hj--single .sud-hj__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity .55s var(--hj-ease),
		transform .55s var(--hj-ease),
		visibility 0s;
	z-index: 1;
}

/* The image fills its half of the card rather than taking the deck's fixed
   4:3 crop. */
.sud-hj--single .sud-hj__media {
	aspect-ratio: auto;
	min-block-size: 100%;
	border-radius: 0;
}

.sud-hj--single .sud-hj__body {
	padding: clamp(1.75rem, 3.5vw, 3.25rem);
	text-align: start;
	align-items: flex-start;
	justify-content: center;
}

.sud-hj--single .sud-hj__bigyear {
	font-family: var(--sud-font-display, Roboto, sans-serif);
	font-size: clamp(2.25rem, 4.4vw, 3.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--hj-green);
	margin: 0;
}

.sud-hj--single .sud-hj__rule {
	inline-size: 54px;
	margin-block: 1.15rem 1.35rem;
}

.sud-hj--single .sud-hj__ms {
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
	margin-block-end: .9rem;
}

.sud-hj--single .sud-hj__desc {
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.72;
	max-inline-size: 46ch;
}

@media (max-width: 900px) {
	.sud-hj--single .sud-hj__panel {
		grid-template-columns: minmax(0, 1fr);   /* image over text */
	}

	.sud-hj--single .sud-hj__media {
		min-block-size: 0;
		aspect-ratio: 16 / 10;                   /* fixed shape, so no reflow */
	}

	.sud-hj--single .sud-hj__stage { border-radius: var(--sud-radius-lg, 24px); }
}

@media (max-width: 640px) {
	.sud-hj--single .sud-hj__media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-hj--single .sud-hj__panel,
	.sud-hj--single .sud-hj__panel.is-active {
		transition: opacity .01s linear, visibility 0s;
		transform: none;
	}
}

@media print {
	.sud-hj--single .sud-hj__panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   THE STATION MARKS, CENTRED IN ARABIC

   The dot under each year and the underscore under the active one are both
   pinned with:

     inset-inline-start: 50%;
     translate: -50% 0;

   Those two cancel in a left-to-right rail: the start edge goes to the middle
   and the mark is pulled back by half its width, leaving it centred.

   In Arabic only the first of them flips. `inset-inline-start` becomes
   `right: 50%`, so the mark's RIGHT edge lands on the middle — but `translate`
   is physical and still pulls LEFT, so instead of correcting the overhang it
   doubles it. Each mark ends up adrift by exactly its own width: measured on
   the Arabic home rail, 26px for the underscore and 9px for every dot.

   Pulling the other way puts the mark's centre back on the middle. Nothing
   else changes: same size, same colour, same transition, same markup, and the
   marks belong to the year pill itself, so they travel with it and stay
   centred throughout the automatic run between years.
   -------------------------------------------------------------------------- */

[dir="rtl"] .sud-hj__year::after,
[dir="rtl"] .sud-hj__year.is-active::before {
	translate: 50% 0;
}