@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
	--cream: #fff4e6;
	--blue: url(../img/common/bg01.png);
	--ink: #353b32;
	--accent: #39afe8;
	--brown: #73481e;
	--header: 72px
}
* {
	box-sizing: border-box
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header) + 20px)
}
body {
	margin: 0;
	color: var(--ink);
	background: var(--cream);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(16px,2vw,20px);
	font-weight: 500;
	line-height: 1.9
}

body:has(dialog[open]) {
	overflow: hidden
}
img {
	display: block;
	max-width: 100%;
	height: auto
}
a {
	color: inherit;
	text-decoration: none
}
button {
	font: inherit;
	color: inherit;
	cursor: pointer;
	border: 0;
	background: none
}
a:focus-visible, button:focus-visible {
	outline: 3px solid #186484;
	outline-offset: 6px
}
p {
	margin: 0 0 20px
}
h1, h2, h3 {
	margin: 0
}
main {
	overflow: hidden
}
.container {
	width: calc(100% - 80px);
	max-width: 1240px;
	margin-inline: auto
}
.cream {
	background: var(--cream)
}
.blue {
	background: var(--blue)
}
section {
	position: relative;
	scroll-margin-top: 20px
}
.deco {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	opacity: .8;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap
}
.skip {
	position: fixed;
	top: -100px;
	z-index: 200;
	background: white;
	padding: 12px
}
.skip:focus {
	top: 0
}
.header {
	height: var(--header);
	position: fixed;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 4.5%;
	z-index: 50;
	/*transition: box-shadow .3s;
	backdrop-filter: blur(12px)*/
}
.header::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background: url("../img/common/head-bg.png");
	background-repeat: repeat-x;
	background-size: contain;
	z-index: -1;
}

.brand {
	width: 240px
}
.desktop-nav {
	display: flex;
	align-items: center;
	gap: 28px
}
.desktop-nav > a {
	font-family: Georgia, serif;
	font-size: 15px;
	letter-spacing: .06em
}
.desktop-nav > a:hover {
	color: var(--accent)
}
.insta-link {
	width: 132px
}
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 44px;
	padding: 8px 28px;
	border-radius: 50px;
	background: var(--accent);
	color: white;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	margin: 20px 0;
	transition: background .25s, transform .25s
}
.button:hover {
	background: #168ecb;
	transform: translateY(-2px)
}
.button span:last-child {
	margin-left: auto
}
.header .button {
	font-size: 14px;
	min-height: 38px;
	padding: 6px 24px
}
.header-menu {
	display: none
}
.hero {
	/*margin-top: var(--header);*/
	aspect-ratio: 1920/1080;
	background: #16585e;
	max-height: 108vh;
	width: 100%
}
.hero-slides {
	position: absolute;
	inset: 0
}
.hero-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.6s ease
}
.hero-slide.is-active {
	opacity: 1
}
.hero:after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 5.1vw;
	background: url('../img/common/line-m.png') center bottom/100% 100% no-repeat;
	pointer-events: none;
	z-index: 2
}
.hero-controls {
	position: absolute;
	left: 5%;
	bottom: 8%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px
}
.slide-dot {
	width: 10px;
	height: 10px;
	border: 1px solid white;
	border-radius: 50%;
	background: #ffffff40
}
.slide-dot.is-active {
	background: white
}
.slideshow-toggle {
	color: white;
	width: 32px;
	height: 32px;
	border: 1px solid #ffffff90;
	border-radius: 50%;
	font-size: 14px
}
.about {
	padding: 70px 0 105px
}
.about-inner {
	display: flex;
	align-items: center;
	gap: 70px;
	position: relative;
	z-index: 2
}
.about-copy {
	flex: 1
}
.about-copy h2 {
	margin: 0 0 10%
}
.about-copy h2 img {
	width: 100%
}
.letsplay {
	width: 83%;
	margin: 8% 0 0 10%;
	transform: rotate(-6deg)
}
.about-photo {
	width: 48%
}
.about-trees {
	width: 16%;
	left: -3%;
	bottom: 45px
}
.about-river {
	width: 36%;
	right: -4%;
	bottom: 8px
}
.activity {
	padding: 70px 0 130px
}
.activity:before, .social:before {
	content: "";
	position: absolute;
	left: -5%;
	top: -80px;
	width: 110%;
	height: 90px;
	background:url("../img/common/line-b.png");
	/*border-radius: 50% 45% 0 0/85% 70% 0 0;
	transform: rotate(-2deg)*/
}
.section-title {
	width: 410px;
	max-width: 70%;
	margin: 0 auto 105px;
	position: relative;
	z-index: 2
}
.plans {
	position: relative;
	z-index: 2;
	max-width: 1200px
}
.plan {
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 110px;
	min-height: 570px
}
.plan:last-of-type {
	margin-bottom: 0
}
.plan-photo {
	width: 53%;
	flex-shrink: 0;
	position: relative;
	z-index: 2
}
.plan-photo > img {
	width: 100%;
	height: 580px;
	object-fit: cover;
	border-radius: 55px;
	transform: rotate(-4deg)
}
.plan.reverse {
	flex-direction: row-reverse
}
.plan.reverse .plan-photo > img {
	transform: rotate(6deg)
}
.plan-card {
}
.reverse .plan-card {
	margin-left: 0;
	margin-right: -6%
}
.plan-card {
	margin-left: -6%;
	position: relative;
	z-index: 3;
	 width: 53%;
	 padding: 60px 50px 40px 80px;
	 background: transparent;
	 border-radius: 0;
	 isolation: isolate;
}
.plan-card::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -1;
 background: #fffefa;
 border-radius: 30px 36px 28px 32px;
 transform: skewX(8deg);
 pointer-events: none;
}
.reverse .plan-card::before {
 transform: skewX(-8deg);
 border-radius: 36px 30px 32px 28px;
}

.plan-number {
	position: absolute;
	width: 135px;
	max-height: 125px;
	left: 22px;
	top: -72px
}
.plan-card h3 {
	margin-bottom: 24px
}
.plan-card h3 img {
	width: 80%;
	max-height: none;
	object-fit: contain
}
.plan-card p {
	font-size: inherit;
	line-height: 1.9;
	margin-bottom: 20px
}
.plan-card .price {
	color: #dd5250;
	font-weight: 700;
	font-size: inherit;
	letter-spacing: 0
}
.price small {
	font-size: 11px
}
.plan-card .button {
	width: 100%
}
.plan-mountain {
	left: -2%;
	top: 120px;
	width: 35%;
	opacity: .7
}
.plan-climber {
	width: 45%;
	right: -24%;
	top: 390px;
	z-index: 4
}
.plan-paddle {
	width: 43%;
	left: -23%;
	top: 1240px;
	z-index: 4
}
.plan-waterfall {
	width: 31%;
	right: -25%;
	bottom: 420px;
	z-index: 4
}
.plan-rock {
	width: 25%;
	bottom: 35px;
	left: 0
}
.cafe {
	padding: 110px 0 150px
}
.cafe:before, .contact:before {
	content: "";
	position: absolute;
	left: 0;
	top: -70px;
	width: 100%;
	height: 80px;
	background: url("../img/common/line-m.png");
	/*border-radius: 45% 60% 0 0/80% 80% 0 0*/
}
.cafe-inner {
	display: flex;
	align-items: center;
	gap: clamp(60px,6vw,100px);
	max-width: 1380px;
	position: relative;
	z-index: 2
}
.cafe-copy {
	width: 44%;
	padding-bottom: 60px
}
.cafe-title {
	width: 340px;
	margin: 0 auto 80px
}
.cafe-copy h3 {
	font-size: 20px;
	margin-bottom: 35px;
	color: var(--brown)
}
.cafe-copy p {
	font-size: inherit;
}
.brown {
	background: var(--brown)
}
.brown:hover {
	background: #533315
}
.cafe-hours {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 5px 10px;
	margin-top: 24px;
	font-size: 18px;
	color: var(--brown)
}
.cafe-hours dd {
	margin: 0
}
.cafe-visual {
	width: 56%;
	position: relative;
	padding-bottom: 155px
}
.cubano {
	width: 115%;
	max-width: none;
	aspect-ratio: 1.16;
	object-fit: cover;
	border-radius: 30px;
	transform: rotate(5deg)
}
.cafe-polaroids {
	position: absolute;
	width: 95%;
	right: -10%;
	bottom: 0;
	transform: rotate(-2deg)
}
.cafe-decoration {
    width: 45%;
    bottom: -3%;
    left: -1%;
    z-index: 3;
}
.social {
	padding: 100px 0 0;
	text-align: center
}
.social .container {
	position: relative;
	z-index: 2
}
.instagram-title {
	width: 450px;
	max-width: 65%;
	margin: 0 auto 70px
}
.follow {
	position: absolute;
	width: 220px;
	left: -7%;
	top: 5px;
	transform: rotate(-10deg)
}
.birds {
	width: 280px;
	right: -8%;
	top: 0
}
.instagram-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin-bottom: 45px
}
.instagram-grid a {
	overflow: hidden;
	aspect-ratio: 1
}
.instagram-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s
}
.instagram-grid a:hover img {
	transform: scale(1.08)
}
.outline {
	background: transparent;
	border: 1px solid var(--accent);
	color: #1684b6;
	font-weight: 500
}
.outline:hover {
	color: white
}
.landscape {
    max-width: 120%;
    margin-top: -260px;
	margin-bottom: -60px;
    position: relative;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}
.contact {
	padding: 20px 0 0
}
.contact-inner {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	min-height: 590px
}
.contact-copy {
	width: 46%;
	position: relative;
	z-index: 2;
	padding: 0 0 80px 20px
}
.contact-copy h2 {
	width: 90%;
	margin-bottom: 50px
}
.contact-copy p {
	font-size: inherit;
}
.leaf {
	position: absolute;
	left: -140px;
	top: -40px;
	width: 120px;
	opacity: .6;
}
.contact-art {
	width: 70%;
	max-width: none;
	margin-left: -5%;
	align-self: flex-end;
}
.footer {
	background: #e5fbfb url('../img/common/foot-bg.png') bottom center/100% auto no-repeat;
	position: relative;
	padding: 50px 0 65px;
	text-align: center
}
.footer:before {
	content: "";
	position: absolute;
	top: -25px;
	height: 45px;
	width: 100%;
	left: 0;
	border-radius: 50% 45% 0 0;
	background: #e5fbfb
}
.footer-inner {
	display: flex;
	gap: 100px;
	align-items: center;
	justify-content: center;
	position: relative
}
.footer-logo {
	width: 225px
}
.footer nav {
	display: flex;
	gap: 26px;
	align-items: center;
	font-family: Georgia, serif;
	font-size: 14px
}
.footer > small {
	display: block;
	font-size: 10px;
	color: #758482;
	margin-top: 55px
}
.mobile-bar {
	display: none
}
dialog {
	border: 0;
	color: var(--ink);
	background: var(--cream);
	padding: 55px;
	max-width: calc(100% - 32px);
	max-height: 85dvh;
	overflow: auto;
	margin: auto;
	border-radius: 24px
}
dialog::backdrop {
	background: #143b4599;
	backdrop-filter: blur(5px)
}
.dialog-close {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 32px;
	width: 44px;
	height: 44px;
	line-height: 1
}
.info-dialog {
	width: 620px
}
.info-dialog h2 {
	font-size: 25px;
	margin-bottom: 25px
}
.info-dialog p {
	font-size: inherit;
}
.eyebrow {
	color: #188abb;
	font-size: 12px !important;
	letter-spacing: .18em
}
.menu-dialog {
	width: 480px
}
.menu-dialog > img {
	width: 210px;
	margin: 0 auto 30px
}
.menu-dialog nav {
	display: grid
}
.menu-dialog a {
	padding: 14px 0;
	border-bottom: 1px solid #73481e25;
	letter-spacing: .08em
}
.menu-dialog small {
	display: block;
	font-size: 11px;
	letter-spacing: 0
}
.info-dialog .button {
	margin-top: 10px
}
@media(min-width:1700px) {
	.container {
		max-width: 1280px
	}
	.cafe-inner{
		max-width: 1320px;
	}
	.about {
		padding-block: 100px 130px
	}
	.plan {
		min-height: 650px;
		margin-bottom: 130px
	}
	.plan-photo > img {
		height: 650px
	}
	.plan-card {
		padding: 70px 65px 35px
	}
	.plan-climber {
		top: 490px
	}
	.plan-paddle {
		top: 1450px
	}
	.cafe {
		padding-block: 130px 180px
	}
	.contact-inner {
		min-height: 650px
	}
}
@media(max-width:1100px) {
	:root {
		--header: 66px
	}
	.brand {
		width: 185px
	}
	.desktop-nav {
		gap: 18px
	}
	.desktop-nav > a {
		font-size: 12px
	}
	.insta-link {
		width: 100px
	}
	.header .button {
		font-size: 12px;
		padding: 7px 15px
	}
	.container {
		width: calc(100% - 100px)
	}
	.about {
		padding: 65px 0 85px
	}
	.about-inner {
		gap: 30px
	}
	.about-copy p {
		font-size: inherit;
	}
	.plan {
		min-height: 430px;
		margin-bottom: 90px
	}
	.plan-photo > img {
		height: 440px;
		border-radius: 35px
	}
	.plan-card {
		padding: 45px 28px 25px;
		border-radius: 22px
	}
	.plan-card p {
		font-size: inherit;
	}
	.plan-card .price {
		font-size: inherit;
	}
	.plan-number {
		width: 105px;
		top: -60px
	}
	.plan-card h3 {
		margin-bottom: 16px
	}
	.plan-climber {
		top: 310px
	}
	.plan-paddle {
		top: 980px
	}
	.plan-waterfall {
		bottom: 300px
	}
	.cafe-inner {
		gap: 40px
	}
	.cafe-copy h3 {
		font-size: 16px
	}
	.cafe-copy p {
		font-size: inherit;
	}
	.cafe-hours {
		font-size: 12px;
		grid-template-columns: 95px 1fr
	}
.contact-inner {
		min-height: 450px
	}
	.contact-copy p {
		font-size: inherit;
	}
	.footer-inner {
		gap: 50px
	}
	.footer nav {
		gap: 18px;
		font-size: 12px
	}
	.footer-logo {
		width: 180px
	}
	.follow {
		width: 160px
	}
}
@media(max-width:767px) {
	:root {
		--header: 62px
	}
	body {
		font-size: 14px;
		padding-bottom: calc(68px + env(safe-area-inset-bottom))
	}
	.container {
		width: calc(100% - 40px)
	}
	.header {
		padding: 10px 20px
	}
	.brand {
		width: 190px
	}
	.desktop-nav {
		display: none
	}
	.header-menu {
		display: block;
		font-size: 25px;
		width: 44px;
		height: 44px
	}
	.hero {
		aspect-ratio: 4/4.5
	}
	.hero-slide {
		object-position: 58% center
	}
	.hero:after {
		height: 35px;
		background-size: auto 100%
	}
	.hero-controls {
		left: 24px;
		bottom: 45px
	}
	.about {
		padding: 42px 0 80px
	}
	.about-inner {
		flex-direction: column;
		gap: 30px
	}
	.about-copy {
		width: 100%;
		padding: 0 12px
	}
	.about-copy h2 {
		margin-bottom: 22px
	}
	.about-copy p {
		font-size: inherit;
		line-height: 2
	}
	.letsplay {
		width: 70%;
		margin: 20px 0 0 18%
	}
	.about-photo {
		width: 85%;
		align-self: flex-end
	}
	.about-trees {
		width: 35%;
		bottom: 60px;
		left: -8%
	}
	.about-river {
		width: 60%;
		bottom: 6px;
		right: -10%
	}
	.activity {
		padding: 45px 0 90px
	}
	.section-title {
		width: 270px;
		margin-bottom: 70px
	}
	.plan {
		display: block;
		margin-bottom: 105px;
		min-height: 0
	}
	.plan.reverse {
		display: block
	}
	.plan-photo {
		width: 87%;
		margin-left: 2%
	}
	.plan-photo > img {
		height: 365px;
		border-radius: 28px
	}
	.plan.reverse .plan-photo {
		margin-left: 10%
	}
	.plan-card, .reverse .plan-card {
		width: 92%;
		margin: -35px 0 0 8%;
		padding: 48px 24px 24px;
		border-radius: 22px
	}
	.reverse .plan-card {
		margin-left: 0
	}
	.plan-card p {
		font-size: inherit;
	}
	.plan-card h3 img {
		max-height: none
	}
	.plan-card .price {
		font-size: inherit;
	}
	.plan-number {
		top: -43px;
		left: 14px;
		width: 90px;
		max-height: 90px
	}
	.plan-card h3 {
		margin-bottom: 20px
	}
	.plan-mountain {
		width: 55%;
		top: 110px;
		left: -20%;
		opacity: .4
	}
	.plan-climber {
		top: 555px;
		right: -10%;
		width: 50%;
		z-index: 2;
		opacity: .85
	}
	.plan-paddle {
		top: 1400px;
		left: -15%;
		width: 48%;
		z-index: 2;
		opacity: .7
	}
	.plan-waterfall {
		width: 36%;
		bottom: 570px;
		right: -12%;
		z-index: 2
	}
	.plan-rock {
		width: 44%;
		bottom: 5px;
		left: -7%
	}
	.cafe {
		padding: 65px 0 115px
	}
	.cafe-inner {
		flex-direction: column;
		gap: 30px
	}
	.cafe-copy {
		width: 100%;
		padding: 0 10px
	}
	.cafe-title {
		width: 230px;
		margin-bottom: 28px
	}
	.cafe-copy h3 {
		font-size: 17px
	}
	.cafe-copy p {
		font-size: inherit;
	}
	.cafe-hours {
		font-size: 13px;
		grid-template-columns: 110px 1fr
	}
	.cafe-visual {
		width: 90%;
		padding-bottom: 100px
	}
	.cubano {
		width: 105%;
		border-radius: 22px;
		aspect-ratio: 1.1
	}
	.cafe-polaroids {
		width: 95%;
		right: -9%
	}
.cafe-decoration {
		width: 65%;
		bottom: 0;
		left: -10%
	}
	.social {
		padding-top: 55px
	}
	.instagram-title {
		max-width: 76%;
		margin-bottom: 48px
	}
	.follow {
		width: 90px;
		left: -8px;
		top: -25px
	}
	.birds {
		width: 100px;
		right: -12px;
		top: 50px
	}
	.instagram-grid {
		gap: 12px;
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 28px
	}
	.outline {
		font-size: 13px
	}
	.landscape {
		width: 150%;
		max-width: none;
		margin: 20px 0 0 -25%
	}
	.contact {
		padding-top: 30px
	}
	.contact-inner {
		display: block;
		min-height: 0
	}
	.contact-copy {
		padding: 0 15px;
		width: 100%
	}
	.contact-copy h2 {
		width: 80%;
		max-width: 300px;
		margin: 0 auto 30px
	}
	.contact-copy p {
		font-size: inherit;
	}
	.leaf {
		width: 60px;
		left: -18px;
		top: -15px
	}
	.contact-art {
		width: 115%;
		margin: 15px 0 -5px -5%;
		max-width: none
	}
	.footer {
		padding: 30px 0 50px;
		background-size: 180% auto
	}
	.footer-inner {
		flex-direction: column;
		gap: 25px
	}
	.footer-logo {
		width: 155px
	}
	.footer nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px 20px;
		font-size: 11px
	}
	.footer > small {
		margin-top: 35px;
		font-size: 9px
	}
	.mobile-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		height: calc(68px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: #fffaf0;
		box-shadow: 0 -3px 20px #16394418
	}
	.mobile-bar > button, .mobile-bar > a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 11px;
		line-height: 1.5;
		border-right: 1px solid #d9e1d8;
		gap: 3px
	}
	.mobile-bar span {
		font-size: 24px;
		line-height: 1.1;
		color: #2389b6
	}
	.mobile-bar .line-link {
		background: #e7f9ed
	}
	.mobile-bar .line-link span {
		font-size: 12px;
		background: #06c755;
		color: white;
		border-radius: 8px;
		padding: 5px 4px;
		font-weight: bold
	}
	.mobile-bar > button:nth-child(2) {
		background: #d8f2fd
	}
	dialog {
		padding: 50px 25px 30px
	}
	.info-dialog h2 {
		font-size: 21px
	}
}
@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}
	*, *:before, *:after {
		animation: none !important;
		transition: none !important
	}
	.fadeUpTrigger, .fadeLeftTrigger, .fadeRightTrigger, .ani_text {
		opacity: 1 !important;
		transform: none !important
	}
}
/* Keep the lettering embedded in hero photos visible on phones. */
@media(max-width:767px) {
	.hero {
		aspect-ratio: 4/3
	}
	.hero-slide {
		object-position: right center
	}
}

/* Supplied icons share a consistent baseline and keep their native proportions. */
.icon {
 width: 1.25em;
 height: 1.25em;
 object-fit: contain;
 flex-shrink: 0;
}
.cafe-hours dt { display: flex; align-items: center; gap: .5em; }
.footer .icon-mail { filter: brightness(0) saturate(100%); opacity: .75; }
.mobile-bar .icon-mail { width: 25px; height: 25px; filter: brightness(0) saturate(100%) invert(46%) sepia(63%) saturate(578%) hue-rotate(153deg); }
.plan-card h3 img { height: auto; max-height: none; }
.footer::before { top: -59px; height: 60px; pointer-events: none; }

/* Let the artwork run to the right viewport edge, while keeping the copy aligned. */
@media (min-width: 768px) {
 .cafe-copy { flex: 0 0 44%; }
 .cafe-visual {
  flex: 1 0 56%;
  margin-right: calc(-1 * max(40px, (100vw - 1380px) / 2));
 }
 .cubano { width: 100%; }
 .cafe-polaroids { right: 0; }
 .contact-copy { flex: 0 0 46%; }
 .contact-art {
  flex-shrink: 0;
  width: calc(59% + max(40px, (100vw - 1240px) / 2));
 }
}
@media (min-width: 768px) and (max-width: 1100px) {
 .cafe-visual { margin-right: -50px; }
 .contact-art { width: calc(59% + 50px); }
}
@media (min-width: 1700px) {
 .cafe-visual { margin-right: calc(-1 * (100vw - 1280px) / 2); }
 .contact-art { width: calc(59% + (100vw - 1280px) / 2); }
}
@media (max-width: 767px) {
 .cafe-visual { align-self: flex-end; margin-right: -20px; width: 95%; }
 .cafe-polaroids { right: 0; }
 .contact-art { width: calc(100% + 20px); margin: 15px 0 -5px; }
 .footer::before { top: -39px; height: 40px; }
 /* Preserve the adjusted landscape centering without the old horizontal offset. */
 .landscape { margin-left: 0; }
}
.footer::before {
 border-radius: 0;
 background: url('../img/common/footer-wave.svg') center / 100% 100% no-repeat;
}
@media (max-width: 767px) {
 .header::before { height: 80px; background-size: auto 100%; }
}

/* Compact, slanted white panels inspired by the original layout.
   Only the backdrop is skewed, keeping the PNG titles and copy undistorted. */


.plan-card h3 { margin-bottom: 18px; }
.plan-card p {
 font-size: clamp(12px, 1.05vw, 15px);
 line-height: 1.8;
 margin-bottom: 16px;
}
.plan-card .price { font-size: clamp(12px, 1.1vw, 16px); margin-bottom: 16px; }
.plan-card .button { min-height: 40px; padding: 7px 22px; font-size: 14px; }
.plan-number { width: 120px; top: -65px; left: 10px; }
@media (max-width: 1100px) and (min-width: 768px) {
 .plan-card { padding: 38px 26px 22px; }
 .plan-number { width: 100px; top: -54px; }
 .plan-card h3 { margin-bottom: 14px; }
 .plan-card .button { font-size: 12px; min-height: 36px; }
}
@media (max-width: 767px) {
 .plan-card, .reverse .plan-card {
  width: 89%;
  padding: 42px 22px 22px;
  margin-top: -40px;
  border-radius: 0;
 }
 .plan-card { margin-left: 8%; }
 .reverse .plan-card { margin-left: 2%; }
 .plan-card::before { transform: skewX(5deg); border-radius: 24px; }
 .reverse .plan-card::before { transform: skewX(-5deg); border-radius: 24px; }
 .plan-card p { font-size: 13px; }
 .plan-card .price { font-size: 13px; }
 .plan-number { width: 85px; top: -43px; left: 8px; }
 .plan-card .button { font-size: 13px; }
}

/* One vertical outer edge; the slanted photo-side area is extra whitespace. */
.plan-card::before {
 inset: 0 0 0 -55px;
 border-radius: 0;
 background: url('../img/common/plan-panel.svg') center / 100% 100% no-repeat;
 transform: none;
}
.reverse .plan-card::before {
 inset: 0 -44px 0 0;
 border-radius: 0;
 transform: scaleX(-1);
}
@media (max-width: 767px) {
 .plan-card::before { left: -20px; }
 .reverse .plan-card::before { left: 0; right: -20px; }
}

/* Cafe: larger lead-in and the layered photo composition from the reference. */
.cafe-copy h3 {
 font-size: clamp(24px, 2.05vw, 30px);
 font-weight: 700;
 line-height: 1.65;
 letter-spacing: .025em;
 margin-bottom: 26px;
}
.cafe-visual { padding-bottom: 205px; }
.cafe-main-photo {
 width: 108%;
 aspect-ratio: 1.06;
 overflow: hidden;
 border-radius: 26px 0 0 22px;
 transform: skewX(-7deg) translateX(15%);
 transform-origin: top left;
}
.cafe-main-photo .cubano {
 width: 100%;
 height: 100%;
 max-width: none;
 aspect-ratio: auto;
 object-fit: cover;
 object-position: center;
 border-radius: 0;
 transform: skewX(7deg) scale(1.13);
}
.cafe-polaroids {
 width: 94%;
 right: 3%;
 bottom: 8px;
 transform: rotate(-2deg);
 z-index: 2;
}
@media (min-width: 768px) and (max-width: 1100px) {
 .cafe-copy h3 { font-size: 24px; }
 .cafe-visual { padding-bottom: 150px; }
}
@media (max-width: 767px) {
 .cafe-copy h3 { font-size: 23px; margin-bottom: 24px; }
 .cafe-visual { padding-bottom: 135px; margin-top: 16px; }
 .cafe-main-photo { width: 107%; aspect-ratio: 1.02; border-radius: 20px 0 0 18px; transform: skewX(-5deg); }
 .cafe-main-photo .cubano { transform: skewX(5deg) scale(1.1); }
.cafe-label small { font-size: 10px; margin-bottom: 5px; }
.cafe-polaroids { width: 91%; right: 5%; bottom: 0; }
}


/* Supplied price artwork already includes its shape, shadow and lettering. */
.cafe-price {
 position: absolute;
 width: clamp(260px,33%,400px);
 height: auto;
 left: -55px;
 bottom: 30%;
 z-index: 3;
}
@media (min-width: 768px) and (max-width: 1100px) {
 .cafe-price { width: 215px; left: -28px; bottom: 145px; }
}
@media (max-width: 767px) {
 .cafe-price { width: 185px; left: -12px; bottom: 130px; }
}

/* Stacked plans: rectangular cards and illustrations in the document flow.
   Each illustration follows its plan, so wrapping text cannot hide it. */
@media (max-width: 767px) {
 .activity { padding-bottom: 100px; }
 .activity .section-title { margin-bottom: 24px; }
 .plan, .plan.reverse { margin-bottom: 0; }
 .plan-photo, .plan.reverse .plan-photo {
  width: 92%;
  margin: 0 auto;
 }
 .plan-photo > img {
  height: auto;
  aspect-ratio: 1 / 1.08;
 }
 .plan-card, .reverse .plan-card {
  width: 94%;
  margin: -28px auto 0;
  padding: 48px 24px 24px;
 }
 .plan-card::before, .reverse .plan-card::before {
  inset: 0;
  transform: none;
  background: #fffefa;
  border-radius: 24px;
 }
 .plan-card h3 img { width: 100%; }
 .activity .deco {
  position: relative;
  inset: auto;
  height: auto;
  z-index: 2;
  opacity: .85;
 }
 .activity .plan-mountain {
  width: clamp(110px, 30vw, 170px);
  margin: 0 0 30px 20px;
 }
 .plans > .plan-climber {
  width: clamp(150px, 45vw, 230px);
  margin: 20px 0 35px auto;
 }
 .plans > .plan-paddle {
  width: clamp(145px, 44vw, 220px);
  margin: 24px auto 40px 0;
 }
 .plans > .plan-waterfall {
  width: clamp(120px, 33vw, 170px);
  margin: 20px 0 35px auto;
 }
 .activity .plan-rock {
  width: clamp(140px, 40vw, 200px);
  margin: 28px 0 0 20px;
 }
}

/* Mobile header: Instagram; the menu remains in the bottom navigation. */
.header-instagram { display: none; }
@media (max-width: 767px) {
 .header-instagram { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: #c34472; }
}