/* ==========================================================================
   Hotel Rivel — OUR STORY template
   Loaded after global.css. Everything is scoped to .rivel-our-story-template
   (body class from functions.php) so nothing leaks to other templates.
   Tokens (--clr-*, --font-*, --transition-*) come from global.css.
   Values (radii, widths, hero treatment, pill buttons, reveal) mirror the homepage.
   ========================================================================== */

/* ---- Base reset: same as the homepage template so header/footer render identically ---- */
.rivel-our-story-template *,
.rivel-our-story-template *::before,
.rivel-our-story-template *::after{ box-sizing:border-box; margin:0; padding:0; }
.rivel-our-story-template a{ text-decoration:none; color:inherit; }
.rivel-our-story-template ul,
.rivel-our-story-template ol{ list-style:none; }
.rivel-our-story-template button{ border:none; background:none; cursor:pointer; font-family:inherit; }
.rivel-our-story-template .editorial-italic{ font-family:var(--font-editorial); font-style:italic; font-weight:500; }
.rivel-our-story-template .text-ivory{ color:var(--clr-warm-ivory); }
.rivel-our-story-template .text-terracotta{ color:var(--clr-terracotta); }
.rivel-our-story-template .rs-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.rivel-our-story-template .rs-main{ overflow-x:clip; }

/* ---- Page tokens ---- */
.rivel-our-story-template .rs-main{
	--rs-container:1280px;
	--rs-line-light:rgba(24,58,43,.14);
	--rs-line-dark:rgba(245,242,233,.16);
	--rs-muted-dark:rgba(245,242,233,.74);
	--rs-icon-fill:rgba(245,242,233,.75);
	--rs-icon-accent:var(--clr-terracotta);
}

/* ---- Icon family (works on light + dark via vars) ---- */
.rivel-our-story-template .rs-icon{ width:44px; height:44px; display:block; color:var(--clr-primary-green); }
.rivel-our-story-template .rs-icon-badge{
	width:84px; height:84px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--clr-warm-ivory); border:1px solid var(--rs-line-light);
	flex-shrink:0;
}
.rivel-our-story-template .rs-icon-badge--sm{ width:60px; height:60px; }
.rivel-our-story-template .rs-icon-badge--sm .rs-icon{ width:32px; height:32px; }
.rivel-our-story-template .rs-cream .rs-icon-badge{ background:var(--clr-warm-ivory); }
.rivel-our-story-template .rs-dark{
	--rs-icon-fill:rgba(245,242,233,.10);
}
.rivel-our-story-template .rs-dark .rs-icon{ color:var(--clr-warm-ivory); }
.rivel-our-story-template .rs-dark .rs-icon-badge{ background:rgba(245,242,233,.06); border-color:var(--rs-line-dark); }

/* ---- Sections ---- */
.rivel-our-story-template .rs-section{ padding:8rem 2rem; position:relative; }
.rivel-our-story-template .rs-light{ background:var(--clr-warm-ivory); color:var(--clr-text-primary); }
.rivel-our-story-template .rs-cream{ background:var(--clr-soft-cream); color:var(--clr-text-primary); }
.rivel-our-story-template .rs-dark{ background:var(--clr-deep-green); color:var(--clr-warm-ivory); }
.rivel-our-story-template .rs-container{ width:100%; max-width:var(--rs-container); margin:0 auto; }

/* ---- Typography ---- */
.rivel-our-story-template .rs-eyebrow{
	display:flex; align-items:center; gap:.5rem;
	font-family:var(--font-primary); font-size:.75rem; font-weight:700;
	text-transform:uppercase; letter-spacing:.15em; margin-bottom:1rem;
	color:var(--clr-terracotta);
}
.rivel-our-story-template .rs-eyebrow--dark{ color:var(--clr-warm-ivory); }
.rivel-our-story-template .rs-eyebrow--center{ justify-content:center; }
.rivel-our-story-template .rs-h2{
	font-family:var(--font-editorial); font-weight:500;
	font-size:clamp(2.25rem,4.2vw,3.5rem); line-height:1.08; letter-spacing:-.02em;
	color:var(--clr-primary-green); margin-bottom:1.5rem;
}
.rivel-our-story-template .rs-dark .rs-h2{ color:var(--clr-warm-ivory); }
.rivel-our-story-template .rs-lead{
	font-family:var(--font-primary); font-size:clamp(1.0625rem,1.5vw,1.25rem);
	line-height:1.65; color:var(--clr-text-primary); margin-bottom:1.25rem;
}
.rivel-our-story-template .rs-body{
	font-family:var(--font-primary); font-size:1rem; line-height:1.75;
	color:var(--clr-text-secondary); margin-bottom:1.25rem;
}
.rivel-our-story-template .rs-dark .rs-lead{ color:var(--clr-warm-ivory); }
.rivel-our-story-template .rs-dark .rs-body{ color:var(--rs-muted-dark); }

/* ---- Images ---- */
.rivel-our-story-template .rs-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }

/* ---- Buttons (same pill language as the homepage hero) ---- */
.rivel-our-story-template .rs-btn-primary,
.rivel-our-story-template .rs-btn-secondary{
	font-family:var(--font-primary); font-size:.8125rem; font-weight:700;
	text-transform:uppercase; letter-spacing:.05em; border-radius:50px;
	display:inline-flex; align-items:center; gap:1rem; min-height:48px;
	transition:transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.rivel-our-story-template .rs-btn-primary{
	background:var(--clr-warm-ivory); color:var(--clr-primary-green);
	padding:.375rem .375rem .375rem 1.5rem;
}
.rivel-our-story-template .rs-btn-primary:hover{ background:#fff; color:var(--clr-primary-green); transform:translateY(-2px); }
.rivel-our-story-template .rs-btn-circle{
	width:36px; height:36px; border-radius:50%;
	background:rgba(24,58,43,.1); border:1px solid rgba(24,58,43,.15);
	display:flex; align-items:center; justify-content:center; transition:transform var(--transition-fast);
}
.rivel-our-story-template .rs-btn-primary:hover .rs-btn-circle{ transform:translateX(4px); }
.rivel-our-story-template .rs-btn-secondary{
	background:transparent; color:var(--clr-warm-ivory);
	border:1px solid rgba(245,242,233,.4); padding:.375rem 1.5rem .375rem .375rem;
}
.rivel-our-story-template .rs-btn-secondary:hover{ background:rgba(245,242,233,.1); border-color:var(--clr-warm-ivory); color:var(--clr-warm-ivory); transform:translateY(-2px); }
.rivel-our-story-template .rs-btn-circle-outline{
	width:36px; height:36px; border-radius:50%; border:1px solid rgba(245,242,233,.5);
	display:flex; align-items:center; justify-content:center;
}
.rivel-our-story-template .rs-link{
	display:inline-flex; align-items:center; gap:.625rem; font-size:.9375rem; font-weight:500;
	color:var(--clr-primary-green); border-bottom:1px solid var(--clr-terracotta);
	padding-bottom:.3rem; transition:color var(--transition-base);
}
.rivel-our-story-template .rs-link:hover{ color:var(--clr-terracotta); }
.rivel-our-story-template .rs-link-arrow{ flex-shrink:0; transition:transform .3s ease; }
.rivel-our-story-template .rs-link:hover .rs-link-arrow{ transform:translateX(3px); }

/* ---- 01 Hero (mirrors .hero-section) ---- */
.rivel-our-story-template .rs-hero{
	position:relative; min-height:80vh; min-height:80dvh; display:flex; align-items:flex-end;
	padding:8rem 2rem 4rem; overflow:hidden; color:var(--clr-warm-ivory); isolation:isolate;
}
.rivel-our-story-template .rs-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.rivel-our-story-template .rs-hero-overlay{
	position:absolute; inset:0; z-index:-1;
	background:linear-gradient(210deg,rgba(16,42,32,.10) 0%,rgba(16,42,32,.75) 60%,rgba(10,26,20,.95) 100%);
}
.rivel-our-story-template .rs-hero-container{ width:100%; max-width:var(--rs-container); margin:0 auto; }
.rivel-our-story-template .rs-hero-content{ display:flex; flex-direction:column; max-width:750px; }
.rivel-our-story-template .rs-hero-eyebrow{
	font-family:var(--font-primary); font-size:.75rem; font-weight:700; text-transform:uppercase;
	letter-spacing:.15em; margin-bottom:1rem; color:var(--clr-warm-ivory);
}
.rivel-our-story-template .rs-hero-title{
	font-family:var(--font-primary); font-size:clamp(1.8rem,4vw,3.5rem); font-weight:700;
	text-transform:uppercase; line-height:.98; letter-spacing:-.035em; margin-bottom:1.25rem;
}
.rivel-our-story-template .rs-hero-desc{
	font-family:var(--font-primary); font-size:clamp(.9rem,1.2vw,1rem); line-height:1.6;
	color:rgba(245,242,233,.85); max-width:640px; margin-bottom:2.25rem;
}
.rivel-our-story-template .rs-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.rivel-our-story-template .rs-hero-actions--center{ justify-content:center; }

/* ---- Split layout (Place / Everything / Together) ---- */
.rivel-our-story-template .rs-split{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.rivel-our-story-template .rs-split-text{ max-width:34rem; }
.rivel-our-story-template .rs-split-media{ overflow:hidden; border-radius:16px; aspect-ratio:4/5; box-shadow:0 20px 40px rgba(16,42,32,.08); }
.rivel-our-story-template .rs-split-media--wide{ aspect-ratio:5/6; }
.rivel-our-story-template .rs-split-media--tall{ aspect-ratio:4/5; }
.rivel-our-story-template .rs-split--media-first{ grid-template-columns:1.05fr 1fr; }
@media (min-width:1025px){
	.rivel-our-story-template .rs-split-media:hover .rs-img{ transform:scale(1.03); }
}

/* ---- Section heads ---- */
.rivel-our-story-template .rs-head{ max-width:44rem; margin-bottom:4rem; }
.rivel-our-story-template .rs-head .rs-h2{ margin-bottom:0; }
.rivel-our-story-template .rs-head--split{ max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; }
.rivel-our-story-template .rs-head--split .rs-body{ max-width:30rem; margin-bottom:0; }

/* ---- 03 Philosophy ---- */
.rivel-our-story-template .rs-ideas{ display:grid; grid-template-columns:repeat(4,1fr); }
.rivel-our-story-template .rs-idea{ padding:0 2rem; border-left:1px solid var(--rs-line-light); }
.rivel-our-story-template .rs-idea:first-child{ padding-left:0; border-left:none; }
.rivel-our-story-template .rs-idea .rs-icon-badge{ margin-bottom:1.75rem; }
.rivel-our-story-template .rs-idea h3{
	font-family:var(--font-editorial); font-size:1.75rem; font-weight:500; line-height:1.15;
	color:var(--clr-primary-green); margin-bottom:.75rem;
}
.rivel-our-story-template .rs-idea p{ font-size:.9375rem; line-height:1.65; color:var(--clr-text-secondary); max-width:24ch; }

/* ---- 04 Everything in one place ---- */
.rivel-our-story-template .rs-pillars{ margin-top:2rem; border-top:1px solid var(--rs-line-dark); }
.rivel-our-story-template .rs-pillar{
	display:flex; align-items:center; gap:1.25rem; padding:1.15rem 0;
	border-bottom:1px solid var(--rs-line-dark); color:var(--clr-warm-ivory); min-height:44px;
	transition:padding var(--transition-base), color var(--transition-base);
}
.rivel-our-story-template .rs-pillar:hover{ padding-left:.5rem; color:var(--clr-warm-ivory); }
.rivel-our-story-template .rs-pillar-text{ display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:0; }
.rivel-our-story-template .rs-pillar-text strong{ font-family:var(--font-editorial); font-size:1.5rem; font-weight:500; line-height:1.15; }
.rivel-our-story-template .rs-pillar-text span{ font-size:.875rem; line-height:1.5; color:var(--rs-muted-dark); }
.rivel-our-story-template .rs-pillar .rs-link-arrow{ color:var(--clr-terracotta); opacity:.9; transition:transform .3s ease; }
.rivel-our-story-template .rs-pillar:hover .rs-link-arrow{ transform:translateX(4px); }

/* ---- 05 Journey ---- */
.rivel-our-story-template .rs-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; counter-reset:none; }
.rivel-our-story-template .rs-step-media{ aspect-ratio:4/5; overflow:hidden; border-radius:16px; margin-bottom:1.5rem; }
.rivel-our-story-template .rs-step:hover .rs-img{ transform:scale(1.03); }
.rivel-our-story-template .rs-step-num{
	display:block; font-family:var(--font-editorial); font-style:italic; font-size:1.125rem;
	color:var(--clr-terracotta); margin-bottom:.5rem;
}
.rivel-our-story-template .rs-step h3{
	font-family:var(--font-editorial); font-size:1.75rem; font-weight:500; line-height:1.15;
	color:var(--clr-primary-green); margin-bottom:.625rem;
}
.rivel-our-story-template .rs-step p{ font-size:.9375rem; line-height:1.65; color:var(--clr-text-secondary); }

/* ---- 06 Landscape ---- */
.rivel-our-story-template .rs-landscape-hero{
	position:relative; aspect-ratio:21/9; border-radius:16px; overflow:hidden; isolation:isolate;
}
.rivel-our-story-template .rs-landscape-hero .rs-img{ position:absolute; inset:0; z-index:-2; }
.rivel-our-story-template .rs-landscape-overlay{
	position:absolute; inset:0; z-index:-1;
	background:linear-gradient(to top,rgba(16,42,32,.92) 0%,rgba(16,42,32,.35) 55%,rgba(16,42,32,.05) 100%);
}
.rivel-our-story-template .rs-landscape-copy{ position:absolute; left:0; right:0; bottom:0; padding:3rem 4rem; }
.rivel-our-story-template .rs-landscape-copy .rs-h2{ margin-bottom:0; max-width:18ch; }
.rivel-our-story-template .rs-landscape-grid{
	display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:2rem; margin-top:2rem; align-items:stretch;
}
.rivel-our-story-template .rs-landscape-text{ padding:2rem 2rem 0 0; align-self:center; }
.rivel-our-story-template .rs-landscape-fig{ overflow:hidden; border-radius:16px; aspect-ratio:4/5; }
.rivel-our-story-template .rs-landscape-fig:hover .rs-img{ transform:scale(1.03); }

/* ---- 07 Time together ---- */
.rivel-our-story-template .rs-uses{ display:flex; flex-wrap:wrap; gap:.625rem; margin:1.75rem 0 2.25rem; }
.rivel-our-story-template .rs-uses li{
	font-size:.8125rem; font-weight:600; letter-spacing:.04em; padding:.55rem 1.1rem;
	border:1px solid var(--rs-line-light); border-radius:50px; color:var(--clr-primary-green);
	background:var(--clr-warm-ivory);
}

/* ---- Reveal (same behaviour as homepage .reveal-elem; JS adds .rs-reveal-ready) ---- */
.rivel-our-story-template.rs-reveal-ready .reveal-elem{
	opacity:0; transform:translateY(24px);
	transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.rivel-our-story-template.rs-reveal-ready .reveal-elem.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
	.rivel-our-story-template.rs-reveal-ready .reveal-elem{ opacity:1; transform:none; transition:none; }
	.rivel-our-story-template .rs-img,
	.rivel-our-story-template .rs-pillar,
	.rivel-our-story-template .rs-btn-primary,
	.rivel-our-story-template .rs-btn-secondary{ transition:none; }
	.rivel-our-story-template .rs-step:hover .rs-img,
	.rivel-our-story-template .rs-split-media:hover .rs-img,
	.rivel-our-story-template .rs-landscape-fig:hover .rs-img{ transform:none; }
}

/* ---- Tablet ---- */
@media (max-width:1024px){
	.rivel-our-story-template .rs-section{ padding:6rem 2rem; }
	.rivel-our-story-template .rs-split,
	.rivel-our-story-template .rs-split--media-first{ grid-template-columns:1fr; gap:3rem; }
	.rivel-our-story-template .rs-split-text{ max-width:none; }
	.rivel-our-story-template .rs-split-media,
	.rivel-our-story-template .rs-split-media--wide,
	.rivel-our-story-template .rs-split-media--tall{ aspect-ratio:16/10; }
	/* media follows text on stacked layouts so the heading leads */
	.rivel-our-story-template .rs-split--media-first .rs-split-media{ order:2; }
	.rivel-our-story-template .rs-ideas{ grid-template-columns:repeat(2,1fr); row-gap:3rem; }
	.rivel-our-story-template .rs-idea:nth-child(odd){ padding-left:0; border-left:none; }
	.rivel-our-story-template .rs-idea p{ max-width:none; }
	.rivel-our-story-template .rs-steps{ grid-template-columns:repeat(2,1fr); gap:2.5rem 2rem; }
	.rivel-our-story-template .rs-step-media{ aspect-ratio:16/10; }
	.rivel-our-story-template .rs-head--split{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
	.rivel-our-story-template .rs-landscape-hero{ aspect-ratio:16/9; }
	.rivel-our-story-template .rs-landscape-grid{ grid-template-columns:1fr 1fr; }
	.rivel-our-story-template .rs-landscape-text{ grid-column:1 / -1; padding:1rem 0 0; }
	.rivel-our-story-template .rs-landscape-fig{ aspect-ratio:16/10; }
}

/* ---- Mobile ---- */
@media (max-width:767px){
	.rivel-our-story-template .rs-section{ padding:5rem 1.5rem; }
	.rivel-our-story-template .rs-hero{ padding:7rem 1.5rem 3rem; min-height:78vh; min-height:78dvh; }
	.rivel-our-story-template .rs-hero-actions{ flex-direction:column; align-items:stretch; }
	.rivel-our-story-template .rs-btn-primary,
	.rivel-our-story-template .rs-btn-secondary{ justify-content:space-between; width:100%; }
	.rivel-our-story-template .rs-btn-secondary{ justify-content:flex-start; }
	.rivel-our-story-template .rs-head{ margin-bottom:2.5rem; }
	.rivel-our-story-template .rs-ideas{ grid-template-columns:1fr; row-gap:0; }
	.rivel-our-story-template .rs-idea{
		display:grid; grid-template-columns:auto 1fr; column-gap:1.25rem; align-items:center;
		padding:1.5rem 0; border-left:none; border-top:1px solid var(--rs-line-light);
	}
	.rivel-our-story-template .rs-idea:first-child{ border-top:none; padding-top:0; }
	.rivel-our-story-template .rs-idea .rs-icon-badge{ grid-row:1 / span 2; width:64px; height:64px; margin:0; }
	.rivel-our-story-template .rs-idea .rs-icon{ width:34px; height:34px; }
	.rivel-our-story-template .rs-idea h3{ font-size:1.5rem; margin-bottom:.25rem; align-self:end; }
	.rivel-our-story-template .rs-idea p{ align-self:start; }
	.rivel-our-story-template .rs-steps{ grid-template-columns:1fr; gap:2.75rem; }
	.rivel-our-story-template .rs-landscape-hero{ aspect-ratio:4/5; }
	.rivel-our-story-template .rs-landscape-copy{ padding:2rem 1.5rem; }
	.rivel-our-story-template .rs-landscape-grid{ grid-template-columns:1fr; gap:1.5rem; }
	.rivel-our-story-template .rs-landscape-fig{ aspect-ratio:16/11; }
	.rivel-our-story-template .rs-pillar{ gap:1rem; }
	.rivel-our-story-template .rs-icon-badge--sm{ width:52px; height:52px; }
}