/* =========================================================
   Captured Animated Hero
   ========================================================= */

.rcs-refhero__stage {
	position: relative;
	width: 100%;
	height: 100dvh;
	overflow: hidden;
	background: #f4f2ee;
}

body.rcs-refhero-intro-lock {
	overflow: hidden;
}

/* ---------- Intro layer ---------- */
.rcs-refhero__intro {
	position: absolute;
	inset: 0;
	z-index: 20;
	background: #f6f4f0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease;
}

.rcs-refhero__intro-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	pointer-events: none;
}
.rcs-refhero__intro-grid span {
	border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.rcs-refhero__intro-grid span:last-child {
	border-right: none;
}

.rcs-refhero__intro-brand {
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translate(-50%, 8px);
	text-align: center;
	opacity: 0;
	transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 4;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.rcs-refhero__intro--playing .rcs-refhero__intro-brand {
	opacity: 1;
	transform: translate(-50%, 0);
}
.rcs-refhero__intro-name {
	font-weight: 700;
	margin: 0;
	font-size: 1.1rem;
}
.rcs-refhero__intro-subtitle {
	margin: 8px 0 0;
	opacity: 0.6;
	font-size: 0.75rem;
}

.rcs-refhero__intro-images {
	position: relative;
	width: 100%;
	height: 100%;
}

/*
 * Entrance sequence, measured against the target clip: right image first,
 * then left, then centre - each sliding up from slightly below with a
 * rotation that settles rather than fully straightening (matching the
 * "scattered photographs" look), fading in as it moves.
 */
.rcs-refhero__intro-image {
	position: absolute;
	border-radius: 2px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
	opacity: 0;
	object-fit: cover;
	transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.42s ease;
}

.rcs-refhero__intro-image--left {
	left: 4vw;
	top: 40%;
	width: min(38vw, 640px);
	max-width: none;
	z-index: 2;
	transform: translate3d(-40px, 90px, 0) rotate(-16deg);
}
.rcs-refhero__intro-image--right {
	right: 3vw;
	top: 34%;
	width: min(38vw, 640px);
	max-width: none;
	z-index: 2;
	transform: translate3d(38px, 90px, 0) rotate(16deg);
}
.rcs-refhero__intro-image--center {
	left: 50%;
	top: 58%;
	width: min(46vw, 760px);
	max-width: none;
	z-index: 4;
	transform: translate3d(-50%, 80px, 0) scale(0.94);
	/* v2.6.9 fix: shorter transform-in than the shared .72s/.95s rule above so this
	   image is fully settled (2780ms + 820ms = 3600ms) before takeover() measures
	   and freezes it at 3660ms. Previously it used the shared .95s transform, which
	   finished at 3730ms - 70ms AFTER takeover already snapshotted it mid-motion,
	   causing a visible micro-jump/snap right as the hero goes fullscreen. */
	transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.42s ease;
}

/* Step 1 (1880ms): right image settles in. */
.rcs-refhero__intro--step-right .rcs-refhero__intro-image--right {
	opacity: 1;
	transform: translate3d(0, 0, 0) rotate(13deg);
}
/* Step 2 (2320ms): left image settles in. */
.rcs-refhero__intro--step-left .rcs-refhero__intro-image--left {
	opacity: 1;
	transform: translate3d(0, 0, 0) rotate(-13deg);
}
/* Step 3 (2780ms): centre image rises to true center at full scale. */
.rcs-refhero__intro--step-centre .rcs-refhero__intro-image--center {
	opacity: 1;
	transform: translate3d(-50%, -50%, 0) scale(1);
}

/* Step 4 (3660ms) - takeover: side images + brand text fade out fast,
   the centre image becomes the fullscreen hero. See hero-loader.js for
   the getBoundingClientRect() measurement that makes this jump-free -
   the !important rules below are the "after" state that JS transitions
   the measured "before" inline box into. */
.rcs-refhero__intro--takeover .rcs-refhero__intro-image--left,
.rcs-refhero__intro--takeover .rcs-refhero__intro-image--right,
.rcs-refhero__intro--takeover .rcs-refhero__intro-brand {
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}
.rcs-refhero__intro--takeover .rcs-refhero__intro-image--center {
	position: fixed !important;
	left: 0 !important;
	top: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: 100vw !important;
	height: 100dvh !important;
	max-width: none !important;
	margin: 0 !important;
	transform: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	z-index: 999999 !important;
	object-fit: cover;
}

/* Step 5 (4480ms) - ready: whole intro layer fades out. */
.rcs-refhero__intro--done {
	opacity: 0;
	pointer-events: none;
}

/* ---------- Final hero layer ---------- */
.rcs-refhero__final {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #111;
}

.rcs-refhero-final-image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.rcs-refhero-final-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% var(--rcs-refhero-final-focal-y, 50%);
	transform: translateY(var(--rcs-refhero-drift, 0px));
	will-change: transform;
}

.rcs-refhero-final-overlay,
.rcs-refhero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rcs-refhero__grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rcs-refhero__crosshair {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	pointer-events: none;
}
.rcs-refhero__crosshair--pulse {
	animation: captured-crosshair-pulse 2.4s ease-in-out infinite;
}
@keyframes captured-crosshair-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
	50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

.rcs-refhero__text {
	position: absolute;
	left: 5%;
	bottom: 8%;
	max-width: 90%;
	color: #fff;
	opacity: 0;
	transform: translateY(24px);
	filter: blur(6px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}
.rcs-refhero__text--visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

.rcs-refhero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.85rem;
	margin: 0 0 12px;
	opacity: 0.85;
}

.rcs-refhero__heading {
	font-size: 8vw;
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin: 0;
	display: flex;
	align-items: baseline;
	white-space: nowrap;
}

/* Pill-shaped "O" replacing the O in YOUR, matching the reference mark. */
.rcs-refhero__pill-o {
	display: inline-block;
	width: 0.85em;
	height: 0.55em;
	border: 0.09em solid currentColor;
	border-radius: 999px;
	margin: 0 0.02em;
	vertical-align: middle;
}

.rcs-refhero__script {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 3.2rem;
	margin: 8px 0 0;
	opacity: 0.95;
}

.rcs-refhero__scroll-indicator {
	position: absolute;
	bottom: 32px;
	right: 5%;
	width: 1px;
	height: 60px;
	background: rgba(255, 255, 255, 0.4);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.rcs-refhero__scroll-indicator.is-visible {
	opacity: 1;
}
.rcs-refhero__scroll-indicator::after {
	content: '';
	position: absolute;
	top: 0;
	left: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	animation: captured-scroll-dot 2s ease-in-out infinite;
}
@keyframes captured-scroll-dot {
	0% { top: 0; opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

/* Header reveal state, set on #captured-site-header once hero finishes. */
/* v2.6.4 fix: the block above used to hide the home-page header behind a
   .rcs-header--revealed class that no script ever added, so the nav stayed
   invisible forever. Visibility is already handled correctly by the
   html.rcs-refhero-intro-active rules further down (hidden during the intro,
   shown once it finishes), so that's the single source of truth now. */
.rcs-header--home {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 768px) {
	.rcs-refhero__heading { font-size: 14vw; white-space: normal; }
	.rcs-refhero__script { font-size: 2rem; }
	.rcs-refhero__text { left: 20px; right: 20px; bottom: 10%; max-width: none; }

	.rcs-refhero__intro-image--left {
		left: 3vw;
		top: 30%;
		width: min(46vw, 210px);
		transform: translate3d(-18px, 68px, 0) rotate(-13deg);
	}
	.rcs-refhero__intro-image--right {
		right: 3vw;
		top: 30%;
		width: min(46vw, 210px);
		transform: translate3d(18px, 68px, 0) rotate(13deg);
	}
	.rcs-refhero__intro-image--center {
		top: 58%;
		width: min(72vw, 340px);
		transform: translate3d(-50%, 68px, 0) scale(0.95);
	}
	.rcs-refhero__intro--step-right .rcs-refhero__intro-image--right {
		transform: translate3d(0, 0, 0) rotate(11deg);
	}
	.rcs-refhero__intro--step-left .rcs-refhero__intro-image--left {
		transform: translate3d(0, 0, 0) rotate(-11deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rcs-refhero__text,
	.rcs-refhero__intro-image,
	.rcs-refhero-final-image img {
		transition: none !important;
		filter: none !important;
		transform: none !important;
	}
	.rcs-refhero__text { opacity: 1; }
}


/* Roameaze integration only; animation above is source-equivalent. */
.rcs-refhero-final-image img{object-position:var(--rcs-img-x,50%) var(--rcs-img-y,50%);transform:scale(var(--rcs-hero-zoom,1)) translateY(var(--rcs-refhero-drift,0px));}
.rcs-refhero__intro-image--center{object-position:var(--rcs-img-x,50%) var(--rcs-img-y,50%);}
.rcs-refhero__intro--takeover .rcs-refhero__intro-image--center{object-position:var(--rcs-img-x,50%) var(--rcs-img-y,50%)!important;}
.rcs-refhero__heading-image{display:block;max-width:100%;height:auto;margin:0;object-fit:contain;}
html.rcs-refhero-intro-active .rcs-header{opacity:0!important;pointer-events:none!important;transition:opacity .25s ease!important;}
html:not(.rcs-refhero-intro-active) .rcs-header{opacity:1;}


/* v2.5.1 — final hero composition matched to the supplied front screenshot.
   Loader/timeline rules above are intentionally untouched. */
.rcs-refhero__final-grid{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
}
.rcs-refhero__final-grid span{
    position:absolute;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(255,255,255,.28);
}
.rcs-refhero__final-grid span:nth-child(1){left:25%}
.rcs-refhero__final-grid span:nth-child(2){left:50%}
.rcs-refhero__final-grid span:nth-child(3){left:75%}

.rcs-refhero__corner-marks{position:absolute;inset:0;z-index:5;pointer-events:none}
.rcs-refhero__corner-marks span{position:absolute;width:17px;height:17px;opacity:.9}
.rcs-refhero__corner-marks span:nth-child(1){left:2.35%;top:4.6%;border-left:1px solid #fff;border-top:1px solid #fff}
.rcs-refhero__corner-marks span:nth-child(2){right:2.35%;top:4.6%;border-right:1px solid #fff;border-top:1px solid #fff}
.rcs-refhero__corner-marks span:nth-child(3){left:2.35%;bottom:4.6%;border-left:1px solid #fff;border-bottom:1px solid #fff}
.rcs-refhero__corner-marks span:nth-child(4){right:2.35%;bottom:4.6%;border-right:1px solid #fff;border-bottom:1px solid #fff}

.rcs-refhero__crosshair{
    z-index:6!important;
    top:45.4%!important;
    width:104px!important;
    height:104px!important;
    background:rgba(255,255,255,.20)!important;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    font-size:44px!important;
    font-weight:200!important;
    line-height:1!important;
}

.rcs-refhero__text{
    z-index:7!important;
    inset:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    max-width:none!important;
    width:100%!important;
    height:100%!important;
    text-align:center!important;
    pointer-events:none;
}
.rcs-refhero__eyebrow{
    position:absolute!important;
    left:50%!important;
    top:51.7%!important;
    transform:translateX(-50%)!important;
    width:max-content;
    margin:0!important;
    color:#fff!important;
    font-family:'Inter',Arial,Helvetica,sans-serif!important;
    font-size:clamp(16px,1.55vw,30px)!important;
    font-weight:700!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
    opacity:1!important;
}
.rcs-refhero__heading{
    position:absolute!important;
    left:50%!important;
    top:57.1%!important;
    transform:translateX(-50%)!important;
    width:96vw!important;
    justify-content:center!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(94px,12.6vw,250px)!important;
    font-weight:700!important;
    line-height:.72!important;
    letter-spacing:-.075em!important;
    white-space:nowrap!important;
}
.rcs-refhero__pill-o{
    width:.91em!important;
    height:.60em!important;
    border-width:.075em!important;
    margin:0 .01em!important;
}
.rcs-refhero__heading-image{
    position:absolute!important;
    left:50%!important;
    top:56.3%!important;
    transform:translateX(-50%)!important;
    width:min(96vw,1800px)!important;
    max-width:96vw!important;
    margin:0!important;
    object-fit:contain!important;
}
.rcs-refhero__script{
    position:absolute!important;
    left:50%!important;
    top:79.5%!important;
    transform:translateX(-50%)!important;
    width:max-content;
    margin:0!important;
    color:#f5d99f!important;
    font-family:'Playfair Display',Georgia,'Times New Roman',serif!important;
    font-style:italic!important;
    font-size:clamp(62px,6.6vw,132px)!important;
    font-weight:500!important;
    line-height:.9!important;
    letter-spacing:-.03em!important;
    opacity:1!important;
}
.rcs-refhero-final-overlay{z-index:1!important;background:rgba(0,0,0,.04)!important}
.rcs-refhero__grain{z-index:3!important}

@media(max-width:1024px){
    .rcs-refhero__crosshair{top:43.5%!important;width:86px!important;height:86px!important;font-size:36px!important}
    .rcs-refhero__eyebrow{top:49.5%!important;font-size:16px!important}
    .rcs-refhero__heading{top:55.5%!important;font-size:13vw!important;width:97vw!important}
    .rcs-refhero__heading-image{top:54.5%!important;width:94vw!important}
    .rcs-refhero__script{top:74.5%!important;font-size:8vw!important}
}
@media(max-width:767px){
    .rcs-refhero__final-grid span:nth-child(1){left:33.333%}
    .rcs-refhero__final-grid span:nth-child(2){left:66.666%}
    .rcs-refhero__final-grid span:nth-child(3){display:none}
    .rcs-refhero__corner-marks span{width:13px;height:13px}
    .rcs-refhero__crosshair{top:42%!important;width:70px!important;height:70px!important;font-size:30px!important}
    .rcs-refhero__eyebrow{top:47.5%!important;font-size:12px!important}
    .rcs-refhero__heading{top:54%!important;width:96vw!important;font-size:16.5vw!important;line-height:.75!important;letter-spacing:-.07em!important}
    .rcs-refhero__heading-image{top:53%!important;width:94vw!important}
    .rcs-refhero__script{top:67.5%!important;font-size:11.5vw!important}
}

/* v2.5.2 — exact YOUR STORY SVG O supplied by user. Hero loader timing untouched. */
.rcs-refhero__heading .rcs-refhero__title-y,
.rcs-refhero__heading .rcs-refhero__title-rest{
    display:inline-block;
    flex:0 0 auto;
}
.rcs-refhero__title-o{
    display:inline-block;
    flex:0 0 auto;
    width:2.11em;
    height:.768em;
    margin:0 -.03em 0 -.015em;
    color:currentColor;
    line-height:0;
    transform:translateY(.032em);
}
.rcs-refhero__title-o svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}
.rcs-refhero__title-o rect{vector-effect:non-scaling-stroke;}
/* old approximation is kept hidden only for backwards DOM compatibility */
.rcs-refhero__pill-o{display:none!important;}


/* v2.6 — responsive final composition. Loader sequence/timestamps unchanged. */
.rcs-refhero__heading{
  width:min(94vw,1680px)!important;
  font-size:clamp(58px,10.2vw,176px)!important;
  line-height:.80!important;
  letter-spacing:-.08em!important;
  overflow:visible!important;
}
.rcs-refhero__title-o{
  width:2.11em!important;
  height:.768em!important;
  margin:0 -.03em 0 -.015em!important;
  flex:0 0 auto!important;
  transform:translateY(.032em)!important;
}
.rcs-refhero__title-o svg{width:100%!important;height:100%!important;display:block!important;overflow:visible!important}
/* allow the SVG stroke to scale with the mark, preventing the broken/over-thick look */
.rcs-refhero__title-o rect{vector-effect:none!important}
.rcs-refhero__text{will-change:transform,opacity;transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1),filter .65s ease!important}
.rcs-refhero__text:not(.rcs-refhero__text--visible){filter:blur(4px)!important}
.rcs-refhero__text--visible{filter:blur(0)!important}
.rcs-refhero-final-image img{transition:transform 1.25s cubic-bezier(.22,1,.36,1),object-position .45s ease!important}
.rcs-refhero--ready .rcs-refhero-final-image img{transform:scale(calc(var(--rcs-hero-zoom,1) * 1.006)) translateY(var(--rcs-refhero-drift,0px))}
.rcs-refhero__intro-image{will-change:transform,opacity}
@media(max-width:1024px){
  .rcs-refhero__heading{font-size:10.35vw!important;width:94vw!important;top:55.5%!important}
  .rcs-refhero__script{top:73.5%!important;font-size:7.6vw!important}
}
@media(max-width:767px){
  .rcs-refhero__heading{font-size:10.6vw!important;width:95vw!important;top:53.5%!important;white-space:nowrap!important;flex-wrap:nowrap!important}
  .rcs-refhero__eyebrow{top:47%!important}
  .rcs-refhero__script{top:64.5%!important;font-size:11vw!important}
  .rcs-refhero__crosshair{top:41.5%!important}
}