/* ==========================================================================
 * 5 Hermoupolis Concept Sites: the homepage.
 *
 * Loaded on the front page only, right after site.css (functions.php,
 * hermoupolis_page_style): the Elementor homepage's sections, from the hero
 * to the contact block. Shared parts (titles, arrows, sliders, the contact
 * form) are in site.css.
 * ========================================================================== */

/* Widths on widgets. Elementor caps every widget in a container with
   .elementor.elementor .e-con>.elementor-widget{max-width:100%}, so these
   need one class more than that to count. */
.elementor.elementor .e-con > .elementor-widget.h5-hero__lead{ max-width:min(100%,820px); }
.elementor.elementor .e-con > .elementor-widget.h5-body{ max-width:min(100%,1660px); }
.elementor.elementor .e-con.h5-elegance > .elementor-widget.h5-body{ max-width:min(100%,930px); }
.elementor.elementor .e-con > .elementor-widget.h5-contact__intro{ max-width:min(100%,540px); }
.elementor.elementor .e-con > .elementor-widget.h5-elegance__drawing{ width:min(100%,1163px); max-width:100%; }

/* ==========================================================================
 * HOMEPAGE: HERO
 * ========================================================================== */

/* The CONTACT US pill sits in the photo's bottom right corner at the same gap
   from the photo's edges on every side, and the photo's two corners next to it
   follow the pill's own curve: their radius is the pill's half height plus
   that gap, centred where the pill's round ends are. */
.elementor{
	--h5-pill-h:clamp(60px,4.95vw,95px);
	--h5-pill-gap:clamp(10px,.75vw,14px);
	--h5-pill-curve:calc(var(--h5-pill-h) / 2 + var(--h5-pill-gap));
}

.elementor .e-con.h5-hero{
	--h5-foot:clamp(84px,5.75vw,110px);
	position:relative;
	margin:var(--h5-edge) var(--h5-edge) 0;
	width:auto;
	/* As drawn, but never taller than the window allows: CONTACT US, in the
	   photo's bottom right corner, is always in view on a computer (Nikolaos
	   2026-10-14). --h5-hero-room is the window less the margins above and below
	   the photo (and WordPress's admin bar when signed in). */
	--h5-hero-room:calc(100vh - 2 * var(--h5-edge));
	--h5-hero-room:calc(100svh - 2 * var(--h5-edge));
	height:max(440px,min(clamp(560px,49.8vw,960px),var(--h5-hero-room)));
	border-radius:var(--h5-radius) var(--h5-radius) var(--h5-pill-curve) 0;
	overflow:hidden;
	isolation:isolate;
	justify-content:flex-end;
	color:#fff;
}
.elementor .e-con.h5-hero::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	background:
		linear-gradient(to top,rgba(26,18,10,.42) 0%,rgba(26,18,10,.12) 45%,rgba(26,18,10,0) 70%),
		linear-gradient(to bottom,rgba(26,18,10,.26) 0%,rgba(26,18,10,0) 30%);
}

/* The photographs are a slider (site.css, site.js) under the text, moved by the
   arrows and every 3 s; the photo in view zooms out slowly. No sliding and no
   dragging here (Nikolaos 2026-10-15): the next photograph comes in on top of
   the one in view, from 120% scale and transparent to 100% and opaque; the one
   it covers stays as it is until then and is put back out of sight after. */
.elementor .e-con.h5-hero__media{ position:absolute; inset:0; z-index:-1; }
.elementor .h5-hero .h5-slider > .h5-slide,
.elementor .h5-hero .h5-slider.is-ready > .h5-slide,
.elementor .h5-hero .h5-slider.is-ready > .h5-slide.is-jump{
	z-index:0;
	transform:scale(1.2);
	opacity:0;
	transition:transform 0s 1.2s,opacity 0s 1.2s;
}
.elementor .h5-hero .h5-slider > .h5-slide.is-active,
.elementor .h5-hero .h5-slider.is-ready > .h5-slide.is-active,
.elementor .h5-hero .h5-slider.is-ready > .h5-slide.is-active.is-jump{
	z-index:1;
	transform:none;
	opacity:1;
}
.elementor .h5-hero .h5-slider.is-ready > .h5-slide.is-active,
.elementor .h5-hero .h5-slider.is-ready > .h5-slide.is-active.is-jump{
	transition:transform 1.2s var(--h5-ease),opacity 1.2s var(--h5-ease);
}
/* Before the script runs, the first photograph shows. */
.elementor .h5-hero .h5-slider:not(.is-ready) > .h5-slide:first-child{ transform:none; opacity:1; }
.elementor .h5-hero .h5-slide img{ transform:scale(1.04); transition:transform 7s linear; }
.elementor .h5-hero .h5-slide.is-active img{ transform:scale(1); }

.elementor .e-con.h5-hero__content{
	position:relative;
	z-index:1;
	padding:0 var(--h5-inset) calc(var(--h5-foot) + clamp(40px,7.8vw,150px)) clamp(24px,5.9vw,113px);
	max-width:min(100%,1500px);
}
body.admin-bar .elementor .e-con.h5-hero{ --h5-hero-room:calc(100vh - 2 * var(--h5-edge) - 32px); --h5-hero-room:calc(100svh - 2 * var(--h5-edge) - 32px); }
.elementor .h5-hero__title .elementor-heading-title{
	font-family:var(--h5-serif);
	font-weight:400;
	font-size:clamp(40px,4.1vw,78px);
	line-height:1.02;
	letter-spacing:-.005em;
	color:#fff;
	text-shadow:0 1px 24px rgba(0,0,0,.18);
}
.elementor .h5-hero__lead{
	margin-top:clamp(12px,1.05vw,20px);
	font-size:clamp(16px,1.25vw,24px);
	line-height:1.22;
	color:#fff;
}

/* The row under the hero: the cream tab cuts into it from the left and the
   CONTACT US pill sits in what is left of the photo on the right. */
.elementor .e-con.h5-hero-foot{
	position:relative;
	z-index:2;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:stretch;
	height:clamp(84px,5.75vw,110px);
	margin-top:calc(-1 * clamp(84px,5.75vw,110px));
}
.elementor .e-con.h5-hero-foot__tab{
	position:relative;
	flex:1 1 auto;
	min-width:0;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;
	background:var(--h5-bg);
	border-top-right-radius:var(--h5-radius);
	/* On screens wider than the design "about us." stays in line with the about
	   text below it, which is centred at 1700px. */
	padding:0 clamp(18px,1.9vw,36px) 0 max(var(--h5-inset),calc((100% - 1700px) / 2));
	/* 1px past the photograph's bottom edge: on phones the two edges met on a
	   fraction of a pixel and the photo showed through as a hairline. */
	margin-bottom:-1px;
}
/* The photograph's bottom left corner, just above where the tab starts, is
   rounded too (Nikolaos 2026-10-12; square in the design): cream fills the
   corner outside a quarter circle, reaching 1px past the photo's edges so no
   seam shows. ::after, because Elementor keeps every container's ::before for
   its overlays. */
.elementor .e-con.h5-hero-foot__tab::after{
	content:"";
	position:absolute;
	left:calc(var(--h5-edge) - 1px);
	top:calc(-1 * var(--h5-radius));
	width:calc(var(--h5-radius) + 1px);
	height:calc(var(--h5-radius) + 1px);
	background:radial-gradient(circle at 100% 0,transparent calc(var(--h5-radius) - .5px),var(--h5-bg) var(--h5-radius));
	pointer-events:none;
}
.elementor .h5-hero-foot__title{ margin-top:clamp(38px,3.5vw,67px); }
.elementor .h5-hero-foot__arrows{ margin-top:clamp(18px,1.6vw,31px); }
/* The pill sits on the bottom, the same gap from the photo's left, right and
   bottom edges. */
.elementor .e-con.h5-hero-foot__cta{
	position:relative;
	flex:0 0 auto;
	width:auto;
	align-items:center;
	justify-content:flex-end;
	margin-right:var(--h5-edge);
	padding:0 var(--h5-pill-gap) var(--h5-pill-gap);
}
/* The photograph's bottom left corner beside the tab, following the pill's
   left end (--h5-pill-curve, above): cream fills it outside a quarter circle.
   It reaches 1px under the tab and below the photo so no seam shows on phones,
   and sits under the pill so the pill's shadow falls on it as on the tab. */
.elementor .e-con.h5-hero-foot__cta::after{
	content:"";
	position:absolute;
	z-index:-1;
	left:-1px;
	bottom:-1px;
	width:calc(var(--h5-pill-curve) + 1px);
	height:calc(var(--h5-pill-curve) + 1px);
	background:radial-gradient(circle at 100% 0,transparent calc(var(--h5-pill-curve) - .5px),var(--h5-bg) var(--h5-pill-curve));
	pointer-events:none;
}

/* CONTACT US: white pill, copper circle with the arrow */
.elementor .h5-pill-cta .elementor-button{
	display:inline-flex;
	align-items:center;
	gap:clamp(14px,1.2vw,22px);
	height:var(--h5-pill-h);
	padding:0 clamp(6px,.5vw,9px) 0 clamp(20px,1.65vw,32px);
	border-radius:999px;
	background:#fff;
	color:var(--h5-brown);
	font-family:var(--h5-sans);
	font-weight:300;
	font-size:clamp(17px,1.56vw,30px);
	letter-spacing:.01em;
	text-transform:uppercase;
	text-decoration:none;
	line-height:1;
	box-shadow:0 10px 30px rgba(40,28,14,.10);
}
.elementor .h5-pill-cta .elementor-button-content-wrapper{ display:contents; }
.elementor .h5-pill-cta .elementor-button::after{
	content:"";
	flex:0 0 auto;
	width:clamp(46px,4.06vw,78px);
	height:clamp(46px,4.06vw,78px);
	border-radius:50%;
	background:var(--h5-copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 29 29 11M14 11h15v15' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/48% no-repeat;
	transition:transform .3s var(--h5-ease);
}
.elementor .h5-pill-cta .elementor-button:hover::after{ transform:rotate(45deg); }

/* ==========================================================================
 * HOMEPAGE: ABOUT, GALLERY
 * ========================================================================== */

.elementor .e-con.h5-about{
	padding:clamp(48px,4.3vw,82px) var(--h5-inset) 0;
	max-width:calc(1700px + 2 * var(--h5-inset));
}
.elementor .h5-about .h5-body{ margin-top:clamp(28px,2.9vw,56px); }


.elementor .e-con.h5-gallery{
	margin:clamp(64px,6.3vw,121px) var(--h5-edge) 0;
	width:auto;
	height:clamp(320px,43vw,826px);
	border-radius:var(--h5-radius);
	overflow:hidden;
	isolation:isolate;
}
.elementor .e-con.h5-gallery > .h5-gallery__arrows{
	position:absolute;
	right:clamp(16px,1.98vw,38px);
	bottom:clamp(14px,1.35vw,26px);
	z-index:2;
	width:auto;
}
.elementor .h5-gallery .h5-arrows{ gap:clamp(12px,1.46vw,28px); }
.elementor .h5-gallery .h5-arrow{
	--h5-arrow:clamp(38.4px,3.84vw,73.6px); /* 20% under the first size (Nikolaos 2026-10-14) */
	border:2px solid #fff;
	color:#fff;
}
@media (hover:hover){
	.elementor .h5-gallery .h5-arrow:hover{ background:var(--h5-brown); border-color:var(--h5-brown); color:#fff; }
}

/* ==========================================================================
 * HOMEPAGE: ROOMS
 * ========================================================================== */

.elementor .e-con.h5-rooms{
	position:relative;
	flex-direction:row;
	align-items:flex-start;
	gap:clamp(20px,1.56vw,30px);
	padding:clamp(56px,4.6vw,88px) 0 4px var(--h5-inset-wide);
	overflow:hidden;
}
/* The sand panel behind the cards, hung off the carousel so it follows it at
   every width: 59.4vw from the window edge on desktop, as drawn. */
.elementor .e-con.h5-rooms__stage::before{
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	bottom:0;
	left:19vw;
	right:0;
	background:var(--h5-sand);
	border-radius:clamp(20px,1.6vw,30px) 0 0 clamp(20px,1.6vw,30px);
}
.elementor .e-con.h5-rooms__intro{
	position:relative;
	z-index:1;
	flex:0 0 clamp(260px,27.9vw,535px);
	width:auto;
	padding-top:clamp(10px,1.2vw,22px);
}
/* Spacing between widgets is always a top margin: Elementor zeroes the bottom
   one with .e-con .elementor-widget.elementor-widget, loaded after this file. */
.elementor .h5-rooms__intro .h5-lead{ margin-top:clamp(24px,2.4vw,46px); }
.elementor .h5-rooms__intro .h5-body{ margin-top:clamp(22px,2vw,38px); }
.elementor .h5-rooms__intro .h5-btn-line{ margin-top:clamp(22px,1.9vw,36px); }

.elementor .e-con.h5-rooms__stage{
	position:relative;
	z-index:1;
	flex:1 1 auto;
	min-width:0;
	width:auto;
	padding-top:clamp(40px,5.7vw,109px);
}
.elementor .e-con.h5-carousel{
	flex-direction:row;
	flex-wrap:nowrap;
	gap:clamp(16px,1.82vw,35px);
	overflow-x:auto;
	overflow-y:visible;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-ms-overflow-style:none;
	padding:0 clamp(24px,10vw,200px) 0 0;
	-webkit-user-select:none;
	user-select:none;
}
.elementor .e-con.h5-carousel::-webkit-scrollbar{ display:none; }
/* While the mouse drags the row (site.js), snapping and smooth scrolling are off. */
.elementor .e-con.h5-carousel.is-dragging{ scroll-snap-type:none; scroll-behavior:auto; }

.elementor .e-con.h5-room{
	flex:0 0 clamp(270px,36.2vw,695px);
	width:auto;
	aspect-ratio:695 / 460;
	position:relative;
	display:block;
	border-radius:clamp(18px,1.46vw,28px);
	overflow:hidden;
	scroll-snap-align:start;
	transform-origin:left center;
	transition:transform .6s var(--h5-ease);
	text-decoration:none;
	isolation:isolate;
}
.elementor .h5-carousel.is-ready .e-con.h5-room:not(.is-current){ transform:scale(.9); }
.elementor .h5-room .elementor-widget-image,
.elementor .h5-room .h5-room__image{
	position:absolute;
	inset:0;
	margin:0;
	width:100%;
	height:100%;
}
.elementor .h5-room img{
	width:100%;
	height:100%;
	max-width:none;
	object-fit:cover;
	transition:transform 1.2s var(--h5-ease);
}
.elementor .e-con.h5-room:hover img{ transform:scale(1.04); }

.elementor .h5-room .h5-room__name{
	position:absolute;
	left:clamp(6px,.42vw,8px);
	right:clamp(8px,.73vw,14px);
	bottom:clamp(16px,1.45vw,28px);
	z-index:1;
	width:auto;
	min-height:clamp(54px,4.32vw,83px); /* grows for a name on two lines (2026-10-14) */
	height:auto;
	display:flex;
	align-items:center;
	padding:.35em clamp(60px,5vw,96px) .35em clamp(14px,1.15vw,22px);
	border-radius:999px;
	background:rgba(255,255,255,.26);
	-webkit-backdrop-filter:blur(7px) saturate(1.1);
	backdrop-filter:blur(7px) saturate(1.1);
}
.elementor .h5-room .h5-room__name .elementor-heading-title{
	font-family:var(--h5-sans);
	font-weight:500;
	font-size:clamp(18px,1.98vw,38px);
	line-height:1.05;
	color:#fff;
	text-shadow:0 1px 10px rgba(0,0,0,.18);
}
.elementor .h5-room .h5-room__name::after{
	content:"";
	position:absolute;
	right:clamp(4px,.36vw,7px);
	top:50%;
	width:clamp(44px,3.8vw,73px);
	height:clamp(44px,3.8vw,73px);
	transform:translateY(-50%);
	border-radius:50%;
	background:var(--h5-copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 29 29 11M14 11h15v15' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/48% no-repeat;
	box-shadow:0 0 0 4px rgba(255,255,255,.22);
	transition:transform .3s var(--h5-ease);
}
.elementor .e-con.h5-room:hover .h5-room__name::after{ transform:translateY(-50%) rotate(45deg); }
.elementor .e-con.h5-room:focus-visible{ outline:2px solid var(--h5-brown); outline-offset:4px; }

.elementor .h5-rooms__arrows{ margin-top:clamp(24px,1.9vw,36px); }

/* ==========================================================================
 * HOMEPAGE: DECORATED WITH ELEGANCE
 * ========================================================================== */

.elementor .e-con.h5-elegance{
	align-items:center;
	text-align:center;
	background:var(--h5-stone);
	padding:clamp(36px,2.1vw,40px) var(--h5-inset) 0;
	margin-top:clamp(20px,3.5vw,68px);
}
/* Copper rather than gold on the stone, for a little more contrast (Nikolaos 2026-10-12). */
.elementor .h5-elegance .h5-title .elementor-heading-title{ font-size:clamp(44px,4.5vw,86px); color:var(--h5-copper); }
.elementor .h5-elegance .h5-body{
	margin-top:clamp(16px,1.2vw,22px);
	font-weight:500;
	font-size:clamp(15px,1.04vw,20px);
}
.elementor .h5-elegance__drawing{
	margin-top:clamp(24px,2.2vw,42px);
}
.elementor .h5-elegance__drawing img{ width:100%; height:auto; display:block; }

/* Two columns from tablets up (Nikolaos 2026-10-14): the drawing on the left,
   standing on the section's bottom edge, the title and text on the right,
   left aligned and centred in the drawing's height. On phones one column: the
   drawing first, then the text, centred. The three widgets stay as they are in
   Elementor; the grid places them. */
@media (min-width:768px){
	.elementor .e-con.h5-elegance{
		display:grid;
		grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
		grid-template-rows:1fr auto auto 1fr;
		grid-template-areas:"drawing ." "drawing title" "drawing text" "drawing .";
		column-gap:clamp(32px,4.2vw,80px);
		align-items:start;
		text-align:left;
		padding-top:clamp(36px,3.1vw,60px);
	}
	.elementor.elementor .e-con.h5-elegance > .elementor-widget.h5-elegance__drawing{ grid-area:drawing; align-self:end; width:100%; margin-top:0; }
	.elementor.elementor .e-con.h5-elegance > .elementor-widget.h5-title{ grid-area:title; }
	.elementor.elementor .e-con.h5-elegance > .elementor-widget.h5-body{ grid-area:text; max-width:min(100%,640px); }
}
/* On desktop the drawing breaks out of the stone band, 150px above it and 60px below
   (Nikolaos 2026-10-19); the section keeps that much room above and below so the
   drawing never reaches the rooms above or the contact section below. */
@media (min-width:1101px){
	.elementor.elementor .e-con.h5-elegance > .elementor-widget.h5-elegance__drawing{ margin:-150px auto -60px auto; }
	.elementor .e-con.h5-elegance{ margin-top:calc(150px + clamp(20px,3.5vw,68px)); margin-bottom:calc(60px + clamp(20px,3.5vw,68px)); }
}

/* ==========================================================================
 * HOMEPAGE: CONTACT
 * ========================================================================== */

/* Text, form and map together are 1680px wide, as drawn at 1920 (text at 210,
   the map's edge 30px from the window). Wider screens keep that width (1681 in
   the rules, so that 1920 itself stays exactly as drawn): the block stays put
   until it fits in the middle (from about 2100px), then it is centred. */
.elementor .e-con.h5-contact{
	--h5-contact-left:max(var(--h5-inset-wide),calc((100% - 1681px) / 2));
	flex-direction:row;
	justify-content:space-between;
	align-items:flex-start;
	gap:clamp(30px,4.5vw,87px);
	padding:clamp(56px,4.6vw,88px) max(clamp(16px,1.56vw,30px),calc(100% - 1681px - var(--h5-contact-left))) clamp(64px,4.7vw,90px) var(--h5-contact-left);
	scroll-margin-top:20px;
}
.elementor .e-con.h5-contact__info{ flex:0 1 680px; width:auto; }
.elementor .h5-contact__intro{ margin-top:clamp(2px,.2vw,4px); font-size:clamp(16px,1.15vw,22px); line-height:1.27; }
.elementor .h5-contact__details{
	margin-top:clamp(20px,1.35vw,26px);
	font-size:clamp(18px,1.35vw,26px);
	line-height:1.1;
	color:var(--h5-ink);
}
.elementor .h5-contact__details p{ margin:0; }
.elementor .h5-contact__details a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.elementor .h5-contact__details a:hover{ color:var(--h5-brown); }

.elementor .e-con.h5-contact__map{
	flex:0 1 910px;
	width:auto;
	aspect-ratio:910 / 660;
	margin-top:clamp(20px,2.6vw,50px);
	border-radius:var(--h5-radius);
	overflow:hidden;
	background:var(--h5-sand);
	isolation:isolate;
}
.elementor .h5-contact__map .elementor-widget-html,
.elementor .h5-contact__map .h5-map{ position:relative; width:100%; height:100%; }
.elementor .h5-map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.85) sepia(.06); }
/* Until marketing cookies are accepted the map stays empty (Cookiebot fills its
   src on consent) and this note sits in its place. Cookiebot shows and hides the
   outer box itself, so the layout is on the inner one. */
.elementor .h5-map__optout{ position:absolute; inset:0; }
.elementor .h5-map__consent{
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:clamp(16px,1.2vw,22px);
	padding:24px;
	text-align:center;
}
.elementor .h5-map__consent p{
	max-width:26em;
	margin:0;
	font-size:var(--h5-body);
	line-height:1.4;
	color:var(--h5-brown);
}
.elementor .h5-map__consent .h5-line-button{ cursor:pointer; font:inherit; font-size:clamp(15px,1.04vw,20px); }

/* ==========================================================================
 * PHONE AND TABLET
 * ========================================================================== */

@media (max-width:1100px){
	.elementor .e-con.h5-rooms{ flex-direction:column; padding-right:0; }
	.elementor .e-con.h5-rooms__intro{ flex:none; width:100%; padding-right:var(--h5-inset-wide); }
	.elementor .e-con.h5-rooms__stage{ width:100%; padding-top:8px; }
	.elementor .e-con.h5-rooms__stage::before{ left:calc(38vw - var(--h5-inset-wide)); top:-24px; }
	.elementor .e-con.h5-room{ flex-basis:clamp(270px,62vw,620px); }

	.elementor .e-con.h5-contact{ flex-direction:column; padding-right:var(--h5-inset-wide); }
	.elementor .e-con.h5-contact__info,
	.elementor .e-con.h5-contact__map{ flex:none; width:100%; }
}

@media (max-width:767px){
	/* The 84px row keeps the pill level with the arrows (15px from its top);
	   the photo ends 8px under the pill, 15px before the row does, so the hero
	   is 15px shorter and overlaps the row by 69px: everything else stays put. */
	.elementor{
		--h5-pill-h:46px;
		--h5-pill-gap:8px;
	}
	.elementor .e-con.h5-hero{
		--h5-foot:84px;
		height:calc(clamp(440px,125vw,540px) - 15px);
		border-radius:0 0 var(--h5-pill-curve) 0;
	}
	.elementor .e-con.h5-hero__content{ padding:0 20px calc(69px + 36px) 20px; }
	.elementor .h5-hero__title .elementor-heading-title{ font-size:clamp(32px,9.4vw,40px); line-height:1.04; }
	.elementor .h5-hero__lead{ display:none; }

	.elementor .e-con.h5-hero-foot{ height:84px; margin-top:-69px; }
	.elementor .e-con.h5-hero-foot__tab{ padding:0 8px 0 16px; gap:8px; align-items:flex-start; }
	.elementor .h5-hero-foot__title{ margin-top:24px; }
	.elementor .h5-hero-foot__title .elementor-heading-title{ font-size:30px; white-space:nowrap; }
	/* "η ιστορία μας." is wider than "about us.": a little smaller, and it wraps
	   where it would run under the arrows (Nikolaos 2026-10-29). */
	html[lang="el"] .elementor .h5-hero-foot__title .elementor-heading-title{ font-size:27px; line-height:1; white-space:normal; }
	.elementor .h5-hero__title .elementor-heading-title{ max-width:8.8em; }
	.elementor .h5-hero-foot__arrows{ margin-top:20px; }
	.elementor .h5-hero-foot__arrows .h5-arrows{ gap:6px; }
	.elementor .e-con.h5-hero-foot__cta{ margin-right:0; margin-bottom:15px; }
	.elementor .h5-pill-cta .elementor-button{ font-size:12px; letter-spacing:0; gap:8px; padding:0 5px 0 12px; }
	.elementor .h5-pill-cta .elementor-button::after{ width:36px; height:36px; }

	.elementor .e-con.h5-about{ padding-top:48px; }

	.elementor .e-con.h5-gallery{ margin:56px 16px 0; height:62vw; min-height:220px; border-radius:18px; }
	.elementor .h5-gallery .h5-arrow{ --h5-arrow:35.2px; }

	.elementor .e-con.h5-rooms{ padding-top:64px; }
	.elementor .e-con.h5-rooms__intro{ display:contents; }
	.elementor .h5-rooms__intro .h5-title{ order:1; position:relative; z-index:2; padding-right:20px; }
	.elementor .e-con.h5-rooms__stage{ margin-top:22px; }
	.elementor .h5-rooms__intro .h5-lead,
	.elementor .h5-rooms__intro .h5-body{ display:none; }
	.elementor .e-con.h5-rooms__stage{ order:2; padding-top:0; }
	.elementor .h5-rooms__intro .h5-btn-line{ order:3; position:relative; z-index:2; margin-top:28px; }
	.elementor .e-con.h5-rooms__stage::before{ left:calc(38vw - 20px); top:-74px; }
	.elementor .e-con.h5-room{ flex-basis:78vw; }
	.elementor .e-con.h5-carousel{ padding-right:20px; }
	.elementor .h5-room .h5-room__name{ min-height:52px; bottom:14px; padding-right:56px; }
	.elementor .h5-room .h5-room__name .elementor-heading-title{ font-size:16px; }
	.elementor .h5-room .h5-room__name::after{ width:42px; height:42px; }
	.elementor .h5-rooms__arrows{ margin-top:20px; }
	/* On the right on phones, as the photo sliders' arrows are (Nikolaos 2026-10-13). */
	.elementor .h5-rooms__arrows .h5-arrows{ justify-content:flex-end; padding-right:20px; }

	.elementor .e-con.h5-elegance{ margin-top:12px; padding-top:32px; padding-bottom:44px; }
	.elementor .h5-elegance__drawing{ order:-1; margin-top:0; }
	.elementor.elementor .e-con.h5-elegance > .elementor-widget.h5-title{ margin-top:24px; }
	.elementor .h5-elegance .h5-title .elementor-heading-title{ font-size:clamp(26px,7.6vw,34px); }

	.elementor .e-con.h5-contact{ padding:64px 20px 56px; gap:40px; }
	.elementor .e-con.h5-contact__map{ aspect-ratio:1 / 1; margin-top:0; }
}

@media (max-width:389px){
	.elementor .h5-hero-foot__arrows{ display:none; }
}

@media (prefers-reduced-motion:reduce){
	.elementor .h5-hero .h5-slide img{ transform:none !important; }
	.elementor .e-con.h5-carousel{ scroll-behavior:auto; }
}