@charset "utf-8";
/* ─────────────────────────────────────────────────────────────
   SHIP CHANDLER DJIBOUTI CO., LTD — site extensions

   Loaded after css/templatemo-maison-style.css (TemplateMo 611
   Maison Doree, unmodified). Everything here reuses the template's
   :root tokens (colours, fonts, spacing), so the palette is changed
   in one place only. Delete this file to see the bare template.
   ───────────────────────────────────────────────────────────── */

/* ========================================
   BASE
======================================== */
html { scroll-padding-top: 110px; }
body { overflow-x: hidden; }

.skip-link {
	position: absolute;
	left: var(--space-sm);
	top: -100px;
	z-index: 3000;
	padding: 0.75rem 1.25rem;
	background: var(--color-charcoal);
	color: var(--color-cream);
	font-size: 0.9rem;
}
.skip-link:focus { top: var(--space-sm); }

:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.text-body a:not(.btn-text):not(.btn-primary) {
	color: var(--color-gold-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Page fade (enter + leave between pages) */
.js body { animation: pageIn 0.6s ease both; }
body.is-leaving { opacity: 0; transition: opacity 0.3s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* Scroll reveal: the template fades sections up; here every block
   carries .reveal so long pages animate piece by piece. Hidden only
   when JS runs (html.js), with a JS fallback timer. */
.js .reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	transition-delay: var(--d, 0ms);
}
.js .reveal.reveal-right { transform: translateX(40px); }
.js .reveal.reveal-left { transform: translateX(-40px); }
.js .reveal.visible { opacity: 1; transform: none; }

/* ========================================
   HEADER
======================================== */
.logo {
	display: flex;
	flex-direction: column;
	line-height: 1;
	font-size: 1.7rem;
	letter-spacing: 0.03em;
}
.logo span { color: inherit; }
.logo .logo-accent { color: var(--color-gold); }
.logo-sub {
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-taupe) !important;
	margin-top: 0.4rem;
}

/* Image logo (replaces the text logo above) */
.logo--img { display: block; line-height: 0; }
.logo--img img { display: block; width: 290px; max-width: 100%; height: auto; transition: opacity 0.3s ease; }
.logo--img:hover img { opacity: 0.85; }

.nav-main { gap: 2.4rem; }

/* Animated underline on nav links (template only changes colour) */
.nav-main > a:not(.nav-cta),
.nav-drop-trigger { position: relative; }
.nav-main > a:not(.nav-cta)::after,
.nav-drop-trigger::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s ease;
}
.nav-main > a:not(.nav-cta):hover::after,
.nav-main > a.is-active::after,
.nav-drop:hover .nav-drop-trigger::after,
.nav-drop-trigger.is-active::after {
	transform: scaleX(1);
	transform-origin: left;
}
.nav-main a.is-active { color: var(--color-gold); }
.nav-cta[aria-current="page"] { background-color: var(--color-charcoal); color: var(--color-cream); }

/* Services dropdown */
.nav-drop { position: relative; }
.nav-drop-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: var(--space-xs) 0;
	transition: color 0.3s ease;
}
.nav-drop-trigger:hover,
.nav-drop-trigger.is-active,
.nav-drop:hover .nav-drop-trigger { color: var(--color-gold); }
.nav-caret { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.3s ease; }
.nav-drop:hover .nav-caret,
.nav-drop.drop-open .nav-caret { transform: rotate(180deg); }

.nav-drop-menu {
	position: absolute;
	top: calc(100% + 18px);
	left: 50%;
	width: 460px;
	padding: var(--space-md);
	background: var(--color-warm-white);
	border-top: 2px solid var(--color-gold);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.nav-drop-menu::before { /* hover bridge */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 20px;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop.drop-open .nav-drop-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.nav-drop-label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-taupe);
	margin-bottom: var(--space-sm);
}
.nav-drop-list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.15rem var(--space-md);
}
.nav-drop-list a {
	display: block;
	padding: 0.35rem 0;
	font-size: 0.92rem;
	color: var(--color-charcoal-soft);
	transition: color 0.25s ease, transform 0.25s ease;
}
.nav-drop-list a:hover { color: var(--color-gold); transform: translateX(4px); }

/* Ports mega-dropdown: wide, centred under the header, four columns,
   scrollable; positioned against .header-inner rather than the link */
.header-inner { position: relative; }
.nav-drop--mega { position: static; }
.nav-drop--mega .nav-drop-menu {
	top: calc(100% + var(--space-md));
	width: min(1080px, calc(100vw - 4rem));
	padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.site-header.scrolled .nav-drop--mega .nav-drop-menu { top: calc(100% + var(--space-sm)); }
.site-header.scrolled .nav-drop-scroll { max-height: calc(100vh - 280px); }
.nav-drop--mega .nav-drop-menu::before { top: calc(-1 * var(--space-md) - 6px); height: calc(var(--space-md) + 6px); }
.nav-drop--mega .nav-drop-label { text-align: center; margin-bottom: var(--space-md); }
.nav-drop-scroll {
	max-height: calc(100vh - 340px); /* menu top (~160px) + title + padding */
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--color-taupe-light) transparent;
}
.nav-drop--mega .nav-drop-list { grid-template-columns: repeat(4, 1fr); gap: 0.1rem 1.25rem; }
.nav-drop--mega .nav-drop-list a { padding: 0.4rem 0.6rem; transition: color 0.25s ease, transform 0.25s ease, background-color 0.25s ease; }
.nav-drop--mega .nav-drop-list a[aria-current="page"] { color: var(--color-gold); }
@media (max-width: 1280px) { .nav-drop--mega .nav-drop-list { grid-template-columns: repeat(3, 1fr); } }
.m-sub-scroll {
	list-style: none;
	max-height: 50vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mobile-nav-links .m-sub-scroll a[aria-current="page"] { color: var(--color-gold); border-left-color: var(--color-gold); }

/* Mobile drawer: active link, services sub-list, hamburger morph */
.menu-toggle span { transform-origin: center; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav-links { margin-top: var(--space-lg); }
.mobile-nav-links a.is-active { color: var(--color-gold); }
.mobile-nav-links > li { opacity: 0; transform: translateX(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
.mobile-nav.active .mobile-nav-links > li { opacity: 1; transform: none; }
.mobile-nav.active .mobile-nav-links > li:nth-child(2) { transition-delay: 0.05s; }
.mobile-nav.active .mobile-nav-links > li:nth-child(3) { transition-delay: 0.1s; }
.mobile-nav.active .mobile-nav-links > li:nth-child(4) { transition-delay: 0.15s; }
.mobile-nav.active .mobile-nav-links > li:nth-child(5) { transition-delay: 0.2s; }
.m-drop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.m-sub-toggle {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--color-taupe-light);
	cursor: pointer;
	color: var(--color-charcoal);
}
.m-sub-toggle svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.3s ease; }
.m-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-sub {
	list-style: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.m-sub li { margin: 0; }
.m-sub li:first-child { padding-top: var(--space-sm); }
.mobile-nav-links .m-sub a {
	display: block;
	padding: 0.35rem 0 0.35rem var(--space-sm);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-charcoal-soft);
	border-left: 1px solid var(--color-taupe-light);
}
.mobile-nav-links .m-sub a:hover { color: var(--color-gold); border-left-color: var(--color-gold); }

/* ========================================
   BUTTONS
======================================== */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before { /* gold sweep on hover */
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-gold-dark);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(.6, .1, .2, 1);
	z-index: -1;
}
.btn-primary:hover { background-color: var(--color-charcoal); }
.btn-primary:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-text { display: inline-block; transition: color 0.3s ease; }
.btn-text:hover { color: var(--color-gold-dark); }

/* ========================================
   HERO (home)
======================================== */
.hero { margin-top: 0; }
.hero-content { padding-top: calc(var(--space-md) + 90px); }
.hero-title { font-size: clamp(2.3rem, 3.6vw, 3.5rem); letter-spacing: 0; }
.hero-location {
	display: block;
	margin-top: var(--space-sm);
	font-size: 0.42em;
	letter-spacing: 0.01em;
	line-height: 1.3;
}
.hero-description { max-width: 440px; }
/* Services button + phone number on one row (template gap: 2rem) */
.hero-actions { flex-wrap: wrap; row-gap: var(--space-sm); }
.hero-phone {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0;
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-charcoal);
	white-space: nowrap;
	transition: color 0.3s ease;
}
.hero-phone-icon { width: 18px; height: 18px; fill: var(--color-gold); transition: transform 0.4s ease; }
.hero-phone::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s ease;
}
.hero-phone:hover { color: var(--color-gold-dark); }
.hero-phone:hover::after { transform: scaleX(1); transform-origin: left; }
.hero-phone:hover .hero-phone-icon { transform: rotate(-12deg) scale(1.08); }

/* Hero slideshow: the template's .hero-slide crossfade (opacity, 1s) with a
   slow zoom - the incoming image eases from 1.08 to 1 while it is shown,
   the outgoing one drifts back while it fades out (no snap). */
.hero-slide img { transform: scale(1.08); transition: transform 6.5s ease-out; }
.hero-slide.active img { transform: scale(1); }
.hero-slide { transition: opacity 1.2s ease-in-out; }
@starting-style { .hero-slide.active img { transform: scale(1.08); } }

/* ========================================
   INTRO / FEATURE SPLITS
======================================== */
.intro-grid { grid-template-columns: 1.15fr 1fr; }
.intro-grid--flip { grid-template-columns: 1fr 1.15fr; } /* home: ship card left, text right */
.intro-grid .featured-content { padding-right: 0; }
.intro-title { font-size: clamp(2.1rem, 3.4vw, 3rem); letter-spacing: 0; }
.featured-description + .featured-description { margin-top: calc(-1 * var(--space-sm)); }

/* Ship symbol on the template's 104deg diagonal split, in light tones */
.ship-panel {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--space-lg);
	background: linear-gradient(104deg, var(--color-warm-white) 0%, var(--color-warm-white) 50%, var(--color-cream) 50%, var(--color-cream) 100%);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
	aspect-ratio: 5 / 4;
}
.ship-panel::after {
	content: '';
	position: absolute;
	inset: var(--space-sm);
	border: 1px solid var(--color-gold-light);
	pointer-events: none;
	transition: inset 0.6s ease;
}
.featured-image-wrapper:hover .ship-panel::after { inset: calc(var(--space-sm) * 1.6); }
.ship-panel img {
	width: 78%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 16px 22px rgba(28, 28, 28, 0.12));
	animation: shipFloat 6s ease-in-out infinite;
}
@keyframes shipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Offset gold frame behind photographs */
.photo-frame::before {
	content: '';
	position: absolute;
	inset: var(--space-md) calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md);
	border: 1px solid var(--color-gold-light);
	z-index: 0;
	transition: inset 0.6s ease;
}
.photo-frame:hover::before { inset: var(--space-sm) calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) var(--space-sm); }
.photo-frame .featured-image { position: relative; z-index: 1; aspect-ratio: 4 / 3.4; }

/* ========================================
   SERVICE PREVIEW CARDS (home)
======================================== */
.svc-preview-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	align-items: start;
}
.svc-card {
	background: var(--color-warm-white);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.8s ease;
}
.js .svc-card.reveal { transition: transform 0.8s ease, box-shadow 0.4s ease, opacity 0.8s ease; transition-delay: var(--d, 0ms); }
.svc-card.visible:hover,
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1); transition-delay: 0ms; }
.svc-card-media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	cursor: pointer;
}
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.svc-card:hover .svc-card-media img { transform: scale(1.06); }
.svc-card-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28, 28, 28, 0.55) 0%, transparent 45%);
	opacity: 0.6;
	transition: opacity 0.4s ease;
}
.svc-card:hover .svc-card-media::after { opacity: 1; }
.svc-card-num {
	position: absolute;
	left: var(--space-sm);
	bottom: var(--space-sm);
	z-index: 1;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--color-cream);
}
.svc-card-head { font: inherit; }
.tile-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-sm);
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	color: inherit;
}
.svc-card-name {
	display: block;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;
	transition: color 0.3s ease;
}
.svc-card:hover .svc-card-name,
.svc-card.is-open .svc-card-name { color: var(--color-gold-dark); }
.svc-card-hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-taupe);
}
.tile-hint-open { display: none; }
.svc-card.is-open .tile-hint-open { display: inline; }
.svc-card.is-open .tile-hint-closed { display: none; }
.tile-plus {
	position: relative;
	flex: 0 0 34px;
	height: 34px;
	border: 1px solid var(--color-taupe-light);
	border-radius: 50%;
	transition: border-color 0.3s ease, transform 0.4s ease, background-color 0.3s ease;
}
.tile-plus::before,
.tile-plus::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 1px;
	background: var(--color-charcoal);
	transform: translate(-50%, -50%);
}
.tile-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity 0.3s ease; }
.svc-card:hover .tile-plus { border-color: var(--color-gold); }
.svc-card.is-open .tile-plus { transform: rotate(180deg); background: var(--color-gold); border-color: var(--color-gold); }
.svc-card.is-open .tile-plus::before { background: var(--color-cream); }
.svc-card.is-open .tile-plus::after { opacity: 0; }
.tile-body { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; }
.tile-body-inner { padding: 0 var(--space-sm) var(--space-md); font-size: 0.98rem; color: var(--color-charcoal-soft); }
.tile-body-inner p { margin-bottom: var(--space-sm); }
.tile-body-inner .craft-list { margin-bottom: var(--space-sm); }
.tile-body-inner .craft-list li { font-size: 0.95rem; margin-bottom: 0.4rem; }

/* ========================================
   HOME SERVICES GRID
   The template's .collections-grid / .collection-item (zoom on hover),
   re-placed as one large card (40%) + a 2x2 block (60%). The cards keep
   the staggered .reveal entrance (--d: 0-360ms) and the lift on hover.
======================================== */
.svc-mosaic {
	grid-template-columns: 4fr 3fr 3fr;
	grid-template-rows: repeat(2, 300px);
}
.svc-mosaic > .collection-item:nth-child(n) { grid-column: auto; grid-row: auto; }
.svc-mosaic > .collection-item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.svc-mosaic .collection-item .collection-image { height: 100%; min-height: 0; }
.svc-tile {
	display: block;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.js .svc-tile.reveal {
	transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.4s ease;
	transition-delay: var(--d, 0ms);
}
.svc-tile:hover,
.svc-tile.visible:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
	transition-delay: 0ms;
}
.svc-tile:focus-visible { outline-offset: 4px; }
/* Name always readable (template shows it on hover only) */
.svc-mosaic .collection-overlay {
	opacity: 1;
	background: linear-gradient(to top, rgba(28, 28, 28, 0.78) 0%, rgba(28, 28, 28, 0.25) 40%, transparent 65%);
}
.svc-mosaic .collection-count {
	order: -1;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.15rem;
	letter-spacing: 0;
	margin-bottom: 0.15rem;
}
.svc-mosaic .collection-name {
	position: relative;
	margin-bottom: 0;
	padding-bottom: 0.6rem;
	transition: color 0.3s ease;
}
.svc-mosaic .collection-name::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 1px;
	background: var(--color-gold-light);
	transition: width 0.45s ease;
}
.svc-tile:hover .collection-name { color: var(--color-gold-light); }
.svc-tile:hover .collection-name::after { width: 72px; }
.svc-mosaic > .collection-item:nth-child(1) .collection-name { font-size: 2.25rem; }

/* ========================================
   WHY CHOOSE US (dark template "story" band)
======================================== */
.why-head { max-width: 760px; margin-bottom: var(--space-lg); }
.why-title { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.why-head .story-text { margin-bottom: 0; }
.aim-label {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--color-gold-light);
	margin-bottom: var(--space-md);
}
/* Ten circular feature cards: 5 per row on wide screens, centred rows.
   Hover: a gold ring traces the circumference (SVG stroke-dashoffset),
   the circle lifts 5px and the background warms. */
.aims-grid {
	--aim-cols: 5;
	--aim-gap: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--aim-gap);
}
.aim-cell {
	position: relative;
	flex: 0 0 calc((100% - (var(--aim-cols) - 1) * var(--aim-gap)) / var(--aim-cols));
	max-width: 250px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.75rem;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: transform 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.js .aim-cell.reveal {
	transition: opacity 0.8s ease, transform 0.8s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
	transition-delay: var(--d, 0ms);
}
.aim-cell:hover,
.aim-cell.visible:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
	transition-delay: 0ms;
}
.aim-ring {
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	transform: rotate(-90deg); /* trace starts at the top */
	pointer-events: none;
	overflow: visible;
}
.aim-ring circle {
	fill: none;
	stroke: var(--color-gold-light);
	stroke-width: 0.7; /* viewBox units: about 1.5px on a 215-250px circle */
	stroke-dasharray: 100 110; /* gap longer than the path: nothing shows at rest */
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 0.45s ease;
}
.aim-cell:hover .aim-ring circle { stroke-dashoffset: 0; }
.aim-num {
	display: block;
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 400;
	font-variant-numeric: lining-nums; /* 1, 10 - not old-style figures that read like I, IO */
	line-height: 1;
	color: var(--color-gold-light);
	margin-bottom: 0.6rem;
	transition: color 0.4s ease;
}
.aim-text {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--color-cream);
}

/* ========================================
   LISTS
======================================== */
.vessels-head { max-width: 760px; margin-bottom: var(--space-lg); }
.vessel-list { columns: 3; column-gap: var(--space-xl); margin-bottom: 0; }
.craft-list li { break-inside: avoid; transition: transform 0.3s ease, color 0.3s ease; }
.craft-list li::before { transition: width 0.3s ease; }
.vessel-list li:hover,
.checklist li:hover { transform: translateX(4px); color: var(--color-charcoal); }
.vessel-list li:hover::before,
.checklist li:hover::before { width: 14px; }

.checklist-grid { grid-template-columns: 1fr 1.4fr; align-items: start; }
.checklist { columns: 2; column-gap: var(--space-lg); margin-bottom: var(--space-md); }
.after-list { margin-bottom: var(--space-md); color: var(--color-taupe); }

/* ========================================
   CALL TO ACTION BAND
======================================== */
.cta-band {
	padding: var(--space-xl) 0;
	text-align: center;
	background-color: var(--color-cream);
	border-top: 1px solid var(--color-taupe-light);
}
.cta-title { font-size: clamp(2.4rem, 5vw, 4.25rem); margin-bottom: var(--space-sm); }
.cta-title em { font-style: italic; color: var(--color-gold); }
.cta-text { max-width: 560px; margin: 0 auto var(--space-md); color: var(--color-taupe); }

/* ========================================
   PAGE HEADER (inner pages)
   .page-header / .page-title / .page-subtitle are the template's own
   rules from maison_doree/maison-templatemo.html (inline <style> there).
======================================== */
.page-header {
	padding-top: calc(var(--space-xl) + 80px);
	padding-bottom: var(--space-xl);
	background-color: var(--color-ivory);
	text-align: center;
}
.page-title {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 300;
	margin-bottom: var(--space-sm);
}
.page-title em {
	font-style: italic;
	color: var(--color-gold);
}
.page-subtitle {
	font-size: 1.1rem;
	color: var(--color-taupe);
	max-width: 600px;
	margin: 0 auto;
}
/* site adjustments */
.page-header { padding-top: calc(var(--space-xl) + 70px); padding-bottom: var(--space-lg); line-height: 1.6; }
.page-title { line-height: 1.1; }
.page-header + section { background-color: var(--color-cream); }
.page-header + .contact { background-color: var(--color-cream); }
.page-header + .contact .contact-form-wrapper { border: 1px solid rgba(196, 181, 165, 0.45); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05); }
.crumbs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--color-taupe);
	margin-bottom: var(--space-md);
}
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--color-taupe-light); }
.crumbs a { transition: color 0.3s ease; }
.crumbs a:hover { color: var(--color-gold); }
.page-label { margin-bottom: var(--space-xs); }
.page-header .page-title,
.page-header .page-label,
.page-header .page-subtitle,
.page-header .crumbs,
.page-header .services-count,
.page-header .services-index {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp 0.8s ease forwards;
}
.page-header .crumbs { animation-delay: 0.1s; }
.page-header .page-label { animation-delay: 0.2s; }
.page-header .page-title { animation-delay: 0.3s; }
.page-header .page-subtitle { animation-delay: 0.45s; max-width: 680px; }
.page-header .services-count { animation-delay: 0.55s; }
.page-header .services-index { animation-delay: 0.65s; }

/* ========================================
   SERVICES PAGE
======================================== */
.services-count {
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--color-gold-dark);
}
.services-index {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	max-width: 980px;
	margin: var(--space-md) auto 0;
}
.services-index a {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	border: 1px solid var(--color-taupe-light);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.services-index a:hover {
	background: var(--color-charcoal);
	border-color: var(--color-charcoal);
	color: var(--color-cream);
	transform: translateY(-2px);
}

/* Section 1: split background (subtle 104deg diagonal, as in the footer),
   introduction left 65%, large service count right 35% */
.svc-intro {
	--svc-left: var(--color-cream);
	--svc-right: var(--color-ivory);
	padding: calc(var(--space-lg) + 120px) 0 var(--space-lg);
	background: linear-gradient(104deg, var(--svc-left) 0%, var(--svc-left) 68%, var(--svc-right) 68%, var(--svc-right) 100%);
	overflow: hidden;
}
.svc-intro-grid {
	display: grid;
	grid-template-columns: 65fr 35fr;
	align-items: center;
	gap: var(--space-lg);
}
.svc-intro-text .crumbs { justify-content: flex-start; margin-bottom: var(--space-md); }
.svc-intro-label { color: var(--color-gold); margin-bottom: var(--space-sm); }
.svc-intro-title { font-size: clamp(2.6rem, 5vw, 4.25rem); margin-bottom: var(--space-md); }
.svc-intro-title em { font-style: italic; color: var(--color-gold); }
.svc-intro-desc { max-width: 560px; }
.svc-intro-count { text-align: center; }
.svc-count-num {
	font-family: var(--font-display);
	font-size: clamp(5.5rem, 10vw, 9.5rem);
	font-weight: 400;
	font-variant-numeric: lining-nums;
	line-height: 0.9;
	color: var(--color-gold);
}
.svc-count-label {
	margin-top: var(--space-sm);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-charcoal);
}
.svc-count-rule {
	display: block;
	width: 90px;
	height: 1px;
	margin: var(--space-sm) auto 0;
	background: var(--color-gold);
}
/* staggered entrance (the section is in view on load) */
.svc-intro .crumbs,
.svc-intro-label { opacity: 0; animation: svcFade 0.4s ease forwards; }
.svc-intro .crumbs { animation-delay: 0.1s; }
.svc-intro-label { animation-delay: 0.2s; }
.svc-intro-title { opacity: 0; transform: translateX(-40px); animation: svcSlideIn 0.6s ease 0.35s forwards; }
.svc-intro-desc { opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s ease 0.6s forwards; }
.svc-count-num { opacity: 0; transform: scale(0.85); animation: svcScaleIn 0.7s ease 0.5s forwards; }
.svc-count-label { opacity: 0; animation: svcFade 0.5s ease 0.95s forwards; }
.svc-count-rule { transform: scaleX(0); animation: svcRule 0.6s ease 1.15s forwards; }
@keyframes svcFade { to { opacity: 1; } }
@keyframes svcSlideIn { to { opacity: 1; transform: none; } }
@keyframes svcScaleIn { to { opacity: 1; transform: none; } }
@keyframes svcRule { to { transform: scaleX(1); } }
@media (max-width: 1024px) {
	.svc-intro-grid { gap: var(--space-md); }
	.svc-intro { padding-top: calc(var(--space-md) + 120px); background: linear-gradient(104deg, var(--svc-left) 0%, var(--svc-left) 70%, var(--svc-right) 70%, var(--svc-right) 100%); }
}
@media (max-width: 680px) {
	/* stacked: the count gets its own darker band, full width */
	.svc-intro { background: var(--svc-left); padding-bottom: 0; }
	.svc-intro-grid { grid-template-columns: 1fr; gap: var(--space-md); }
	.svc-intro-count {
		margin: 0 calc(-1 * var(--space-md));
		padding: var(--space-md);
		background: var(--svc-right);
	}
	.svc-count-num { font-size: 5.75rem; }
}
@media (max-width: 576px) {
	.svc-intro-count { margin: 0 -1rem; padding: var(--space-md) 1rem; }
}
@media (min-width: 681px) and (max-width: 860px) {
	.svc-intro-title { font-size: 2.4rem; }
	.svc-count-num { font-size: 5.5rem; }
	.svc-count-label { letter-spacing: 2px; font-size: 0.75rem; }
}

/* Covered ports (country-domain multi-port block on Services) */
.covered-ports-section {
	padding: var(--space-xl) 0;
	background-color: var(--color-ivory);
	border-bottom: 1px solid var(--color-taupe-light, rgba(0, 0, 0, 0.08));
}
.covered-ports-head { max-width: 40rem; margin-bottom: var(--space-md); }
.covered-ports-head .text-label { margin-bottom: var(--space-sm); }
.covered-ports-head .heading-display {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: var(--space-sm);
}
.covered-ports-lead { max-width: 40rem; margin: 0; }
.covered-ports-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
	margin: var(--space-md) 0;
}
.covered-port-card {
	background: var(--color-cream, #fff);
	border: 1px solid var(--color-taupe-light, rgba(0, 0, 0, 0.1));
	padding: 1.15rem 1.1rem;
	min-width: 0;
}
.covered-port-card h3 {
	margin: 0 0 0.5rem;
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-charcoal, #2B211D);
}
.covered-port-card p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--color-taupe, #5c534c);
}
.covered-ports-note {
	margin: 0;
	max-width: 48rem;
	font-weight: 600;
	line-height: 1.55;
}
@media (max-width: 900px) {
	.covered-ports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
	.covered-ports-grid { grid-template-columns: 1fr; }
	.covered-ports-section { padding: var(--space-lg) 0; }
}

.svc-detail { padding: var(--space-xl) 0; background-color: var(--color-cream); overflow: hidden; }
.svc-detail--flip { background-color: var(--color-ivory); }
.svc-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: var(--space-xl);
	align-items: center;
}
.svc-detail--flip .svc-detail-media { order: 2; }
.svc-detail-media { position: relative; }
.svc-detail-frame { aspect-ratio: 4 / 4.4; overflow: hidden; position: relative; z-index: 1; }
.svc-detail-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.svc-detail-media:hover .svc-detail-frame img { transform: scale(1.04); }
.svc-detail-num {
	position: absolute;
	top: calc(-1 * var(--space-md));
	right: calc(-1 * var(--space-sm));
	z-index: 2;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(3.5rem, 6vw, 5.5rem);
	line-height: 1;
	color: var(--color-gold);
}
.svc-detail--flip .svc-detail-num { right: auto; left: calc(-1 * var(--space-sm)); }
.svc-detail-content .text-label { margin-bottom: var(--space-sm); }
.svc-detail-title { font-size: clamp(2.1rem, 3.4vw, 3rem); margin-bottom: var(--space-md); }
.svc-detail-content > .text-body { margin-bottom: var(--space-sm); }
.spec-list {
	list-style: none;
	columns: 2;
	column-gap: var(--space-lg);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-taupe-light);
}
.spec-list li {
	position: relative;
	break-inside: avoid;
	padding-left: var(--space-md);
	margin-bottom: 0.6rem;
	font-size: 1rem;
	transition: color 0.3s ease, transform 0.3s ease;
}
.spec-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 8px;
	height: 1px;
	background: var(--color-gold);
	transition: width 0.3s ease;
}
.spec-list li:hover { color: var(--color-charcoal); transform: translateX(3px); }
.spec-list li:hover::before { width: 14px; }

/* ========================================
   PORTS PAGE
======================================== */
.map-block { margin-top: var(--space-xl); }
.map-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
	flex-wrap: wrap;
}
.map-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; margin-top: var(--space-xs); }
.map-frame {
	position: relative;
	padding: var(--space-sm);
	background: var(--color-warm-white);
	border: 1px solid var(--color-taupe-light);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
	transition: border-color 0.4s ease;
}
.map-frame:hover { border-color: var(--color-gold-light); }
.map-frame iframe { display: block; width: 100%; height: 460px; border: 0; filter: saturate(0.85); }
/* Contact page: the same map, compact (300 / 260 / 235px) */
.map-block--compact { margin-top: var(--space-xl); }
.map-block--compact .map-head { margin-bottom: var(--space-sm); }
.map-block--compact .map-title { font-size: 1.5rem; }
.map-block--compact .map-frame {
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--color-gold-light);
	box-shadow: none;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.map-block--compact .map-frame:hover { border-color: var(--color-gold); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
.map-block--compact .map-frame iframe { height: 300px; }
@media (max-width: 1024px) { .map-block--compact .map-frame iframe { height: 260px; } }
@media (max-width: 576px) { .map-block--compact { margin-top: var(--space-lg); } .map-block--compact .map-frame iframe { height: 235px; } }

.port-prose-section { padding: var(--space-xl) 0 var(--space-2xl); background: var(--color-ivory); }
.prose { color: var(--color-charcoal-soft); font-size: 1.08rem; line-height: 1.8; }
.prose h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 2.8vw, 2.4rem);
	line-height: 1.15;
	color: var(--color-charcoal);
	margin: var(--space-lg) 0 var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-taupe-light);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { margin-bottom: var(--space-sm); }
.prose ul {
	list-style: none;
	columns: 2;
	column-gap: var(--space-lg);
	margin: var(--space-sm) 0 var(--space-md);
	padding: var(--space-md);
	background: var(--color-warm-white);
}
.prose li {
	position: relative;
	break-inside: avoid;
	padding-left: var(--space-md);
	margin-bottom: 0.45rem;
	font-size: 1rem;
}
.prose li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 8px;
	height: 1px;
	background: var(--color-gold);
}
.prose-sign {
	margin-top: var(--space-lg);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--color-gold-dark);
}
.prose-sign strong { font-weight: 400; }

/* ========================================
   CONTACT & QUOTE
======================================== */
.contact-page .contact-grid { align-items: start; }
.contact-title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.contact-details { margin-top: var(--space-md); }
.contact-item { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-taupe-light); }
.contact-item-value a { word-break: break-word; }

.quote-grid { grid-template-columns: 1fr 1.6fr; align-items: start; }
.quote-aside { position: sticky; top: 120px; }
.steps { list-style: none; counter-reset: step; margin-bottom: var(--space-md); }
.steps li {
	counter-increment: step;
	position: relative;
	padding: 0 0 var(--space-md) 4rem;
	color: var(--color-charcoal-soft);
	font-size: 1rem;
}
.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -0.35rem;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 2rem;
	color: var(--color-gold);
}
.steps strong { display: block; font-weight: 500; color: var(--color-charcoal); margin-bottom: 0.15rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
	padding: 0.4rem 0.9rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid var(--color-gold-light);
	color: var(--color-gold-dark);
}

.form-title { margin-bottom: var(--space-xs); }
.form-intro { font-size: 1rem; color: var(--color-taupe); margin-bottom: var(--space-md); }
.form-intro a,
.form-hint a { color: var(--color-gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
.field { margin-bottom: var(--space-md); }
.req { color: var(--color-gold-dark); }
.form-section-label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-md) 0;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}
.form-section-label::after { content: ''; flex: 1; height: 1px; background: var(--color-taupe-light); }
.form-label { transition: color 0.3s ease; }
.field:focus-within .form-label { color: var(--color-gold-dark); }
.form-input,
.form-textarea { color: var(--color-charcoal); border-radius: 0; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.form-input:focus,
.form-textarea:focus { box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.12); background-color: var(--color-cream); }
.form-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B8860B' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 10px 6px;
	padding-right: 2.5rem;
}
.form-file { padding: 0.65rem 1rem; cursor: pointer; }
.form-file::file-selector-button {
	margin-right: 1rem;
	padding: 0.5rem 1rem;
	font-family: var(--font-body);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--color-charcoal);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.form-file:hover::file-selector-button { background: var(--color-charcoal); color: var(--color-cream); }
.field.is-invalid .form-input,
.field.is-invalid .form-textarea { border-color: #A23B2A; }
.field-error { min-height: 0; font-size: 0.85rem; color: #A23B2A; margin-top: 0.3rem; }
.field-error:empty { margin-top: 0; }
.form-submit { position: relative; overflow: hidden; isolation: isolate; }
.form-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-gold-dark);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(.6, .1, .2, 1);
	z-index: -1;
}
.form-submit:hover { background-color: var(--color-charcoal); }
.form-submit:hover::before { transform: scaleX(1); transform-origin: left; }
.form-hint { margin-top: var(--space-sm); font-size: 0.9rem; color: var(--color-taupe); }
.form-hint--top { margin: 0 0 var(--space-md); }
.form-note { display: none; margin-top: var(--space-sm); padding: var(--space-sm); font-size: 0.95rem; border-left: 2px solid #A23B2A; background: rgba(162, 59, 42, 0.06); }
.form-note.show { display: block; animation: fadeUp 0.4s ease both; }
.form-note.is-info { border-left-color: var(--color-gold); background: rgba(184, 134, 11, 0.08); color: var(--color-charcoal); }

/* ========================================
   FOOTER
======================================== */
.footer-grid { grid-template-columns: 1.4fr 0.8fr 0.9fr 1.5fr; }
.footer-logo { line-height: 1.1; }
/* Image logo on a minimal light panel: its dark lettering needs it on charcoal */
.footer-logo--img {
	display: inline-block;
	max-width: 100%;
	padding: 0.85rem 1.1rem;
	background: #FAF9F6;
	line-height: 0;
	transition: box-shadow 0.3s ease;
}
.footer-logo--img img { display: block; width: 250px; max-width: 100%; height: auto; }
.footer-logo--img:hover { box-shadow: 0 0 0 1px var(--color-gold-light); }

/* Stacked footer brand: ship artwork above the company name, centred in
   column 1. The artwork's dark hull needs a light ground (1.2:1 contrast on
   the dark footer), so it sits in a compact rounded champagne frame. */
.footer-brand--stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-right: 0;
}
.footer-ship {
	display: inline-block;
	line-height: 0;
	padding: 12px 14px;
	background: #FFF8ED;
	border: 1px solid var(--color-gold-light);
	border-radius: 18px;
	margin-bottom: var(--space-sm);
	transition: border-color 0.3s ease, transform 0.4s ease;
}
.footer-ship img { display: block; width: 170px; height: auto; }
.footer-ship:hover { transform: translateY(-3px); border-color: var(--color-gold); }
.footer-name { margin-bottom: var(--space-sm); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.5rem; }
.footer-name-1,
.footer-name-2 { display: block; }
.footer-name-1 { color: var(--color-cream); }
.footer-name-2 { color: var(--color-gold-light); }
.footer-name small { margin-top: 0.4rem; letter-spacing: 0.25em; }
.footer-brand--stack .footer-tagline { max-width: 300px; margin-bottom: 0; }
.footer-logo small {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-taupe);
}
.footer-column-title { font-size: 0.85rem; }
.footer-links a { position: relative; }
.footer-links a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--color-gold-light);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s ease;
}
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-contact-list { list-style: none; }
.footer-contact-list li { font-size: 0.95rem; color: var(--color-taupe-light); margin-bottom: var(--space-sm); line-height: 1.55; }
.footer-contact-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-taupe);
	margin-bottom: 0.15rem;
}
.footer-contact-list a { color: var(--color-taupe-light); transition: color 0.3s ease; word-break: break-word; }
.footer-contact-list a:hover { color: var(--color-gold-light); }
.footer-bottom { gap: var(--space-md); }
.footer-keywords { font-size: 0.85rem; color: var(--color-taupe); }

/* ========================================
   PORT PAGES (text only: no photographs or maps)
   Hero, then one numbered row per reference section: number + heading
   on the left (sticky), text and lists on the right, an animated gold
   rule above each row, list items entering one after another.
======================================== */
.port-hero {
	padding: calc(var(--space-xl) + 110px) 0 var(--space-xl);
	background-color: var(--color-cream);
}
.port-hero .crumbs { justify-content: flex-start; margin-bottom: var(--space-md); }
.port-label { margin-bottom: var(--space-sm); }
.port-title { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: var(--space-md); }
.port-rule {
	display: block;
	width: 120px;
	height: 1px;
	margin-bottom: var(--space-md);
	background: var(--color-gold);
	transform-origin: left;
}
.port-lede { max-width: 760px; font-size: 1.25rem; }
.port-hero .crumbs,
.port-hero .port-label,
.port-hero .port-title,
.port-hero .port-lede {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp 0.8s ease forwards;
}
.port-hero .crumbs { animation-delay: 0.1s; }
.port-hero .port-label { animation-delay: 0.2s; }
.port-hero .port-title { animation-delay: 0.35s; }
.port-hero .port-lede { animation-delay: 0.6s; }
.port-hero .port-rule { transform: scaleX(0); animation: ruleIn 1s ease 0.5s forwards; }
@keyframes ruleIn { to { transform: scaleX(1); } }

.port-section { padding: var(--space-lg) 0; background-color: var(--color-cream); }
.port-section--alt { background-color: var(--color-ivory); }
.port-divider {
	display: block;
	height: 1px;
	margin-bottom: var(--space-lg);
	background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-taupe-light) 45%, transparent 100%);
	transform-origin: left;
}
.js .port-divider.reveal { opacity: 1; transform: scaleX(0); transition: transform 1.2s ease; }
.js .port-divider.reveal.visible { transform: scaleX(1); }
.port-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
	gap: var(--space-xl);
	align-items: start;
}
.port-side { position: sticky; top: 150px; }
.port-num {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 2.75rem;
	line-height: 1;
	color: var(--color-gold);
	margin-bottom: var(--space-sm);
	transition: color 0.4s ease, transform 0.4s ease;
	transform-origin: left;
}
.port-section:hover .port-num { color: var(--color-gold-dark); transform: scale(1.08); }
.port-h2 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); line-height: 1.2; }
.port-body > * + * { margin-top: var(--space-sm); }
.port-p { font-size: 1.08rem; line-height: 1.8; }
.port-list {
	list-style: none;
	columns: 2;
	column-gap: var(--space-lg);
	padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
	border-left: 1px solid var(--color-taupe-light);
	transition: border-color 0.4s ease;
}
.port-section:hover .port-list { border-left-color: var(--color-gold); }
.port-list li {
	position: relative;
	break-inside: avoid;
	padding: 0.2rem 0 0.2rem var(--space-md);
	font-size: 1rem;
	transition: color 0.3s ease, transform 0.3s ease;
}
.port-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.95em;
	width: 8px;
	height: 1px;
	background: var(--color-gold);
	transition: width 0.3s ease;
}
.port-list li:hover { color: var(--color-charcoal); transform: translateX(4px); }
.port-list li:hover::before { width: 14px; }
/* list items enter one after another once the list is in view */
.js .port-list.reveal { opacity: 1; transform: none; }
.js .port-list.reveal li { opacity: 0; transform: translateX(-12px); transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease; transition-delay: calc(var(--i, 0) * 35ms); }
.js .port-list.reveal.visible li { opacity: 1; transform: none; }
.js .port-list.reveal.visible li:hover { transform: translateX(4px); transition-delay: 0ms; }
.port-sign {
	margin-top: var(--space-md);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--color-gold-dark);
}
.port-sign strong { font-weight: 400; }
@media (max-width: 1024px) {
	.port-grid { grid-template-columns: 1fr; gap: var(--space-md); }
	.port-side { position: static; }
}
@media (max-width: 768px) {
	.port-list { columns: 1; }
	.port-hero { padding-top: calc(var(--space-lg) + 110px); }
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1360px) {
	.logo--img img { width: 250px; }
	.nav-main { gap: 1.75rem; }
	.nav-main > a:not(.nav-cta), .nav-drop-trigger { font-size: 0.95rem; }
	.logo { font-size: 1.5rem; }
}

@media (max-width: 1200px) {
	.svc-preview-grid { grid-template-columns: repeat(2, 1fr); }
	.hero-content { padding-top: calc(var(--space-md) + 80px); }
}

/* Six links + logo need more room than the template's four: the drawer
   takes over below 1100px (template: 860px). */
@media (max-width: 1100px) {
	.nav-main { display: none; }
	.menu-toggle { display: flex; }
	.logo { font-size: 1.45rem; }
	.logo--img img { width: 230px; }
}

@media (max-width: 1024px) {
	/* services grid: Provisions full width on top, 2x2 below */
	.svc-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 340px repeat(2, 260px); }
	.svc-mosaic > .collection-item:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
	.intro-grid,
	.svc-detail-grid,
	.checklist-grid,
	.quote-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
	.svc-detail--flip .svc-detail-media { order: 0; }
	.svc-detail-frame { aspect-ratio: 16 / 10; }
	.svc-detail-num { right: var(--space-sm); top: calc(-1 * var(--space-md)); }
	.svc-detail--flip .svc-detail-num { left: auto; right: var(--space-sm); }
	.quote-aside { position: static; }
	.intro-grid .featured-image-wrapper { max-width: 720px; }
	.photo-frame { margin-right: var(--space-md); }
	.vessel-list { columns: 2; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	.hero-content { padding-top: var(--space-lg); }
	.hero-image { height: 420px; margin-top: 115px; } /* = header height with the image logo */
	.page-header { padding-top: calc(var(--space-lg) + 80px); }
	.contact-grid { gap: var(--space-lg); }
}

@media (max-width: 768px) {
	.spec-list,
	.prose ul,
	.checklist { columns: 1; }
	.form-row { grid-template-columns: 1fr; }
	.contact-form-wrapper { padding: var(--space-md); }
	.map-frame iframe { height: 360px; }
}

@media (max-width: 576px) {
	.container { padding: 0 1rem; }
	.svc-mosaic { grid-template-columns: 1fr; grid-template-rows: 280px repeat(4, 220px); gap: var(--space-sm); }
	.svc-mosaic > .collection-item:nth-child(1) { grid-column: 1; }
	.svc-mosaic > .collection-item:nth-child(1) .collection-name { font-size: 1.9rem; }
	.hero-actions { flex-direction: row; align-items: center; column-gap: 1.5rem; }
	.logo { font-size: 1.2rem; }
	.logo--img img { width: 180px; }
	.logo-sub { font-size: 0.55rem; letter-spacing: 0.12em; }
	.hero-image { height: 300px; margin-top: 104px; }
	.aim-cell { max-width: 280px; }
	.vessel-list { columns: 1; }
	.ship-panel { padding: var(--space-md); }
	.photo-frame { margin-right: var(--space-sm); }
	.photo-frame::before { inset: var(--space-sm) calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) var(--space-sm); }
	.prose ul { padding: var(--space-sm); }
	.map-frame { padding: 0.5rem; }
	.map-frame iframe { height: 320px; }
	.mobile-nav { padding: var(--space-lg) var(--space-md); }
	.mobile-nav-links a { font-size: 1.75rem; }
	.svc-detail-num { font-size: 3rem; }
	.cta-title { font-size: 2.3rem; }
	.contact-item-value { font-size: 1.2rem; }
}

/* Why Choose Us circles: 5 per row from 1280px, 3 from 740px, 2 from
   480px, 1 below */
@media (max-width: 1279px) { .aims-grid { --aim-cols: 3; } }
@media (max-width: 739px)  { .aims-grid { --aim-cols: 2; --aim-gap: var(--space-sm); } }
@media (max-width: 479px)  { .aims-grid { --aim-cols: 1; } }

/* ========================================
   REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
	.js .reveal { opacity: 1; transform: none; }
}