/*
Theme Name: Ceylinco Tours
Theme URI: https://ceylincotours.com
Author: Ceylinco Tours (Pvt) Ltd
Author URI: https://ceylincotours.com
Description: Bespoke WordPress theme for Ceylinco Tours, tailor-made Sri Lanka tours by Ceylinco Tours (Pvt) Ltd.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ceylon-holidays
Domain Path: /languages/
Tags: one-column, two-columns, custom-menu, full-width-template, theme-options, threaded-comments,
*/
body {
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: var(--lh-body);
	letter-spacing: 0.4px;
	font-weight: 400;
	margin: 0;
}
* {
	background-repeat: no-repeat;
}
a, button {
	-webkit-transition: ease-out all 0.3s;
	-moz-transition: ease-out all 0.3s;
	transition: ease-out all 0.3s;
}
a {
	text-decoration: none;
	color: var(--ink);
}
a:hover, a:active {
	color: var(--teal) !important;
	text-decoration: none;
}
p {
	margin: 0;
}
img {
	max-width: 100%;
	height: auto;
}
hr {
	border-top: 1px solid var(--border);
	border-bottom: none;
	margin: 20px 0;
}
h1, h2, h3, h4, .h4, h5, h6 {
	margin-bottom: 0;
	font-family: var(--font-body);
}
h1, .h1 {
	font-size: var(--size-display-l);
	line-height: 1.0;
	font-weight: 400;
	/* Titles are sentence case, per review. Overrides the brand sheet's
	   Display L capitals; the wordmark keeps its own uppercase. */
	letter-spacing: 0.01em;
}
h2, .h2 {
	font-size: var(--size-display-m);
	line-height: 1.1;
	font-weight: 400;
}
h3, .h3 {
	font-size: var(--size-display-s);
	line-height: 1.0;
	font-weight: 400;
}
h4, .h4 {
	font-size: 24px;
	line-height: 31px;
	font-weight: 600;
}
h5, .h5 {
	font-size: 20px;
	line-height: 31px;
	font-weight: 600;
}
.f-w-400 {
	font-weight: 400;
}
.f-w-500 {
	font-weight: 500;
}
.f-w-600 {
	font-weight: 600;
}
.f-w-700 {
	font-weight: 700;
}

.color-black {
	color: var(--ink);
}
.color-gray {
	color: var(--slate);
}
.color-white, .color-white a {
	color: var(--ivory)!important;
}
.color-white-trans {
	color: color-mix(in srgb, var(--ivory) 72%, transparent);
}
.color-orange {
	color: var(--red-deep);
}
.color-green {
	color: var(--teal);
}
.bg-white {
	background-color: var(--ivory);
}
.bg-white-dark {
	background-color: var(--linen);
}
.bg-light-blue {
	background-color: var(--teal);
}
.bg-black-transparent {
	background-color: var(--overlay-ink-soft);
}
.bg-light-green {
	background-color: var(--teal-wash);
}
.bg-dark-grey {
    background-color: var(--ink-raised);
}

.p-t-5 {
	padding-top: 5px;
}
.p-b-5 {
	padding-bottom: 5px;
}
.p-b-10 {
	padding-bottom: 10px;
}
.p-t-10 {
	padding-top: 10px;
}
.p-t-15 {
	padding-top: 15px;
}
.p-b-15 {
	padding-bottom: 15px;
}
.p-t-20 {
	padding-top: 20px;
}
.p-b-20 {
	padding-bottom: 20px;
}
.p-b-25 {
	padding-bottom: 25px;
}
.p-t-30 {
	padding-top: 30px;
}
.p-b-30 {
	padding-bottom: 30px;
}
.p-t-40 {
	padding-top: 40px;
}
.p-b-40 {
	padding-bottom: 40px;
}
.p-t-50 {
	padding-top: 50px;
}
.p-b-50 {
	padding-bottom: 50px;
}
.p-t-60 {
	padding-top: 60px;
}
.p-b-60 {
	padding-bottom: 60px;
}
.p-t-70 {
	padding-top: 70px;
}
.p-b-70 {
	padding-bottom: 70px;
}
.p-t-80 {
	padding-top: 80px;
}
.p-b-80 {
	padding-bottom: 80px;
}
.p-t-90 {
	padding-top: 90px;
}
.p-b-90 {
	padding-bottom: 90px;
}
.p-t-100 {
	padding-top: 100px;
}
.p-b-100 {
	padding-bottom: 100px;
}
.p-t-110 {
	padding-top: 110px;
}
.p-b-110 {
	padding-bottom: 110px;
}
.p-t-120 {
	padding-top: 120px;
}
.p-b-120 {
	padding-bottom: 120px;
}
.p-t-150 {
	padding-top: 150px;
}
.p-b-150 {
	padding-bottom: 150px;
}
.p-b-0 {
	padding-bottom: 0;
}
.p-t-0 {
	padding-bottom: 0;
}
.p-r-5 {
	padding-right: 5px;
}
.p-l-5 {
	padding-left: 5px;
}
.no-padding {
	padding: 0;
}
.m-b-5 {
	margin-bottom: 5px;
}
.m-b-10 {
	margin-bottom: 10px;
}
.m-b-15 {
	margin-bottom: 15px;
}
.m-b-20 {
	margin-bottom: 20px;
}
.m-b-30 {
	margin-bottom: 30px;
}
.m-b-40 {
	margin-bottom: 40px;
}
.m-b-50 {
	margin-bottom: 50px;
}
.m-b-60 {
	margin-bottom: 60px;
}
.m-r-5 {
	margin-right: 5px;
}
.m-r-10 {
	margin-right: 10px;
}
.m-r-15 {
	margin-right: 15px;
}
.m-r-20 {
	margin-right: 20px;
}
.m-r-25 {
	margin-right: 25px;
}
.m-r-30 {
	margin-right: 30px;
}
.m-l-5 {
	margin-left: 5px;
}
.m-l-10 {
	margin-left: 10px;
}
.m-l-15 {
	margin-left: 15px;
}
.m-l-20 {
	margin-left: 20px;
}
.m-l-25 {
	margin-left: 25px;
}
.m-l-30 {
	margin-left: 30px;
}
.no-margin {
	margin: 0;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-justify {
	text-align:justify;
}
.text-uppercase {
	text-transform: uppercase;
}
.clearfix {
	clear: both;
}
#main {
	overflow: hidden;
}
label {
	margin: 0;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
/* Templates pair .primary-btn with legacy utility classes such as
   .bg-light-blue; the button role must win that collision. */
.primary-btn,
.primary-btn.bg-light-blue,
.primary-btn.bg-light-green {
	border-radius: 30px;
	padding: 10px 30px 10px 60px;
	position: relative;
	background: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
	display: inline-block;
    min-width: 160px;
}
.secondary-btn {
	border-radius: 30px;
	padding: 10px 30px;
	position: relative;
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-fg);
	display: inline-block;
	line-height: 19px;
	border: none;
}
.primary-btn:hover, .secondary-btn:hover {
	color: var(--ivory)!important;
	cursor: pointer;
}
.primary-btn:hover {
	background: var(--ink-raised);
}
.secondary-btn:hover {
	background: var(--teal-deep);
}
.primary-btn.no-hover:hover {
	color: var(--ivory)!important;
	cursor: pointer;
	box-shadow: none;
}
.primary-btn:before {
	content: "";
	width: 13px;
	height: 13px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 L12 4 M6 4 h6 v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 L12 4 M6 4 h6 v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
}
.primary-btn.sm:before {
	width: 11px;
	height: 11px;
	left: 20px;
}
.primary-btn.sm {
	padding: 3px 20px 3px 45px;
    min-width: unset;
}
.float-left {
	display: inline-block;
	float: left;
}
.float-right {
	display: inline-block;
	float: right;
}
.display-inline-block {
	display: inline-block;
}

/*home-page*/

/*header*/
.header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--ivory);
	border-bottom: 1px solid var(--border);
}

.header-menu li {
	display: inline-block;
	position: relative;
}
.header-menu li a {
	padding: 0 15px 38px;
	font-size: 17px;
}
.custom-cont-95 {
	max-width: 95%;
}

.whatsapp-icon {
	padding: 7px 17px;
	border-radius: 30px;
	margin: 0 20px;
	cursor: pointer;
}
.header-right i {
	font-size: 30px;
	line-height: 30px;
}
.sub-menu {
	position: absolute;
    top: 66px;
    left: 0;
    width: 280px;
    cursor: pointer;
    box-shadow: var(--shadow-raised);
    background-color: color-mix(in srgb, var(--teal) 90%, transparent);
    z-index: 9999;
    -webkit-transition: 0.4s all ease-out;
    -moz-transition: 0.4s all ease-out;
    transition: 0.4s all ease-out;
    transform: translateY(40px);
    opacity: 0;
    visibility: hidden;
}
.header-menu>li:hover > .sub-menu {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}
.sub-menu li {
    display: block;
}
.sub-menu li a {
	color: var(--ivory);
    width: 100%;
    display: block;
    padding: 7px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--ivory) 22%, transparent);
    display: block;
}
.sub-menu li:last-child a {
	border: none;
}
.sub-menu li a:hover {
	color: var(--ivory)!important;
	background-color: var(--teal) !important;
}
/*slide menu*/
.slide_menu_open {
	cursor: pointer;
}
.slide-menu-hide {
	position: fixed;
	right: -640px;
	top: 0;
	height: 100%;
	min-width: 330px;
	max-width: 100%;
	background: var(--ink);
	color: var(--ivory);
	z-index: 9999;
	overflow-x: hidden;
	border-left: 1px solid var(--ink-raised);
}
.slide-menu .slide-menu-form {
	padding: 30px;
	vertical-align: middle;
}
.slide-menu .slide_menu_close {
	position: absolute;
	right: 20px;
	top: 20px;
	border: none;
	text-align: right;
	padding: 0 10px;
}
.slide-menu-form .primary-btn {
	padding: 5px 20px 5px 50px;
	min-width: 155px;
}
.slide-menu-form .primary-btn:before {
	left: 24px;
}
.slide-menu-list li a {
	width: 100%;
	display: block;
}
/*intro-section*/
.intro {
	position: relative;
}
.intro img {
	width: 100%;
}
.intro-inner {
	position: absolute;
	bottom: 55px;
	width: 100%;
	z-index: 999;
}
/*packages-section*/
.package {
	border-radius: 15px;
	box-shadow: var(--shadow-card);
}
.package-img {
	height: 180px;
	position: relative;
}
.package-img img {
	height: 100%;
	object-fit: cover;
	border-radius: 15px 15px 0 0 ;
	width: 100%; 
}
.package-img .no-0f-days {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 7px 11px;
	background-color: var(--overlay-ink-strong);
	border-radius: 20px;
	font-size: 15px;
	line-height: 15px;
	font-weight: 600;
	color: var(--ivory);
}
.package-img .package-offer-precentage {
	font-size: 14px;
	color: var(--ivory);
	position: absolute;
	left: 12px;
	bottom: 12px;
	line-height: 15px;
	background-color: var(--ink);
}
.package-details {
	padding: 18px 20px;
	border-radius: 0 0 15px 15px;
}
.package-details-up h2{
	min-height: 62px;
}
.sm-para {
	font-size: 15px;
}
.package-details-down {
	padding-top: 20px;
	position: relative;
}
.package-details-down:before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 L12 4 M6 4 h6 v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 L12 4 M6 4 h6 v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	position: absolute;
	right: 0px;
	bottom: 10px;
}
.package-price {
	font-size: 22px;
}
/*popular-destinations-section*/
.map img {
	max-width: initial;
}

.map-icon {
    position: absolute;
    cursor: pointer;
	scale: 1;
}
.map-icon p {
    font-size: 10px;
    line-height: 20px;
    margin: 0;
    display: inline-block;
    position: absolute;
    font-weight: 600;
    transition: all ease-out 0.3s;
}
.map-icon:hover {
	scale: 1.2;
}
.popular-destinations-right {
	display: none;
}
/*things-to-do-section*/

.custom-col-2-5 {
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
	max-width: 20%;
}
.things-item {
	margin-bottom: 60px;
}
.things-item .img-container {
	width: 140px;
	height: 140px;
	border-radius: 100%;
	border: 1px solid var(--ivory);
	position: relative;
	margin: 0 auto 18px;
	background-size: cover;
}
.things-item .img-container img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.things-caption {
	font-size: 18px;
}
.popular-destinations-right.kandy {
	display: block;
}
/*about-brand-section*/
.about-brand-desc {
    padding: 0 180px;
}

.title-area .title {
	margin-bottom: 5px;
}
/*footer-section*/
.footer-section {
	padding-top: 80px;
}
/*customer-support-section*/

.customer-support-content {
	padding: 80px 60px;
	border-radius: 20px;
}

.support-contact-detail-item {
	display: flex;
	align-items: center;
}
.para-low-line-height {
	line-height: 25px;
}
.footer-link-list li {
	margin-bottom: 12px;
}
/*.footer-socket-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}*/

/*itinerary page*/
.common-box-right {
	padding: 25px 20px;
	border-radius: 20px;
}
.common-box-left {
	padding: 30px 35px;
	border-radius: 20px;
}
.flex-align {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.price-box-offer {
	border-bottom: 1px solid var(--border);
}
.offer-text {
	font-size: 26px;
	font-weight: 700;
}
.tour-type {
	background-color: var(--teal);
	padding: 2px 20px;
	display: inline-block;
	color: var(--ivory);
	margin-right: 6px;
	line-height: 29px
}
.main-details-header-right {
	width: 130px;
	padding: 15px 20px;
	border: 1px dashed var(--border);
	border-radius: 15px;
}
.main-details-header-right p {
	line-height: 22px;
}
.main-detail-item {
	position: relative;
	margin-bottom: 10px;
}
.main-detail-item-title {
	position: absolute;
	left: 0;
}
.main-detail-item-desc {
	padding-left: 80px;
}
.main-detail-item-desc:before {
	position: absolute;
	left: 60px;
}
.main-detail-item-desc p {
	display: inline-block;
}
.route-list {
	display: inline-block;
}
.route-list li {
	display: inline-block;
	margin-right: 45px;
	position: relative;
}
.route-list li:before {
	content: '\f178';
	font-family: 'FontAwesome';
	position: absolute;
	right: -32px;
	font-weight: 400;
}
.route-list li:last-child:before {
	content: none;
}
.package-day-item-header {
	cursor: pointer;
}
.approx-time {
	font-weight: 300;
	font-size: 16px;
	margin-left: 5px;
}
.day-item-header-icon {
	background-color: var(--border);
	width: 30px;
	height: 30px;
	border-radius: 100%;
	position: relative;
	-webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.package-day-item.active .day-item-header-icon {
	transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}
.day-item-header-icon i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.package-day-item-body {
	display: block;
}
.day-item-body-title {
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
}
.day-gallery-two img {
	width: 100%;
}

.activities-list li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 14px;
}
.activities-list li:before {
    content: '»';
    position: absolute;
    left: 0;
    font-size: 25px;
    color: var(--teal-bright);
    line-height: 28px;
    font-weight: 800;
    top: -1px;
}
.activities-list.black li:before {
    color: var(--ink-muted);
}
.activity-img-cont {
	position: relative;
	margin-bottom: 20px;
}
.activity-img-cont img {
	width: 100%;
}
.activity-img-caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 10px;
}
.activities-gallery .custom-col {
	padding: 0 10px;
}
/*.day-item-hotels-list {
	padding-left: 66px;
	position: relative;
}
.day-item-hotels .day-item-body-title {
	position: absolute;
	left: 0;
	top: 2px;
}*/
.day-item-body-title{
	display:inline-block;
}
.day-item-list p{
	display:inline-block;
}

.styled-border {
	border-right: 1px dashed var(--teal);
}
.custom-col-md-2 {
	flex: 0 0 14%;
    max-width: 14%;
}
.custom-col-md-10 {;
	flex: 0 0 86%;
	max-width: 86%;
	padding-left: 30px;
	padding-right: 0;
}

.wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 15px;
}
.book-now-form .wpcf7-not-valid-tip {
    font-size: 14px;
}

.book-now-form textarea {
	height: 95px;
}
.book-now-form .secondary-btn {
	width: 100%;
	text-align: center;
	padding: 15px 0;
}
.day-item-header-location:before {
	content: '\f111';
	font-family: 'FontAwesome';
	position: absolute;
	left: -6px;
	font-size: 14px;
	color: var(--teal);
	line-height: 27px;
	top: 1px;
}
.inclusions-list li:before {
	color: var(--teal-bright);
}
.exclusions-list li:before {
	color: var(--red-deep);
}
.payment-types-icon {
	width: 65px;
	height: 65px;
	padding: 8px;
	background-color: var(--linen);
	border-radius: 12px;
	position: relative;
	display: inline-block;
	margin-right: 16px;
}
.payment-types-icon img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 49px;

}

/*travel-guide-page*/
.container-padding-sides {
	padding: 0 150px;
}
.travel-guide-table table {
	width: 100%;
}
.table-col-width {
	width: 230px;
}
.travel-guide-table table tr td, .travel-guide-table table tr th {
	padding: 4px 10px;
	text-align: left;
	background-color: var(--linen);
	border: 2px solid var(--ivory);
	margin-bottom: 2px;
}
.travel-guide-table table tr th {
	background-color: var(--teal);
	color: var(--ivory);
	padding: 6px 20px;
}
.td-row {
	padding: 10px;
	border-bottom: 1px solid var(--border);
}
.td-row:first-child {
	border-top: 1px solid var(--border);
}
.td-row .td-title {
	position: relative;
}
.td-row .td-title h3 {
	font-size: 22px;
}
.td-row .td-title:before {
	content: "\f107";
	font-family: fontawesome;
	position: absolute;
	top: 10px;
	right: 5px;
	width: 22px;
	height: 22px;
	background-color: var(--ink);
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	padding-top: 3px;
	color: var(--ivory);
	line-height: 16px;
}
.td-desc {
	padding-bottom: 30px;
	display: none;
}
.must-knows-desc .td-desc ul {
	margin: 15px 0;
}
.must-knows-desc .td-desc ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}
.must-knows-desc .td-desc ul li:before {
    content: '\f111';
    font-family: 'FontAwesome';
    position: absolute;
    left: 0;
    font-size: 12px;
    color: var(--teal-bright);
    line-height: 28px;
}

/*destination-page*/
.page-intro-inner {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.destination-main-intro-left p {
	margin-bottom: 20px;
}
.destination-main-intro-right {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.round-img {
	border-radius: 15px;
}
.destination-highlights-item {
	position: relative;
	margin-bottom: 30px;
}
.destination-highlights-img-inner {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	padding: 5px 0;
	border-radius: 0 0 15px 15px;
}
.main-detail-item-desc:before {
	content: '';
}
.destination-popular-things-right {
	padding: 40px 30px;
	border-radius: 20px;
	box-shadow: var(--shadow-card);
}
.popular-things-rigth-item ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 5px;
	font-weight: 600;
}
.popular-things-rigth-item ul li:before {
	content: '\f058';
	font-family: 'FontAwesome';
	position: absolute;
	left: 0;
	color: var(--teal);
	font-size: 17px;
	top: -2px;
}

/*contact-us-page*/
.contact-us-left-desc p {
	margin-bottom: 15px;
}
.contact-item {
	position: relative;
	padding-left: 80px;
}
.contact-item-label {
	position: absolute;
	left: 0;
}
.contact-right-box {
	padding: 40px 30px;
	border-radius: 20px;
	box-shadow: var(--shadow-card);
}
.contact-form .secondary-btn {
	width: unset !important;
	text-align: center !important;
	padding: 11px 50px !important;
	background-color: var(--btn-secondary-bg);
}
.contact-form textarea {
	height: 110px;
}
.page-title-inner{
	min-height:300px;
	display: flex;
  align-items: center;
  justify-content: center;
}
.page-title{
	background-color:var(--teal-deep);
	background-size:cover;
}
.container-md{
	max-width:900px;
}

/*things-todo*/
.thing-todo {
	box-shadow: var(--shadow-card);
	padding: 40px;
	margin-bottom: 50px;
}
.thing-todo-content {
	padding-left: 20px;
}

/*intro-form*/
.intro-form-container {
	display: inline-block;
}
.intro-form {
	width: 1000px;
	background-color: var(--linen);
	/*padding: 8px 15px;*/
	border-radius: 38px;
}
.intro-form .row {
	/*align-items: center;*/
	margin: 0;
}
.col-md-3.form-col {
	padding: 10px 15px 10px 50px;
	position: relative;
}
.col-md-3.form-col.no-padding {
	padding: 10px 15px 10px 15px;
}
.col-md-3.form-col.separator {
	border-right: 1px solid var(--border);
}
.intro-form-input {
	color: var(--ink);
	font-size: 16px;
	border: none;
	background-color: var(--linen);
	padding: 8px 0 8px;
	position: relative;
}
.intro-form-input:focus-visible {
	outline: none;
}
.intro-form-input::placeholder {
	color: var(--ink);
}
.intro-form-date {
    padding: 0;
    margin: 12px 0 6px 10px;
}
.intro-form-date:focus {
    color: unset;
    background-color: unset;
    border-color: unset;
    outline: 0;
    box-shadow: unset;
}
.start-date-input:before {
	content: url(img/icon-intro-form-1.png);
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-40%);
	z-index: 999;
}
.duration-input:before {
	content: url(img/icon-intro-form-2.png);
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-40%);
	z-index: 999;
}
.package-input:before {
	content: url(img/icon-intro-form-3.png);
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-40%);
	z-index: 999;
}
.intro-form-btn {
	padding: 6px 45px;
	color: var(--btn-primary-fg);

}
.intro-form-btn:before {
	content: none !important;
}
.intro-form-btn:hover {
	color: var(--btn-primary-fg) !important;
	background-color: var(--ink-raised);
    box-shadow: none;
}

/*popular-destinations-page*/
.package.destination-box .package-details-up h2 {
    min-height: unset;
}

/*inquire-page*/
.custom-container-750 {
	max-width: 750px;
}

.inquire-form-container .contact-right-box {
	padding: 40px;
}
.itinerary-intro{
	width:100%;
	height:420px;
	background-size: cover;
	background-position: center;
	background-color:var(--teal-deep);
}
.map-box{
	padding:0!important;
	overflow: hidden;
}
.map-box iframe{
	margin-bottom:-11px!important;
}
.day-gallery-two .row {
    margin-right: -8px;
    margin-left: -8px;
}
.day-gallery-two .col-md-6{
	padding-right: 8px;
    padding-left: 8px;
}

/*payment-page*/
.payment-box {
	box-shadow: var(--shadow-card);
	padding: 55px;
	border-radius: 20px;
	position: relative;
	top: -130px;
	background-color: var(--ivory);
}
.payment-page-title .page-title-inner {
	align-items: baseline;
}
.payment-page-title h2 {
	margin-top: 62px;
}
.payment-page-title {
	background-image: url(img/contact-intro-img.jpg);
	background-position: center;
}
.large-para {
	font-size: 18px;
}
.payment-box-up {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--border);
}
.payment-details-list .label-up {
	width: 140px;
	font-weight: 500;
	display: inline-block;
}
.payment-details-list .label-down {
	width: 180px;
	font-weight: 500;
	display: inline-block;
}
.payment-details-list .label-down.bold {
	font-weight: 700;
}
.payment-details-list li {
	margin-bottom: 8px;
}
.payment-box-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.payment-box-bottom-left .book-now-form-input {
	width: 270px;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 15px;
    border: 1px solid var(--border);
    color: var(--slate);
	
}
.payment-box-bottom-left .book-now-form-input:focus-visible {
    outline: none;
}
.inquire-area{
	margin-top:-130px;
}
.inquire-form textarea{
	height: 150px;
}
.off-price{
	text-decoration: line-through;
}

/*landing page*/
.bg-ash {
	background-color: var(--linen);
}
.customer-testi-video-container {
	display: flex;
	align-items: center;

    background: var(--teal-wash);

    border-radius: 0 120px 0 120px;
}
.customer-testi-video-left {
    position: relative;
}
.video-play-icon {
	width: 90px;
	height: 90px;
	background-color: var(--teal-bright);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}
.video-play-icon i {
	font-size: 45px;
	color: var(--ivory);
	line-height: 46px;
	margin-left: 9px;
}
.customer-testi-video-left img {
    width: 650px;
    border-radius: 0 0px 0 120px;
}
.customer-testi-video-right {
    padding:  0 100px 0 85px;
}
.testi-video-auth-name {
	position: relative;
	padding-left: 40px;
	font-weight: 700;
}
.testi-video-auth-name:before {
	content: '';
	width: 25px;
	height: 2px;
	background-color: var(--stone);
	position: absolute;
	top: 49%;
	transform: translateY(-50%);
	left: 0;
}
.travel-made-easy-left {
	padding-right: 60px;
}
.travel-made-easy-left p {
	margin-bottom: 25px;
}

.testi-list {
	background-image: url("img/landing-page-testi-bg.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}
.testi-list-item {
	padding: 50px 80px 50px 100px;
	border-radius: 0 30px 0 30px;
	background-color: var(--ivory);
	width: 900px;
	position: relative;
	margin-bottom: 50px;
}
.testi-list-item {
	float: right;
}
.testi-list-item:nth-child(2n) {
	float: left;
}
.testi-list-item:after {
	content: url("img/landing-page-testi-icon.png");
	position: absolute;
	top: 30px;
	left: 25px;
}

@media only screen and (max-width: 1199px) {
	/*header*/
	
	.header-menu>li>a {
    	padding: 0 9px 27px;
	}
	
	.sub-menu {
    	top: 56px;
	}
	/*intro*/
	.intro-form {
		width: 850px;
	}
	.intro-form-btn {
    	padding: 6px 30px !important;
	}
	.intro-form-input {
   	 	width: 155px;
	}
	.customer-support-content {
		padding: 0 120px 60px;
	}
	.footer-section {
    background-size: cover;
}
	/*	itinery-page*/
	.itinerary-right-container .price-box-price .secondary-btn {
		padding: 8px 11px;
	}
	/*	landing page*/
	.testi-list-item {
    	width: 825px;
	}
}

@media only screen and (max-width:992px) {
	.header-center {
		display: none;
	}
	
	.primary-slider .item img {
		min-height: 500px;
		object-fit: cover;
	}
	.intro-form {
		width: 700px;
	}
	.intro-form-input {
		width: 115px;
	}
	h1, .h1 {
		font-size: var(--size-display-l);
		line-height: 1.0;
	}
	h2, .h2 {
		font-size: var(--size-display-m);
		line-height: 1.1;
	}
	.primary-btn {
    	padding: 7px 20px 7px 50px;
	}
	.primary-btn:before {
    	left: 21px;
	}
	.package-details-up h2 {
		min-height: 130px;
	}
	.map {
		position: relative;
		width: fit-content;
		margin: 0 auto;
		padding-bottom: 30px;
	}
	.things-list .row {
		justify-content: center;
	}
	.things-list .custom-col-2-5 {
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 30%;
	}
	.things-title .primary-btn.float-right {
		 float: none!important; 
		margin-top: 28px;
	}
	.things-title {
		text-align: center;
	}
	.things-title .h1.float-left {
		float: none;
	}
	.about-brand-desc {
		padding: 0 100px;
	}
	.support-contact-detail-item {
		justify-content: center;
		margin-top: 30px;
	}
	.footer-link-list li a {
		display: block;
	}
	/*itinery-page	*/
	.itinerary-right-container {
		margin-top: 40px;
	}
	.itinerary-left-container .package-offers {
		display: none;
	}
	.itinerary-right-container .price-box {
		margin-bottom: 40px;
	}
	.map-box.common-box-right {
		margin-bottom: 40px;
	}
	.itinerary-right-container .price-box-price .secondary-btn {
		padding: 10px 30px;
	}
	.package-other-details {
		margin: 0;
	}
	.popular-things-rigth-item-b {
		display: block;
	}
	.destination-main-intro-right {
		padding-top: 10px;
	}
	.container-padding-sides {
		padding: 0 80px;
	}
	/*	payment-page*/
	.payment-box-up {
		flex-direction: column;
		text-align: center;
	}
	.payment-box-up .payment-box-up-right {
		text-align: center!important;
	}
	.payment-box-up .item {
		margin-bottom: 20px;
	}
	.payment-box-bottom {
		flex-direction: column;
	}
	.payment-box-bottom .payment-box-bottom-left {
		margin-bottom: 20px;
	}
	.payment-box-body-para {
		text-align: center;
	}
	.payment-body-list-cont {
		padding: 0 150px;
	}
	/*	landing page*/
	.customer-testi-video-left img {
    	width: 965px;
	}
	.customer-testi-video-right {
    	padding: 30px 26px;
	}
	.travel-made-easy {
		text-align: center;
	}
	.travel-made-easy-left {
    	padding-right: 0px;
		padding-bottom: 10px;
	}
	.testi-list-item {
    	width: 640px;
	}
}

@media only screen and (max-width:767px) {
	.intro-inner {
		bottom: 50%;
		transform: translateY(50%);
	}
	.intro-form-container {
		display: none;
	}
	.primary-slider .item img {
		min-height: 420px;
	}
	
	
	.about-brand-desc {
		padding: 0 60px;
	}
	
	
	
	
	
	
	.customer-support-content {
		padding: 0 90px 60px;
	}
	.footer-socket-content {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.packages-list {
    max-width: 320px;
    margin: 0 auto;
}
	/*itinery-page	*/
	.main-details-header-right {
		width: 125px;
	}
	.common-box-left {
		padding: 30px 25px;
	}
	.custom-col-md-10 {
		padding-right: 15px;
	}
	.book-now-form .col-md-6.p-r-5, .book-now-form .col-md-6.p-l-5 {
		padding: 0 15px;
	}
	.day-gallery-two .row .col-md-6:first-child img {
		margin-bottom: 20px;
	}
	.package-details-up h2 {
		min-height: 0px;
	}
	.destinations-list {
		padding: 0 100px;
	}
	.destination-popular-things-left {
		padding-bottom: 40px;
	}
	.intro img {
		min-height: 100vh;
    	object-fit: cover;
	}
	.container-padding-sides {
		padding: 0 20px;
	}
	.thing-todo {
		text-align: center;
	}
	.thing-todo-content {
		padding: 30px 0 0;
	}
	.contact-us-left {
		padding-bottom: 50px;
	}
	
	.payment-body-list-cont {
		padding: 0px 70px;
	}
	.payment-box-bottom-left .book-now-form-input {
		display: block;
		margin: 0 0 10px;
		text-align: center;
	}
	.payment-box-bottom-left .secondary-btn {
		margin: 0 auto;
		display: block;
		width: fit-content;
	}
	.payment-box-bottom .payment-box-bottom-left {
		margin-bottom: 50px;
	}
	/*landing page*/
	.customer-testi-video-container {
    	flex-direction: column;
	}
	.customer-testi-video-right {
    	padding: 46px 70px;
    	text-align: center;
	}
	.testi-video-auth-name {
    	display: inline-block;
	}
	.testi-list-item {
    	width: 100%;
	}
	.landing-gallery-left {
		padding-bottom: 25px;
	}
 
}

@media only screen and (max-width:600px) {
	.title-with-btn {
		text-align: center;
	}
	.title-with-btn .h1.float-left {
		float: none;
		width: 100%;
	}
	.title-with-btn .primary-btn.float-right {
		float: none!important;
		margin-top: 28px;
	}
	/*itinery-page	*/
	.main-details-header-right {
		width: 120px;
		padding: 15px 15px;
	}
	.approx-time {
		display: block;
		margin-left: 0;
	}
	.destination-main-intro-left {
		text-align: center;
	}
	.td-row .td-title h3 {
		font-size: 18px;
	}
	.about-us {
		text-align: center;
	}
	.contact-us-left {
		    padding: 0 20px 50px;
	}
	
	.payment-body-list-cont {
		padding: 0px 45px;
	}
}

@media only screen and (max-width:480px) {
	.things-list .custom-col-2-5 {
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 50%;
	}
	.customer-support-content {
		padding: 0 40px 60px;
	}
	.about-brand-desc {
		padding: 0 40px;
	}
	
	
	.footer-socket-content {
		text-align: center;
	}
	/*itinery-page	*/
	.tour-type {
		display: block;
		width: 130px;
		margin: 0 0 5px;
		text-align: center;
	}
	.main-details-header-right {
		width: 145px;
	}
	.travel-day {
		text-align: center;
	}
	.payment-types-icons {
		text-align: center;
	}
	.destinations-list {
		padding: 0 50px;
	}
	.table-col-width {
		width: 160px;
	}
	.contact-us-left {
		padding: 0 15px 50px;
	}
	.payment-body-list-cont {
		padding: 0px 10px;
	}
	.customer-testi-video-right {
    	padding: 45px;
	}
	.testi-list-item {
		padding: 50px 50px 50px 75px;
	}

}

@media only screen and (max-width:415px) {
	
	.about-brand-desc {
		padding: 0 10px;
	}
	.customer-support-content {
		padding: 0 20px 60px;
	}
	.custom-col-md-2 {
		flex: 0 0 18%;
		max-width: 18%;
	}
	.custom-col-md-10 {
		flex: 0 0 82%;
		max-width: 82%;
	}
	.destinations-list {
		padding: 0 20px;
	}
	.contact-us-left {
		padding: 0 10px 50px;
	}
	.payment-body-list-cont {
		padding: 0px 0px;
	}
	.payment-box {
		padding: 35px;
	}
}

/* =====================================================================
   Ceylinco Tours homepage components
   Palette, typography and spacing layered on top of the original
   structure. All values reference the Ceylon Ember tokens defined in
   css/tokens-ceylon-ember.css (loaded before this sheet).
   ===================================================================== */

/* --- Typography: display face for headings, body face elsewhere --- */
h1, .h1, h2, .h2, h3, .h3 {
	font-family: var(--font-display);
}
body { color: var(--ink); }

/* --- Palette retune (overrides original light-blue brand colour) --- */
a:hover, a:active { color: var(--teal); }
.color-light-blue { color: var(--teal); }
.bg-light-blue { background: var(--teal); }
/* --- Buttons: softer radius feel, refined shadow, subtle lift --- */
.primary-btn, .secondary-btn {
	box-shadow: var(--shadow-card);
	font-weight: 600;
	letter-spacing: 0.3px;
}
.primary-btn:hover, .secondary-btn:hover {
	box-shadow: var(--shadow-raised) !important;
	transform: translateY(-1px);
}
.primary-btn.no-hover:hover, .secondary-btn.no-hover:hover { transform: none; box-shadow: var(--shadow-card) !important; }

/* --- Cards: gentle hover lift for tour packages & things-to-do --- */
.package, .things-item .img-container {
	transition: ease-out all 0.3s;
}
.package:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-raised);
}

/* --- Section title accent bar (applies to .title-with-btn / .things-title headings) --- */
.section-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 13px;
	font-weight: 700;
	color: var(--teal);
	margin-bottom: 8px;
	font-family: var(--font-body);
}

/* =====================================================================
   NEW HOMEPAGE SECTIONS
   ===================================================================== */

/* Testimonials */
.ch-testimonials { padding: 90px 0; background: var(--ivory); }
.ch-testi-card {
	background: var(--linen);
	border-radius: 14px;
	padding: 34px 30px;
	height: 100%;
	margin-bottom: 30px;
	position: relative;
	border: 1px solid var(--border);
}

.ch-testi-card p.ch-quote { font-style: italic; color: var(--ink-muted); margin-bottom: 22px; line-height: 29px; }

/* Contact strip */

@media (max-width: 991px) {
	.ch-testimonials, .process-section { padding: 60px 0; }
}

/* ============================================================
   Global chrome, Ceylinco Tours (header, slide menu, footer)
   ============================================================ */

/* Brand wordmark (text logo until the final asset arrives) */

.brand-wordmark .wordmark-name {
	display: block;
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ink);
}
.brand-wordmark .wordmark-tag {
	display: block;
	font-size: var(--size-eyebrow);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--slate);
	margin-top: 4px;
}
.brand-wordmark:hover .wordmark-name { color: var(--teal-deep); }
.brand-wordmark.on-dark .wordmark-name { color: var(--ivory); }
.brand-wordmark.on-dark .wordmark-tag { color: var(--stone); }

/* Header actions */
.header-wa {
	text-decoration: none;
	margin-right: 18px;
}

.header-wa-label {
	color: var(--teal);
	font-weight: 500;
	font-size: 15px;
}

.header-cta { margin-right: 18px; white-space: nowrap; }
button.slide_menu_open {
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: var(--ink);
	font-size: 26px;
	line-height: 1;
}

/* Slide menu on ink */
.slide-menu a { color: var(--ivory); }
.slide-menu a:hover { color: var(--teal-tint); }
.slide-menu .slide_menu_close { font-size: 30px; color: var(--stone); }
.slide-menu-contact p { color: var(--stone); }
.slide-menu-contact a { color: var(--ivory); }
.slide-menu-list li a {
	color: var(--ivory);
	border-bottom: 1px solid var(--ink-raised);
	padding: 10px 0;
}
.slide-menu .primary-btn {
	background: var(--ivory);
	color: var(--ink);
}

/* Buttons on dark bands */
.primary-btn.on-ink {
	background: var(--ivory);
	color: var(--ink);
}
.primary-btn.on-ink:hover { background: var(--linen); }
.eyebrow.on-dark-eyebrow { color: var(--stone); }

/* Floating WhatsApp action */
.wa-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-raised);
	z-index: 900;
}
.wa-fab:hover { background: var(--teal-deep); }

/* Tour finder */
form.intro-form button.intro-form-btn { border: 0; cursor: pointer; }

/* Footer refinements */
.footer-socket-content { border-top: 1px solid var(--border); }
.footer-link-list li a { color: var(--ink-muted); }
.footer-link-list li a:hover { color: var(--teal); }

@media (max-width: 991px) {
	.header-wa-label { display: none; }
	.header-cta { display: none; }
}

/* ============================================================
   Homepage, Ceylinco Tours
   ============================================================ */

/* Hero */
.home-hero .hero-media {
	height: min(78vh, 700px);
	position: relative;
}
.home-hero .hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-hero .hero-media:after {
	content: "";
	position: absolute;
	inset: 0;
}
.home-hero .intro-inner { bottom: 45px; }

.hero-lede {
	font-size: var(--size-lede);
	line-height: var(--lh-lede);
	max-width: 620px;
	margin: 0 auto;
}
@keyframes ct-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}
.home-hero .intro-inner > * { animation: ct-fade-up 0.6s ease-out both; }
.home-hero .intro-inner > *:nth-child(2) { animation-delay: 0.1s; }
.home-hero .intro-inner > *:nth-child(3) { animation-delay: 0.2s; }
.home-hero .intro-inner > *:nth-child(4) { animation-delay: 0.3s; }

/* Trust strip */

/* Guarantee band */
.guarantee-list h3 {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 8px;
}
.guarantee-list > div { margin-bottom: 34px; }
.guarantee-list p { color: var(--ink-muted); }

/* Package cards */
.package-title {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 400;
	color: var(--ink);
	min-height: 55px;
}
.package-price { color: var(--ink); }
.package:hover .package-title { color: var(--teal-deep); }

/* Things to do, on ink */
.thing-to-do-section {
	background-image: none;
}
.things-item .img-container { background-color: var(--ink-raised); }
.things-caption { font-weight: 500; }

/* Guest feedback */
.ch-testimonials .caption { display: block; color: var(--slate); }
.ch-testi-card .ch-quote.pull-quote {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--ink);
}

/* Hero and finder on small screens */
@media (max-width: 767px) {
	.home-hero .hero-media { height: 330px; }
	.home-hero .hero-media:after { background: linear-gradient(180deg, transparent 55%, var(--overlay-ink-strong) 100%); }
	.home-hero .intro-inner {
		position: static;
		background: var(--ink);
		padding: 26px 18px 34px;
		/* The legacy mobile rule centres the absolutely positioned hero
		   text with bottom:50% and translateY(50%). Once the block is
		   static those two shift it half its own height down the page,
		   leaving a gap and overflowing the section below. */
		bottom: auto;
		transform: none;
	}
	.home-hero .intro-inner h1 { color: var(--ivory); }
	.home-hero .intro-form-container {
		display: block;
		padding-top: 20px;
	}
	.home-hero .intro-form {
		width: 100%;
		padding: 18px;
	}
	.home-hero .intro-form .form-col {
		margin-bottom: 12px;
	}
	.home-hero .intro-form-btn { width: 100%; float: none; }
	.trust-strip-list { flex-direction: column; align-items: center; }
	
	.guarantee-list > div { margin-bottom: 24px; }
}

/* ============================================================
   Services section (homepage)
   ============================================================ */

.services-lede {
	max-width: 620px;
	margin: 12px auto 0;
	color: var(--ink-muted);
}
/* Things-to-do icon tiles (replaces the old PNG circles) */
.things-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--ivory) 32%, transparent);
	color: var(--ivory);
	font-size: 20px;
	margin-bottom: 12px;
}
.things-item { padding-bottom: 26px; }

@media (max-width: 767px) {
	.things-icon { width: 48px; height: 48px; font-size: 16px; }
}

/* Trust strip: wrap into a 2x2 grid on small screens */
@media (max-width: 767px) {
	
	.trust-strip-list li {
		white-space: normal;
		padding: 0 12px;
		font-size: 13px;
		line-height: 1.45;
	}
	.trust-strip-list li + li { border-left: none; }
	.trust-strip-list li:nth-child(even) { border-left: 1px solid var(--stone); }
}

/* ============================================================
   Design pass: hierarchy, rhythm, surfaces, signature, motion
   ------------------------------------------------------------
   Display L (52px capitals) is reserved for the ONE loudest voice
   in a view: the hero, or an inner page's title band. In-page
   section openers step down to Display Section (40px, sentence
   case) so a long page reads as a hierarchy instead of eight
   equally loud shouts. Deliberate refinement of the brand sheet,
   recorded in docs/changes.md.
   ============================================================ */

:root {
	--size-display-section: 40px;
	--space-section: 96px;
	--space-section-sm: 64px;
}

section:not(.page-title):not(.intro) h2.h1,
section:not(.page-title):not(.intro) h2.h1.title {
	font-size: var(--size-display-section);
	line-height: 1.08;
	text-transform: none;
	letter-spacing: 0;
}

/* Eyebrows inherited the body's line-height and floated in dead space. */
.eyebrow, .section-eyebrow {
	line-height: 1.4;
	display: block;
}

/* Pull quotes carry the brand's only italic, at the size the sheet sets. */
.ch-testi-card .ch-quote.pull-quote {
	font-size: var(--size-pull-quote);
	line-height: 1.4;
}

/* ---- Vertical rhythm ----------------------------------------
   One spacing value for every homepage band, so the page has a
   pulse. Declared after the padding utility classes so it wins
   on equal specificity.
   ------------------------------------------------------------ */
.best-of-season-section,
.guarantee-band,
.services-section,
.about-brand-section,
.process-section,
.ch-testimonials {
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
}
.thing-to-do-section {
	padding-top: calc(var(--space-section) + 16px);
	padding-bottom: calc(var(--space-section) + 16px);
}

/* ---- Surface alternation ------------------------------------
   No two adjacent bands may share a background, or they read as
   one undifferentiated block. Testimonials take the teal wash:
   it separates cleanly and spends part of the 10 percent teal
   budget on the page's quietest, most human moment.
   ------------------------------------------------------------ */
.best-of-season-section { background-color: var(--ivory); }
/* The guarantee is the brand wedge, so its band takes the teal wash and
   stands apart from the linen places band that follows it. */
.guarantee-band { background-color: var(--teal-wash); }
.services-section { background-color: var(--ivory); }
.about-brand-section { background-color: var(--linen); }
.process-section { background-color: var(--ivory); }
.ch-testimonials { background-color: var(--teal-wash); }
.ch-testimonials .ch-testi-card { background: var(--ivory); }

/* ---- Signature: the route spine -----------------------------
   Sri Lanka tours are routes, so the one decorative device on the
   page encodes real itinerary data: the towns you actually pass
   through, in order. It appears only where route data exists.
   ------------------------------------------------------------ */
.route-spine {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 14px;
	padding: 0 4px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--text-muted);
}
.route-stop {
	position: relative;
	padding-left: 12px;
	white-space: nowrap;
}
.route-stop::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--teal-bright);
}
.route-stop + .route-stop { padding-left: 20px; }
.route-stop + .route-stop::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 50%;
	width: 10px;
	height: 1px;
	background: var(--teal-tint);
}
.route-stop.route-more {
	padding-left: 8px;
	color: var(--slate);
	font-style: normal;
}
.route-stop.route-more::before { display: none; }

/* ---- Motion -------------------------------------------------
   One gesture, used once per element: a short rise as a band
   arrives. Initial state applies only when the observer is
   running (html.js-reveal), so with JavaScript off or broken
   nothing is ever hidden.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	html.js-reveal .reveal {
		opacity: 0;
		transform: translateY(18px);
	}
	html.js-reveal .reveal.is-in {
		opacity: 1;
		transform: none;
		transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	}
}

@media (max-width: 991px) {
	:root { --size-display-section: 32px; }
}

@media (max-width: 767px) {
	:root {
		--space-section: var(--space-section-sm);
		--size-display-section: 28px;
	}
	.route-spine { font-size: 11px; }
}

/* Route spine inside a centred card */
.package-details .route-spine { justify-content: center; }

/* ---- Hero image containment ---------------------------------
   A legacy mobile rule puts min-height:100vh on .intro img, which
   beats any height declaration no matter how specific. On the
   homepage that pushed the hero photo 514px below its 330px
   container, where it painted over the bands underneath, and on
   inner pages it made every hero a full viewport tall. Reset the
   minimum and clip the container so a stray image can never bleed
   into the next section again.
   ------------------------------------------------------------ */
.home-hero .hero-media { overflow: hidden; }
.home-hero .hero-media img { min-height: 0; }
.intro { overflow: hidden; }

@media (max-width: 767px) {
	.home-hero .hero-media img { min-height: 0; height: 100%; }
	.intro > img { min-height: 0; height: 300px; object-fit: cover; }
}

/* ============================================================
   Refinements from the 1280px review render
   ============================================================ */

/* The wordmark and its tagline were breaking across lines. */
.brand-wordmark .wordmark-name,
.brand-wordmark .wordmark-tag { white-space: nowrap; }

@media (min-width: 993px) {
	/* Three zones on one line: brand keeps its width, the nav takes
	   what is left, the actions keep theirs. */
	.header-cont {
	flex-wrap: nowrap;
}
	.header-left, .header-right { flex: 0 0 auto; }
	.header-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
	.header-menu { white-space: nowrap; }
	/* Eight destinations, a wordmark and two actions have to share one
	   line. At 14px with 9px padding they filled 1171 of 1172 available
	   pixels, so the nav sat flush against the wordmark. */
	.header-menu > li > a {
	font-size: 13px;
}
	/* With the full nav on show the hamburger is redundant, and the
	   space it frees is what lets the nav sit on one line. */
	.header-right .slide_menu_open { display: none; }
}
@media (min-width: 993px) and (max-width: 1400px) {
	/* Between 993 and 1400 the eight nav items, the wordmark and the
	   actions want more room than the container has. The header
	   WhatsApp link is the one thing here that is genuinely duplicated
	   elsewhere: the floating WhatsApp button sits on every page. Drop
	   it at these widths and the row breathes. */
	.header-wa { display: none; }
	.brand-wordmark .wordmark-name { font-size: 22px; }
	.brand-wordmark .wordmark-tag { font-size: 10px; letter-spacing: 0.14em; }
	
	.header-cta { min-width: 0; }
}

/* Four honest facts, one line. */

/* ---- Package cards ------------------------------------------
   Cards were ragged: a two-line title pushed one card's price row
   below its neighbours'. Stretch every card to the row height and
   pin the price to the bottom so the prices align across the row.
   ------------------------------------------------------------ */
.packages-list .row { align-items: stretch; }
.package {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	margin-bottom: 30px;
}
.package-details {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.package-details-down { margin-top: auto; }

/* A solid pill reads cleaner than the old dashed outline. */
.package-img .package-offer-precentage {
	border: 0;
	border-radius: var(--radius-pill);
	padding: 5px 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---- Hero -----------------------------------------------------
   The eyebrow sat on open sky and all but disappeared.
   ------------------------------------------------------------ */

/* ---- Tour finder ----------------------------------------------
   Fixed 170px fields clipped their own placeholder text, and the
   button label broke onto two lines.
   ------------------------------------------------------------ */
.home-hero .intro-form { width: 100%; max-width: 1000px; }
.intro-form-input { width: 100%; }
.intro-form-btn, .intro-form-btn a, a.intro-form-btn { white-space: nowrap; }

/* Two lines of room for a card title, so the route spines beneath
   them line up across a row of cards. */
@media (min-width: 768px) {
	.package-title { min-height: 64px; }
}

/* ============================================================
   Photography: hero slider, places, section backgrounds, reviews
   ============================================================ */

/* ---- Hero slider --------------------------------------------
   bxSlider injects .bx-wrapper and .bx-viewport at runtime and
   writes an inline height on the viewport measured from the first
   slide, so those need !important to stay inside the hero box.
   Fade mode also positions slides absolutely, which is why each
   slide and image is pinned to the full height.
   ------------------------------------------------------------ */
.hero-media .primary-slider,
.hero-media .bx-wrapper,
.hero-media .bx-viewport {
	height: 100% !important;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.hero-media .item,
.hero-media .item img {
	height: 100%;
	width: 100%;
}
.hero-media .item img {
	object-fit: cover;
	object-position: center;
	min-height: 0;
	display: block;
}
/* A slow drift keeps a still photograph from feeling like a poster. */
@media (prefers-reduced-motion: no-preference) {
	.hero-media .item img { animation: ct-hero-drift 26s ease-in-out infinite alternate; }
}
@keyframes ct-hero-drift {
	from { transform: scale(1.02); }
	to   { transform: scale(1.09); }
}

/* ---- Places worth the drive ---------------------------------- */
.places-section {
	background: var(--linen);
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
}
.places-grid > div { margin-bottom: 26px; }
.place-card {
	display: block;
	height: 100%;
	background: var(--ivory);
	border-radius: var(--radius-m);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--shadow-card);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.place-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.place-media {
	display: block;
	position: relative;
	height: 210px;
	overflow: hidden;
}
.place-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.place-card:hover .place-media img { transform: scale(1.05); }
.place-body { display: block; padding: 18px 20px 22px; }
.place-name {
	display: block;
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.2;
	color: var(--ink);
	margin-bottom: 4px;
}
.place-note {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted);
}

/* ---- Beyond the itinerary: photograph behind the dark band ---
   The overlay is deep enough that ivory text clears AA over any
   part of the picture.
   ------------------------------------------------------------ */
.thing-to-do-section {
	background-color: var(--ink);
	/* The leopard is the only 1920px file in img/, so it is the only one
	   that holds up as a full-bleed background. */
	background-image: linear-gradient(var(--overlay-ink-deep), var(--overlay-ink-deep)),
	                  url("img/sri-lanka-leopard-asian.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
}

/* ---- Guest feedback carousel --------------------------------- */
.ch-testi-carousel { padding-top: 8px; }
.ch-testi-carousel .ch-testi-slide { height: auto; }
.ch-testi-carousel .ch-testi-card {
	height: 100%;
	margin: 0;
	padding: 30px 28px 26px;
	background: var(--ivory);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	box-shadow: none;
}
.ch-testi-meta {
	display: block;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}
.ch-testi-name {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
}
.ch-testi-country {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--teal);
	margin-top: 2px;
}
.ch-testi-trip {
	display: block;
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 4px;
}
/* Owl controls, restyled to the brand */
.ch-testi-carousel.owl-carousel .owl-nav { margin-top: 26px; text-align: center; }
.ch-testi-carousel.owl-carousel .owl-nav button.owl-prev,
.ch-testi-carousel.owl-carousel .owl-nav button.owl-next {
	width: 40px;
	height: 40px;
	margin: 0 6px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--ivory);
	position: relative;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.ch-testi-carousel.owl-carousel .owl-nav button:hover {
	background: var(--teal);
	border-color: var(--teal);
}
.ch-testi-carousel.owl-carousel .owl-nav button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--ink);
	border-bottom: 1.5px solid var(--ink);
}
.ch-testi-carousel.owl-carousel .owl-nav button:hover::after { border-color: var(--ivory); }
.ch-testi-carousel.owl-carousel .owl-nav button.owl-prev::after { transform: translate(-50%, -50%) rotate(135deg); }
.ch-testi-carousel.owl-carousel .owl-nav button.owl-next::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ch-testi-carousel.owl-carousel .owl-dots { margin-top: 14px; text-align: center; }
.ch-testi-carousel.owl-carousel .owl-dots button.owl-dot span {
	width: 7px;
	height: 7px;
	margin: 0 4px;
	background: var(--stone);
	border-radius: 50%;
	display: block;
}
.ch-testi-carousel.owl-carousel .owl-dots button.owl-dot.active span { background: var(--teal); }

@media (max-width: 767px) {
	.place-media { height: 180px; }
	.place-name { font-size: 21px; }
	.ch-testi-carousel .ch-testi-card { padding: 24px 20px 20px; }
}

/* Equal-height review cards: Owl sizes each item to its own content, so
   the stage has to stretch its children for the cards to line up. */
.ch-testi-carousel.owl-carousel .owl-stage { display: flex; align-items: stretch; }
.ch-testi-carousel.owl-carousel .owl-item { display: flex; }
.ch-testi-carousel.owl-carousel .owl-item > .ch-testi-slide { display: flex; width: 100%; }

/* ============================================================
   Brand lockup: crest to the left of the wordmark
   ------------------------------------------------------------
   The supplied logo is a WebP with no alpha channel, so its
   background is opaque white. Against the ivory header and the
   linen footer that would show as a pale box, so the crest is
   composited with multiply: white drops out and the black and
   red artwork stays. On the ink slide-out menu multiply would
   erase black artwork on a dark ground, so there the crest sits
   on its own ivory tile instead. A transparent SVG or PNG would
   remove the need for either treatment.
   ============================================================ */

.brand-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.wordmark-text { display: block; }
.wordmark-logo {
	flex: 0 0 auto;
	height: 80px;
	width: auto;
	display: block;
	mix-blend-mode: multiply;
}
.footer-about-brand .wordmark-logo { height: 64px; }

.brand-wordmark.on-dark .wordmark-logo {
	mix-blend-mode: normal;
	background: var(--ivory);
	border-radius: var(--radius-s);
	padding: 4px;
	height: 46px;
}

@media (max-width: 767px) {
	/* A full 80px crest would eat a third of a phone's sticky header, so
	   it steps down on small screens. */
	.brand-wordmark { gap: 9px; }
	.wordmark-logo { height: 52px; }
	.footer-about-brand .wordmark-logo { height: 56px; }
}

/* The crest widens the brand block, and "Registered as Ceylinco Tours
   (Pvt) Ltd" is a longer line than it replaced, so both the header row
   and the trust strip needed their spacing tightened to stay on one
   line at 1280. */

@media (min-width: 993px) and (max-width: 1400px) {
	.header-menu > li > a { padding: 0 4px 38px; }
	.brand-wordmark { gap: 10px; }
}

/* ---- Header height is set by the crest ----------------------
   With the header padding removed, the nav link's 38px bottom
   padding (a hover bridge down to the dropdown) was the tallest
   thing in the row, so it, not the logo, decided the header
   height and left the nav text sitting high against the crest.
   Instead the three zones stretch to the row height and centre
   their own contents: the logo sets the height, the nav labels
   sit on its centre line, and each menu item fills the full
   header so the dropdown opens flush against the bottom edge
   with no gap for the pointer to fall through.
   ------------------------------------------------------------ */
@media (min-width: 993px) {
	
	.header-left { display: flex; align-items: center; }
	.header-right { align-items: center; }
	.header-center { align-items: stretch; }
	.header-menu { display: flex; align-items: stretch; }
	.header-menu > li { display: flex; align-items: center; }
	.header-menu > li > a {
	display: flex;
	align-items: center;
}
	.sub-menu { top: 100%; }

	/* The crest takes 73px of the row, so the wordmark beside it
	   gives some back to keep the nav clear of the brand. */
	
	
}

/* ============================================================
   Header: one row, crest then navigation then actions
   ------------------------------------------------------------
   The crest, eight nav destinations and two actions all sit on a
   single line, which is a tight budget at 1280. The nav carries
   the compromise: 13px labels with close padding. The WhatsApp
   label is held back until there is genuinely room for it.
   ============================================================ */

.header { padding: 0; }
.header > .container > .row > .col-md-12 { padding: 0; }

.header-cont {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 88px;
	transition: min-height 0.28s ease;
}

.header-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.header-menu {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	white-space: nowrap;
}
.header-menu > li { display: flex; align-items: stretch; position: relative; }

/* A hairline that grows from the centre, rather than a colour flash. */
.header-menu > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: var(--teal-deep);
	transition: left 0.24s ease, right 0.24s ease;
}
.header-menu > li:hover > a,
.header-menu > li.current-menu-item > a,
.header-menu > li.current-menu-parent > a,
.header-menu > li.current-page-ancestor > a { color: var(--teal-deep); }

/* ---- Dropdown: an ivory card, not a teal slab ---- */
.header-menu .sub-menu {
	top: 100%;
	width: 260px;
	padding: 6px 0;
	background-color: var(--ivory);
	border: 1px solid var(--border);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-raised);
}
.header-menu .sub-menu li a {
	color: var(--ink);
	padding: 9px 18px;
	font-size: 14.5px;
	border-bottom: 0;
}
.header-menu .sub-menu li a:hover {
	color: var(--teal-deep) !important;
	background-color: var(--teal-wash) !important;
}

/* ---- Actions ---- */
.header-right { display: flex; align-items: center; gap: 12px; }

/* The earlier treatment: a teal-wash disc with the glyph inside and a
   plain label beside it, no pill. The glyph is a mask rather than the
   old green PNG, so its colour is set here. */
.header-wa {
	display: inline-flex;
	align-items: center;
	background: none;
	padding: 0;
	border-radius: 0;
	line-height: 1;
	transition: none;
}
.header-wa .whatsapp-icon {
	background: var(--teal-wash);
	padding: 8px;
	border-radius: 50%;
	display: inline-flex;
	margin: 0 8px 0 0;
	transition: background 0.22s ease;
}
.header-wa:hover .whatsapp-icon { background: var(--teal-tint); }
.header-wa .header-wa-label {
	color: var(--teal-deep);
	font-size: 15px;
	font-weight: 500;
}
.header-wa:hover .header-wa-label { color: var(--teal); }
.wa-glyph {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	display: block;
	background-color: var(--teal-deep);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.06c-.24.68-1.4 1.3-1.94 1.34-.5.04-.97.22-3.27-.68-2.76-1.09-4.5-3.9-4.64-4.08-.13-.18-1.1-1.47-1.1-2.8 0-1.33.7-1.98.94-2.25.25-.27.54-.34.72-.34.18 0 .36 0 .52.01.17.01.39-.06.61.47.24.55.8 1.9.87 2.04.07.14.12.3.02.48-.09.18-.14.29-.28.45-.14.16-.29.35-.42.47-.14.14-.28.29-.12.57.16.28.72 1.19 1.55 1.93 1.07.95 1.97 1.25 2.25 1.39.28.14.44.12.6-.07.16-.19.69-.81.88-1.09.18-.28.37-.23.62-.14.25.09 1.6.75 1.87.89.28.14.46.21.53.32.07.12.07.66-.17 1.34z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.06c-.24.68-1.4 1.3-1.94 1.34-.5.04-.97.22-3.27-.68-2.76-1.09-4.5-3.9-4.64-4.08-.13-.18-1.1-1.47-1.1-2.8 0-1.33.7-1.98.94-2.25.25-.27.54-.34.72-.34.18 0 .36 0 .52.01.17.01.39-.06.61.47.24.55.8 1.9.87 2.04.07.14.12.3.02.48-.09.18-.14.29-.28.45-.14.16-.29.35-.42.47-.14.14-.28.29-.12.57.16.28.72 1.19 1.55 1.93 1.07.95 1.97 1.25 2.25 1.39.28.14.44.12.6-.07.16-.19.69-.81.88-1.09.18-.28.37-.23.62-.14.25.09 1.6.75 1.87.89.28.14.46.21.53.32.07.12.07.66-.17 1.34z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.header-cta { min-width: 0; }

/* ---- Compact once the visitor starts reading ---- */
.header.is-stuck { box-shadow: 0 2px 14px rgba(15, 14, 12, 0.07); }
.header.is-stuck .header-cont { min-height: 56px; }
.header.is-stuck .wordmark-logo { height: 46px; }

.header.is-stuck .wordmark-tag { display: none; }

@media (min-width: 993px) {
	.header-cont { align-items: center; }
	/* The wordmark keeps its full size. The room this costs is taken
	   out of the nav's own spacing instead. */
	
	.brand-wordmark .wordmark-tag { font-size: 10px; letter-spacing: 0.16em; }
}
@media (min-width: 993px) and (max-width: 1500px) {
	/* Below this the label will not fit beside eight nav items, so the
	   WhatsApp action keeps its disc and drops the word. */
	.header-wa .header-wa-label { display: none; }
	.header-wa .whatsapp-icon { margin-right: 0; }
}

@media (max-width: 992px) {
	/* The slide-out menu carries navigation below this width. */
	.header-center { display: none; }
	.header-cont { min-height: 68px; }
	.header-wa .header-wa-label { display: none; }
	.header-wa .whatsapp-icon { margin-right: 0; }
}

@media (max-width: 767px) {
	.header-cont { min-height: 60px; gap: 10px; }
	.header-right { gap: 8px; flex: 0 0 auto; }
	.header.is-stuck .wordmark-logo { height: 40px; }
	/* The wordmark keeps its 26px base size at this width, which ran it
	   straight under the WhatsApp button. Both lines step down so the
	   lockup, the action and the menu button share the row. */
	.header-left { min-width: 0; }
	.header-cont .brand-wordmark .wordmark-name { font-size: 17px; letter-spacing: 0.03em; }
	.header-cont .brand-wordmark .wordmark-tag { font-size: 8px; letter-spacing: 0.1em; }
}
@media (max-width: 420px) {
	/* The crest carries the name at this point, so the tagline goes. */
	.header-cont .brand-wordmark .wordmark-tag { display: none; }
	.header-cont .brand-wordmark .wordmark-name { font-size: 16px; }
}

/* ---- Fitting one row at 1280 --------------------------------
   The crest, the wordmark, eight destinations and two actions
   need 1281px of a 1172px row, so every zone gives something up.
   Two legacy margin-right:18px rules on the actions were left
   over from before the row used gap, and paid for a third of the
   deficit on their own. The header CTA also drops the arrow
   glyph it shares with in-page buttons: at this density the
   45px of left padding it needs is not worth the decoration.
   ------------------------------------------------------------ */
@media (min-width: 993px) {
	.header-cont { gap: 10px; }
	.header-wa { margin-right: 0; }
	.header-cta { margin-right: 0; }
	
	.header-menu > li:hover > a::after,
	.header-menu > li.current-menu-item > a::after,
	.header-menu > li.current-menu-parent > a::after,
	.header-menu > li.current-page-ancestor > a::after { left: 5px; right: 5px; }

	.header-cta.primary-btn.sm {
		padding: 9px 18px;
		min-width: 0;
		font-size: 14px;
	}
	.header-cta.primary-btn.sm:before { display: none; }
}

/* ============================================================
   Navigation sizing
   ============================================================ */

.header-menu > li > a {
	display: flex;
	align-items: center;
	padding: 0 7px;
	height: 100%;
	min-height: 77px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ink);
	position: relative;
	transition: color 0.2s ease;
}

@media (min-width: 993px) {
	.header-menu > li > a {
		padding: 0 18px;
	}
}

/* Eight labels at 15px with 18px of padding either side need roughly
   1030px, which only exists on wide screens. Between 993 and 1500 the
   padding tightens so the row still holds, rather than the nav running
   under the wordmark. */

.header-menu > li:hover > a::after,
.header-menu > li.current-menu-item > a::after,
.header-menu > li.current-menu-parent > a::after,
.header-menu > li.current-page-ancestor > a::after { left: 6px; right: 6px; }
@media (min-width: 1501px) {
	.header-menu > li:hover > a::after,
	.header-menu > li.current-menu-item > a::after,
	.header-menu > li.current-menu-parent > a::after,
	.header-menu > li.current-page-ancestor > a::after { left: 18px; right: 18px; }
}

/* ============================================================
   Calls to action carry the brand red
   ------------------------------------------------------------
   Only the conversion actions: plan a trip, ask us anything, get a
   quote. Navigational buttons (see all tours, all destinations,
   travel information, meet the team) stay ink, so red keeps
   meaning "this is the thing to press".
   ============================================================ */

.primary-btn.cta-btn,
.secondary-btn.cta-btn,
.primary-btn.cta-btn.bg-light-blue,
.wpcf7-submit {
	background: var(--red);
	color: var(--ivory);
	border: none;
}
.primary-btn.cta-btn:hover,
.secondary-btn.cta-btn:hover,
.wpcf7-submit:hover {
	background: var(--red-deep);
	color: var(--ivory) !important;
	box-shadow: 0 6px 14px color-mix(in srgb, var(--red-deep) 26%, transparent);
}
/* On the ink footer band the red pill needs no extra lift. */
.primary-btn.cta-btn.on-ink:hover { box-shadow: none; }

/* min-height on the nav link outranks the compact state's height, so the
   scrolled bar has to lower the minimum too or it barely shrinks. */
.header.is-stuck .header-menu > li > a { min-height: 52px; height: 52px; }

/* 6px of padding left the row with 4px to spare at 1280. */

/* ---- Wordmark sizing ---------------------------------------- */
.brand-wordmark .wordmark-tag { text-align: center; }

@media (min-width: 993px) {
	.brand-wordmark .wordmark-name { font-size: 25px; }
}

/* The 25px wordmark adds 58px to the brand block, which put the row 38px
   over its width and squeezed the gaps either side of the nav to 6px.
   The nav gives the space back on narrower desktops. Above 1501 there
   is room for the supplied 15px and 18px padding. */
@media (min-width: 993px) and (max-width: 1500px) {
	
	.header-menu > li > a {
	font-size: 12.5px;
}
	
}

/* ============================================================
   Hero scrim
   ------------------------------------------------------------
   The overlay had no z-index while bxSlider writes z-index:50 on
   the slide it is showing, so the mask could be painted beneath
   the photograph and the headline was left sitting on bare sky.
   It now sits above every slide and below the text, and covers
   the full frame rather than only fading in at 30 percent.
   ============================================================ */
.home-hero .hero-media:after {
	z-index: 60;
	background: linear-gradient(180deg,
		var(--overlay-ink-soft) 0%,
		var(--overlay-ink) 45%,
		var(--overlay-ink-strong) 100%);
}
/* With a real scrim behind it the type no longer needs a shadow. */
.home-hero .hero-lede { text-shadow: none; }

/* ============================================================
   Trust strip
   ------------------------------------------------------------
   Three promises, each with a red tick. The ticks are the only
   red on this band, which is what the accent is for.
   ============================================================ */
.trust-strip {
	background: var(--linen);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.trust-strip-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 0;
	padding: 26px 0;
	margin: 0;
	width: 100%;
}
.trust-strip-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 30px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
	white-space: nowrap;
	border-left: 0;
}
.trust-strip-list li + li { border-left: 1px solid var(--stone); }
/* A mask rather than a coloured SVG, so the tick takes the red straight
   from the token and no hex is painted into the stylesheet. */
.trust-strip-list li:before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: var(--red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 991px) {
	.trust-strip-list { gap: 12px 0; padding: 22px 0; }
	.trust-strip-list li {
		white-space: normal;
		padding: 0 18px;
		font-size: 14px;
	}
}
@media (max-width: 767px) {
	/* Stacked and left-aligned reads better than three cramped columns. */
	.trust-strip-list {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 12px 0;
		padding: 20px 0;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}
	.trust-strip-list li,
	.trust-strip-list li + li {
		border-left: 0;
		padding: 0;
		align-items: flex-start;
	}
	.trust-strip-list li:before { margin-top: 1px; }
}

/* Three items at 30px of padding need 1148px of a 1110px row. */
@media (min-width: 992px) {
	.trust-strip-list li { padding: 0 18px; }
}

/* "Get a Free Quote" is 35px wider than the label it replaced, which
   took the gaps either side of the nav down to 16px. */
@media (min-width: 993px) and (max-width: 1500px) {
	.header-cont { gap: 6px; }
	.header-menu > li > a { padding: 0 2px; }
	.header-menu > li:hover > a::after,
	.header-menu > li.current-menu-item > a::after,
	.header-menu > li.current-menu-parent > a::after,
	.header-menu > li.current-page-ancestor > a::after { left: 2px; right: 2px; }
	.header-cta.primary-btn.sm { padding: 9px 14px; }
}

/* The inner-page title band gets the same graded scrim as the homepage
   hero: lighter at the top, deepest under the text, rather than one
   flat wash across the photograph. */
.page-title {
	background-image: linear-gradient(180deg,
		var(--overlay-ink-soft) 0%,
		var(--overlay-ink) 45%,
		var(--overlay-ink-strong) 100%),
		url("img/destination-bg.jpg");
	background-position: center;
}

/* The band's lede ran the full container width, well past a comfortable
   measure. The heading is left full width: at Display L it reads as a
   banner line rather than a paragraph. */
.page-title .lede {
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* The legacy sheet hides the tour finder entirely below 767px, and the
   fix so far only covered the homepage hero. Every page that shows the
   finder loses its main conversion tool on a phone otherwise. */
@media (max-width: 767px) {
	.intro-form-container { display: block; padding-top: 20px; }
	.intro-form { width: 100%; padding: 18px; }
	.intro-form .form-col { margin-bottom: 12px; }
	.intro-form-btn { width: 100%; float: none; }
}

/* ============================================================
   Review batch: guarantee cards, services carousel with line
   icons, process steps, footer band actions, footer headings
   ============================================================ */

/* ---- Guarantee band: promises as quiet ivory cards ---------- */
.guarantee-band .lede { color: var(--ink-muted); }
.guarantee-list > div { margin-bottom: 22px; }
.guarantee-item {
	height: 100%;
	background: var(--ivory);
	border-radius: var(--radius-m);
	padding: 22px 22px 20px;
	box-shadow: var(--shadow-card);
	border-top: 2px solid var(--teal-tint);
}
.guarantee-item h3 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 8px;
}
.guarantee-item p { color: var(--ink-muted); font-size: 15px; line-height: 26px; }

/* Places cards are plain panels now, not links. */
.place-card { cursor: default; }

/* ---- Services carousel --------------------------------------
   Thin line icons in the manner of the reference sheet: stroke
   SVGs used as masks, so they take their colour from the tokens
   and read as drawn lines rather than filled glyphs.
   ------------------------------------------------------------ */
.services-carousel { padding-top: 6px; }
.services-carousel .owl-stage { display: flex; align-items: stretch; }
.services-carousel .owl-item { display: flex; }
.services-carousel .svc-slide { display: flex; width: 100%; }
.svc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 30px 22px 26px;
	text-align: center;
	text-decoration: none;
	background: var(--ivory);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.svc-icon {
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	background-color: var(--slate);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.svc-name {
	display: block;
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.25;
	color: var(--ink);
	margin-bottom: 6px;
}
.svc-hint {
	display: block;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-muted);
	max-width: 30ch;
}
.svc-card:hover .svc-name { color: var(--teal-deep); }

.svc-briefcase { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18h24v20H12z M19 18v-5h10v5 M12 27h24'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18h24v20H12z M19 18v-5h10v5 M12 27h24'/%3E%3C/svg%3E"); }
.svc-passport { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6h18v36H15z M19 30h10'/%3E%3Ccircle cx='24' cy='18' r='5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6h18v36H15z M19 30h10'/%3E%3Ccircle cx='24' cy='18' r='5'/%3E%3C/svg%3E"); }
.svc-plane { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 9 7 22l13 4 M42 9 27 41l-7-15 M42 9 20 26'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 9 7 22l13 4 M42 9 27 41l-7-15 M42 9 20 26'/%3E%3C/svg%3E"); }
.svc-umbrella { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 24a16 16 0 0 1 32 0 M8 24h32 M24 8v2 M24 24v12a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 24a16 16 0 0 1 32 0 M8 24h32 M24 8v2 M24 24v12a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.svc-rings { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='29' r='9'/%3E%3Ccircle cx='30' cy='29' r='9'/%3E%3Cpath d='M30 10l4 4-4 4-4-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='29' r='9'/%3E%3Ccircle cx='30' cy='29' r='9'/%3E%3Cpath d='M30 10l4 4-4 4-4-4z'/%3E%3C/svg%3E"); }
.svc-building { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 42V10h20v32 M10 42h28 M20 17h3 M28 17h3 M20 24h3 M28 24h3 M20 31h3 M28 31h3 M22 42v-6h4v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 42V10h20v32 M10 42h28 M20 17h3 M28 17h3 M20 24h3 M28 24h3 M20 31h3 M28 31h3 M22 42v-6h4v6'/%3E%3C/svg%3E"); }
.svc-car { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 31l4-9a4 4 0 0 1 4-2h16a4 4 0 0 1 4 2l4 9 M8 31v7h5 M40 31v7h-5 M8 31h32'/%3E%3Ccircle cx='16' cy='38' r='3'/%3E%3Ccircle cx='32' cy='38' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 31l4-9a4 4 0 0 1 4-2h16a4 4 0 0 1 4 2l4 9 M8 31v7h5 M40 31v7h-5 M8 31h32'/%3E%3Ccircle cx='16' cy='38' r='3'/%3E%3Ccircle cx='32' cy='38' r='3'/%3E%3C/svg%3E"); }
.svc-train { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8h20a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4z M17 14h14v9H17z M13 44l-3 3 M35 44l3 3'/%3E%3Ccircle cx='18' cy='41' r='3'/%3E%3Ccircle cx='30' cy='41' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8h20a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4z M17 14h14v9H17z M13 44l-3 3 M35 44l3 3'/%3E%3Ccircle cx='18' cy='41' r='3'/%3E%3Ccircle cx='30' cy='41' r='3'/%3E%3C/svg%3E"); }

/* Carousel controls, matching the guest feedback carousel */
.services-carousel.owl-carousel .owl-nav { margin-top: 22px; text-align: center; }
.services-carousel.owl-carousel .owl-nav button.owl-prev,
.services-carousel.owl-carousel .owl-nav button.owl-next {
	width: 40px;
	height: 40px;
	margin: 0 6px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--ivory);
	position: relative;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.services-carousel.owl-carousel .owl-nav button:hover { background: var(--teal); border-color: var(--teal); }
.services-carousel.owl-carousel .owl-nav button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--ink);
	border-bottom: 1.5px solid var(--ink);
}
.services-carousel.owl-carousel .owl-nav button:hover::after { border-color: var(--ivory); }
.services-carousel.owl-carousel .owl-nav button.owl-prev::after { transform: translate(-50%, -50%) rotate(135deg); }
.services-carousel.owl-carousel .owl-nav button.owl-next::after { transform: translate(-50%, -50%) rotate(-45deg); }
.services-carousel.owl-carousel .owl-dots { margin-top: 12px; text-align: center; }
.services-carousel.owl-carousel .owl-dots button.owl-dot span {
	width: 7px;
	height: 7px;
	margin: 0 4px;
	background: var(--stone);
	border-radius: 50%;
	display: block;
}
.services-carousel.owl-carousel .owl-dots button.owl-dot.active span { background: var(--teal); }

/* ---- Footer band actions: quote left, WhatsApp right --------- */
.support-actions-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
	max-width: 860px;
	margin: 0 auto;
}
.support-actions-left p { margin-top: 4px; }
.support-wa-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 22px;
	font-weight: 600;
	color: var(--ivory);
	white-space: nowrap;
}
.support-wa-link:hover { color: var(--teal-tint) !important; }
.support-wa-link .wa-glyph {
	width: 24px;
	height: 24px;
	background-color: currentColor;
}

/* ---- Beyond the itinerary: photo tiles -----------------------
   Three tiles show the thing itself where the library has a real
   photograph of it; the rest stay as line icons. The photo sits
   in the same visual slot as the icon circle.
   ------------------------------------------------------------ */
/* Bottom-align the row so photo tiles rise above the shared caption
   line instead of pushing their own captions out of rank. */
.things-list .row { display: flex; flex-wrap: wrap; align-items: flex-end; }
.things-item.has-photo .things-photo {
	display: block;
	height: 120px;
	margin-bottom: 12px;
	border-radius: var(--radius-m);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--ivory) 24%, transparent);
}
.things-item.has-photo .things-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 767px) {
	.things-item.has-photo .things-photo { height: 96px; }
}

/* ---- Footer column headings ---------------------------------- */
.footer h4 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 500;
}

@media (max-width: 767px) {
	.support-actions-row { flex-direction: column; text-align: center; gap: 18px; }
	.support-actions-left p { text-align: center; }
}



/* ============================================================
   Our process · The Night Desk
   ------------------------------------------------------------
   The one section about work the guest never sees, staged as
   the page's backstage: an ink panel bleeding off the right
   edge of an ivory band. The route spine turns vertical and
   becomes the composition's armature, in the exact grammar of
   the tour cards: tint road, bright fill drawn in the direction
   of travel, stops landing as it passes, and a hollow terminal
   ring for touchdown at the end of the road.

   Geometry is measurement-free by construction: the spine spans
   the grid rows, every stop dot belongs to its own step and so
   always sits on the spine regardless of copy length, and the
   terminal ring marks the spine's true end. Nothing is tuned to
   content heights.
   ============================================================ */

.process-section {
	--panel-pad: 88px;
	--panel-pad-y: 76px;
	--tick-y: 8px;
	overflow-x: clip;
}
.process-head {
	/* One vertical axis: the head shares the left edge of the step text
	   inside the panel (panel padding plus the body's ghost offset). */
	padding-left: calc(var(--panel-pad) + 44px);
	margin-bottom: 44px;
}
.process-panel {
	background: var(--ink);
	border-radius: var(--radius-m) 0 0 var(--radius-m);
	box-shadow: var(--shadow-raised);
	padding: var(--panel-pad-y) var(--panel-pad) calc(var(--panel-pad-y) + 12px);
	/* Bleed to the viewport's right edge, capped so wide screens do
	   not open a void of dead ink. */
	margin-right: clamp(-240px, calc(50% - 50vw), 0px);
}
.process-grid {
	display: grid;
	grid-template-columns: 1fr 120px 1fr;
	row-gap: 72px;
}
.process-step { position: relative; }
.process-step:nth-child(1) { grid-column: 1; grid-row: 1; }
.process-step:nth-child(2) { grid-column: 3; grid-row: 1; margin-top: 96px; }
.process-step:nth-child(3) { grid-column: 1; grid-row: 2; }
.process-step:nth-child(4) { grid-column: 3; grid-row: 2; margin-top: 96px; }

/* Ghost numerals: aria-hidden ornament behind the content. The
   accessible step number is the kicker. */
.process-ghost {
	position: absolute;
	top: -34px;
	left: -14px;
	z-index: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 168px;
	line-height: 0.8;
	color: var(--ink-raised);
	pointer-events: none;
}
.process-body {
	position: relative;
	z-index: 1;
	padding-left: 44px;
	max-width: 36ch;
}
.process-kicker {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--teal-tint);
	transition: color 0.25s ease;
}
.process-title {
	font-family: var(--font-display);
	font-size: var(--size-display-s);
	line-height: 1.2;
	font-weight: 400;
	color: var(--ivory);
	margin: 10px 0 12px;
}
.process-step p {
	color: var(--stone);
	font-size: 15px;
	line-height: 26px;
	margin: 0;
}

/* Ticks: a hairline from each step across the gutter to the spine,
   ending in a stop dot. Owned by the step, so they always meet the
   spine no matter how tall any step grows. */
.process-step::before,
.process-step::after {
	content: "";
	position: absolute;
	pointer-events: none;
}
.process-step::before {
	top: var(--tick-y);
	width: 60px;
	height: 1px;
	background: color-mix(in srgb, var(--teal-tint) 40%, transparent);
}
.process-step::after {
	top: calc(var(--tick-y) - 3.5px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--teal-bright);
}
.process-step:nth-child(odd)::before { right: -60px; }
.process-step:nth-child(odd)::after { right: -64px; }
.process-step:nth-child(even)::before { left: -60px; }
.process-step:nth-child(even)::after { left: -64px; }

/* The spine: tint road with a bright fill that draws downward, and
   the hollow touchdown ring at its true end. */
.process-spine {
	grid-column: 2;
	grid-row: 1 / 3;
	justify-self: center;
	position: relative;
	width: 2px;
	background: color-mix(in srgb, var(--teal-tint) 40%, transparent);
	margin-top: 6px;
}
.process-spine-fill {
	position: absolute;
	inset: 0;
	background: var(--teal-bright);
	transform-origin: top center;
}
.process-spine::after {
	content: "";
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--teal-bright);
	background: transparent;
}

/* Post-draw life: a quiet, perceivable hover on fine pointers. */
@media (hover: hover) and (pointer: fine) {
	.process-body { transition: transform 0.25s ease; }
	.process-step:hover .process-body { transform: translateY(-2px); }
	.process-step:hover .process-kicker { color: var(--teal-bright); }
}

/* ---- Arrival choreography -----------------------------------
   Initial hidden states exist only under html.js-reveal, so no
   JavaScript, a broken observer, reduced motion or the 4s safety
   timeout all leave the route standing complete.
   ------------------------------------------------------------ */
html.js-reveal .process-panel {
	opacity: 0;
	transform: translateY(24px);
}
html.js-reveal .process-panel.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
html.js-reveal .process-panel .process-spine-fill { transform: scaleY(0); }
html.js-reveal .process-panel.is-in .process-spine-fill {
	transform: scaleY(1);
	transition: transform 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
html.js-reveal .process-panel .process-body,
html.js-reveal .process-panel .process-ghost {
	opacity: 0;
	transform: translateY(16px);
}
html.js-reveal .process-panel.is-in .process-body,
html.js-reveal .process-panel.is-in .process-ghost {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
html.js-reveal .process-panel .process-step::after {
	transform: scale(0.5);
	background: var(--ink-muted);
}
html.js-reveal .process-panel.is-in .process-step::after {
	transform: scale(1);
	background: var(--teal-bright);
	transition: transform 0.3s ease-out, background 0.3s ease-out;
}
html.js-reveal .process-panel .process-spine::after { transform: translateX(-50%) scale(0.5); opacity: 0; }
html.js-reveal .process-panel.is-in .process-spine::after {
	transform: translateX(-50%) scale(1);
	opacity: 1;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
	transition-delay: 1.5s;
}
html.js-reveal .process-panel.is-in .process-step:nth-child(1) .process-body { transition-delay: 0.2s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(2) .process-body { transition-delay: 0.55s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(3) .process-body { transition-delay: 0.9s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(4) .process-body { transition-delay: 1.25s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(1) .process-ghost { transition-delay: 0.15s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(2) .process-ghost { transition-delay: 0.5s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(3) .process-ghost { transition-delay: 0.85s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(4) .process-ghost { transition-delay: 1.2s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(1)::after { transition-delay: 0.25s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(2)::after { transition-delay: 0.62s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(3)::after { transition-delay: 0.98s; }
html.js-reveal .process-panel.is-in .process-step:nth-child(4)::after { transition-delay: 1.35s; }

/* ---- Tablet --------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
	.process-section { --panel-pad: 48px; --panel-pad-y: 56px; }
	.process-grid { grid-template-columns: 1fr 84px 1fr; }
	.process-step:nth-child(even) { margin-top: 64px; }
	.process-ghost { font-size: 128px; top: -26px; }
	.process-step:nth-child(odd)::before { right: -42px; width: 42px; }
	.process-step:nth-child(odd)::after { right: -46px; }
	.process-step:nth-child(even)::before { left: -42px; width: 42px; }
	.process-step:nth-child(even)::after { left: -46px; }
}

/* ---- Phones: a left timeline, drawn with the thumb ------------ */
@media (max-width: 767px) {
	.process-section { --panel-pad: 24px; --panel-pad-y: 48px; }
	.process-head { padding-left: 0; margin-bottom: 32px; }
	.process-panel {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 0;
	}
	.process-grid { display: block; position: relative; }
	.process-step { margin: 0 0 44px !important; padding-left: 30px; }
	.process-step:last-of-type { margin-bottom: 0 !important; }
	.process-ghost { font-size: 96px; left: auto; right: 0; top: -18px; }
	.process-body { padding-left: 0; max-width: none; }
	.process-step::before { display: none; }
	/* Specificity must match the desktop odd/even placement rules or the
	   even steps keep their -64px offset and park their dots off-panel. */
	.process-step:nth-child(odd)::after,
	.process-step:nth-child(even)::after {
		left: 0;
		right: auto;
		top: calc(var(--tick-y) - 2px);
	}
	.process-spine {
		position: absolute;
		left: 3px;
		top: 6px;
		bottom: 6px;
		width: 2px;
		margin: 0;
	}
}