@charset "UTF-8";
/* ==========================================================================
   Ceylon Paradise — theme stylesheet
   1. Fonts
   2. Tokens
   3. Reset & base
   4. Layout
   5. Typography components
   6. Buttons & controls
   7. Cards
   8. Forms
   9. Header
   10. Footer
   11. Utilities & motion
   Section-specific rules live in sections.css, loaded after this file.
   ========================================================================== */

/* 1. Fonts ================================================================= */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-var.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-italic-var.woff2") format("woff2-variations");
	font-weight: 400 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("../fonts/dm-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("../fonts/dm-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens ================================================================ */

:root {
	/* Brand — sampled from the logo. */
	--cp-navy: #07305a;
	--cp-teal: #0a758f;
	--cp-aqua: #44d0db;

	/* Derived scale. */
	--cp-ink: #04182b;
	--cp-navy-800: #052744;
	--cp-navy-900: #031b31;
	--cp-teal-600: #0b637a;
	--cp-aqua-050: #f2fbfc;
	--cp-aqua-100: #e0f6f8;
	--cp-aqua-200: #bfeaef;

	--cp-mist: #eaf1f2;
	--cp-mist-deep: #dde8ea;
	--cp-paper: #ffffff;
	--cp-muted: #56707f;
	--cp-line: rgba(7, 48, 90, 0.12);
	--cp-line-strong: rgba(7, 48, 90, 0.22);

	/* Gold is reserved for calls to action. Nothing decorative uses it. */
	--cp-gold: #efa31c;
	--cp-gold-600: #cf8908;
	--cp-gold-100: #fdf1d8;

	/* Type. */
	--cp-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--cp-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cp-font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	--cp-fs-hero: clamp(2.35rem, 5.6vw, 5.9rem);
	--cp-fs-display: clamp(2.4rem, 5.2vw, 4.25rem);
	--cp-fs-h1: clamp(2.2rem, 4.4vw, 3.5rem);
	--cp-fs-h2: clamp(1.9rem, 3.4vw, 2.9rem);
	--cp-fs-h3: clamp(1.3rem, 1.6vw, 1.6rem);
	--cp-fs-h4: 1.1875rem;
	--cp-fs-body: clamp(1rem, 0.3vw + 0.94rem, 1.0625rem);
	--cp-fs-lead: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
	--cp-fs-sm: 0.9375rem;
	--cp-fs-xs: 0.8125rem;
	--cp-fs-mono: 0.75rem;

	/* Space. */
	--cp-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--cp-max: 1240px;
	--cp-max-narrow: 760px;
	--cp-section: clamp(4.5rem, 8vw, 7.5rem);
	--cp-gap: clamp(1.25rem, 2.2vw, 2rem);

	/* Shape. */
	--cp-radius: 14px;
	--cp-radius-lg: 22px;
	--cp-radius-xl: 30px;
	--cp-radius-pill: 999px;

	/* Depth — tinted navy, never neutral grey. */
	--cp-shadow-sm: 0 1px 2px rgba(4, 24, 43, 0.06), 0 2px 8px rgba(4, 24, 43, 0.05);
	--cp-shadow: 0 4px 12px rgba(4, 24, 43, 0.07), 0 14px 34px rgba(4, 24, 43, 0.08);
	--cp-shadow-lg: 0 10px 24px rgba(4, 24, 43, 0.1), 0 30px 70px rgba(4, 24, 43, 0.14);

	--cp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--cp-header-h: 88px;
}

/* 3. Reset & base ========================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cp-header-h) + 20px);
}

body {
	margin: 0;
	background: var(--cp-paper);
	color: var(--cp-ink);
	font-family: var(--cp-font-body);
	font-size: var(--cp-fs-body);
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video,
canvas {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--cp-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.2s var(--cp-ease);
}

a:hover {
	color: var(--cp-navy);
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	font-family: var(--cp-font-display);
	/* Fraunces carries an optical-size axis: large type gets the display cut,
	   small type the text cut. That is the whole reason for choosing it. */
	font-optical-sizing: auto;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--cp-navy);
	text-wrap: balance;
}

:where(p, ul, ol, blockquote, figure, table, pre) {
	margin: 0 0 1.15em;
}

:where(p):last-child {
	margin-bottom: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--cp-line);
	margin: 2.5rem 0;
}

blockquote {
	margin-inline: 0;
	padding: 0.2rem 0 0.2rem 1.35rem;
	border-left: 3px solid var(--cp-aqua);
	font-size: var(--cp-fs-lead);
	color: var(--cp-navy);
}

code,
kbd,
pre {
	font-family: var(--cp-font-mono);
	font-size: 0.9em;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--cp-line);
	text-align: left;
}

::selection {
	background: var(--cp-aqua);
	color: var(--cp-navy-900);
}

:focus-visible {
	outline: 3px solid var(--cp-aqua);
	outline-offset: 2px;
	border-radius: 4px;
}

.cp-skip-link {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -140%);
	z-index: 999;
	padding: 0.85rem 1.4rem;
	background: var(--cp-navy);
	color: #fff;
	border-radius: 0 0 var(--cp-radius) var(--cp-radius);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s var(--cp-ease);
}

.cp-skip-link:focus {
	transform: translate(-50%, 0);
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 0.8rem 1.2rem;
	background: var(--cp-navy);
	color: #fff;
	z-index: 1000;
}

/* 4. Layout ================================================================ */

.cp-shell {
	width: 100%;
	max-width: calc(var(--cp-max) + var(--cp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-shell--narrow {
	max-width: calc(var(--cp-max-narrow) + var(--cp-gutter) * 2);
}

.cp-shell--wide {
	max-width: 1480px;
}

.cp-section {
	padding-block: var(--cp-section);
	position: relative;
}

.cp-section--tight {
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

.cp-section--mist {
	background: var(--cp-mist);
}

.cp-section--navy {
	background: var(--cp-navy);
	color: rgba(255, 255, 255, 0.82);
}

.cp-section--navy :where(h1, h2, h3, h4) {
	color: #fff;
}

.cp-grid {
	display: grid;
	gap: var(--cp-gap);
}

@media (min-width: 640px) {
	.cp-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.cp-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 640px) and (max-width: 899px) {
	.cp-grid--3,
	.cp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* The island's long axis: headings sit in a narrow left rail, content right. */
.cp-split {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 960px) {
	.cp-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.cp-split--even {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cp-split--reverse > :first-child {
		order: 2;
	}
}

/* 5. Typography components ================================================= */

.cp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 1rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cp-teal);
}

.cp-eyebrow::before {
	content: "";
	width: 1.6rem;
	height: 2px;
	background: var(--cp-aqua);
	flex: none;
}

.cp-eyebrow--pill {
	padding: 0.45rem 1rem;
	border: 1px solid var(--cp-line-strong);
	border-radius: var(--cp-radius-pill);
	color: var(--cp-navy);
}

.cp-eyebrow--pill::before {
	display: none;
}

.cp-section--navy .cp-eyebrow {
	color: var(--cp-aqua);
}

.cp-title {
	font-size: var(--cp-fs-h2);
	margin-bottom: 0;
}

.cp-title--display {
	font-size: var(--cp-fs-display);
}

/* Two-tone headline: the second clause drops back. */
.cp-title__soft {
	color: var(--cp-muted);
	font-weight: 400;
}

.cp-section--navy .cp-title__soft {
	color: rgba(255, 255, 255, 0.5);
}

.cp-lead {
	font-size: var(--cp-fs-lead);
	color: var(--cp-muted);
	max-width: 58ch;
}

.cp-section--navy .cp-lead {
	color: rgba(255, 255, 255, 0.72);
}

.cp-heading {
	margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.cp-heading__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}

.cp-heading__body {
	max-width: 62ch;
}

.cp-heading--center {
	text-align: center;
}

.cp-heading--center .cp-heading__top {
	flex-direction: column;
	align-items: center;
}

.cp-heading--center .cp-lead {
	margin-inline: auto;
}

.cp-heading--center .cp-eyebrow::before {
	display: none;
}

.cp-heading .cp-lead {
	margin-top: 0.9rem;
}

/* Real data — durations, drive times, prices — always in the mono face. */
.cp-data {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-teal);
}

.cp-route {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-route__arrow {
	color: var(--cp-aqua);
}

.cp-route__leg {
	color: var(--cp-navy);
	font-weight: 500;
}

.cp-route__time {
	color: var(--cp-teal);
	white-space: nowrap;
}

/* 6. Buttons & controls ==================================================== */

.cp-btn {
	--btn-bg: var(--cp-gold);
	--btn-fg: var(--cp-navy-900);
	--btn-bd: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.9rem 1.6rem;
	border: 1px solid var(--btn-bd);
	border-radius: var(--cp-radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--cp-font-body);
	font-size: var(--cp-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s var(--cp-ease), box-shadow 0.18s var(--cp-ease),
		background-color 0.18s var(--cp-ease), color 0.18s var(--cp-ease),
		border-color 0.18s var(--cp-ease);
}

.cp-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(4, 24, 43, 0.16);
	color: var(--btn-fg);
}

.cp-btn:active {
	transform: translateY(0);
}

.cp-btn--primary {
	--btn-bg: var(--cp-gold);
	--btn-fg: var(--cp-navy-900);
}

.cp-btn--primary:hover {
	--btn-bg: var(--cp-gold-600);
}

.cp-btn--navy {
	--btn-bg: var(--cp-navy);
	--btn-fg: #fff;
}

.cp-btn--navy:hover {
	--btn-bg: var(--cp-navy-800);
}

.cp-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--cp-navy);
	--btn-bd: var(--cp-line-strong);
}

.cp-btn--ghost:hover {
	--btn-bg: var(--cp-navy);
	--btn-fg: #fff;
	--btn-bd: var(--cp-navy);
}

.cp-btn--on-dark {
	--btn-bg: rgba(255, 255, 255, 0.1);
	--btn-fg: #fff;
	--btn-bd: rgba(255, 255, 255, 0.34);
	backdrop-filter: blur(6px);
}

.cp-btn--on-dark:hover {
	--btn-bg: #fff;
	--btn-fg: var(--cp-navy);
	--btn-bd: #fff;
}

.cp-btn--sm {
	padding: 0.62rem 1.15rem;
	font-size: var(--cp-fs-xs);
}

.cp-btn--lg {
	padding: 1.05rem 2rem;
	font-size: 1rem;
}

.cp-btn--block {
	width: 100%;
}

/* Text link that reads as an action. */
.cp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	font-size: var(--cp-fs-sm);
	color: var(--cp-teal);
	text-decoration: none;
}

.cp-link svg {
	transition: transform 0.2s var(--cp-ease);
}

.cp-link:hover svg {
	transform: translateX(4px);
}

.cp-link::after {
	content: "";
	position: absolute;
}

/* Small round control used by carousels. */
.cp-nav-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid var(--cp-line-strong);
	border-radius: 50%;
	background: var(--cp-paper);
	color: var(--cp-navy);
	cursor: pointer;
	transition: background-color 0.18s var(--cp-ease), color 0.18s var(--cp-ease),
		border-color 0.18s var(--cp-ease), opacity 0.18s var(--cp-ease);
}

.cp-nav-btn:hover:not(:disabled) {
	background: var(--cp-navy);
	border-color: var(--cp-navy);
	color: #fff;
}

.cp-nav-btn:disabled {
	opacity: 0.32;
	cursor: default;
}

.cp-nav-group {
	display: inline-flex;
	gap: 0.6rem;
}

/* Filter chips. */
.cp-chips {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.35rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cp-chips::-webkit-scrollbar {
	display: none;
}

.cp-chip {
	flex: none;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--cp-line-strong);
	border-radius: var(--cp-radius-pill);
	background: transparent;
	color: var(--cp-navy);
	font-family: var(--cp-font-body);
	font-size: var(--cp-fs-sm);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s var(--cp-ease), color 0.18s var(--cp-ease),
		border-color 0.18s var(--cp-ease);
}

.cp-chip:hover {
	border-color: var(--cp-teal);
	color: var(--cp-teal);
}

.cp-chip[aria-pressed="true"],
.cp-chip.is-active {
	background: var(--cp-navy);
	border-color: var(--cp-navy);
	color: #fff;
}

/* Badge sitting on an image. */
.cp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35rem 0.75rem;
	border-radius: var(--cp-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	color: var(--cp-navy);
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.cp-badge--gold {
	background: var(--cp-gold);
	color: var(--cp-navy-900);
}

.cp-badge--navy {
	background: var(--cp-navy);
	color: #fff;
}

/* Star rating. */
.cp-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	color: var(--cp-gold);
	line-height: 1;
}

.cp-stars svg {
	width: 15px;
	height: 15px;
}

.cp-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--cp-fs-xs);
	color: var(--cp-muted);
}

/* 7. Cards ================================================================= */

.cp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cp-paper);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
	overflow: hidden;
	transition: transform 0.28s var(--cp-ease), box-shadow 0.28s var(--cp-ease),
		border-color 0.28s var(--cp-ease);
}

.cp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cp-shadow);
	border-color: transparent;
}

.cp-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-mist-deep);
}

.cp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cp-ease);
}

.cp-card:hover .cp-card__media img {
	transform: scale(1.05);
}

.cp-card__tags {
	position: absolute;
	inset: 0.85rem 0.85rem auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	pointer-events: none;
}

.cp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.25rem 1.35rem 1.4rem;
	flex: 1;
}

.cp-card__title {
	font-size: var(--cp-fs-h4);
	line-height: 1.25;
	margin: 0;
}

.cp-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link keeps the whole card clickable without nesting anchors. */
.cp-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cp-card__excerpt {
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
	margin: 0;
}

.cp-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--cp-line);
}

.cp-price {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	color: var(--cp-navy);
}

.cp-price__label {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

.cp-price__value {
	font-family: var(--cp-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.cp-price__unit {
	font-size: var(--cp-fs-xs);
	color: var(--cp-muted);
}

/* Meta row: duration, group size, difficulty. */
.cp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: var(--cp-fs-xs);
	color: var(--cp-muted);
}

.cp-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.cp-meta__item svg {
	width: 15px;
	height: 15px;
	color: var(--cp-teal);
	flex: none;
}

/* 8. Forms ================================================================= */

.cp-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cp-label {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--cp-line-strong);
	border-radius: var(--cp-radius);
	background: var(--cp-paper);
	color: var(--cp-ink);
	font-family: var(--cp-font-body);
	font-size: var(--cp-fs-sm);
	line-height: 1.4;
	transition: border-color 0.18s var(--cp-ease), box-shadow 0.18s var(--cp-ease);
}

textarea {
	min-height: 130px;
	resize: vertical;
}

select {
	appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%230A758F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--cp-teal);
	box-shadow: 0 0 0 3px rgba(68, 208, 219, 0.28);
}

::placeholder {
	color: #9aabb6;
	opacity: 1;
}

/* 9. Header ================================================================ */

.cp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--cp-paper);
	border-bottom: 1px solid var(--cp-line);
	transition: background-color 0.3s var(--cp-ease), border-color 0.3s var(--cp-ease),
		box-shadow 0.3s var(--cp-ease);
}

.cp-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--cp-header-h);
}

.cp-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	line-height: 0;
}

.cp-brand img,
.cp-brand svg {
	height: 66px;
	width: auto;
	transition: opacity 0.25s var(--cp-ease);
}

@media (max-width: 720px) {
	.cp-brand img,
	.cp-brand svg {
		height: 54px;
	}
}

.cp-brand__light {
	display: none;
}

.cp-brand__text {
	font-family: var(--cp-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cp-navy);
	line-height: 1.1;
}

.cp-header__nav {
	margin-left: auto;
}

.cp-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: none;
}

.cp-header__phone {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--cp-navy);
	text-decoration: none;
	white-space: nowrap;
}

.cp-header__phone svg {
	width: 16px;
	height: 16px;
	color: var(--cp-teal);
}

@media (min-width: 1120px) {
	.cp-header__phone {
		display: inline-flex;
	}
}

/* Transparent over the hero, solid once scrolled. */
.has-transparent-header .cp-header {
	position: fixed;
	inset: 0 0 auto;
	background: transparent;
	border-bottom-color: transparent;
}

.has-transparent-header .cp-header:not(.is-stuck) .cp-brand__dark {
	display: none;
}

.has-transparent-header .cp-header:not(.is-stuck) .cp-brand__light {
	display: block;
}

.has-transparent-header .cp-header:not(.is-stuck) .cp-menu > li > a,
.has-transparent-header .cp-header:not(.is-stuck) .cp-header__phone,
.has-transparent-header .cp-header:not(.is-stuck) .cp-burger {
	color: #fff;
}

.has-transparent-header .cp-header:not(.is-stuck) .cp-header__phone svg {
	color: var(--cp-aqua);
}

.cp-header.is-stuck {
	background: var(--cp-paper);
	border-bottom-color: var(--cp-line);
	box-shadow: 0 2px 20px rgba(4, 24, 43, 0.07);
}

/* Primary menu. */
.cp-menu,
.cp-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-menu {
	display: none;
	align-items: center;
	gap: clamp(0.4rem, 1.4vw, 1.1rem);
}

@media (min-width: 1024px) {
	.cp-menu {
		display: flex;
	}
}

.cp-menu > li {
	position: relative;
}

.cp-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.6rem 0.15rem;
	color: var(--cp-navy);
	font-size: var(--cp-fs-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.cp-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0.15rem;
	right: 0.15rem;
	bottom: 0.35rem;
	height: 2px;
	background: var(--cp-aqua);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--cp-ease);
}

.cp-menu > li:hover > a::after,
.cp-menu > li.current-menu-item > a::after,
.cp-menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.cp-menu__caret {
	width: 10px;
	height: 7px;
	flex: none;
	transition: transform 0.25s var(--cp-ease);
}

.cp-menu > li:hover .cp-menu__caret {
	transform: rotate(180deg);
}

/* Dropdown / mega panel. */
.cp-menu .sub-menu,
.cp-mega {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	padding: 0.6rem;
	background: var(--cp-paper);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s var(--cp-ease), transform 0.2s var(--cp-ease), visibility 0.2s;
	z-index: 20;
}

.cp-menu li:hover > .sub-menu,
.cp-menu li:focus-within > .sub-menu,
.cp-menu li:hover > .cp-mega,
.cp-menu li:focus-within > .cp-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cp-menu .sub-menu a {
	display: block;
	padding: 0.55rem 0.8rem;
	border-radius: 9px;
	color: var(--cp-navy);
	font-size: var(--cp-fs-sm);
	text-decoration: none;
	transition: background-color 0.16s var(--cp-ease), color 0.16s var(--cp-ease);
}

.cp-menu .sub-menu a:hover {
	background: var(--cp-aqua-100);
	color: var(--cp-teal-600);
}

/* Burger. */
.cp-burger {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--cp-navy);
	cursor: pointer;
	border-radius: 10px;
}

@media (min-width: 1024px) {
	.cp-burger {
		display: none;
	}
}

.cp-burger__bars {
	position: relative;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background-color 0.2s var(--cp-ease);
}

.cp-burger__bars::before,
.cp-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.28s var(--cp-ease);
}

.cp-burger__bars::before {
	top: -7px;
}

.cp-burger__bars::after {
	top: 7px;
}

.cp-burger[aria-expanded="true"] .cp-burger__bars {
	background: transparent;
}

.cp-burger[aria-expanded="true"] .cp-burger__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.cp-burger[aria-expanded="true"] .cp-burger__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer. */
.cp-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--cp-navy);
	color: #fff;
	padding: 1.1rem var(--cp-gutter) 2.5rem;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.28s var(--cp-ease), transform 0.28s var(--cp-ease), visibility 0.28s;
}

.cp-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cp-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--cp-header-h);
	margin-bottom: 1rem;
}

.cp-drawer__head .cp-brand img {
	height: 46px;
}

.cp-drawer__close {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.cp-drawer__menu,
.cp-drawer__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-drawer__menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cp-drawer__menu a {
	display: block;
	padding: 0.95rem 0;
	color: #fff;
	font-family: var(--cp-font-display);
	font-size: 1.45rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.cp-drawer__menu .sub-menu {
	padding: 0 0 0.85rem 0.9rem;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.cp-drawer__menu .sub-menu a {
	padding: 0.45rem 0;
	font-family: var(--cp-font-body);
	font-size: 1rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
}

.cp-drawer__foot {
	margin-top: auto;
	padding-top: 2rem;
	display: grid;
	gap: 0.9rem;
}

body.cp-no-scroll {
	overflow: hidden;
}

/* 10. Footer =============================================================== */

.cp-footer {
	position: relative;
	background: var(--cp-navy-900);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--cp-fs-sm);
}

.cp-footer__wave {
	display: block;
	width: 100%;
	height: clamp(40px, 5vw, 70px);
	color: var(--cp-navy-900);
}

.cp-footer__wave svg {
	width: 100%;
	height: 100%;
}

.cp-footer__main {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 720px) {
	.cp-footer__main {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.cp-footer__main {
		grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	}
}

.cp-footer__brand img {
	height: 76px;
	width: auto;
	margin-bottom: 1.1rem;
}

.cp-footer__about {
	max-width: 38ch;
	margin-bottom: 1.35rem;
}

.cp-footer__title {
	margin: 0 0 1.1rem;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cp-aqua);
}

.cp-footer__list,
.cp-footer__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.cp-footer__list a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.18s var(--cp-ease), padding-left 0.18s var(--cp-ease);
}

.cp-footer__list a:hover {
	color: var(--cp-aqua);
	padding-left: 4px;
}

.cp-contact-list {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.cp-contact-list li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
}

.cp-contact-list svg {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 0.2rem;
	color: var(--cp-aqua);
}

.cp-contact-list a {
	color: inherit;
	text-decoration: none;
}

.cp-contact-list a:hover {
	color: var(--cp-aqua);
}

.cp-socials {
	display: flex;
	gap: 0.6rem;
}

.cp-socials a {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.18s var(--cp-ease), border-color 0.18s var(--cp-ease),
		color 0.18s var(--cp-ease);
}

.cp-socials a:hover {
	background: var(--cp-aqua);
	border-color: var(--cp-aqua);
	color: var(--cp-navy-900);
}

.cp-socials svg {
	width: 17px;
	height: 17px;
}

.cp-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem 1.6rem;
	font-size: var(--cp-fs-xs);
	color: rgba(255, 255, 255, 0.55);
}

.cp-footer__legal {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 0;
	padding: 0;
}

.cp-footer__legal a {
	color: inherit;
	text-decoration: none;
}

.cp-footer__legal a:hover {
	color: var(--cp-aqua);
}

.cp-licence {
	font-family: var(--cp-font-mono);
	letter-spacing: 0.06em;
}

/* Floating enquire button, phones only. */
/* Appears once the hero's own buttons have scrolled away, so the two are
   never competing for the same tap. */
.cp-float-cta {
	position: fixed;
	left: var(--cp-gutter);
	right: var(--cp-gutter);
	bottom: 1rem;
	z-index: 90;
	display: none;
	box-shadow: var(--cp-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(120%);
	transition: opacity 0.3s var(--cp-ease), transform 0.3s var(--cp-ease), visibility 0.3s;
}

@media (max-width: 640px) {
	.cp-float-cta {
		display: flex;
	}

	.cp-float-cta.is-visible {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* No JavaScript, no hiding: the button simply stays put. */
html:not(.cp-js) .cp-float-cta {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The floating column, bottom right. One stack so the buttons can never
   land on top of each other however many of them are showing. */
.cp-floats {
	position: fixed;
	right: var(--cp-gutter);
	bottom: 1.5rem;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.6rem;
	pointer-events: none;
}

.cp-floats > * {
	pointer-events: auto;
}

.cp-to-top {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s var(--cp-ease), transform 0.25s var(--cp-ease), visibility 0.25s;
	box-shadow: var(--cp-shadow);
}

.cp-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* WhatsApp. Collapsed to a circle, widening to show the label on hover or
   keyboard focus — the label is the part that says a human will answer. */

.cp-wa-wrap {
	position: relative;
	display: inline-flex;
	/* Rises into place rather than simply being there, so it does not compete
	   with the hero's own intro on first paint. */
	animation: cp-wa-in 0.7s var(--cp-ease-out) 1.2s both;
}

/* The pulse: a ring that appears at the button's own size and expands away.
   On the wrapper rather than the link, because the link clips its own label
   and would clip the ring with it. */
.cp-wa-wrap::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: #25D366;
	opacity: 0;
	pointer-events: none;
	animation: cp-wa-pulse 2.2s var(--cp-ease-out) 2s infinite;
}

/* Once someone has noticed it, the pulse has done its job. */
.cp-wa-wrap:hover::before,
.cp-wa-wrap:focus-within::before {
	animation-play-state: paused;
	opacity: 0;
}

@keyframes cp-wa-pulse {
	0%   { transform: scale(1);    opacity: 0; }
	25%  { transform: scale(1);    opacity: 0.45; }
	100% { transform: scale(2.05); opacity: 0; }
}

@keyframes cp-wa-in {
	from { transform: translateY(1.5rem) scale(0.85); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.cp-wa {
	position: relative;
	display: grid;
	grid-template-columns: 2rem 0fr;
	align-items: center;
	justify-items: start;
	height: 3.5rem;
	padding: 0 0.75rem;
	border-radius: var(--cp-radius-pill);
	background: #25D366;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	box-shadow: 0 6px 24px rgba(4, 24, 43, 0.28);
	/* 0fr to 1fr is the one way to animate to an intrinsic width, so the pill
	   fits whatever the office types into the settings field instead of
	   guillotining it at a number I guessed. */
	transition: grid-template-columns 0.35s var(--cp-ease),
		background-color 0.2s var(--cp-ease), transform 0.2s var(--cp-ease);
}

/* justify-items:start above is there so the label text starts at the left edge
   of its track. The icon needs the opposite: centred in its 2rem column, or it
   sits 3px left of the circle's centre while the pill is collapsed. */
.cp-wa svg {
	flex: none;
	justify-self: center;
	width: 26px;
	height: 26px;
}

/* The collapsible track. min-width:0 lets it actually shrink to nothing, and
   visibility:hidden means the glyphs cannot paint outside the circle even for
   the frame before the clip applies — which is what went wrong first time. */
.cp-wa__label {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	line-height: 1.2;
	font-size: var(--cp-fs-sm);
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--cp-ease), visibility 0.2s;
}

.cp-wa:hover .cp-wa__label,
.cp-wa:focus-visible .cp-wa__label {
	padding: 0 0.5rem 0 0.7rem;
	opacity: 1;
	visibility: visible;
	transition-delay: 0.12s;
}

.cp-wa__label small {
	font-size: var(--cp-fs-xs);
	font-weight: 400;
	opacity: 0.85;
}

.cp-wa:hover,
.cp-wa:focus-visible {
	grid-template-columns: 2rem 1fr;
	background: #1EBE5A;
	color: #fff;
	transform: translateY(-1px);
}

/* A ring that expands forever is exactly the kind of motion that makes some
   people ill. No pulse, no entrance — the button is simply there. */
@media (prefers-reduced-motion: reduce) {
	.cp-wa-wrap,
	.cp-wa-wrap::before {
		animation: none;
	}

	.cp-wa-wrap::before {
		opacity: 0;
	}

	.cp-wa {
		transition: background-color 0.2s var(--cp-ease);
	}
}

@media (max-width: 640px) {
	.cp-to-top {
		display: none;
	}

	/* Lift clear of the full-width enquire bar. */
	.cp-floats {
		bottom: 4.75rem;
	}

	/* No hover on a phone, so it stays a circle and the tap target is the icon. */
	.cp-wa__label {
		display: none;
	}

	.cp-wa {
		grid-template-columns: 2rem;
		justify-content: center;
		justify-items: center;
		width: 3.5rem;
		padding: 0;
	}
}

/* 11. Utilities & motion =================================================== */

.cp-plain-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-stack {
	display: grid;
	gap: var(--cp-gap);
}

.cp-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.cp-bleed {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Scroll reveal. Elements are visible by default and only hidden once the
   script confirms it can observe them, so no-JS never leaves a blank page. */
.cp-js .cp-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--cp-ease-out), transform 0.7s var(--cp-ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.cp-js .cp-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cp-js .cp-reveal {
		opacity: 1;
		transform: none;
	}
}

/* The written-message float, beside WhatsApp ================================ */

/* Same geometry as .cp-wa so the pair reads as one control. Navy rather than
   WhatsApp green: two identical green buttons would be a guessing game. */
.cp-wa--contact {
	border: 0;
	cursor: pointer;
	background: var(--cp-navy);
	font: inherit;
	text-align: left;
}

.cp-wa--contact:hover,
.cp-wa--contact:focus-visible {
	background: var(--cp-teal);
}

/* No pulse ring on this one. One thing pulsing draws the eye; two compete. */
.cp-wa-wrap--contact::before {
	content: none;
}

.cp-wa-wrap--contact {
	animation-delay: 1.35s;
}

/* Modal ==================================================================== */

.cp-modal {
	width: min(34rem, calc(100vw - 2rem));
	max-height: calc(100vh - 3rem);
	padding: 0;
	border: 0;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-paper);
	color: var(--cp-ink);
	box-shadow: 0 24px 70px rgba(4, 24, 43, 0.35);
	overflow: visible;
}

.cp-modal::backdrop {
	background: rgba(4, 24, 43, 0.55);
	backdrop-filter: blur(2px);
}

.cp-modal__panel {
	max-height: calc(100vh - 3rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	overflow-y: auto;
	border-radius: inherit;
}

.cp-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cp-mist);
	color: var(--cp-navy);
	cursor: pointer;
	transition: background-color 0.2s var(--cp-ease);
}

.cp-modal__close:hover,
.cp-modal__close:focus-visible {
	background: var(--cp-line);
}

.cp-modal__title {
	margin: 0 2.5rem 0.5rem 0;
	font-size: clamp(1.35rem, 3vw, 1.65rem);
	color: var(--cp-navy);
}

.cp-modal__text {
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	color: var(--cp-ink-soft, #46606f);
}

/* Opening animation, skipped for anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	.cp-modal[open] {
		animation: cp-modal-in 0.28s var(--cp-ease-out);
	}

	@keyframes cp-modal-in {
		from { opacity: 0; transform: translateY(12px) scale(0.98); }
		to   { opacity: 1; transform: none; }
	}
}