/**
 * Hero Slider.
 *
 * Figma (file laA3Gn8l2pPxfJfJaIU46f):
 *   Desktop slides 200:132 / 200:255 / 200:378 — photo 1600x639, copy column
 *     200:197 (x180, pt160, 610 wide), card 200:741 (505x220, #FFF5E4, r30 top
 *     corners only, bottom-right of the 1240 column), dots 200:204.
 *   Mobile 261:348 — HeroSection 267:387 (390x450, copy bottom-aligned, px45
 *     pb30), card strip 269:695 (#FFF5E4, px45 py15).
 *   Dots 435:316 / 435:317 — 18px: a 1px ring at 40% white and a 10px pip;
 *     active is both at 100%. 17px apart (16px dots on mobile).
 *
 * Breakpoints match Elementor's: desktop 1025+, tablet 768–1024, mobile <768.
 * Tablet has no design. It uses the mobile composition (copy over a shorter
 * photo, card as a strip below) because the hand-off's 768px photos are cropped
 * to that 768x450 shape, at type sizes between mobile and desktop.
 */

.ashers-hero {
	--ashers-hero-stage-h: 639px;
	--ashers-hero-content-w: 1240px;
	--ashers-hero-gutter: 40px;
	--ashers-hero-ink: #ffffff;
	--ashers-hero-card-bg: #fff5e4;
	--ashers-hero-card-ink: #5f3d31;
	--ashers-hero-accent: #f15a29;
	--ashers-hero-dot: #ffffff;
	--ashers-hero-dot-size: 18px;
	--ashers-hero-dot-gap: 17px;
	--ashers-hero-dots-bottom: 46px;
	--ashers-hero-delay: 4000ms;
	--ashers-hero-overlay-opacity: 1;
	--ashers-hero-ease: 240ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Desktop type (Figma 200:199, 200:200, 200:202) */
	--ashers-hero-title-size: 70px;
	--ashers-hero-title-lh: 78px;
	--ashers-hero-title-track: -0.7px;
	--ashers-hero-body-size: 20px;
	--ashers-hero-body-lh: 32px;
	--ashers-hero-cta-size: 16px;
	--ashers-hero-cta-lh: 28px;
	--ashers-hero-copy-w: 610px;
	--ashers-hero-copy-top: 160px;

	/* Desktop card (Figma 200:741) */
	--ashers-hero-card-w: 505px;
	--ashers-hero-card-h: 220px;
	--ashers-hero-card-img: 200px;

	position: relative;
	overflow: hidden;
	color: var(--ashers-hero-ink);
}

.ashers-hero__swiper {
	width: 100%;
	overflow: hidden;
}

/*
 * Fade stacks every slide in one spot, so the wrapper is as tall as the tallest
 * slide. Stretching makes the shorter ones fill it, which matters below desktop
 * where the card strip's height follows its copy.
 */
.ashers-hero__swiper .swiper-wrapper {
	align-items: stretch;
}

.ashers-hero__slide {
	display: flex;
	flex-direction: column;
	height: auto;
	position: relative;
}

/* Before Swiper starts, show only the first slide, so the page does not flash
   a stack of all five. */
.ashers-hero__swiper:not(.swiper-initialized) .ashers-hero__slide:not(:first-child) {
	display: none;
}

/* ------------------------------------------------------------- the photo */

.ashers-hero__stage {
	position: relative;
	height: var(--ashers-hero-stage-h);
	flex-shrink: 0;
	overflow: hidden;
	background-color: #24150b;
}

/*
 * Scoped under the root to reach (0,2,0): Elementor's `.elementor img
 * { height: auto; max-width: 100% }` is (0,1,1) and otherwise wins, which
 * leaves the photo at its natural height with a dark band below it at any
 * width where that is not exactly the stage height.
 */
.ashers-hero .ashers-hero__media,
.ashers-hero .ashers-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ashers-hero .ashers-hero__img {
	display: block;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/*
 * Figma 200:134: a 228deg gradient laid over the photo in multiply, darker
 * toward the bottom-left where the copy sits.
 */
.ashers-hero__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: none;
	opacity: var(--ashers-hero-overlay-opacity);
	mix-blend-mode: multiply;
	background-image: linear-gradient(227.8deg, rgba(35, 31, 32, 0.225) 23.678%, rgba(36, 21, 11, 0.75) 65.592%);
}

.ashers-hero.has-overlay .ashers-hero__shade {
	display: block;
}

/* -------------------------------------------------------- content column */

.ashers-hero__inner {
	position: relative;
	box-sizing: border-box;
	width: min(var(--ashers-hero-content-w), calc(100% - 2 * var(--ashers-hero-gutter)));
	height: 100%;
	margin: 0 auto;
}

.ashers-hero__copy {
	box-sizing: border-box;
	max-width: var(--ashers-hero-copy-w);
	padding-top: var(--ashers-hero-copy-top);
}

.ashers-hero .ashers-hero__title {
	margin: 0;
	padding: 0;
	color: var(--ashers-hero-ink);
	font-family: adobe-caslon-pro, "Adobe Caslon Pro", Georgia, serif;
	font-weight: 600;
	font-style: normal;
	font-size: var(--ashers-hero-title-size);
	line-height: var(--ashers-hero-title-lh);
	letter-spacing: var(--ashers-hero-title-track);
	text-transform: none;
	text-wrap: balance;
}

.ashers-hero .ashers-hero__body {
	margin: 20px 0 0;
	padding: 0;
	color: var(--ashers-hero-ink);
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: var(--ashers-hero-body-size);
	line-height: var(--ashers-hero-body-lh);
	letter-spacing: 0;
}

.ashers-hero .ashers-hero__cta {
	display: inline-block;
	margin-top: 30px;
	padding: 6px 0;
	color: var(--ashers-hero-ink);
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: var(--ashers-hero-cta-size);
	line-height: var(--ashers-hero-cta-lh);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.ashers-hero .ashers-hero__cta:hover,
.ashers-hero .ashers-hero__cta:focus-visible {
	color: var(--ashers-hero-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.ashers-hero__nowrap {
	white-space: nowrap;
}

.ashers-hero__arrow {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	transition: transform var(--ashers-hero-ease);
}

.ashers-hero__arrow--cta {
	width: 16px;
	height: 12px;
	margin: -2px 0 0 10px;
	fill: var(--ashers-hero-ink);
}

.ashers-hero__cta:hover .ashers-hero__arrow,
.ashers-hero__cta:focus-visible .ashers-hero__arrow,
.ashers-hero__card:hover .ashers-hero__arrow,
.ashers-hero__card:focus-visible .ashers-hero__arrow {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------ card */

/*
 * Desktop: the card row is laid over the bottom of the photo and shares the
 * copy's content column, so the card's right edge lines up with the column's
 * (Figma: card right at 1420 = 180 + 1240). It belongs to its slide, so it
 * cross-fades with the photo rather than sitting still while photos change.
 */
.ashers-hero__card-row {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	width: min(var(--ashers-hero-content-w), calc(100% - 2 * var(--ashers-hero-gutter)));
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.ashers-hero .ashers-hero__card {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--ashers-hero-card-img) 1fr;
	column-gap: 32px;
	align-items: start;
	width: var(--ashers-hero-card-w);
	min-height: var(--ashers-hero-card-h);
	padding: 17px 30px 0;
	border-radius: 30px 30px 0 0;
	background-color: var(--ashers-hero-card-bg);
	color: var(--ashers-hero-card-ink);
	text-decoration: none;
	pointer-events: auto;
}

.ashers-hero__card-media {
	display: block;
	width: var(--ashers-hero-card-img);
	height: var(--ashers-hero-card-img);
}

.ashers-hero .ashers-hero__card-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.ashers-hero__card-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 13px;
}

.ashers-hero__card-title {
	display: block;
	color: var(--ashers-hero-card-ink);
	font-family: adobe-caslon-pro, "Adobe Caslon Pro", Georgia, serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	letter-spacing: -0.72px;
}

/* Figma sets ® at 15.48px on a 24px title and does not raise it: Caslon's ®
   glyph is already drawn as a superior, so the browser's default <sup> lift
   would put it a second step up. line-height:0 keeps the line from opening. */
.ashers-hero__title sup,
.ashers-hero__card-title sup {
	font-size: 0.645em;
	line-height: 0;
	vertical-align: baseline;
}

.ashers-hero__arrow--card {
	width: 18px;
	height: 14px;
	margin: -3px 0 0 10px;
	fill: var(--ashers-hero-accent);
}

.ashers-hero__card-desc {
	display: block;
	color: var(--ashers-hero-card-ink);
	font-family: sweet-sans-pro, "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}

.ashers-hero__only-mobile {
	display: none;
}

/* ------------------------------------------------------------------ dots */

/*
 * The dots are shared by every slide, so they live outside the slides and are
 * laid over the photo area only — the box is exactly as tall as the photo, so
 * below desktop they stay on the photo and never fall onto the card strip.
 */
.ashers-hero__controls {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: var(--ashers-hero-stage-h);
	pointer-events: none;
}

.ashers-hero__controls .ashers-hero__inner {
	display: flex;
	align-items: flex-end;
	padding-bottom: var(--ashers-hero-dots-bottom);
}

.ashers-hero__dots {
	display: flex;
	align-items: center;
	gap: var(--ashers-hero-dot-gap);
	pointer-events: auto;
}

/*
 * Doubled class to reach (0,2,0): the Elementor kit styles every bare <button>
 * at (0,1,1) with padding, a brand background, radius and uppercase. See
 * CLAUDE.md. :hover/:focus are reset at matching specificity below.
 */
.ashers-hero__dot.ashers-hero__dot,
.ashers-hero__toggle.ashers-hero__toggle {
	position: relative;
	display: block;
	width: var(--ashers-hero-dot-size);
	height: var(--ashers-hero-dot-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--ashers-hero-dot);
	line-height: 0;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.ashers-hero__dot.ashers-hero__dot:hover,
.ashers-hero__dot.ashers-hero__dot:focus,
.ashers-hero__toggle.ashers-hero__toggle:hover,
.ashers-hero__toggle.ashers-hero__toggle:focus {
	background: none;
	color: var(--ashers-hero-dot);
}

/* A 44px touch target without changing the 18px drawing or its spacing. */
.ashers-hero__dot.ashers-hero__dot::before,
.ashers-hero__toggle.ashers-hero__toggle::before {
	content: "";
	position: absolute;
	inset: -13px calc(var(--ashers-hero-dot-gap) / -2);
}

.ashers-hero__dot-svg,
.ashers-hero__toggle-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ashers-hero__dot-track {
	fill: none;
	stroke: var(--ashers-hero-dot);
	stroke-width: 1;
	stroke-opacity: 0.4;
}

.ashers-hero__dot-pip {
	fill: var(--ashers-hero-dot);
	fill-opacity: 0.4;
	transition: fill-opacity var(--ashers-hero-ease);
}

/*
 * The progress ring. pathLength="100" lets the dash be written in percent:
 * offset 100 is empty, 0 is a closed ring. It is drawn from 12 o'clock
 * (rotate(-90) in the markup) and fills clockwise.
 */
.ashers-hero__dot-ring {
	fill: none;
	stroke: var(--ashers-hero-dot);
	stroke-width: 1;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.ashers-hero__dot.is-active .ashers-hero__dot-pip,
.ashers-hero__dot:hover .ashers-hero__dot-pip {
	fill-opacity: 1;
}

/* Not autoplaying (off, reduced motion, or paused by the button): the active
   dot is the design's static "Group 8", a full white ring. */
.ashers-hero__dot.is-active .ashers-hero__dot-ring {
	stroke-dashoffset: 0;
}

/*
 * Autoplaying: the ring fills over the slide's duration. JS advances the
 * slide on this animation's `animationend`, so the ring closing and the slide
 * changing are one event. Hover/focus pause it with animation-play-state, and
 * it resumes from exactly where it stopped.
 */
.ashers-hero.is-playing .ashers-hero__dot.is-active .ashers-hero__dot-ring {
	animation: ashers-hero-ring var(--ashers-hero-delay) linear forwards;
}

.ashers-hero.is-playing.is-held .ashers-hero__dot.is-active .ashers-hero__dot-ring {
	animation-play-state: paused;
}

@keyframes ashers-hero-ring {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: 0; }
}

.ashers-hero__toggle-pause,
.ashers-hero__toggle-play {
	fill: var(--ashers-hero-dot);
}

.ashers-hero__toggle-play {
	display: none;
}

.ashers-hero__toggle.is-paused .ashers-hero__toggle-pause {
	display: none;
}

.ashers-hero__toggle.is-paused .ashers-hero__toggle-play {
	display: inline;
}

/* -------------------------------------------------------------- a11y/misc */

.ashers-hero a:focus-visible,
.ashers-hero button:focus-visible {
	outline: 2px solid var(--ashers-hero-ink) !important;
	outline-offset: 4px !important;
}

.ashers-hero .ashers-hero__card:focus-visible {
	outline-color: var(--ashers-hero-card-ink) !important;
	outline-offset: -4px !important;
}

.ashers-hero .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------- small desktop/laptop */

/*
 * Between 1025 and 1279 the 610px copy column and the 505px card would meet:
 * the card's top is 419px down and two-line headings run past that. Everything
 * steps down a size so the copy finishes above the card.
 */
@media (min-width: 1025px) and (max-width: 1279px) {
	.ashers-hero {
		--ashers-hero-title-size: 56px;
		--ashers-hero-title-lh: 62px;
		--ashers-hero-title-track: -0.56px;
		--ashers-hero-body-size: 18px;
		--ashers-hero-body-lh: 28px;
		--ashers-hero-copy-w: 520px;
		--ashers-hero-copy-top: 96px;
		--ashers-hero-card-w: 440px;
		--ashers-hero-card-h: 190px;
		--ashers-hero-card-img: 170px;
	}

	.ashers-hero .ashers-hero__card {
		column-gap: 24px;
		padding: 12px 26px 0;
	}

	.ashers-hero__card-text {
		padding-top: 10px;
	}
}

/* ------------------------------------------------- tablet + mobile layout */

@media (max-width: 1024px) {
	.ashers-hero {
		/* 450px at 768, growing with the width to 600px at 1024 — the same
		   768x450 shape the tablet photos were cropped to. */
		--ashers-hero-stage-h: clamp(450px, 58.6vw, 600px);
		--ashers-hero-gutter: 60px;
		--ashers-hero-content-w: 100%;
		--ashers-hero-dots-bottom: 30px;
		--ashers-hero-title-size: 52px;
		--ashers-hero-title-lh: 58px;
		--ashers-hero-title-track: -1px;
		--ashers-hero-body-size: 18px;
		--ashers-hero-body-lh: 28px;
		--ashers-hero-cta-size: 15px;
		--ashers-hero-cta-lh: 26px;
		--ashers-hero-copy-w: 560px;
		--ashers-hero-card-img: 150px;
	}

	/* Figma 267:387 shades from top-right too, but at 203deg and without
	   multiply — the portrait crop needs the dark band lower and stronger. */
	.ashers-hero__shade {
		mix-blend-mode: normal;
		background-image: linear-gradient(202.78deg, rgba(35, 31, 32, 0.2) 8.486%, rgba(36, 23, 15, 0.49) 33.133%, rgba(36, 21, 11, 0.78) 58.029%);
	}

	/* Copy sits on the bottom of the photo, above the dots (Figma 267:390:
	   justify-end, dots 40px below the link, 30px off the bottom). */
	.ashers-hero__stage .ashers-hero__inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.ashers-hero__copy {
		padding-top: 40px;
		padding-bottom: calc(var(--ashers-hero-dots-bottom) + var(--ashers-hero-dot-size) + 36px);
	}

	.ashers-hero .ashers-hero__body {
		margin-top: 14px;
		opacity: 0.9;
	}

	.ashers-hero .ashers-hero__cta {
		margin-top: 22px;
	}

	/* The card leaves the photo and becomes a full-width strip under it. Every
	   strip is as tall as the tallest slide's (so the page below does not jump
	   as slides fade), and the card is centred within that height. */
	.ashers-hero__card-row {
		position: static;
		flex: 1 0 auto;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: var(--ashers-hero-card-bg);
		pointer-events: auto;
	}

	.ashers-hero .ashers-hero__card {
		width: min(var(--ashers-hero-content-w), calc(100% - 2 * var(--ashers-hero-gutter)));
		min-height: 0;
		margin: 0 auto;
		padding: 20px 0;
		grid-template-columns: var(--ashers-hero-card-img) minmax(0, 460px);
		column-gap: 24px;
		align-items: center;
		border-radius: 0;
		background: none;
	}

	.ashers-hero__card-media {
		height: calc(var(--ashers-hero-card-img) * 0.84);
	}

	.ashers-hero__card-text {
		padding: 0;
		gap: 4px;
	}

	.ashers-hero__card-desc {
		font-weight: 500;
	}
}

@media (max-width: 767px) {
	.ashers-hero {
		/*
		 * Figma's 450px plus the 21px added below the link (design review: 60px
		 * from the link to the dots, not 39). The photo grows by exactly what
		 * the gap gains, so the bottom-aligned copy keeps its distance from the
		 * top of the photo instead of being pushed up. Change the two together.
		 */
		--ashers-hero-stage-h: 471px;
		--ashers-hero-cta-to-dots: 60px;
		/* 45px at the design's 390 width; never less than 24px on a small phone. */
		--ashers-hero-gutter: clamp(24px, 11.5vw, 45px);
		--ashers-hero-dot-size: 16px;
		--ashers-hero-title-size: 38px;
		--ashers-hero-title-lh: 42px;
		--ashers-hero-title-track: -1px;
		--ashers-hero-body-size: 16px;
		--ashers-hero-body-lh: 24px;
		--ashers-hero-cta-size: 14px;
		--ashers-hero-cta-lh: 26px;
		--ashers-hero-copy-w: 300px;
		--ashers-hero-card-img: 119px;
	}

	/*
	 * Figma 267:390: 10px heading→copy, 20px copy→link. Link→dots was 40px in
	 * Figma and is 60px after design review, measured from the link's text, so
	 * the link's own 6px bottom padding is taken back off.
	 */
	.ashers-hero__copy {
		padding-bottom: calc(var(--ashers-hero-dots-bottom) + var(--ashers-hero-dot-size) + var(--ashers-hero-cta-to-dots) - 6px);
	}

	.ashers-hero .ashers-hero__body {
		margin-top: 10px;
	}

	.ashers-hero .ashers-hero__cta {
		margin-top: 13px;
	}

	.ashers-hero__not-mobile {
		display: none;
	}

	.ashers-hero__only-mobile {
		display: block;
	}

	/* Figma 269:695: py15, image 119x100, 15px gap, 174px text column. */
	.ashers-hero .ashers-hero__card {
		padding: 15px 0;
		grid-template-columns: var(--ashers-hero-card-img) minmax(0, 1fr);
		column-gap: 15px;
	}

	.ashers-hero__card-media {
		height: 100px;
	}

	.ashers-hero__card-text {
		padding: 8px 0;
	}

	.ashers-hero__card-title {
		font-size: 22px;
		line-height: 32px;
		letter-spacing: -0.66px;
	}

	.ashers-hero__card-desc {
		font-size: 15px;
		line-height: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ashers-hero__arrow,
	.ashers-hero__dot-pip {
		transition-duration: 1ms;
	}
}