/*
 * Section design layer.
 *
 * Elementor owns structure and content so it stays visually editable.
 * This file owns spacing, rhythm and type so the design cannot drift from
 * section to section.
 *
 * Each section container carries one class, set in Elementor under
 * Advanced > CSS Classes. Nothing here depends on Elementor Pro.
 */

/* --------------------------------------------------------------------------
   Shared section rhythm
   -------------------------------------------------------------------------- */

.sst-sec { padding-block: var(--sst-section) !important; }
.sst-sec--tight { padding-block: var(--sst-section-tight) !important; }
.sst-sec--paper { background-color: var(--sst-paper); }
.sst-sec--sand  { background-color: var(--sst-sand); }
.sst-sec--green { background-color: var(--sst-green); }

/* A centred intro: eyebrow, heading, one line of standfirst. */
.sst-secintro { max-width: 700px; margin-inline: auto; text-align: center; }
.sst-secintro .elementor-widget-heading:first-child { margin-bottom: .5rem; }
.sst-secintro p { color: var(--sst-muted); font-size: clamp(1.02rem, 1.3vw, 1.14rem); }
.sst-secintro + * { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* --------------------------------------------------------------------------
   1. Home hero
   -------------------------------------------------------------------------- */

.sst-hero {
	min-height: min(80vh, 720px);
	display: flex;
	align-items: flex-end;
	position: relative;
	background-size: cover;
	background-position: center 30%;
}
.sst-hero > .e-con-inner {
	max-width: var(--sst-wide);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	position: relative;
	z-index: 2;
}
.sst-hero h1, .sst-hero .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(2.3rem, 4.6vw, 3.75rem);
	max-width: 19ch;
	margin-bottom: 1.2rem;
	text-wrap: balance;
	line-height: 1.08;
}
.sst-hero p {
	color: rgba(255,255,255,0.85);
	max-width: 60ch;
	font-size: clamp(1rem, 1.3vw, 1.16rem);
	line-height: 1.75;
}

/* Load stagger. Hero content is above the fold, so it animates on load rather
   than waiting for an intersection that has already happened. */
@media (prefers-reduced-motion: no-preference) {
	.sst-hero > .e-con-inner > * {
		animation: sst-rise .85s var(--sst-ease) both;
	}
	.sst-hero > .e-con-inner > *:nth-child(1) { animation-delay: .05s; }
	.sst-hero > .e-con-inner > *:nth-child(2) { animation-delay: .16s; }
	.sst-hero > .e-con-inner > *:nth-child(3) { animation-delay: .27s; }
	.sst-hero > .e-con-inner > *:nth-child(4) { animation-delay: .38s; }
}

/* Interior page hero, shorter and centred. */
.sst-pagehero {
	min-height: min(42vh, 380px);
	display: flex; align-items: center; text-align: center;
	background-size: cover; background-position: center;
}
.sst-pagehero > .e-con-inner {
	max-width: 780px; margin-inline: auto; position: relative; z-index: 2;
	padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}
.sst-pagehero h1, .sst-pagehero .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: .85rem; text-wrap: balance;
}
.sst-pagehero p { color: rgba(255,255,255,0.85); max-width: 58ch; margin-inline: auto; font-size: clamp(1rem, 1.3vw, 1.14rem); }

/* --------------------------------------------------------------------------
   2. Split: text beside an arch-clipped image

   The arch is the site's one decorative move, traced from the logo artwork.
   It was previously running at 557 by 696 pixels, which made a motif into a
   monument. Capped hard, and the text column gets the extra room.
   -------------------------------------------------------------------------- */

.sst-split > .e-con-inner {
	max-width: var(--sst-wide);
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}
@media (max-width: 900px) {
	.sst-split > .e-con-inner { grid-template-columns: 1fr; }
	.sst-split .sst-split__media { order: -1; }
}
.sst-split h2 { margin-bottom: 1.2rem; text-wrap: balance; }
.sst-split .sst-eyebrow { display: block; margin-bottom: .9rem; }
.sst-split img { width: 100%; height: auto; display: block; }
.sst-split__media { justify-self: end; }
.sst-split--flip .sst-split__media { justify-self: start; }
.sst-split__media img {
	max-width: 360px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	clip-path: url(#sst-arch);
}
@media (max-width: 900px) {
	.sst-split__media { justify-self: center; }
	.sst-split__media img { max-width: 300px; }
}
.sst-split--flip > .e-con-inner { direction: rtl; }
.sst-split--flip > .e-con-inner > * { direction: ltr; }

/* --------------------------------------------------------------------------
   3. Experience cards, used on the home page and as the Experiences index
   -------------------------------------------------------------------------- */

.sst-tours > .e-con-inner { max-width: var(--sst-wide); }
.sst-tourgrid > .e-con-inner,
.sst-tourgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}
@media (max-width: 980px) {
	.sst-tourgrid > .e-con-inner, .sst-tourgrid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
/* Two cards, not three, so they fill the row instead of leaving a hole. */
.sst-tourgrid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .sst-tourgrid--two { grid-template-columns: 1fr; } }

/* Four cards go two by two. Three across leaves the fourth stranded alone on a
   second row, which reads as an afterthought rather than a fourth option. */
.sst-tourgrid--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .sst-tourgrid--four { grid-template-columns: 1fr; } }

.sst-tourcard {
	background: var(--sst-paper);
	border: 1px solid var(--sst-line);
	display: flex; flex-direction: column;
	padding: 0 !important;
	transition: border-color .3s var(--sst-ease), transform .4s var(--sst-ease);
}
.sst-tourcard:hover { border-color: var(--sst-limestone); transform: translateY(-3px); }
.sst-tourcard .elementor-widget-image { margin: 0; overflow: hidden; }
.sst-tourcard img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
	transition: transform .8s var(--sst-ease);
}
.sst-tourcard:hover img { transform: scale(1.04); }
.sst-tourcard .elementor-widget-heading,
.sst-tourcard .elementor-widget-text-editor,
.sst-tourcard .elementor-widget-html,
.sst-tourcard .elementor-widget-button { padding-inline: clamp(1.4rem, 2.2vw, 1.9rem); }
.sst-tourcard .sst-eyebrow { padding-top: 1.6rem; display: block; }
.sst-tourcard h3 { font-size: 1.42rem; margin-bottom: .55rem; text-wrap: balance; }
.sst-tourcard p { font-size: .95rem; color: var(--sst-muted); }
.sst-tourcard .elementor-widget-button { margin-top: auto; padding-bottom: 1.8rem; }

/* The price line on the index cards, so the whole offer is comparable at a
   glance instead of one tour per screen. */
.sst-cardprice {
	display: flex; align-items: baseline; gap: .55rem;
	padding-top: 1.1rem; margin-top: 1.2rem;
	border-top: 1px solid var(--sst-line);
}
.sst-cardprice strong {
	font-family: var(--sst-display); font-size: 1.9rem; font-weight: 400;
	color: var(--sst-green); line-height: 1;
}
.sst-cardprice span {
	font-family: var(--sst-sans); font-size: .64rem; letter-spacing: .16em;
	text-transform: uppercase; color: var(--sst-muted);
}

/* --------------------------------------------------------------------------
   4. Dark band
   -------------------------------------------------------------------------- */

.sst-band {
	background-size: cover; background-position: center;
	text-align: center; position: relative;
}
.sst-band > .e-con-inner { max-width: 780px; margin-inline: auto; position: relative; z-index: 2; }
.sst-band h2 { margin-bottom: 1.25rem; text-wrap: balance; }
.sst-band p { color: rgba(255,255,255,0.82); }
.sst-band .sst-actions { justify-content: center; margin-top: 2.2rem; }

/* --------------------------------------------------------------------------
   5. Journal strip on the home page
   -------------------------------------------------------------------------- */

.sst-journal > .e-con-inner { max-width: var(--sst-wide); }
.sst-journal .sst-archive { padding: 0; max-width: none; }

/* --------------------------------------------------------------------------
   6. Contact strip
   -------------------------------------------------------------------------- */

.sst-contactstrip > .e-con-inner {
	max-width: var(--sst-wide);
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	text-align: center;
}
@media (max-width: 780px) { .sst-contactstrip > .e-con-inner { grid-template-columns: 1fr; } }
.sst-contactstrip .sst-eyebrow { display: block; margin-bottom: .6rem; }
.sst-contactstrip h3 { font-size: 1.28rem; margin-bottom: .4rem; }
.sst-contactstrip a { color: var(--sst-green); text-decoration: none; border-bottom: 1px solid var(--sst-gold); }
.sst-contactstrip p { font-size: .92rem; color: var(--sst-muted); margin-top: .5rem; }

/* --------------------------------------------------------------------------
   7. Experiences index

   Previously each itinerary ran full length down one page, which meant three
   screens of scrolling before the third option was even visible. The full
   itineraries now have their own pages, and this page compares the three.
   -------------------------------------------------------------------------- */

/* Facts about every journey, set as a row rather than a stack. */
.sst-facts > .e-con-inner { max-width: var(--sst-wide); }
.sst-factgrid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (max-width: 900px) { .sst-factgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sst-factgrid { grid-template-columns: 1fr; } }
.sst-factgrid .sst-item { border-top: 1px solid var(--sst-line); padding-top: 1.3rem; position: relative; }
.sst-factgrid .sst-item::before {
	content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 1px;
}
.sst-factgrid h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.sst-factgrid p { font-size: .92rem; color: var(--sst-muted); margin: 0; line-height: 1.7; }

/* Practicalities: rates that apply across every itinerary. */
.sst-stay > .e-con-inner {
	max-width: var(--sst-wide);
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 820px) { .sst-stay > .e-con-inner { grid-template-columns: 1fr; } }
.sst-stay .sst-panel { background: var(--sst-white); border: 1px solid var(--sst-line); padding: clamp(1.75rem, 3vw, 2.5rem); }
.sst-stay .sst-eyebrow { display: block; margin-bottom: .7rem; }
.sst-stay h3 { font-size: 1.35rem; margin-bottom: .9rem; }
.sst-stay p { font-size: .95rem; color: var(--sst-muted); }
.sst-stay ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
/*
 * Both rate lists are label then figure. The unit is part of the label text,
 * in brackets, so the figures line up on one edge down the whole list.
 *
 * Grid rather than flex on purpose: this row used to be a flex box with
 * justify-content space-between, and the bare text runs around the <strong>
 * became anonymous flex items. That pinned the label left and the unit right
 * and left the figure floating wherever the label happened to end, so it
 * landed somewhere different on every row.
 */
.sst-stay li {
	display: grid; grid-template-columns: 1fr max-content; column-gap: 1rem;
	align-items: baseline;
	padding: .7rem 0; border-bottom: 1px solid var(--sst-line); font-size: .95rem;
}
.sst-stay li:last-child { border-bottom: 0; }
.sst-stay li strong { color: var(--sst-green); white-space: nowrap; text-align: right; font-family: var(--sst-sans); font-size: .9rem; }
.sst-stay .sst-note { margin-top: 1.2rem; font-size: .87rem; color: var(--sst-muted); }

/* --------------------------------------------------------------------------
   8. The itineraries

   Three collapsible sections on the Experiences page. Native details/summary,
   so it works with no JavaScript, is keyboard operable and screen-reader
   announced for free, and the browser's own find-in-page can open a closed one.
   -------------------------------------------------------------------------- */

.sst-itins { border-top: 1px solid var(--sst-line); }

.sst-itin { border-bottom: 1px solid var(--sst-line); }
.sst-itin > summary {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: clamp(1.5rem, 2.6vw, 2rem) 0;
	cursor: pointer;
	list-style: none;
	transition: color .2s var(--sst-ease);
}
.sst-itin > summary::-webkit-details-marker { display: none; }
.sst-itin > summary:hover .sst-itin__title { color: var(--sst-green); }

.sst-itin__n {
	font-family: var(--sst-display); font-size: 1.7rem; line-height: 1;
	color: var(--sst-limestone);
}
.sst-itin__head { display: block; }
.sst-itin__title {
	display: block; font-family: var(--sst-display);
	font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.2; color: var(--sst-ink);
	transition: color .2s var(--sst-ease);
}
.sst-itin__dur {
	display: block; margin-top: .4rem;
	font-family: var(--sst-sans); font-size: .66rem; letter-spacing: .18em;
	text-transform: uppercase; color: var(--sst-muted);
}
.sst-itin__price {
	font-family: var(--sst-display); font-size: 1.6rem; color: var(--sst-green); line-height: 1;
}

/* A plus that becomes a minus. Two bars, one rotated away when open. */
.sst-itin__mark { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.sst-itin__mark::before,
.sst-itin__mark::after {
	content: ""; position: absolute; inset: 50% 0 auto 0;
	height: 1px; background: var(--sst-green);
	transition: transform .3s var(--sst-ease);
}
.sst-itin__mark::after { transform: rotate(90deg); }
.sst-itin[open] .sst-itin__mark::after { transform: rotate(0deg); }

.sst-itin__body {
	display: grid; grid-template-columns: 1.25fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) { .sst-itin__body { grid-template-columns: 1fr; } }

.sst-itin__lead { font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.5rem; }
.sst-itin__main h4 {
	font-family: var(--sst-sans); font-size: .66rem; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; color: var(--sst-muted);
	margin: 2rem 0 1rem;
}
.sst-itin__main > h4:first-child { margin-top: 0; }
.sst-itin__main ul { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.sst-itin__main > ul > li,
.sst-itin__main li {
	position: relative; padding-left: 1.5rem; margin-bottom: .65rem;
	font-size: .98rem; line-height: 1.7;
}
.sst-itin__main li::before {
	content: ""; position: absolute; left: 0; top: .68em;
	width: 6px; height: 6px; border: 1px solid var(--sst-gold); transform: rotate(45deg);
}
.sst-itin__main li ul { margin: .6rem 0 0; }
.sst-itin__main li li { font-size: .93rem; color: var(--sst-muted); margin-bottom: .4rem; }
.sst-itin__main li li::before { border-color: var(--sst-line); }

@media (prefers-reduced-motion: no-preference) {
	.sst-itin[open] .sst-itin__body { animation: sst-rise .45s var(--sst-ease) both; }
}

/* Pricing panel beside the itinerary. */
.sst-price {
	background: var(--sst-sand);
	padding: clamp(1.5rem, 2.6vw, 2.15rem);
}
.sst-price__figure {
	font-family: var(--sst-display); font-size: 2.6rem; line-height: 1;
	color: var(--sst-green); display: block;
}
.sst-price__unit {
	font-family: var(--sst-sans);
	font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sst-muted); display: block; margin-top: .6rem;
}
.sst-price hr { border: 0; border-top: 1px solid var(--sst-line); margin: 1.5rem 0; }
.sst-price h4 {
	font-family: var(--sst-sans); font-size: .66rem; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase; color: var(--sst-muted); margin: 0 0 .8rem;
}
.sst-price ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.sst-price li { font-size: .92rem; line-height: 1.65; margin-bottom: .5rem; color: var(--sst-ink); padding-left: 0; }
.sst-price li::before { display: none; }
.sst-price li strong { color: var(--sst-green); }
.sst-price .sst-btn { width: 100%; text-align: center; margin-top: .5rem; }

/* The line that closes each itinerary and sends the reader to the library.
   It replaced a second list of every stop, which repeated the itinerary
   immediately above it. Set apart with a rule so it reads as a closing note
   rather than another paragraph of the itinerary. */
.sst-itin__journal {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sst-line);
	font-size: .95rem;
	color: var(--sst-muted);
}
.sst-itin__journal a {
	color: var(--sst-green);
	text-decoration: underline;
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--sst-limestone);
}
.sst-itin__journal a:hover { text-decoration-color: var(--sst-green); }

/* --------------------------------------------------------------------------
   9. About page
   -------------------------------------------------------------------------- */

.sst-expect > .e-con-inner { max-width: var(--sst-wide); }
.sst-expectgrid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
}
@media (max-width: 780px) { .sst-expectgrid { grid-template-columns: 1fr; } }
.sst-expectgrid .sst-item { border-top: 1px solid var(--sst-line); padding-top: 1.5rem; position: relative; }
.sst-expectgrid .sst-item::before {
	content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 1px;
}
/* An odd final item would sit alone against an empty half. Letting it run the
   full width turns that into a closing line rather than a gap. */
.sst-expectgrid .sst-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sst-expectgrid h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.sst-expectgrid p { font-size: .96rem; color: var(--sst-muted); margin: 0; line-height: 1.72; }

/* Pull quote, used once. */
.sst-quote > .e-con-inner { max-width: 840px; margin-inline: auto; text-align: center; }
.sst-quote p {
	font-family: var(--sst-display); font-size: clamp(1.45rem, 2.7vw, 2.15rem);
	line-height: 1.42; color: var(--sst-green); margin: 0; letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   10. Contact page

   No form. WhatsApp and Instagram are how enquiries actually arrive, and email
   backs them up, so the page is three real channels rather than a field set
   nobody fills in.
   -------------------------------------------------------------------------- */

/* Two columns, the layout that was here before the form came out: the channels
   down the left, and on the right the panel the form used to occupy. */
.sst-contact > .e-con-inner {
	max-width: var(--sst-wide);
	display: grid; grid-template-columns: 1fr 1.15fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}
@media (max-width: 900px) { .sst-contact > .e-con-inner { grid-template-columns: 1fr; } }
.sst-contact h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 1.5rem; }

.sst-channels { display: grid; gap: 1rem; }

.sst-channel {
	display: flex; align-items: flex-start; gap: 1.15rem;
	border: 1px solid var(--sst-line); background: var(--sst-white);
	padding: 1.35rem 1.5rem; text-decoration: none; color: var(--sst-ink);
	transition: border-color .25s var(--sst-ease), background-color .25s var(--sst-ease);
}
.sst-channel:hover { border-color: var(--sst-green); }
.sst-channel svg { flex-shrink: 0; color: var(--sst-green); margin-top: .15rem; }
.sst-channel__label {
	font-family: var(--sst-sans);
	font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--sst-muted); display: block; margin-bottom: .4rem;
}
.sst-channel__value { font-size: 1.02rem; color: var(--sst-ink); display: block; line-height: 1.4; word-break: break-word; }
.sst-channel__note { font-size: .88rem; color: var(--sst-muted); margin-top: .7rem; display: block; line-height: 1.6; }

/* WhatsApp leads, because it is the channel that actually gets used. */
.sst-channel--primary { background: var(--sst-green); border-color: var(--sst-green); }
.sst-channel--primary .sst-channel__label { color: var(--sst-limestone); }
.sst-channel--primary .sst-channel__value,
.sst-channel--primary .sst-channel__note { color: rgba(255,255,255,.88); }
.sst-channel--primary svg { color: var(--sst-limestone); }
.sst-channel--primary:hover { background: var(--sst-green-deep); border-color: var(--sst-green-deep); }

/* What to tell us, so the first message is a useful one. */
.sst-brief {
	border: 1px solid var(--sst-line); background: var(--sst-white);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sst-brief h2 { font-size: 1.55rem; margin-bottom: .6rem; }
.sst-brief > p { color: var(--sst-muted); margin-bottom: 1.75rem; }
.sst-brieflist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; }
@media (max-width: 620px) { .sst-brieflist { grid-template-columns: 1fr; } }
.sst-brieflist li { display: flex; gap: .85rem; align-items: flex-start; font-size: .97rem; line-height: 1.6; }
.sst-brieflist li::before {
	content: ""; flex-shrink: 0; margin-top: .55em;
	width: 7px; height: 7px; border: 1px solid var(--sst-gold); transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   11. Utility
   -------------------------------------------------------------------------- */

/* Clean placeholder for image slots waiting on real photography. */
.sst-imgslot {
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--sst-line); background: var(--sst-sand);
	aspect-ratio: 4 / 3; color: var(--sst-muted);
	font-family: var(--sst-sans);
	font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; text-align: center;
}

/* Elementor resets so nested containers do not fight the grids above. */
.sst-split > .e-con-inner > .e-con,
.sst-tourgrid > .e-con-inner > .e-con,
.sst-contact > .e-con-inner > .e-con,
.sst-stay > .e-con-inner > .e-con,
.sst-exp > .e-con-inner > .e-con { width: 100%; max-width: 100%; }

.sst-sec .elementor-widget:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Elementor specificity overrides

   Elementor writes a per-page stylesheet (post-<id>.css) that loads AFTER the
   theme, and its global kit rules match at the same specificity as ours, so
   they win on source order alone. Rather than scatter !important through the
   file, these selectors carry one extra step of specificity so the design
   system wins predictably. Per-widget colours set by hand in Elementor still
   override these, which is correct.
   -------------------------------------------------------------------------- */

body .elementor-widget-heading .elementor-heading-title { color: var(--sst-ink); }

body .sst-eyebrow .elementor-heading-title {
	color: var(--sst-gold);
	font-family: var(--sst-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* Dark sections: headings and eyebrows flip to light. */
body .sst-hero .elementor-widget-heading .elementor-heading-title,
body .sst-pagehero .elementor-widget-heading .elementor-heading-title,
body .sst-band .elementor-widget-heading .elementor-heading-title { color: #fff; }

body .sst-hero .sst-eyebrow .elementor-heading-title,
body .sst-pagehero .sst-eyebrow .elementor-heading-title,
body .sst-band .sst-eyebrow .elementor-heading-title { color: var(--sst-limestone); }

/* Body copy inside Elementor's text editor widget. */
body .elementor-widget-text-editor { font-family: var(--sst-body); }

/* Container alignment. Elementor's generic .e-con rule sets align-items. */
body .e-con.sst-hero { align-items: flex-end; }
body .e-con.sst-pagehero { align-items: center; }
body .e-con.sst-band { align-items: center; }

body .sst-tourcard .elementor-heading-title { font-size: 1.42rem; }

/* --------------------------------------------------------------------------
   13. Buttons

   Elementor's kit rule is `.elementor-kit-N .elementor-button`, which is two
   classes. The base here matches that plus one element so it wins reliably;
   the variants then add their own class to sit above it.
   -------------------------------------------------------------------------- */

body .elementor-widget-button .elementor-button,
body .elementor-widget-button .elementor-button:visited {
	background-color: var(--sst-green);
	border: 1px solid var(--sst-green);
	color: var(--sst-white);
	border-radius: 0;
	padding: 1.2em 2.3em;
	font-family: var(--sst-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1;
	fill: var(--sst-white);
}
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus {
	background-color: var(--sst-green-deep);
	border-color: var(--sst-green-deep);
	color: var(--sst-white);
}

body .elementor-widget-button.sst-btn-ghost .elementor-button {
	background-color: transparent;
	border-color: rgba(255,255,255,.6);
	color: var(--sst-white);
}
body .elementor-widget-button.sst-btn-ghost .elementor-button:hover,
body .elementor-widget-button.sst-btn-ghost .elementor-button:focus {
	background-color: var(--sst-white);
	border-color: var(--sst-white);
	color: var(--sst-green-deep);
}

/* Quiet text link. No box, so no padding by design. */
body .elementor-widget-button.sst-link .elementor-button,
body .sst-tourcard .elementor-widget-button .elementor-button {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--sst-gold);
	color: var(--sst-green);
	padding: 0 0 4px;
	font-size: .66rem;
	letter-spacing: .2em;
}
body .elementor-widget-button.sst-link .elementor-button:hover,
body .sst-tourcard .elementor-widget-button .elementor-button:hover {
	background-color: transparent;
	color: var(--sst-green-soft);
	border-bottom-color: var(--sst-green);
}

/* Elementor wraps each button in a block level widget div. Inside a flex row
   that div must shrink to the button, otherwise the gap reads as misalignment. */
body .sst-actions .elementor-widget-button { width: auto; margin: 0; }
body .sst-actions .elementor-button-wrapper { line-height: 0; }

/* Elementor containers default to flex-direction: column, which silently
   stacks every button row. The direction has to be stated explicitly, at a
   specificity that beats the generic .e-con rule. */
body .e-con.sst-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem;
}
body .sst-actions--center { justify-content: center; }
body .sst-hero .sst-actions { justify-content: flex-start; margin-top: 2.4rem; }

@media (max-width: 560px) {
	body .e-con.sst-actions { flex-direction: column; align-items: stretch; }
	body .e-con.sst-actions .elementor-widget-button { width: 100%; }
	body .e-con.sst-actions .elementor-button { display: block; width: 100%; text-align: center; }
	body .e-con.sst-actions .elementor-widget-button.sst-link { width: auto; align-self: flex-start; }
	body .e-con.sst-actions .elementor-widget-button.sst-link .elementor-button { display: inline-block; width: auto; }
}

/* --------------------------------------------------------------------------
   14. Vertical rhythm corrections

   Every .sst-sec pays its padding top and bottom. Where two sections meet on
   the same ground there is no visible seam, so the two paddings stack into a
   hole twice the intended size. Only one of them should pay for the gap.
   -------------------------------------------------------------------------- */

.sst-sec--paper + .sst-sec--paper,
.sst-sec--sand  + .sst-sec--sand { padding-top: 0 !important; }

/* Elementor gives the first child of a container a top offset that fights the
   section padding above it. */
.sst-sec > .e-con-inner > .elementor-widget:first-child { margin-top: 0; }