@charset "utf-8";
/* ==========================================================================
   Sail Greece — 2026 revamp skin
   One stylesheet for every sg-*-component. Loads after sailgreece-main.css.
   Kebab-case on purpose: the legacy skin is camelCase (sgWelcome, sgTestimonies…)
   and stays loaded until the decouple, so the two never collide.
   Breakpoints (mobile first): 768 · 992 · 1200 · 1500.
   ========================================================================== */

:root {
	--sg-navy: #0B2545;
	--sg-blue: #1AA9E9;
	--sg-cream: #F7F3EC;
	--sg-ink: #282828;
	--sg-black: #000000;
	--sg-grey: #686868;
	--sg-white: #FFFFFF;
	--sg-yellow: #FFD220;

	--sg-serif: "Playfair Display", Georgia, serif;
	--sg-sans: "Roboto", sans-serif;

	--sg-well: 1400px;
	--sg-gutter: 20px;
	--sg-section-pad: 70px;
	--sg-h1: 40px;
	--sg-h2: 34px;
	--sg-h3: 24px;
	--sg-eyebrow: 17px;
	--sg-body: 16px;
}

/* ------------------------------------------------------------------ shared
   Base heading rules sit in :where() so a single component class always overrides them,
   while still beating the legacy element selectors (h1, h2 {…}) in sailgreece-main.css. */

.sg-home section { position: relative; }

.sg-home :where(h2, h3) {
	font-family: var(--sg-serif);
	font-weight: 400;
	margin: 0;
	padding: 0;
	color: var(--sg-navy);
}
.sg-home :where(h2) { font-size: var(--sg-h2); line-height: 1.18; }
.sg-home :where(h3) { font-size: var(--sg-h3); line-height: 1.3; }

.sg-copy { font-size: var(--sg-body); line-height: 1.61; font-weight: 300; color: var(--sg-black); }
.sg-copy p { font-size: inherit; line-height: inherit; color: inherit; padding: 0 0 1.6em 0; }
.sg-copy p:last-child { padding-bottom: 0; }
.sg-copy strong, .sg-copy b { font-weight: 500; }
.sg-copy a { color: var(--sg-navy); }   /* body-copy links navy, not the legacy #007aab */
.sg-copy a:hover { color: var(--sg-blue); }

.sg-eyebrow {
	font-family: var(--sg-sans);
	font-size: var(--sg-eyebrow);
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1.3;
	color: var(--sg-navy);
	margin-bottom: 18px;
}
/* Hairline under the eyebrow: the design puts one under every eyebrow except "Let's plan together" and the charter-type strap. */
.sg-eyebrow::after {
	content: "";
	display: block;
	width: 53px;
	height: 1px;
	margin-top: 14px;
	background-color: currentColor;
	opacity: 0.6;
}

.sg-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
/* Phones: button pairs stack full width instead of wrapping to unequal widths (QA 2026-09-29). */
@media (max-width: 767px) {
	.sg-buttons { flex-direction: column; }
	.sg-buttons .sg-btn { width: 100%; justify-content: center; }
}

.sg-btn {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-height: 55px;
	padding: 0 20px;
	font-family: var(--sg-sans);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: pre;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
}
.sg-btn__arrow { flex: 0 0 auto; transition: transform 0.25s ease-out; }
.sg-btn:hover .sg-btn__arrow { transform: translateX(4px); }

.sg-btn--navy       { background-color: var(--sg-navy);  color: var(--sg-white); }
.sg-btn--blue       { background-color: var(--sg-blue);  color: var(--sg-white); }
.sg-btn--white      { background-color: var(--sg-white); color: var(--sg-blue); }
.sg-btn--white-navy { background-color: var(--sg-white); color: var(--sg-navy); }
.sg-btn--navy:hover       { background-color: var(--sg-black); }   /* navy + aqua buttons hover to black (Paul) */
.sg-btn--blue:hover       { background-color: var(--sg-black); }
.sg-btn--white:hover      { background-color: var(--sg-navy); color: var(--sg-white); }
.sg-btn--white-navy:hover { background-color: var(--sg-blue); color: var(--sg-white); }

/* Every section runs full width and carries its ground; the inner is the 1400 well with its own padding. */
.sg-facts-component__inner,
.sg-boat-list-component__inner,
.sg-testimonials-component__inner,
.sg-why-component__inner,
.sg-charter-types-component__inner,
.sg-routes-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding-left: var(--sg-gutter);
	padding-right: var(--sg-gutter);
}

/* ------------------------------------------------------------------ hero (legacy .hero kept; message replaced) */

.sg-hero-component__picture,
.sg-hero-component__picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.sg-hero-component__picture img { object-fit: cover; object-position: center; }

.sg-hero-component__message {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 50px;
	z-index: 10;
	padding: 0 var(--sg-gutter);
	text-align: center;
	color: var(--sg-white);
}
.sg-hero-component__eyebrow {
	display: inline-block;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	white-space: pre-wrap;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.sg-hero-component__title {
	font-family: var(--sg-serif);
	font-weight: 400;
	font-size: var(--sg-h1);
	line-height: 1.2;
	color: var(--sg-white);
	margin: 0;
	padding: 0 0 14px 0;
}
.sg-hero-component__text,
.sg-hero-component__text p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--sg-white);
	padding: 0;
	max-width: 440px;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ facts */

.sg-facts-component { background-color: var(--sg-cream); padding: 50px 0; }
.sg-facts-component__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px 20px;
	text-align: center;
}
.sg-facts-component__headline {
	font-family: var(--sg-serif);
	font-size: 38px;
	line-height: 1.1;
	color: var(--sg-blue);
	padding-bottom: 10px;
}
.sg-facts-component__text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--sg-ink);
	max-width: 345px;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ welcome */

.sg-welcome-component {
	background-color: var(--sg-white);
	padding: var(--sg-gutter) var(--sg-gutter) 0;
	z-index: 2;
}
.sg-welcome-component__media { display: flex; gap: var(--sg-gutter); }
.sg-welcome-component__visual { flex: 1 1 0; height: 260px; }
.sg-welcome-component__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-welcome-component__card {
	position: relative;
	background-color: var(--sg-white);
	padding: 36px 0 50px;
}
/* The homepage H1 (as on live). It keeps the h2 look: set here because the legacy `h1, h2` rule in sailgreece-main.css
   (Josefin Sans 28px aqua) would otherwise apply, and the shared base heading rule only covers h2 / h3. */
.sg-welcome-component__title {
	font-family: var(--sg-serif);
	font-size: var(--sg-h2);
	font-weight: 400;
	line-height: 1.18;
	color: var(--sg-navy);
	margin: 0;
	padding-bottom: 20px;
}
.sg-welcome-component__body { margin-bottom: 32px; }

/* ------------------------------------------------------------------ page H1 row */
/* Inner pages (Paul, 2026-10-07): the hero title is a div; the page H1 = the first <h1> of the content, as a full-width row
   inside the section that holds the double column, above it (lib/sg-revamp.php sg_page_h1). The h2 look, like the
   homepage H1; class-set so the legacy `h1, h2` rule in sailgreece-main.css doesn't apply. */
.sg-page-h1 {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter) 15px;
}
.sg-page-h1__title {
	font-family: var(--sg-serif);
	font-size: var(--sg-h2);
	font-weight: 400;
	line-height: 1.18;
	color: var(--sg-navy);
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}
@media (min-width: 992px) { .sg-page-h1 { padding-bottom: 25px; } }

/* sg Page Content fields (Paul, 2026-10-07). Fleet intro: Content Left = the serif lead column (all of it), so its
   paragraphs take the lead type, not the legacy `p` colour; boat intro: its first paragraph is the lead. */
.sg-fleet-intro-component__left p { color: inherit; line-height: inherit; }
.sg-fleet-intro-component__left > :last-child { padding-bottom: 0; margin-bottom: 0; }
/* An h2 in Content Left (e.g. the DE / PL listing tagline, kept from the live site): a step above the lead (24 / 26px). */
.sg-fleet-intro-component__left h2 {
	font-family: var(--sg-serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sg-navy);
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	padding: 0 0 24px;
}
@media (min-width: 768px) { .sg-fleet-intro-component__left h2 { font-size: 30px; } }
.sg-boat-intro-component__left > p:first-child {
	font-family: var(--sg-serif);
	font-size: 26px;
	line-height: 1.4;
	color: var(--sg-navy);
	padding: 0 0 24px;
}
@media (min-width: 992px) {
	.sg-boat-intro-component__left > p:first-child { font-size: 30px; }
	.sg-page-component__inner--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
}

/* ------------------------------------------------------------------ boat list */

.sg-boat-list-component { background-color: var(--sg-navy); padding: var(--sg-section-pad) 0; color: var(--sg-white); }
.sg-boat-list-component .sg-eyebrow,
.sg-boat-list-component__title { color: var(--sg-white); }
.sg-boat-list-component__title { padding-bottom: 26px; }   /* no max-width (Paul, 2026-10-05) */
.sg-boat-list-component__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 26px;
	margin-top: 40px;
}
/* Hebrew (RTL): keep the boat cards in the English order, left to right (Paul, 2026-10-07). The card text is English. */
.sg-boat-list-component__grid { direction: ltr; }
.sg-boat-list-component__card { display: block; text-decoration: none; color: var(--sg-white); }
.sg-boat-list-component__visual { aspect-ratio: 334 / 265; overflow: hidden; background-color: rgba(255, 255, 255, 0.06); }
.sg-boat-list-component__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; }
.sg-boat-list-component__card:hover .sg-boat-list-component__visual img { transform: scale(1.04); }
.sg-boat-list-component__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 20px;
	padding: 18px 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
.sg-boat-list-component__name {
	font-size: 26px;
	letter-spacing: 0.04em;
	color: var(--sg-white);
}
.sg-boat-list-component__model { font-size: 15px; font-weight: 400; }
.sg-boat-list-component__spec { padding-top: 12px; font-size: 15px; font-weight: 300; color: var(--sg-blue); }

/* ------------------------------------------------------------------ first time sailing */

.sg-first-time-component { display: flex; flex-direction: column; background-color: var(--sg-cream); }
.sg-first-time-component__body { padding: var(--sg-section-pad) var(--sg-gutter); }
.sg-first-time-component .sg-eyebrow { color: var(--sg-blue); }
.sg-first-time-component .sg-eyebrow::after { display: none; }
.sg-first-time-component__title { padding-bottom: 20px; }
.sg-first-time-component .sg-copy { margin-bottom: 36px; }
.sg-first-time-component__media { height: 320px; }
.sg-first-time-component__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ testimonials */

.sg-testimonials-component { background-color: var(--sg-blue); padding: var(--sg-section-pad) 0; color: var(--sg-white); }
.sg-testimonials-component .sg-eyebrow,
.sg-testimonials-component__title { color: var(--sg-white); }
.sg-testimonials-component__title { padding-bottom: 12px; }
.sg-testimonials-component__sub { font-size: 17px; font-weight: 300; letter-spacing: 0.03em; padding-bottom: 26px; }
.sg-testimonials-component__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 50px;
}
.sg-testimonials-component__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	min-height: 260px;
	margin: 0;
	padding: 28px 18px 18px;
	background-color: var(--sg-white);
	color: var(--sg-navy);
}
.sg-testimonials-component__card:first-child { background-color: var(--sg-navy); color: var(--sg-white); }
.sg-testimonials-component__quote {
	margin: 0;
	font-family: var(--sg-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.47;
}
.sg-testimonials-component__quote p { font: inherit; color: inherit; padding: 0; }
.sg-testimonials-component__quote::before { content: "\201C"; }
.sg-testimonials-component__quote::after  { content: "\201D"; }
.sg-testimonials-component__quote p { display: inline; }
.sg-testimonials-component__name { text-align: right; font-size: 15px; font-weight: 300; }
/* Phones (Paul, 2026-10-07): the reviews become a swipe row. Native scroll-snap, no JS: each card snaps into place, 85% wide
   so the next one peeks in; the row bleeds to the right screen edge. From 768 the grid above takes over unchanged. */
@media (max-width: 767px) {
	.sg-testimonials-component__grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-right: calc(-1 * var(--sg-gutter));
		padding-right: var(--sg-gutter);
	}
	.sg-testimonials-component__grid::-webkit-scrollbar { display: none; }
	.sg-testimonials-component__card { flex: 0 0 85%; scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ why us */

.sg-why-component {
	overflow: hidden;
	background-color: var(--sg-navy);
	color: var(--sg-white);
	text-align: center;
	padding: var(--sg-section-pad) 0;
}
.sg-why-component__media { position: absolute; inset: 0; }
.sg-why-component__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-why-component__media::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); }
.sg-why-component__inner { position: relative; z-index: 1; }
.sg-why-component .sg-eyebrow,
.sg-why-component__title,
.sg-why-component .sg-copy,
.sg-why-component .sg-copy p { color: var(--sg-white); }
.sg-why-component .sg-eyebrow::after { margin-left: auto; margin-right: auto; }
.sg-why-component__title { padding-bottom: 22px; }
.sg-why-component__body { max-width: 880px; margin: 0 auto 36px; }

/* ------------------------------------------------------------------ charter types */

.sg-charter-types-component { background-color: var(--sg-cream); padding: var(--sg-section-pad) 0; }
.sg-charter-types-component .sg-eyebrow { color: var(--sg-blue); white-space: pre-wrap; }
.sg-charter-types-component__intro .sg-eyebrow::after { display: none; }
.sg-charter-types-component__title { padding-bottom: 22px; }
.sg-charter-types-component__intro .sg-copy { margin-bottom: 32px; }
.sg-charter-types-component__intro { display: flex; flex-direction: column; gap: 50px; }

.sg-charter-types-component__media { position: relative; }
.sg-charter-types-component__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Collage: large image right, the second overlapping its bottom-left corner. */
.sg-collage { padding-bottom: 12%; }
.sg-collage .sg-charter-types-component__visual--first { margin-left: 12%; aspect-ratio: 609 / 456; }
.sg-collage .sg-charter-types-component__visual--second {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46%;
	aspect-ratio: 318 / 286;
}

.sg-charter-types-component__compare {
	margin-top: 70px;
	padding-top: 32px;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
}
.sg-charter-types-component__columns { display: grid; grid-template-columns: 1fr; gap: 24px; }
.sg-charter-types-component__columns .sg-copy { color: var(--sg-ink); }

.sg-charter-types-component__types {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-top: 36px;
	padding-top: 30px;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
	text-align: center;
}
.sg-charter-types-component__type-title { padding-bottom: 8px; }
.sg-charter-types-component__type-text { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--sg-ink); padding: 0; max-width: 440px; margin: 0 auto; }

/* ------------------------------------------------------------------ routes */

.sg-routes-component { overflow: hidden; background-color: var(--sg-white); }
.sg-routes-component__inner { display: flex; flex-direction: column; }
/* phones: head (eyebrow + title) → routes list → body (text + button) */
.sg-routes-component__head { order: 1; padding: var(--sg-section-pad) 0 0; }
.sg-routes-component__list { order: 2; }
.sg-routes-component__body { order: 3; padding: 34px 0 var(--sg-section-pad); }
.sg-routes-component__list {
	position: relative;
	padding: var(--sg-section-pad) 0;
	color: var(--sg-white);
}
/* The navy panel runs from the viewport edge to just past the list; section overflow clips it. */
.sg-routes-component__list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	background-color: var(--sg-navy);
	z-index: 0;
}
.sg-routes-component__route {
	position: relative;
	z-index: 1;
	display: block;
	padding: 18px 0 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	text-decoration: none;
	color: var(--sg-white);
}
.sg-routes-component__route:first-child { padding-top: 0; }
.sg-routes-component__route-title {
	font-size: 26px;
	color: var(--sg-blue);
	padding-bottom: 8px;
	transition: color 0.25s ease-out;
}
.sg-routes-component__route:hover .sg-routes-component__route-title { color: var(--sg-white); }
.sg-routes-component__stops { font-size: 14px; font-weight: 300; line-height: 1.6; }
.sg-routes-component__title { padding-bottom: 22px; }
.sg-routes-component__body .sg-copy { margin-bottom: 36px; }

/* ================================================================== 768 */
@media (min-width: 768px) {
	:root {
		--sg-gutter: 40px;
		--sg-section-pad: 90px;
		--sg-h1: 50px;
		--sg-h2: 42px;
		--sg-h3: 26px;
		--sg-eyebrow: 18px;
		--sg-body: 17px;
	}
	.sg-hero-component__eyebrow { font-size: 17px; }
	.sg-hero-component__text, .sg-hero-component__text p { font-size: 17px; }

	.sg-facts-component__headline { font-size: 46px; }
	.sg-facts-component__text { font-size: 16px; }

	.sg-welcome-component__visual { height: 420px; }
	.sg-welcome-component__card { padding: 50px 40px 60px; margin: -120px 40px 0; }

	.sg-boat-list-component__grid { grid-template-columns: repeat(2, 1fr); }

	.sg-first-time-component__media { height: 480px; }

	.sg-testimonials-component__grid { grid-template-columns: repeat(2, 1fr); }
	.sg-testimonials-component__card { min-height: 300px; padding: 30px 22px 20px; }

	.sg-charter-types-component__columns { grid-template-columns: 1fr 1fr; gap: 60px; }
	.sg-charter-types-component__types { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================== 992 */
@media (min-width: 992px) {
	:root {
		--sg-h1: 56px;
		--sg-h2: 46px;
		--sg-section-pad: 110px;
	}
	.sg-hero-component__message { bottom: 60px; }

	.sg-facts-component { padding: 60px 0; }
	.sg-facts-component__inner { grid-template-columns: repeat(4, 1fr); gap: 20px; }

	/* Welcome: card overlaps the bottom of both photos and hangs into the navy section.
	   A grid, so the photos grow with the card: row 1 = the photo strip above the card (600 - 380), row 2 = the card.
	   The photos span both rows with a 600px floor; a longer card (translations) stretches them, no white gap. */
	.sg-welcome-component {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 220px auto;
		padding-bottom: var(--sg-gutter);
	}
	.sg-welcome-component__media { grid-row: 1 / 3; grid-column: 1; min-height: 600px; }
	.sg-welcome-component__visual { position: relative; height: auto; }
	.sg-welcome-component__visual img { position: absolute; inset: 0; }
	.sg-welcome-component__card {
		grid-row: 2;
		grid-column: 1;
		align-self: start;
		width: 62%;
		max-width: 705px;
		margin: 0 0 -98px 38%;
		padding: 56px;
	}
	.sg-boat-list-component { padding-top: calc(var(--sg-section-pad) + 60px); }
	.sg-boat-list-component__grid { grid-template-columns: repeat(4, 1fr); }

	/* First time: 50/50, text column aligned to the well, photo edge to edge. */
	.sg-first-time-component { flex-direction: row; min-height: 724px; }
	.sg-first-time-component__body {
		flex: 0 0 50%;
		display: flex;
		align-items: center;
		padding: 90px 60px 90px max(var(--sg-gutter), calc((100vw - var(--sg-well)) / 2));
	}
	.sg-first-time-component__content { max-width: 600px; }
	.sg-first-time-component__media { flex: 0 0 50%; height: auto; }
	.sg-no-visual .sg-first-time-component__body { flex-basis: 100%; }

	.sg-testimonials-component__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }

	/* Charter types: text left, collage right. */
	.sg-charter-types-component__intro { flex-direction: row; align-items: flex-start; gap: 0; }
	.sg-charter-types-component__content { flex: 0 0 50%; padding-right: 60px; max-width: 660px; }
	.sg-charter-types-component__media { flex: 1 1 0; }
	.sg-charter-types-component__columns { gap: 90px; }

	/* Routes: navy list left, content right. */
	/* from 992: list on the left across both rows; head + body stacked on the right */
	.sg-routes-component__inner { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto 1fr; }
	.sg-routes-component__list { grid-column: 1; grid-row: 1 / span 2; padding: 130px 0 110px; }
	.sg-routes-component__list::before { inset-inline-end: -40px; }   /* logical, so Hebrew (RTL) mirrors instead of covering the text */
	.sg-routes-component__head { grid-column: 2; grid-row: 1; padding: 100px 0 0; padding-inline-start: 15.52%; }   /* 15.52% of the 58% column = the old 9% of the row */
	.sg-routes-component__body { grid-column: 2; grid-row: 2; padding: 0 0 110px; padding-inline-start: 15.52%; }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	:root {
		--sg-h1: 65px;
		--sg-h2: 55px;
		--sg-h3: 30px;
		--sg-eyebrow: 20px;
		--sg-body: 18px;
		--sg-section-pad: 120px;
	}
	.sg-hero-component__message { bottom: 70px; }
	.sg-hero-component__eyebrow, .sg-hero-component__text, .sg-hero-component__text p { font-size: 18px; }
	.sg-hero-component__text { max-width: 560px; }

	.sg-facts-component__headline { font-size: 55px; }
	.sg-facts-component__text { font-size: 17px; }

	.sg-welcome-component { grid-template-rows: 255px auto; }   /* 734 - 479 */
	.sg-welcome-component__media { min-height: 734px; }

	.sg-testimonials-component__card { min-height: 320px; padding: 29px 22px 20px; }
	.sg-testimonials-component__quote { font-size: 30px; }

	.sg-routes-component__route-title { font-size: 30px; }
	.sg-routes-component__stops { font-size: 15px; }
}

/* ==========================================================================
   Footer (site-wide) — sg-footer-component
   Legacy `footer { padding:80px 0 0 }` and `.footerWrap { background:#f9f9f9 }` are overridden here.
   ========================================================================== */

.sg-footer-component {
	padding: 0;
	background-color: var(--sg-cream);
	color: var(--sg-navy);
	font-family: var(--sg-sans);
	font-weight: 300;
}
.sg-footer-component a { color: inherit; text-decoration: none; }
.sg-footer-component a:hover { color: var(--sg-blue); }
.sg-footer-component p { color: inherit; padding: 0; line-height: inherit; }

.sg-footer-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 70px var(--sg-gutter) 60px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	font-size: 16px;
	line-height: 1.55;
}

.sg-footer-component__brand {
	font-family: var(--sg-serif);
	font-size: 24px;
	line-height: 1.2;
	text-transform: uppercase;
}
.sg-footer-component__brand::after {
	content: "";
	display: block;
	width: 53px;
	height: 1px;
	margin: 20px 0 20px;
	background-color: currentColor;
	opacity: 0.6;
}
.sg-footer-component__est { font-weight: 500; padding-bottom: 22px; }
.sg-footer-component__text { font-size: 15px; line-height: 1.4; max-width: 330px; }
.sg-footer-component__text p { padding: 0 0 0.8em; }
.sg-footer-component__text p:last-child { padding-bottom: 0; }
.sg-footer-component__badges { display: flex; align-items: center; gap: 15px; margin-top: 28px; }
.sg-footer-component__badges img { display: block; width: 58px; height: auto; }
/* SITESAP membership line (Global Options sitesap_content), under the badges */
.sg-footer-component__sitesap { max-width: 330px; margin-top: 14px; font-size: 13px; line-height: 1.5; opacity: 0.85; }
.sg-footer-component__sitesap p { padding: 0; }

.sg-footer-component__heading { font-weight: 500; padding-bottom: 10px; }
.sg-footer-component__links,
.sg-footer-component__comms { list-style: none; margin: 0; padding: 0; }
.sg-footer-component__links li { padding: 3px 0; }
/* Below 992 the links are finger targets: give each row ~40px (QA 2026-09-29). */
@media (max-width: 991px) {
	.sg-footer-component__links li { padding: 0; }
	.sg-footer-component__links a,
	.sg-footer-component__comms a { display: inline-block; padding: 9px 0; }
	.sg-footer-component__social { padding: 8px 0; }
}

.sg-footer-component p.sg-footer-component__address,
.sg-footer-component__address { padding-bottom: 14px; }
.sg-footer-component__address strong { font-weight: 500; }
.sg-footer-component__address p { padding: 0; }
.sg-footer-component__comms { padding-bottom: 22px; }

.sg-footer-component__social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
}
.sg-footer-component a.sg-footer-component__social { color: var(--sg-blue); }
.sg-footer-component a.sg-footer-component__social:hover { color: var(--sg-navy); }

.sg-footer-component__bar { border-top: 1px solid rgba(11, 37, 69, 0.2); }
.sg-footer-component__bar-inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 26px var(--sg-gutter);
	font-size: 12px;
	font-weight: 500;
	color: var(--sg-grey);
}

@media (min-width: 768px) {
	.sg-footer-component__inner { grid-template-columns: 1fr 1fr; gap: 50px 40px; padding-top: 90px; }
}
@media (min-width: 992px) {
	/* Column proportions read off the design at 1659: 440 / 319 / 357 / 412 of the 1400 well. */
	.sg-footer-component__inner { grid-template-columns: 440fr 319fr 357fr 412fr; gap: 0; padding: 100px var(--sg-gutter) 80px; }
	.sg-footer-component__col--brand { padding-right: 40px; }
	.sg-footer-component__col--contact { grid-column: 4; }   /* holds its slot even if a menu column is unassigned */
}
@media (min-width: 1200px) {
	.sg-footer-component__inner { padding: 144px var(--sg-gutter) 110px; font-size: 18px; }
	.sg-footer-component__brand { font-size: 27px; }
	.sg-footer-component__text { font-size: 15px; }
	.sg-footer-component__links li { padding: 4px 0; }
	.sg-footer-component__bar-inner { font-size: 13px; }
}

/* ==========================================================================
   Sail Greece revamp — BOAT LISTING page components
   Source: Web/Build/Static Html/2026 09 29 boat listing/assets/css/boat-listing.css.
   Reuses: .sg-hero-component (hero message),
   .sg-eyebrow, .sg-btn, .sg-copy, .sg-home heading base.
   Breakpoints (mobile first): 768 · 992 · 1200.
   ========================================================================== */

/* ------------------------------------------------------------------ fleet intro */

.sg-fleet-intro-component { background-color: var(--sg-white); padding: var(--sg-section-pad) 0; }
.sg-fleet-intro-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}
.sg-fleet-intro-component .sg-eyebrow { color: var(--sg-blue); }
.sg-fleet-intro-component__lead {
	font-family: var(--sg-serif);
	font-size: 24px;
	line-height: 1.4;
	color: var(--sg-navy);
	padding: 0;
}

/* ------------------------------------------------------------------ fleet grid */

.sg-fleet-grid-component { background-color: var(--sg-cream); padding: var(--sg-section-pad) 0; }
.sg-fleet-grid-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-fleet-grid-component__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 50px 26px;
}

.sg-fleet-card { display: flex; flex-direction: column; text-decoration: none; color: var(--sg-navy); }
.sg-fleet-card__visual { position: relative; aspect-ratio: 334 / 265; overflow: hidden; background-color: rgba(11, 37, 69, 0.06); }
.sg-fleet-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; }
.sg-fleet-card:hover .sg-fleet-card__visual img { transform: scale(1.04); }
.sg-fleet-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 10px;
	background-color: var(--sg-white);
	color: var(--sg-navy);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sg-fleet-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 20px 0 12px;
	border-bottom: 1px solid rgba(11, 37, 69, 0.2);
}
.sg-fleet-card__name { font-size: 28px; letter-spacing: 0.02em; }
.sg-fleet-card__model { font-size: 15px; font-weight: 400; color: var(--sg-ink); }

.sg-fleet-card__specs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0;
	padding: 16px 0 18px;
}
.sg-fleet-card__spec { margin: 0; }
.sg-fleet-card__spec dd {
	margin: 0;
	font-family: var(--sg-serif);
	font-size: 24px;
	line-height: 1.1;
	color: var(--sg-blue);
}
.sg-fleet-card__spec dt {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 300;
	color: var(--sg-grey);
}

.sg-fleet-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sg-navy);
}
.sg-fleet-card__cta .sg-btn__arrow { transition: transform 0.25s ease-out; }
.sg-fleet-card:hover .sg-fleet-card__cta { color: var(--sg-blue); }
.sg-fleet-card:hover .sg-fleet-card__cta .sg-btn__arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------ bareboat or skippered (navy band) */

.sg-bareboat-component { background-color: var(--sg-navy); color: var(--sg-white); padding: var(--sg-section-pad) 0; }
.sg-bareboat-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}
.sg-bareboat-component .sg-eyebrow,
.sg-bareboat-component__title { color: var(--sg-white); }
.sg-bareboat-component .sg-copy,
.sg-bareboat-component .sg-copy p { color: var(--sg-white); }
.sg-bareboat-component .sg-copy { margin-bottom: 36px; }

/* ------------------------------------------------------------------ about our yachts */

.sg-about-yachts-component { background-color: var(--sg-white); padding: calc(var(--sg-section-pad) / 2) 0; }   /* half the section padding (listing + boat page) */
.sg-about-yachts-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-about-yachts-component .sg-eyebrow { color: var(--sg-blue); }
.sg-about-yachts-component__title { padding-bottom: 44px; max-width: 900px; }
.sg-about-yachts-component__grid { display: grid; grid-template-columns: 1fr; gap: 34px 40px; }
.sg-about-yachts-component__item { padding-top: 22px; border-top: 1px solid rgba(11, 37, 69, 0.2); }
.sg-about-yachts-component__item-title { font-size: 24px; line-height: 1.3; padding-bottom: 10px; }
.sg-about-yachts-component__item-text { font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--sg-ink); padding: 0; }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-fleet-intro-component { padding: calc(var(--sg-section-pad) / 2) 0; }   /* half the section padding from 768 up */
	.sg-fleet-intro-component__lead { font-size: 26px; }
	.sg-fleet-grid-component__grid { grid-template-columns: repeat(2, 1fr); }
	.sg-about-yachts-component__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================== 992 */
@media (min-width: 992px) {
	.sg-fleet-intro-component__inner { grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
	.sg-bareboat-component__inner { grid-template-columns: 5fr 7fr; gap: 90px; align-items: start; }
	.sg-fleet-grid-component__grid { grid-template-columns: repeat(3, 1fr); gap: 60px 30px; }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-fleet-intro-component__lead { font-size: 26px; line-height: 1.5; }
	.sg-fleet-card__name { font-size: 30px; }
	.sg-about-yachts-component__grid { grid-template-columns: repeat(4, 1fr); }
	.sg-about-yachts-component__item-title { font-size: 26px; }
	.sg-bareboat-component__title { font-size: 65px; text-align: center; }   /* left-column h2 of the navy band (Paul) */
}

/* ==========================================================================
   Sail Greece revamp — BOAT PAGE components (template-boat.php)
   Reuses: .sg-hero-component, .sg-eyebrow, .sg-btn, .sg-copy, .sg-fleet-card, .sg-fleet-grid-component__grid,
   and the bareboat / about partials from the boat listing.
   ========================================================================== */

/* ------------------------------------------------------------------ hero additions */

.sg-boat-hero .sg-hero-component__title { padding-bottom: 24px; }
.sg-boat-hero__back {
	position: absolute;
	z-index: 10;
	left: var(--sg-gutter);
	bottom: 24px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sg-white);
	text-decoration: none;
	opacity: 0.85;
}
.sg-boat-hero__back:hover { opacity: 1; }

/* ------------------------------------------------------------------ specs strip */

.sg-boat-specs-component { background-color: var(--sg-navy); padding: 40px 0; }
.sg-boat-specs-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 20px;
}
.sg-boat-specs-component__item { margin: 0; }
.sg-boat-specs-component__item dt {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-white);
	opacity: 0.6;
	padding-bottom: 6px;
}
.sg-boat-specs-component__item dd {
	margin: 0;
	font-family: var(--sg-serif);
	font-size: 24px;
	line-height: 1.15;
	color: var(--sg-white);
}

/* ------------------------------------------------------------------ intro */

.sg-boat-intro-component { background-color: var(--sg-white); padding: calc(var(--sg-section-pad) / 2) 0; }   /* half the section padding */
.sg-boat-intro-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
}
.sg-boat-intro-component .sg-eyebrow { color: var(--sg-blue); }
.sg-boat-intro-component__lead {
	font-family: var(--sg-serif);
	font-size: 26px;
	line-height: 1.4;
	color: var(--sg-navy);
	padding: 0 0 24px;
}
.sg-boat-intro-component__label {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-blue);
	padding-bottom: 16px;
}
.sg-chips { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chips li {
	padding: 8px 14px;
	border: 1px solid rgba(11, 37, 69, 0.25);
	font-size: 14px;
	font-weight: 300;
	color: var(--sg-navy);
}

/* ------------------------------------------------------------------ gallery */

.sg-boat-gallery-component { background-color: var(--sg-cream); padding: var(--sg-section-pad) 0; }
.sg-boat-gallery-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-boat-gallery-component__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 30px;
	margin-bottom: 36px;
}
.sg-boat-gallery-component__count { font-size: 15px; font-weight: 300; color: var(--sg-grey); }
.sg-boat-gallery-component__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sg-boat-gallery-component__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: rgba(11, 37, 69, 0.06);
	cursor: zoom-in;
}
.sg-boat-gallery-component__item.is-hidden { display: none; }
.sg-boat-gallery-component__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; }
.sg-boat-gallery-component__item:hover img { transform: scale(1.04); }
.sg-boat-gallery-component__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(11, 37, 69, 0.6);
	font-family: var(--sg-serif);
	font-size: 34px;
	color: var(--sg-white);
}

/* ------------------------------------------------------------------ inventory (tabs) */

.sg-inventory-component { background-color: var(--sg-white); padding: var(--sg-section-pad) 0; }
.sg-inventory-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-inventory-component__title { padding-bottom: 30px; }
/* Tabs wrap onto further lines on narrow screens; the active underline sits under the tab's own word,
   so it reads the same on any line. The hairline under the whole block separates tabs from the list. */
.sg-inventory-component__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin-bottom: 30px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(11, 37, 69, 0.2);
}
.sg-inventory-component__tab {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 0 6px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: var(--sg-sans);
	font-size: 15px;
	font-weight: 400;
	color: var(--sg-grey);
	cursor: pointer;
	white-space: nowrap;
}
.sg-inventory-component__tab:hover { color: var(--sg-navy); }
.sg-inventory-component__tab.is-active { color: var(--sg-navy); border-bottom-color: var(--sg-blue); }
.sg-inventory-component__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);   /* two columns even on phones — one column was a very long scroll */
	column-gap: 20px;
}
.sg-inventory-component__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(11, 37, 69, 0.12);
	font-size: 14px;
	line-height: 1.35;
	font-weight: 300;
	color: var(--sg-ink);
}
.sg-inventory-component__qty { flex: 0 0 auto; color: var(--sg-blue); font-weight: 400; }

/* ------------------------------------------------------------------ other yachts */

.sg-other-yachts-component { background-color: var(--sg-cream); padding: var(--sg-section-pad) 0; }
.sg-other-yachts-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-other-yachts-component__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 30px;
	margin-bottom: 40px;
}
.sg-other-yachts-component__head .sg-fleet-card__cta { text-decoration: none; margin: -10px 0; padding: 10px 0; }
.sg-other-yachts-component__head .sg-fleet-card__cta:hover { color: var(--sg-blue); }

/* ------------------------------------------------------------------ legacy floating quote button, reskinned */

.floatingCharterControl { z-index: 50; }
.floatingCharterControl a {
	font-family: var(--sg-sans);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 16px 28px;
	background-color: var(--sg-navy);
	border-radius: 0;
}
.floatingCharterControl a:hover { background-color: var(--sg-black); }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-boat-specs-component__inner { grid-template-columns: repeat(3, 1fr); }
	.sg-boat-gallery-component__grid { grid-template-columns: repeat(4, 1fr); }   /* 8 tiles = two full rows */
	.sg-inventory-component__list { column-gap: 40px; }
	.sg-inventory-component__list li { gap: 16px; padding: 12px 0; font-size: 16px; }
}

/* ================================================================== 992 */
@media (min-width: 992px) {
	.sg-boat-specs-component { padding: 50px 0; }
	.sg-boat-specs-component__inner { grid-template-columns: repeat(5, 1fr); gap: 34px 30px; }
	.sg-boat-intro-component__inner { grid-template-columns: 7fr 5fr; gap: 90px; align-items: start; }
	.sg-boat-gallery-component__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
	.sg-inventory-component__list { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-boat-hero__back { bottom: 32px; left: max(var(--sg-gutter), calc((100vw - var(--sg-well)) / 2)); }
	.sg-boat-specs-component__item dd { font-size: 28px; }
	.sg-boat-intro-component__lead { font-size: 30px; line-height: 1.4; }
	.sg-inventory-component__list { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Sail Greece revamp — ABOUT page: founders (two-column people cards)
   Source: Web/Build/Static Html/2026 09 30 about/assets/css/about.css.
   Card colours follow the testimonials pattern: first card navy, second white.
   ========================================================================== */

/* About page: the quote (Why Us component) on aqua blue instead of navy. Its white button would hover to
   blue and vanish on this ground, so it hovers to navy here. */
.sg-about .sg-why-component { background-color: var(--sg-blue); }
.sg-about .sg-why-component .sg-btn--white-navy:hover { background-color: var(--sg-navy); color: var(--sg-white); }

.sg-founders-component { background-color: var(--sg-cream); padding: calc(var(--sg-section-pad) / 2) 0; }   /* half the section padding */
.sg-founders-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.sg-founders-component__card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	margin: 0;
	padding: 36px 28px;
	background-color: var(--sg-white);
	color: var(--sg-navy);
}
.sg-founders-component__card:first-child { background-color: var(--sg-navy); color: var(--sg-white); }
.sg-founders-component__role {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-blue);
	padding-bottom: 16px;
}
.sg-founders-component__name {
	font-family: var(--sg-serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.18;
	color: inherit;
	margin: 0;
	padding: 0 0 18px;
}
.sg-founders-component__text {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: inherit;
	padding: 0;
	max-width: 440px;
}
.sg-founders-component__card:first-child .sg-founders-component__text { opacity: 0.85; }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-founders-component__inner { grid-template-columns: 1fr 1fr; gap: 18px; }
	.sg-founders-component__card { min-height: 380px; padding: 44px 36px; }
	.sg-founders-component__name { font-size: 40px; }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-founders-component__card { min-height: 440px; padding: 56px 48px; }
	.sg-founders-component__name { font-size: 48px; }
	.sg-founders-component__text { font-size: 18px; }
}

/* ==========================================================================
   Sail Greece revamp — MARINA page: map + "Getting to the marina" (the one new element)
   Source: Web/Build/Static Html/2026 09 30 marina/assets/css/marina.css.
   The map is shown whole (no object-fit crop) so the Pier 6 marker is never cut off.
   Stacked on phones (map first); two columns from 992: map 7 / content 5.
   ========================================================================== */

.sg-map-component { background-color: var(--sg-cream); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-map-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}
.sg-map-component__figure { margin: 0; }
.sg-map-component__figure > a { display: block; }
.sg-map-component__figure img { display: block; width: 100%; height: auto; }

.sg-map-component__title { padding-bottom: 20px; }
.sg-map-component__list { margin: 0 0 32px; padding: 0; }
.sg-map-component__row {
	padding: 14px 0;
	border-bottom: 1px solid rgba(11, 37, 69, 0.15);
}
.sg-map-component__row:first-child { border-top: 1px solid rgba(11, 37, 69, 0.15); }
.sg-map-component__row dt {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-blue);
	padding-bottom: 4px;
}
.sg-map-component__row dd {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--sg-navy);
}

@media (min-width: 992px) {
	.sg-map-component__inner { grid-template-columns: 7fr 5fr; gap: 60px; align-items: center; }
}
@media (min-width: 1200px) {
	.sg-map-component__row dd { font-size: 18px; }
}

/* Lists inside the practical-info items (Insurance): tight to the text above, short indent. */
.sg-marina .sg-about-yachts-component__item-text ul { margin: -0.8em 0 0; padding-left: 1.1em; }
.sg-marina .sg-about-yachts-component__item-text li { padding: 2px 0; }

/* A button pair inside the centred Why Us layout (closing CTA) sits centred too. */
.sg-why-component .sg-buttons { justify-content: center; }

/* "Ready to plan your trip?" closing CTA (.sg-plan-cta, every page that uses it): half the section padding on desktop (Paul). */
@media (min-width: 992px) {
	.sg-plan-cta { padding: calc(var(--sg-section-pad) / 2) 0; }
}

/* ==========================================================================
   Sail Greece revamp — GALLERY page (template-gallery.php)
   Keeps the legacy Isotope hooks (.photoMasonry / .grid-sizer / .grid-item) so masonryGrid() drives it;
   these rules only set the column widths and gutters. 2 columns on phones, 3 from 992, 4 from 1200.
   ========================================================================== */

.sg-gallery-component { background-color: var(--sg-white); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-gallery-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-gallery-component .photoMasonry { margin: 0 -5px; }
.sg-gallery-component .photoMasonry::after { content: ""; display: block; clear: both; }
.sg-gallery-component .photoMasonry .grid-sizer,
.sg-gallery-component .photoMasonry .grid-item { width: 50%; }
.sg-gallery-component .photoMasonry .grid-item a { display: block; padding: 5px; overflow: hidden; cursor: zoom-in; }
.sg-gallery-component .photoMasonry .grid-item img { display: block; width: 100%; height: auto; transition: opacity 0.3s ease-out; }
.sg-gallery-component .photoMasonry .grid-item a:hover img { opacity: 0.85; }

@media (min-width: 992px) {
	.sg-gallery-component .photoMasonry { margin: 0 -7px; }
	.sg-gallery-component .photoMasonry .grid-sizer,
	.sg-gallery-component .photoMasonry .grid-item { width: 33.3333%; }
	.sg-gallery-component .photoMasonry .grid-item a { padding: 7px; }
}
@media (min-width: 1200px) {
	.sg-gallery-component .photoMasonry .grid-sizer,
	.sg-gallery-component .photoMasonry .grid-item { width: 25%; }
}

/* ==========================================================================
   Sail Greece revamp — TESTIMONIALS page: reviews panel (the one new element)
   Source: Web/Build/Static Html/2026 10 01 testimonials/assets/css/reviews.css.

   A central cream panel inside the white page, holding white review blocks in a masonry layout
   (Isotope, already loaded site-wide — sgReviewsMasonry() in sailgreece-scripts.js): reviews run from 15 to 110+ words, so each block keeps its natural
   height, reading order stays left → right, and each block drops into the shortest column.
   Items carry the gutter as padding (same pattern as the gallery). First block navy (homepage pattern), targeted as the item right after the sizer.
   1 column on phones, 2 from 768, 3 from 1200. Without JS the items simply stack/float — still readable.
   ========================================================================== */

/* Full viewport width, no section padding: the cream panel runs edge to edge and meets the next section cleanly (Paul). */
.sg-reviews-component { background-color: var(--sg-white); padding: 0; }
.sg-reviews-component__inner { }
.sg-reviews-component__panel { background-color: var(--sg-cream); padding: 7px; }
/* "See all testimonials" under the masonry panel, outside the Isotope grid (Paul). */
.sg-reviews-component__more { display: flex; justify-content: center; padding: 30px 0; }   /* inside the cream panel, after the grid; with the item + panel padding the space is equal above and below */
@media (min-width: 768px) { .sg-reviews-component__more { padding: 30px 0 18px; } }
@media (min-width: 1200px) { .sg-reviews-component__more { padding: 40px 0 0; } }
.sg-reviews-component__grid::after { content: ""; display: block; clear: both; }
.sg-reviews-component__sizer,
.sg-reviews-component__item { width: 100%; }
.sg-reviews-component__item { float: left; padding: 7px; }

.sg-reviews-component__card {
	margin: 0;
	padding: 30px 24px 24px;
	background-color: var(--sg-white);
	color: var(--sg-navy);
}
.sg-reviews-component__sizer + .sg-reviews-component__item .sg-reviews-component__card { background-color: var(--sg-navy); color: var(--sg-white); }

.sg-reviews-component__quote {
	font-family: var(--sg-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.35;
	color: inherit;
	margin: 0;
	padding: 0 0 18px;
}
.sg-reviews-component__quote::before { content: "\201C"; }
.sg-reviews-component__quote::after  { content: "\201D"; }

.sg-reviews-component__text { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--sg-ink); }
.sg-reviews-component__text { display: none; }   /* full review hidden for now (Paul, 2026-10-01); remove this line to show it */
.sg-reviews-component__text p { font-size: inherit; line-height: inherit; color: inherit; padding: 0 0 0.9em; }
.sg-reviews-component__text p:last-child { padding-bottom: 0; }
.sg-reviews-component__sizer + .sg-reviews-component__item .sg-reviews-component__text { color: var(--sg-white); opacity: 0.85; }

.sg-reviews-component__name {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-blue);
}
.sg-reviews-component__sizer + .sg-reviews-component__item .sg-reviews-component__name { border-top-color: rgba(255, 255, 255, 0.25); }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-reviews-component__panel { padding: 21px; }
	.sg-reviews-component__sizer,
	.sg-reviews-component__item { width: 50%; }
	.sg-reviews-component__item { padding: 9px; }
	.sg-reviews-component__card { padding: 36px 30px 28px; }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-reviews-component__panel { padding: 50px; }
	.sg-reviews-component__sizer,
	.sg-reviews-component__item { width: 33.3333%; }
	.sg-reviews-component__item { padding: 10px; }
	.sg-reviews-component__quote { font-size: 26px; }
}

/* ==========================================================================
   Sail Greece revamp — ROUTES LISTING page: route rows (the one new element)
   Source: Web/Build/Static Html/2026 10 01 routes/assets/css/routes.css. Legs/NM/chain: sg_route_legs().

   One wide row per route, image (map) always on the left, on a light cream ground (Paul).
   Every number is real: total NM, legs and the port chain come from each route page's own
   From / To / Distance table. Stacked on phones (image first), side by side from 992.
   ========================================================================== */

.sg-route-list-component { background-color: var(--sg-cream); padding: calc(var(--sg-section-pad) / 2) 0 var(--sg-section-pad); }
.sg-route-list-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-route-list-component__title { padding-bottom: 40px; max-width: 900px; }

.sg-route-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding: 40px 0;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
}
.sg-route-row:last-child { border-bottom: 1px solid rgba(11, 37, 69, 0.15); }

/* The route images are route MAPS, so they're shown whole at their natural shape — never cropped. */
.sg-route-row__visual { display: block; }
.sg-route-row__visual img { display: block; width: 100%; height: auto; transition: opacity 0.3s ease-out; }
.sg-route-row__visual:hover img { opacity: 0.9; }

.sg-route-row .sg-eyebrow { color: var(--sg-blue); margin-bottom: 12px; }
.sg-route-row .sg-eyebrow::after { display: none; }
.sg-route-row__title { font-size: 30px; line-height: 1.2; padding-bottom: 20px; }
.sg-route-row__title a { color: inherit; text-decoration: none; }
.sg-route-row__title a:hover { color: var(--sg-blue); }

.sg-route-row__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 40px;
	margin: 0 0 22px;
	padding: 16px 0;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
	border-bottom: 1px solid rgba(11, 37, 69, 0.15);
}
.sg-route-row__stat { margin: 0; }
.sg-route-row__stat dd { margin: 0; font-family: var(--sg-serif); font-size: 28px; line-height: 1.1; color: var(--sg-navy); }
.sg-route-row__stat dt { margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-grey); }

.sg-route-row__excerpt { font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--sg-ink); padding: 0 0 20px; }

.sg-route-row__chain { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14px; font-weight: 400; color: var(--sg-navy); }
.sg-route-row__chain li { display: inline-flex; align-items: center; }
.sg-route-row__chain li + li::before { content: ""; flex: none; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: var(--sg-blue); }

/* ================================================================== 992 */
@media (min-width: 992px) {
	.sg-route-row { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 56px 0; }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-route-row__title { font-size: 40px; }
	.sg-route-row__stat dd { font-size: 32px; }
	.sg-route-row__excerpt { font-size: 17px; }
}

/* ==========================================================================
   Sail Greece revamp — ROUTE page (template-charter-article.php)
   Reuses: .sg-hero-component + .sg-boat-hero__back, .sg-boat-specs-component, .sg-fleet-intro-component,
   .sg-map-component, .sg-other-yachts-component + .sg-fleet-card, .sg-plan-cta.
   New component: .sg-islands-component ("The islands in detail").
   Small additions: .sg-route-legs (the leg list beside the map) and .sg-route-card (a fleet card holding a map,
   shown whole, never cropped).
   ========================================================================== */

/* The intro lead carries a link here (to the Northern & Middle Cyclades route): navy, not the legacy blue. */
.sg-route-page .sg-fleet-intro-component__lead a { color: inherit; text-underline-offset: 0.15em; }
.sg-route-page .sg-fleet-intro-component__lead a:hover { color: var(--sg-blue); }

/* ------------------------------------------------------------------ route facts (boat specs strip, centred) */

.sg-route-page .sg-boat-specs-component__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 60px; text-align: center; }

/* ------------------------------------------------------------------ legs list (inside the map component) */

.sg-route-page .sg-map-component__inner { align-items: start; }
.sg-map-component--no-map .sg-map-component__content { max-width: 640px; }   /* a route page with no map (Saronic & E. Peloponnese) */
.sg-route-legs { list-style: none; margin: 0; padding: 0; }
.sg-route-legs li {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	align-items: baseline;
	gap: 0 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(11, 37, 69, 0.12);
	font-size: 15px;
	line-height: 1.35;
	font-weight: 300;
	color: var(--sg-ink);
}
.sg-route-legs li:first-child { border-top: 1px solid rgba(11, 37, 69, 0.12); }
.sg-route-legs__no { font-size: 12px; font-weight: 400; letter-spacing: 0.1em; color: var(--sg-grey); }
.sg-route-legs__sep { margin: 0 6px; color: var(--sg-blue); }
.sg-route-legs__nm { color: var(--sg-blue); font-weight: 400; white-space: nowrap; }
.sg-route-legs li.sg-route-legs__total { border-bottom: 0; font-weight: 500; color: var(--sg-navy); }
.sg-route-legs__total .sg-route-legs__nm { color: var(--sg-navy); font-weight: 500; }
.sg-route-legs__note { font-size: 13px; font-weight: 300; color: var(--sg-grey); padding: 4px 0 28px; }

/* ------------------------------------------------------------------ the islands in detail (new) */

.sg-islands-component { background-color: var(--sg-white); padding: calc(var(--sg-section-pad) / 2) 0; }   /* half the section padding (Paul) */
.sg-islands-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-islands-component__title { padding-bottom: 30px; }
.sg-islands-component__list { list-style: none; margin: 0; padding: 0; }
.sg-islands-component__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 28px 0;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
}
.sg-islands-component__item:last-child { border-bottom: 1px solid rgba(11, 37, 69, 0.15); }
.sg-islands-component__no {
	display: block;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--sg-blue);
	padding-bottom: 8px;
}
.sg-islands-component__name { font-size: 26px; line-height: 1.2; margin: 0; }
.sg-islands-component__item--plain { display: block; }   /* one block of text under the section title (Cyclades II) */

/* ------------------------------------------------------------------ other routes (fleet cards holding maps) */

.sg-route-page .sg-other-yachts-component { padding: calc(var(--sg-section-pad) / 2) 0; }   /* half the section padding (Paul) */

/* The card map is a taster: cropped with the fleet card's object-fit: cover (Paul). The full map is on the route page. */
.sg-route-card .sg-fleet-card__head { flex-direction: column; align-items: flex-start; gap: 6px; }   /* region above the title, as on the listing */
.sg-route-card .sg-fleet-card__model { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-blue); }
.sg-route-card .sg-fleet-card__name { font-size: 24px; }
.sg-route-card .sg-fleet-card__specs { grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 36px; }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-route-legs li { font-size: 16px; }
}

/* ================================================================== 992 */
@media (min-width: 992px) {
	.sg-route-page .sg-boat-specs-component__inner { gap: 34px 120px; }
	.sg-route-page .sg-boat-specs-component__item dd { font-size: 32px; }
	.sg-islands-component__item { grid-template-columns: minmax(200px, 2fr) 10fr; gap: 60px; padding: 28px 0; }   /* name column half the old 4fr; 28px, same as mobile (Paul) */
	.sg-route-page .sg-fleet-grid-component__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-islands-component__name { font-size: 30px; }
	.sg-route-page .sg-fleet-grid-component__grid { grid-template-columns: repeat(4, 1fr); gap: 60px 26px; }
}

/* ==========================================================================
   Sail Greece revamp — SAILING DISTANCES CALCULATOR (template-calculator.php)
   Reuses: .sg-hero-component, .sg-fleet-intro-component, .sg-btn, .sg-copy, .sg-plan-cta.
   New component: .sg-calculator-component (area picker · distance bar · map · controls), plus its steps list,
   the speed table (.sg-speed-table) and the send-to-a-friend window (.sg-send-form).
   The legacy app (distances_v7.js + jquery.lightbox_me.js) keeps its page hooks. It only needs the IDs, which are kept:
   #map, #distHolder, #distance, #send2form, #myForm, #formMiles, #jsonMap, #mail1, #mail2, #message, #close_x,
   .close and [data-action="loadIslands"]. The legacy classes (.mapWrap, .appWrap, .custombutton…) are dropped,
   so sailgreece-main.css can't fight these rules.
   ========================================================================== */

/* ------------------------------------------------------------------ calculator */

.sg-calculator-component { background-color: var(--sg-cream); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-calculator-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}

/* area picker: the content's own lead-in lines + its loadIslands links as chips */
.sg-calculator-component__areas { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; }
.sg-calculator-component__label { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--sg-grey); padding: 0 0 10px; }
.sg-calculator-component__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-calculator-component__chips a {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid rgba(11, 37, 69, 0.25);
	background-color: var(--sg-white);
	font-size: 14px;
	font-weight: 400;
	color: var(--sg-navy);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.sg-calculator-component__chips a:hover { background-color: var(--sg-navy); border-color: var(--sg-navy); color: var(--sg-white); }

/* distance bar (navy) sits on top of the map */
.sg-calculator-component__app { background-color: var(--sg-white); }
/* legacy #distHolder (sailgreece-main.css) is absolute, semi-transparent and 28px: reset it with the id */
.sg-calculator-component #distHolder {
	position: static;
	z-index: auto;
	opacity: 1;
	filter: none;
	text-align: left;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 20px;
	padding: 18px 20px;
	background-color: var(--sg-navy);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.sg-calculator-component #distHolder #distance {   /* #distHolder #distance (legacy) needs the id here to lose */
	font-family: var(--sg-serif);
	font-size: 34px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sg-white);
}
.sg-calculator-component #distHolder #distance::after { content: " NM"; font-size: 0.55em; color: var(--sg-blue); }
.sg-calculator-component #map { width: 100%; height: 62vh; min-height: 420px; max-height: 720px; background-color: rgba(11, 37, 69, 0.06); }

/* controls under the map: three navy buttons, then the aqua "Send to a friend" (Paul).
   Phones: centred and compact (Paul: "they are massive"); from 768 the full-size buttons, Send pushed right. */
.sg-calculator-component__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.sg-calculator-component__controls .sg-btn { min-height: 42px; padding: 0 14px; gap: 10px; border: 0; border-radius: 0; font-size: 14px; cursor: pointer; }   /* <button>: no UA border */

/* saved view (?map=): the friend's intro + CREATE NEW MAP above the map */
.sg-calculator-component__saved { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.sg-calculator-component__saved .sg-copy { max-width: 760px; }

/* ------------------------------------------------------------------ how to use (steps) */

.sg-steps-component { background-color: var(--sg-white); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-steps-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-steps-component__title { padding-bottom: 30px; }
.sg-steps-component__list { list-style: none; margin: 0; padding: 0; counter-reset: sg-step; display: grid; grid-template-columns: 1fr; column-gap: 60px; }
.sg-steps-component__list li {
	counter-increment: sg-step;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 0 12px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(11, 37, 69, 0.12);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--sg-ink);
}
.sg-steps-component__list li::before {
	content: counter(sg-step, decimal-leading-zero);
	padding-top: 3px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--sg-blue);
}
.sg-steps-component__list strong { font-weight: 500; color: var(--sg-navy); }

/* ------------------------------------------------------------------ speed guide */

.sg-speed-component { background-color: var(--sg-cream); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-speed-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}
.sg-speed-component__lead { font-family: var(--sg-serif); font-size: 26px; line-height: 1.35; color: var(--sg-navy); padding: 0 0 20px; }
.sg-speed-table { width: 100%; border-collapse: collapse; }
.sg-speed-table th {
	padding: 0 10px 12px 0;
	border-bottom: 1px solid rgba(11, 37, 69, 0.3);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--sg-grey);
}
.sg-speed-table td {
	padding: 13px 10px 13px 0;
	border-bottom: 1px solid rgba(11, 37, 69, 0.12);
	font-size: 14px;
	font-weight: 300;
	color: var(--sg-ink);
	vertical-align: baseline;
}
.sg-speed-table td:first-child { font-family: var(--sg-serif); font-size: 18px; color: var(--sg-navy); }
.sg-speed-table td:first-child a { color: inherit; text-decoration: none; }
.sg-speed-table td:first-child a:hover { color: var(--sg-blue); }
.sg-speed-table th:last-child, .sg-speed-table td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.sg-speed-table td:last-child { color: var(--sg-blue); font-weight: 400; }
.sg-speed-table .sg-speed-table__length { display: none; }   /* the length column from 768 */
.sg-speed-component .sg-copy { padding-top: 26px; }

/* ------------------------------------------------------------------ send to a friend (lightbox_me moves it to <body>) */

.sg-send-form {
	width: calc(100vw - 2 * var(--sg-gutter));
	max-width: 520px;
	padding: 34px 26px 28px;
	background-color: var(--sg-white);
	font-family: var(--sg-sans);
	color: var(--sg-ink);
}
.sg-send-form__title { font-family: var(--sg-serif); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--sg-navy); margin: 0; padding: 0 0 8px; }
.sg-send-form__intro { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--sg-grey); padding: 0 0 20px; }
.sg-send-form__row { margin: 0 0 14px; }
#send2form .sg-send-form__row label {   /* #send2form label (legacy) needs the id here to lose */
	display: block;
	padding-bottom: 6px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-navy);
}
#send2form .sg-send-form__row input,
#send2form .sg-send-form__row textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(11, 37, 69, 0.25);
	border-radius: 0;
	background-color: var(--sg-white);
	font-family: var(--sg-sans);
	font-size: 16px;   /* 16px: no zoom-on-focus on iOS */
	font-weight: 300;
	color: var(--sg-ink);
}
#send2form .sg-send-form__row textarea { height: auto; min-height: 96px; resize: vertical; }
.sg-send-form__row input:focus,
.sg-send-form__row textarea:focus { outline: 2px solid var(--sg-blue); outline-offset: -1px; border-color: transparent; }
.sg-send-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 8px; }
.sg-send-form__cancel { font-size: 14px; font-weight: 400; color: var(--sg-grey); text-decoration: underline; text-underline-offset: 0.2em; }
.sg-send-form__cancel:hover { color: var(--sg-navy); }
#responseText h3 { font-family: var(--sg-serif); font-weight: 400; font-size: 22px; color: var(--sg-navy); }
#responseText { padding: 0 0 18px; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--sg-navy); }
#responseText h3 { margin: 0; padding: 0 0 6px; }
#responseText a { color: var(--sg-navy); }
#responseText.is-error { color: #B3261E; font-weight: 400; }
.sg-send-form.is-sending .sendButton { opacity: 0.5; pointer-events: none; }
/* honeypot: off screen for people, still in the form for bots */
.sg-send-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* message under the map when a shared ?map= link is invalid or missing */
.sg-calculator-component__error { padding: 14px 0 0; font-size: 15px; font-weight: 400; color: #B3261E; }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-calculator-component__controls { justify-content: flex-start; gap: 10px; }
	.sg-calculator-component__controls .sg-btn { min-height: 55px; padding: 0 18px; gap: 18px; font-size: 16px; }
	.sg-calculator-component__controls .sg-btn--blue { margin-left: auto; }
	.sg-calculator-component #distHolder { padding: 20px 26px; }
	.sg-calculator-component #distHolder #distance { font-size: 40px; }
	.sg-speed-table .sg-speed-table__length { display: table-cell; }
	.sg-speed-table td { font-size: 15px; }
	.sg-send-form { padding: 44px 40px 36px; }
}

/* ================================================================== 992 */
@media (min-width: 992px) {
	.sg-calculator-component { padding: calc(var(--sg-section-pad) / 4) 0; }   /* half again from 992 (Paul) */
	.sg-calculator-component__areas { grid-template-columns: 3fr 2fr; gap: 60px; align-items: end; }
	.sg-steps-component__list { grid-template-columns: 1fr 1fr; }
	.sg-speed-component__inner { grid-template-columns: 4fr 8fr; gap: 60px; align-items: start; }
	.sg-calculator-component__saved { grid-template-columns: 8fr 4fr; gap: 60px; align-items: end; }
	.sg-calculator-component__saved .sg-buttons { justify-content: flex-end; }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-calculator-component #distHolder #distance { font-size: 44px; }
	.sg-speed-component__lead { font-size: 30px; }
	.sg-speed-table td:first-child { font-size: 20px; }
}

/* ==========================================================================
   Sail Greece revamp — ENQUIRY pages: charter request (template-charter-request.php, GF #2) and
   contact (template-contact.php, GF #1). One component, one partial (templates/sg-enquiry.php).
   Reuses: .sg-hero-component, .sg-copy, .sg-eyebrow, the .sg-map-component row look (contact rows).
   New component: .sg-enquiry-component — intro + contact card on the left, a Gravity Forms form on the right.
   The form is Gravity Forms' own markup (Orbital theme), restyled here. GF prints its colour variables in an inline
   <style> keyed on #gform_wrapper_N[data-form-index="0"].gform-theme (1,2,0), so the overrides carry the id via
   :is(#gform_wrapper_1, #gform_wrapper_2) — add a form's id there if another form uses this component.
   The form wrapper is .sg-enquiry-component .sg-enquiry-component__form (not the legacy .sgForm, whose !important rules in
   sailgreece-main.css still serve the other legacy forms). No !important.
   ========================================================================== */

.sg-enquiry-component { background-color: var(--sg-cream); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-enquiry-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

/* ------------------------------------------------------------------ left: intro + contact card */

.sg-enquiry-component__title { padding-bottom: 20px; }
/* Phones: intro → form → contact card. From 992: intro + card on the left, the form on the right across both rows. */
.sg-enquiry-component__card { order: 3; padding: 30px 26px; background-color: var(--sg-navy); color: var(--sg-white); }
.sg-enquiry-component__card-title { font-size: 15px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, 0.75); padding: 0 0 16px; }
.sg-enquiry-component__contact { margin: 0; padding: 0; }
.sg-enquiry-component__row { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); }
/* no lead-in line (contact page): the first row needs no divider above it */
.sg-enquiry-component__card > .sg-enquiry-component__contact:first-child > .sg-enquiry-component__row:first-child { padding-top: 0; border-top: 0; }
.sg-enquiry-component__row dt {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-blue);
	padding-bottom: 4px;
}
.sg-enquiry-component__row dd { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--sg-white); }
.sg-enquiry-component__row a { color: var(--sg-white); text-decoration: none; }
.sg-enquiry-component__row a:hover { color: var(--sg-blue); }

/* ------------------------------------------------------------------ right: the form panel */

.sg-enquiry-component__panel { padding: 30px 20px; background-color: var(--sg-white); }
.sg-enquiry-component__note { font-size: 14px; font-weight: 300; color: var(--sg-grey); padding: 0 0 24px; }

/* GF colour variables → the house palette (square corners, navy text, aqua focus).
   GF's inline <style> is #gform_wrapper_N[data-form-index="0"].gform-theme (1,2,0), so this needs the id too. */
.sg-enquiry-component .sg-enquiry-component__form :is(#gform_wrapper_1, #gform_wrapper_2).gform_wrapper.gform-theme {
	--gf-color-primary: #1AA9E9;
	--gf-color-primary-rgb: 26, 169, 233;
	--gf-color-primary-darker: #0B2545;
	--gf-color-primary-lighter: #1AA9E9;
	--gf-color-in-ctrl-primary: #0B2545;
	--gf-color-in-ctrl-primary-rgb: 11, 37, 69;
	--gf-color-in-ctrl-contrast: #282828;
	--gf-color-in-ctrl-dark: #282828;
	--gf-ctrl-border-color: rgba(11, 37, 69, 0.25);
	--gf-ctrl-border-color-hover: rgba(11, 37, 69, 0.5);
	--gf-ctrl-radius: 0;
	--gf-radius: 0;
	--gf-ctrl-shadow: none;
	--gf-ctrl-size: 48px;
	--gf-ctrl-font-family: "Roboto", sans-serif;
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-font-weight: 300;
	--gf-ctrl-label-font-family-primary: "Roboto", sans-serif;
	--gf-ctrl-label-color-primary: #0B2545;
	--gf-ctrl-label-font-size-primary: 12px;
	--gf-ctrl-label-font-weight-primary: 400;
	--gf-ctrl-label-letter-spacing-primary: 0.1em;
	--gf-ctrl-label-color-req: #686868;
	--gf-ctrl-outline-color-focus: rgba(26, 169, 233, 0.45);
	--gf-form-gap-y: 26px;
	--gf-form-gap-x: 20px;
	--gf-ctrl-btn-bg-color-primary: #1AA9E9;
	--gf-ctrl-btn-bg-color-hover-primary: #000000;
	--gf-ctrl-btn-radius: 0;
	font-family: var(--sg-sans);
}
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield_label { text-transform: uppercase; }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield_required_text { font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--sg-grey); }

/* GF section breaks → numbered serif headings with a hairline, like the rest of the revamp */
.sg-enquiry-component .sg-enquiry-component__form .gform_fields { counter-reset: sg-section; }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gsection {
	counter-increment: sg-section;
	margin-top: 14px;
	padding: 24px 0 0;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
	border-bottom: 0;
}
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gsection_title {
	font-family: var(--sg-serif);
	font-size: 22px;   /* long DE / PL headings on phones */
	font-weight: 400;
	line-height: 1.2;
	color: var(--sg-navy);
}
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gsection_title::before {
	content: counter(sg-section, decimal-leading-zero);
	display: block;
	padding-bottom: 6px;
	font-family: var(--sg-sans);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--sg-blue);
}

/* Skippered / Bareboat (radio) and the extras (checkbox) → square toggle chips */
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield_radio,
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield_checkbox { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }   /* GF's vertical choice alignment stacks them */
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-choice .gchoice { position: relative; margin: 0; }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-choice .gfield-choice-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-choice .gchoice label {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid rgba(11, 37, 69, 0.25);
	background-color: var(--sg-white);
	font-size: 15px;
	font-weight: 400;
	color: var(--sg-navy);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-choice .gfield-choice-input:hover + label { border-color: var(--sg-navy); }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-choice .gfield-choice-input:checked + label { background-color: var(--sg-navy); border-color: var(--sg-navy); color: var(--sg-white); }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-choice .gfield-choice-input:focus-visible + label { outline: 2px solid var(--sg-blue); outline-offset: 2px; }

/* Submit → the site's aqua button, with the arrow. GF's button rule ends in an element selector, so this uses the id. */
.sg-enquiry-component .sg-enquiry-component__form :is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer { margin-top: 10px; padding-top: 16px; }   /* no hairline under the message field (Paul) */
.sg-enquiry-component .sg-enquiry-component__form :is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-height: 55px;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background-color: var(--sg-blue);
	font-family: var(--sg-sans);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sg-white);
	cursor: pointer;
	transition: background-color 0.25s ease-out;
}
.sg-enquiry-component .sg-enquiry-component__form :is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button::after {
	content: "";
	width: 26px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath d='M0 7h24M18 1l6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.25s ease-out;
}
.sg-enquiry-component .sg-enquiry-component__form :is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button:hover { background-color: var(--sg-black); }
.sg-enquiry-component .sg-enquiry-component__form :is(#gform_wrapper_1, #gform_wrapper_2) .gform_footer .gform_button:hover::after { transform: translateX(4px); }

/* GF validation + confirmation in the house colours */
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gform_validation_errors { border-radius: 0; }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-textarea textarea { min-block-size: 0; height: 170px; }
.sg-enquiry-component .gform_confirmation_message { font-family: var(--sg-serif); font-size: 26px; line-height: 1.35; color: var(--sg-navy); }

/* ------------------------------------------------------------------ contact form extras (GF #1) */

/* "To: Captain Giannis …" (Global Options contact_to_title) — an addressee line above the form */
.sg-enquiry-component__to { padding: 0 0 22px; margin: 0 0 26px; border-bottom: 1px solid rgba(11, 37, 69, 0.15); font-size: 13px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-blue); }
.sg-enquiry-component__to strong { display: block; padding-top: 6px; font-family: var(--sg-serif); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--sg-navy); }
/* GF HTML block → a cream note inside the form */
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-html { padding: 18px 20px; background-color: var(--sg-cream); font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--sg-ink); }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-html a { color: var(--sg-navy); }
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gfield--type-html a:hover { color: var(--sg-blue); }
/* email + confirm sub-labels */
.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gform-field-label--type-sub { font-size: 12px; font-weight: 300; color: var(--sg-grey); }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-enquiry-component__panel { padding: 44px 40px; }
	.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gsection_title { font-size: 26px; }
}

/* ================================================================== 992 */
@media (min-width: 992px) {
	.sg-enquiry-component__inner { grid-template-columns: 4fr 8fr; grid-template-rows: auto 1fr; gap: 36px 60px; align-items: start; }
	.sg-enquiry-component__intro { grid-column: 1; grid-row: 1; }
	.sg-enquiry-component__card { grid-column: 1; grid-row: 2; }
	.sg-enquiry-component__panel { grid-column: 2; grid-row: 1 / span 2; }
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-enquiry-component__panel { padding: 56px 60px; }
	.sg-enquiry-component__to strong { font-size: 28px; }
	.sg-enquiry-component .sg-enquiry-component__form .gform-theme .gsection_title { font-size: 30px; }
}

/* ==========================================================================
   Sail Greece revamp — PAYMENT pages (Piraeus Bank, via the third-party sa_* script)
   - Payment page: reuses .sg-enquiry-component (intro + contact card left, a panel right). The panel holds the
     amount form (.sg-pay-form), which posts to /sa_paysubmit.php exactly as before (charge, lang, varone, vartwo).
   - Success / failure pages: new .sg-result-component (one centred panel, the content's text + map, two buttons).
   The bank's own step (sa_paysubmit.php) is styled separately in sa_style.css (CSS only).
   ========================================================================== */

/* ------------------------------------------------------------------ amount form */

.sg-pay-form__label {
	display: block;
	padding-bottom: 8px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-navy);
}
.sg-pay-form__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.sg-pay-form__amount { position: relative; flex: 1 1 220px; max-width: 320px; }
.sg-pay-form__amount::before {
	content: "€";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--sg-serif);
	font-size: 24px;
	color: var(--sg-blue);
	pointer-events: none;
}
.sg-pay-form__amount input {
	display: block;
	width: 100%;
	height: 55px;
	padding: 0 16px 0 42px;
	border: 1px solid rgba(11, 37, 69, 0.25);
	border-radius: 0;
	background-color: var(--sg-white);
	font-family: var(--sg-serif);
	font-size: 24px;
	color: var(--sg-navy);
}
.sg-pay-form__amount input:focus { outline: 2px solid var(--sg-blue); outline-offset: -1px; border-color: transparent; }
.sg-pay-form__amount input::placeholder { color: rgba(11, 37, 69, 0.3); }
.sg-pay-form .sg-btn { border: 0; border-radius: 0; cursor: pointer; }   /* <button>: no UA border */

/* secure note (lock) + the "email us after" note */
.sg-pay-secure {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 14px;
	margin: 30px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--sg-ink);
}
.sg-pay-secure svg { margin-top: 2px; color: var(--sg-blue); }
.sg-pay-secure p { padding: 0; }
.sg-pay-note { margin-top: 20px; padding: 18px 20px; background-color: var(--sg-cream); font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--sg-ink); }
.sg-pay-note p { padding: 0; }

/* ------------------------------------------------------------------ success / failure */

.sg-result-component { background-color: var(--sg-cream); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-result-component__inner {
	max-width: calc(840px + 2 * var(--sg-gutter));
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}
.sg-result-component__panel { padding: 34px 22px; background-color: var(--sg-white); text-align: center; }
.sg-result-component__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: 50%;
	background-color: var(--sg-blue);
	color: var(--sg-white);
}
.sg-result-component--fail .sg-result-component__icon { background-color: var(--sg-navy); }
.sg-result-component__title { padding-bottom: 20px; }
.sg-result-component .sg-copy { max-width: 620px; margin: 0 auto; text-align: left; }
.sg-result-component .sg-buttons { justify-content: center; margin-top: 30px; }
.sg-result-component .google-maps { position: relative; margin-top: 34px; aspect-ratio: 16 / 9; background-color: rgba(11, 37, 69, 0.06); }
.sg-result-component .google-maps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ================================================================== 768 */
@media (min-width: 768px) {
	.sg-result-component__panel { padding: 50px 56px; }
}

/* Payment page: two equal columns on desktop (Paul) — the charter / contact pages keep 4fr / 8fr */
@media (min-width: 992px) {
	.sg-payment-page .sg-enquiry-component__inner { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Sail Greece revamp — DEFAULT PAGE (page.php → templates/content-page.php): every page with no template.
   New component: .sg-page-component — one readable column for the editor's content (headings, lists, links,
   images, tables, quotes), the first paragraph as a serif lead. Then the shared "Ready to plan your trip?" CTA.
   ========================================================================== */

.sg-page-component { background-color: var(--sg-white); padding: calc(var(--sg-section-pad) / 2) 0; }
.sg-page-component__inner {
	max-width: calc(var(--sg-well) + 2 * var(--sg-gutter));   /* the well, same as the page H1 row (Paul, 2026-10-07; was 760px) */
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}

/* the editor's content */
.sg-page-component .sg-copy > :first-child { margin-top: 0; }
.sg-page-component__lead,
.sg-page-component .sg-copy > p.sg-page-component__lead {
	font-family: var(--sg-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sg-navy);
	padding-bottom: 1.2em;
}
.sg-page-component .sg-copy h2 {
	margin: 1.6em 0 0;
	padding: 28px 0 14px;
	border-top: 1px solid rgba(11, 37, 69, 0.15);
	font-family: var(--sg-serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sg-navy);
}
.sg-page-component .sg-copy h3 {
	margin: 1.2em 0 0;
	padding: 0 0 10px;
	font-family: var(--sg-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sg-navy);
}
.sg-page-component .sg-copy h4 {
	margin: 1.2em 0 0;
	padding: 0 0 8px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sg-blue);
}
.sg-page-component .sg-copy ul,
.sg-page-component .sg-copy ol { margin: 0 0 1.6em; padding: 0; list-style: none; }
.sg-page-component .sg-copy li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.sg-page-component .sg-copy li:first-child { border-top: 1px solid rgba(11, 37, 69, 0.1); }
.sg-page-component .sg-copy ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 1.15em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sg-blue);
}
.sg-page-component .sg-copy ol { counter-reset: sg-ol; }
.sg-page-component .sg-copy ol > li { counter-increment: sg-ol; padding-left: 36px; }
.sg-page-component .sg-copy ol > li::before {
	content: counter(sg-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 12px;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--sg-blue);
}
.sg-page-component .sg-copy a { color: var(--sg-navy); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: rgba(26, 169, 233, 0.6); }
.sg-page-component .sg-copy a:hover { color: var(--sg-blue); }
.sg-page-component .sg-copy img { display: block; max-width: 100%; height: auto; margin: 0.4em 0 1.6em; }
.sg-page-component .sg-copy blockquote {
	margin: 0 0 1.6em;
	padding: 4px 0 4px 22px;
	border-left: 2px solid var(--sg-blue);
	font-family: var(--sg-serif);
	font-size: 20px;
	font-style: italic;
	color: var(--sg-navy);
}
.sg-page-component .sg-copy table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 15px; }
.sg-page-component .sg-copy th { padding: 0 10px 10px 0; border-bottom: 1px solid rgba(11, 37, 69, 0.3); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--sg-grey); }
.sg-page-component .sg-copy td { padding: 11px 10px 11px 0; border-bottom: 1px solid rgba(11, 37, 69, 0.12); }
.sg-page-component .sg-copy iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.sg-page-component .sg-copy .google-maps { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.6em; }
.sg-page-component .sg-copy .google-maps iframe { position: absolute; inset: 0; height: 100%; }

/* a heading right after a list: the list's last hairline is the divider, so no second line above the heading */
.sg-page-component .sg-copy :is(ul, ol) + h2 { border-top: 0; }

/* ul.ul-span-2 (editor class, e.g. What to Bring's packing checklist): two columns from 768, read across */
@media (min-width: 768px) {
	.sg-copy ul.ul-span-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
	.sg-page-component .sg-copy ul.ul-span-2 > li:nth-child(2) { border-top: 1px solid rgba(11, 37, 69, 0.1); }   /* top row: both columns get the hairline */
}

/* ================================================================== 992 */
@media (min-width: 992px) {
	.sg-page-component .sg-copy h2 { margin-top: 0.8em; }   /* half the space above section headings on desktop (Paul) */
}

/* ================================================================== 1200 */
@media (min-width: 1200px) {
	.sg-page-component__lead,
	.sg-page-component .sg-copy > p.sg-page-component__lead { font-size: 26px; }
	.sg-page-component .sg-copy h2 { font-size: 32px; }
}

/* ==========================================================================
   Sail Greece revamp — 404 (404.php): hero + the result panel (sg-result-component) + plan CTA.
   The "4 ⚓ 4" numeral keeps the legacy symbol (assets/img/404-symbol.svg). The legacy .errorElem rules no longer apply.
   ========================================================================== */
.sg-404__num { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; font-family: var(--sg-serif); font-size: 64px; line-height: 1; color: var(--sg-navy); }
.sg-404__num img { display: block; width: 58px; height: auto; }
.sg-result-component--404 .sg-copy { text-align: center; }
.sg-result-component--404 .sg-buttons { gap: 10px; }
@media (min-width: 768px) {
	.sg-404__num { gap: 18px; font-size: 96px; }
	.sg-404__num img { width: 84px; }
}

/* ==========================================================================
   Inner pages: half the section padding (Paul, 2026-10-02)
   Every page except the homepage (body.home) uses half the section padding on these components, at every width,
   so the inner pages share one rhythm. The homepage keeps the full padding.
   ========================================================================== */
body:not(.home) :is(
	.sg-fleet-grid-component,
	.sg-bareboat-component,
	.sg-boat-gallery-component,
	.sg-inventory-component,
	.sg-other-yachts-component,
	.sg-why-component,
	.sg-route-list-component
) { padding-top: calc(var(--sg-section-pad) / 2); padding-bottom: calc(var(--sg-section-pad) / 2); }

/* ==========================================================================
   Header + menu overlay — MOVED from sailgreece-main.css (2026-09-29), rules unchanged,
   original order and breakpoints kept. Legacy class names (camelCase) because the header
   markup is kept as-is. Backup of the old stylesheet: sailgreece-main.css.bak-2026-09-29
   ========================================================================== */

.headBarContainer[dir="rtl"] {
    flex-direction: row-reverse;
}

.headBarContainer[dir="rtl"] .leftHeader.langs
{
	text-align:left;
}

.headBarContainer .brandLogo
{
	position:absolute;
	top:30px;
	left:50%;
	transform:translateX(-50%);
	max-width:110px;
	text-align:Center;
	z-index:8;   /* above the flexed .leftHeader / .navControls (z-index 3), which covered it and blocked the click home */
}

.headBarContainer .brandLogo img
{
	display:inline-block;
}

.headBarContainer
{
	position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 999;
    padding: 30px 20px 0 20px;
}

.headBarContainer::before
{
	position:absolute;
	content:" ";
	display:block;
	top:0;
	right:0;
	left:0;
	height:100px;
	pointer-events:none;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0) 100%);
	opacity:0;
	transition:opacity ease-out 0.4s;
	
}

.scrolling .headBarContainer::before
{
	opacity:1;
	transition:opacity ease-out 0.4s;	
}

.headBarContainer .leftHeader,
.headBarContainer .navControls
{
	flex:1 0 50%;
	position:relative;
	z-index:3;
	
}

.headBarContainer .navControls
{
	text-align:right;
}

.headBarContainer .navControls .menuController
{
	display:inline-block;
}

.headBarContainer .navControls .menuController .label
{
	display: inline-block;
    vertical-align: middle;
    padding: 11px 0;
    color: #fff;
    font-size: 14px;
}


.headBarContainer .navControls .menuController a
{
	display:block;
	padding-right:50px;
	height:40px;

	position:relative;
}

.headBarContainer .navControls .menuController a span
{
    position: absolute;
    width: 40px;
    display: block;	
}

.headBarContainer .navControls .menuController a span.top

{



top:5px;

right:0;

border-bottom:2px solid #fff;

	

}

.headBarContainer .navControls .menuController a span.middle

{

top:calc(50% - 1px);

right:0;

border-bottom:2px solid #fff;	

}

.headBarContainer .navControls .menuController a span.bottom

{

bottom:5px;

right:0;

border-bottom:2px solid #fff;	

}


header .topHiderNav
{
	position:fixed;
	z-index:9999999;
	left:0;
	top:0;
		right:0;
	bottom:0;
	background-color:rgba(0, 142, 199, 0.95);
	overflow-y:auto;
}

header .topHiderNav .navInner
{
	max-width:1000px;
	margin:0 auto;
	color:#fff;
	width:100%;
	padding-top:100px;
	position:Relative;
	z-index:2;
}

header .topHiderNav .navInner .flx
{
	width:100%;
}

header .topHiderNav.opened .left,
	header .topHiderNav.opened .right
	{
		flex:1 0 100%;
		padding:0 0 30px 0;
		text-align:center;
	}

header .topHiderNav.opened .left .in,
	header .topHiderNav.opened .right .in
{
padding:0 20px;	
}

header .topHiderNav .navInner ul
{
	list-style-type:none;
	list-style-position:inside;
	margin:0;
	padding:0;
	text-indent:0;
}

header .topHiderNav .navInner ul li
{
	display:block;
}

header .topHiderNav .navInner ul li.highlight a
{
	position:relative;
	font-weight:500;
	display:inline-block;
	
}

header .topHiderNav .navInner ul li.highlight a::after{
	position:absolute;
	display:block;
	content:" ";
	bottom:0;
	left:0;
	width:100%;
	border-bottom:2px solid #fff;
}

header .topHiderNav .navInner ul li a
{
	padding:5px 0;
	font-size:22px;
	font-weight:300;
	color:#fff;
	text-decoration:none;
	display:block;
}

header .supNav
{
	padding-bottom:30px;
}

header .supNav ul li a
{
font-size:18px!important;
	font-weight:400!important;
}

header .topHiderNav.closed
{
	display:none;
}

header .topHiderNav.opened
{
	display:block;
}

header .topHiderNav .closeNav
{
	position:fixed;
	top:30px;
	right:20px;
	width:40px;
	height:40px;
	z-index:4;
	
}

header .topHiderNav .closeNav a
{
	display:block;
	width:40px;
	height:40px;
	background:url(../img/close-nav-icon.svg) center no-repeat;
}

header .topHiderNav .navInner .socialHead h2,
header .topHiderNav .navInner .addressHead h2
{
	color:#fff;
}

.addressHead p
{
	color:#fff;
}

header .topHiderNav .navInner .cmsHeadChannels a
{
color:#fff;
	text-decoration:none;
	padding:3px 0;
	display:block;
}

header .socialHead
{
	padding-bottom:15px;
}

header .socialHead .so img
{
	width:30px;
	height:30px;
}

header .socialHead .so
{
	text-align:center;
}

header .socialHead .so a
{
	display:inline-block;
}

header .leftHeader.langs ul
	{
	list-style-type: none;
		list-style-position:inside;
		margin:0;
		padding:0;
		text-indent:0;
		position:relative;
		text-transform:uppercase;
		display:inline-block;
	}

header .leftHeader.langs ul li span
	{

    color: #fff;
		display:block;
    text-decoration: none;
    padding: 6px 40px 6px 12px;
    transition: background-color ease-out 0.3s;
		        background-image: url(../img/language-down-arrow.svg);
		background-size:20px 20px;
		background-position: calc(100% - 10px) center;
		border:2px solid #fff;
		background-repeat:no-repeat;
		letter-spacing: 0.04em;
		  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none; 
		
	}


header .leftHeader.langs ul ul
	{
		display:none;
		position:absolute;
		left:0;
		right:0;
		top:35px;
		background-color:#fff;
	}


header .leftHeader.langs ul:hover ul,
	header .leftHeader.langs ul:hover ul li
	{
		display:block;
	}

header .leftHeader.langs ul ul li a
	{
		display:block;
		color:var(--newelblue);
		text-decoration:none;
		padding:10px;
		letter-spacing: 0.04em;
	}

@media (min-width:768px) {
	.headBarContainer .brandLogo
		{
			top:30px;
		}

	header .topHiderNav
		{
			overflow-y:hidden;
		}

	header .topHiderNav.opened
	{
		display:flex;
		align-items:center;
		justify-content:center;
	}

	header .topHiderNav.opened .left,
		header .topHiderNav.opened .right
		{
			flex:1 0 50%;
			padding:30px 0;
			text-align:left;
		}

	header .topHiderNav.opened .left .in, header .topHiderNav.opened .right .in
		{
			padding:0 30px;
		}

	header .topHiderNav.opened .right
		{
			text-align:center;
		}

	header .topHiderNav .navInner
		{
			padding-top:0;
		}

	header .topHiderNav::before
	{
		display:block;
		content:" ";
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		width:50%;
		opacity:0.1;
		background-image:url(../img/nautical-compass-graphic.png);
		background-size:100% auto;
		background-position:center left;
		background-repeat:no-repeat;
	}

	.headBarContainer .brandLogo
		{
			max-width:300px;
		}

	.headBarContainer .brandLogo img
		{
			transition:max-width ease-out 0.4s;
		}

	.scrolling .headBarContainer .brandLogo img
		{
			max-width:120px;
			transition:max-width ease-out 0.4s;
		}
}

@media (min-width:992px) {
	header .topHiderNav .navInner ul li a
		{
			font-size:30px;
			padding:2px 0;
		}
}

/* ==========================================================================
   Menu overlay (legacy header, kept) — right-column headings in Playfair
   ========================================================================== */
header .topHiderNav .navInner .right h2 {
	font-family: var(--sg-serif);
	font-weight: 400;
}