/* =========================================================================
   Kamsi Home and Healthcare Services Inc.

   Direction: an established care provider, not a clinic and not a startup.
   Deep teal ink, the crest's gold used sparingly, warm paper ground.
   Newsreader carries the voice; Inter carries the information.

   Body type is set at 17px/1.7 deliberately — a large share of readers are
   seniors or reading at night on a phone.

    1 Tokens          8 Hero            15 Coverage grid   22 Footer
    2 Base            9 Trust bar       16 Quote           23 WhatsApp
    3 Layout         10 Split blocks    17 CTA             24 Responsive
    4 Buttons        11 Lists           18 FAQ
    5 Announcement   12 Steps           19 Contact
    6 Header         13 Cards           20 Forms
    7 Mobile nav     14 Coverage        21 Booking
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
	/* Ink and brand. Teal deepened from the earlier cyan so it reads
	   established rather than technological; gold lifted from the crest. */
	--ink: #0a2a2f;
	--ink-soft: #14454c;
	--teal: #0f6b75;
	--teal-lift: #12808c;
	--teal-wash: #e8f2f2;
	--gold: #a8842c;          /* decorative only: rules, dots, large numerals */
	--gold-text: #86681f;     /* small gold text — meets 4.5:1 on paper and linen */
	--gold-wash: #f7f0dd;

	/* Ground. Barely warm — paper, not cream. */
	--paper: #fcfbf9;
	--linen: #f4f1eb;
	--card: #ffffff;

	--text: #3a4a4d;
	--text-muted: #5e6d70;
	--invert: #ffffff;
	--rule: #e4ded3;
	--rule-strong: #d3cabb;

	--display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--r-sm: 6px;
	--r: 10px;
	--r-lg: 14px;
	--r-xl: 20px;

	/* Shadows kept shallow; depth comes from rules and ground, not glow. */
	--shadow: 0 1px 2px rgba(10, 42, 47, .05), 0 6px 18px rgba(10, 42, 47, .05);
	--shadow-lg: 0 2px 4px rgba(10, 42, 47, .06), 0 16px 40px rgba(10, 42, 47, .09);

	--container: 1180px;
	--gutter: 24px;
	--section-y: 104px;
	--header-h: 78px;
}

@media (max-width: 1024px) { :root { --section-y: 76px; } }
@media (max-width: 767px)  { :root { --section-y: 58px; --gutter: 20px; --header-h: 64px; } }

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.7;
	color: var(--text);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	font-family: var(--display);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--ink);
	font-optical-sizing: auto;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 1.35rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); font-weight: 600; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* Browsers give <figure> a default `margin: 1em 40px`. Left unreset it shifts
   every carousel slide 40px sideways, so translateX(-100%) stops landing on
   the slide edge and the quote appears clipped. */
figure, blockquote { margin: 0; }

/* The contact email is long and unbreakable; let it wrap rather than push
   the layout wider than the viewport on small screens. */
p, li, blockquote, dd { overflow-wrap: break-word; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-lift); }

img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; }

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

.kamsi-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	padding: 12px 20px; background: var(--teal); color: #fff;
	border-radius: 0 0 var(--r) 0;
}
.kamsi-skip:focus { left: 0; color: #fff; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------- */
.kamsi-section { padding: var(--section-y) var(--gutter); background: var(--paper); }
.kamsi-section--alt { background: var(--linen); }
.kamsi-section--white { background: var(--card); }
.kamsi-section--ink { background: var(--ink); color: rgba(255,255,255,.8); }
.kamsi-section--tight { padding-top: calc(var(--section-y) * .48); padding-bottom: calc(var(--section-y) * .48); }

.kamsi-container { width: 100%; max-width: var(--container); margin-inline: auto; }
.kamsi-container--narrow { max-width: 760px; }

/* Section heads read left by default — a page of centred headers has no
   rhythm. The centred variant is kept for the few places it earns its keep. */
.kamsi-section__head { max-width: 60ch; margin: 0 0 56px; }
.kamsi-section__head h2 { margin: 0 0 14px; }
.kamsi-section__head p { font-size: 1.0625rem; color: var(--text-muted); margin: 0; }
.kamsi-section__head--center { margin-inline: auto; text-align: center; }

/* Eyebrow: italic display face over a short gold rule. Used once per
   section, never decoratively. */
.kamsi-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-family: var(--display);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--gold-text);
	letter-spacing: 0;
}

.kamsi-eyebrow::before {
	content: '';
	width: 28px; height: 2px;
	background: var(--gold);
	flex: none;
}

.kamsi-section__head--center .kamsi-eyebrow { justify-content: center; }

/* -------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------- */
.kamsi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .01em;
	padding: 16px 30px;
	border: 1px solid var(--teal);
	border-radius: var(--r);
	background: var(--teal);
	color: var(--invert);
	cursor: pointer;
	text-align: center;
	transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.kamsi-btn:hover {
	background: var(--teal-lift);
	border-color: var(--teal-lift);
	color: var(--invert);
	transform: translateY(-1px);
}

.kamsi-btn--outline { background: transparent; color: var(--teal); }
.kamsi-btn--outline:hover { background: var(--teal); color: var(--invert); }

.kamsi-btn--ghost { background: transparent; color: var(--invert); border-color: rgba(255,255,255,.5); }
.kamsi-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); color: var(--invert); }

.kamsi-btn--light { background: var(--invert); border-color: var(--invert); color: var(--ink); }
.kamsi-btn--light:hover { background: var(--gold-wash); border-color: var(--gold-wash); color: var(--ink); }

.kamsi-btn--sm { font-size: .9375rem; padding: 11px 20px; }

.kamsi-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.kamsi-btn-row--center { justify-content: center; }

/* -------------------------------------------------------------------------
   5. Announcement
   ---------------------------------------------------------------------- */
.kamsi-announcement {
	position: relative; z-index: 60;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 11px 46px 11px 20px;
	background: var(--ink);
	color: rgba(255,255,255,.92);
	font-size: .875rem;
	text-align: center;
}
.kamsi-announcement[hidden] { display: none; }
.kamsi-announcement svg { flex: none; color: var(--gold); }

.kamsi-announcement__close {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 0; border-radius: 4px;
	background: transparent; color: inherit; opacity: .7; cursor: pointer;
}
.kamsi-announcement__close:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* -------------------------------------------------------------------------
   6. Header
   ---------------------------------------------------------------------- */
.kamsi-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(252, 251, 249, .88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--rule);
	transition: box-shadow .2s ease, background .2s ease;
}
.kamsi-header.is-scrolled { background: rgba(252,251,249,.97); box-shadow: 0 1px 20px rgba(10,42,47,.06); }

.kamsi-header__inner {
	display: flex; align-items: center; gap: 20px;
	height: var(--header-h);
	max-width: var(--container); margin-inline: auto;
	padding: 0 var(--gutter);
}

.kamsi-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.kamsi-brand img { width: 42px; height: 42px; object-fit: contain; }
.kamsi-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.kamsi-brand__name {
	font-family: var(--display);
	font-weight: 600; font-size: 1.0625rem;
	color: var(--ink); letter-spacing: -0.01em;
}
.kamsi-brand__tag {
	font-size: .625rem; font-weight: 500; color: var(--text-muted);
	letter-spacing: .16em; text-transform: uppercase;
}

.kamsi-nav { display: flex; align-items: center; gap: 2px; list-style: none; }
.kamsi-nav a {
	position: relative; display: block;
	padding: 10px 15px;
	font-size: .9375rem; font-weight: 500; color: var(--text);
}
.kamsi-nav a:hover { color: var(--teal); }

/* Current page marked with a gold underline rather than a colour swap —
   quieter, and it survives on the tinted header. */
.kamsi-nav a[aria-current='page'] { color: var(--ink); }
.kamsi-nav a[aria-current='page']::after {
	content: ''; position: absolute;
	left: 15px; right: 15px; bottom: 4px; height: 2px;
	background: var(--gold);
}

.kamsi-header__cta { margin-left: 10px; }

.kamsi-burger {
	display: none; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
	background: transparent; color: var(--ink); cursor: pointer;
}
.kamsi-burger:hover { background: var(--card); }

/* -------------------------------------------------------------------------
   7. Mobile navigation
   ---------------------------------------------------------------------- */
.kamsi-drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.kamsi-drawer.is-open { display: block; }
.kamsi-drawer__scrim { position: absolute; inset: 0; background: rgba(10,42,47,.5); }

.kamsi-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(86vw, 340px);
	padding: 22px;
	background: var(--paper);
	box-shadow: -8px 0 40px rgba(10,42,47,.2);
	display: flex; flex-direction: column; gap: 4px;
	overflow-y: auto;
	animation: drawer-in .24s ease;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.kamsi-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kamsi-drawer__close {
	display: inline-flex; padding: 9px;
	border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
	background: transparent; color: var(--ink); cursor: pointer;
}

a.kamsi-drawer__link {
	padding: 14px 12px; border-radius: var(--r-sm);
	font-family: var(--display); font-size: 1.25rem; font-weight: 500;
	color: var(--ink);
}
a.kamsi-drawer__link:hover { background: var(--teal-wash); color: var(--teal); }
a.kamsi-drawer__link[aria-current='page'] { color: var(--gold); }

.kamsi-drawer__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }

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

/* -------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------
   Content sits left over a directional scrim rather than centred over a
   full dark wash — it keeps the faces in the photograph visible.
   ---------------------------------------------------------------------- */
.kamsi-hero {
	position: relative;
	display: flex; align-items: center;
	min-height: min(84vh, 760px);
	padding: var(--section-y) var(--gutter);
	background-size: cover; background-position: center;
	color: var(--invert);
	overflow: hidden;
}

.kamsi-hero::after {
	content: '';
	position: absolute; inset: 0;
	background:
		linear-gradient(100deg, rgba(10,42,47,.90) 0%, rgba(10,42,47,.72) 38%, rgba(10,42,47,.18) 72%, rgba(10,42,47,.30) 100%),
		linear-gradient(0deg, rgba(10,42,47,.45) 0%, rgba(10,42,47,0) 45%);
}

.kamsi-hero__inner {
	position: relative; z-index: 1;
	width: 100%; max-width: var(--container);
	margin-inline: auto;
}

.kamsi-hero__col { max-width: 46ch; }
.kamsi-hero__col h1 { max-width: 18ch; }

.kamsi-hero h1 { color: var(--invert); margin: 0 0 20px; }

.kamsi-hero p {
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	color: rgba(255,255,255,.9);
	margin: 0 0 32px;
	max-width: 46ch;
}

.kamsi-hero .kamsi-eyebrow { color: var(--gold-wash); }
.kamsi-hero .kamsi-eyebrow::before { background: var(--gold); }

/* A single reassuring line under the buttons — the thing this audience
   most wants to know before calling. */
.kamsi-hero__note {
	margin-top: 26px;
	font-size: .9375rem;
	color: rgba(255,255,255,.78);
	display: flex; align-items: center; gap: 9px;
}
.kamsi-hero__note svg { flex: none; color: var(--gold); }

.kamsi-hero--compact { min-height: min(44vh, 380px); }
.kamsi-hero--compact h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); }
.kamsi-hero--compact .kamsi-hero__col { max-width: 44ch; }

/* -------------------------------------------------------------------------
   9. Trust bar
   ---------------------------------------------------------------------- */
.kamsi-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block: 1px solid var(--rule);
}

.kamsi-trust__item {
	display: flex; align-items: center; gap: 13px;
	padding: 26px 24px;
	font-size: .9375rem; font-weight: 500;
	color: var(--ink);
}
.kamsi-trust__item + .kamsi-trust__item { border-left: 1px solid var(--rule); }
.kamsi-trust__icon { flex: none; display: inline-flex; color: var(--teal); }

/* -------------------------------------------------------------------------
   10. Split blocks
   ---------------------------------------------------------------------- */
.kamsi-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(36px, 5vw, 76px);
}
.kamsi-split + .kamsi-split { margin-top: clamp(64px, 8vw, 112px); }
.kamsi-split--reverse .kamsi-split__media { order: 2; }

/* Several of these images are infographics with text baked in, so they are
   never cropped. Add --crop only for photographs. */
.kamsi-split__media img {
	width: 100%; height: auto;
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lg);
}
.kamsi-split__media--crop img { aspect-ratio: 5 / 4; object-fit: cover; }

.kamsi-split__body h2, .kamsi-split__body h3 { margin: 0 0 14px; }
.kamsi-split__body > p { color: var(--text-muted); margin-bottom: 24px; max-width: 52ch; }

/* -------------------------------------------------------------------------
   11. Lists
   ---------------------------------------------------------------------- */
.kamsi-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 0; }

.kamsi-list li {
	position: relative;
	padding: 11px 0 11px 30px;
	font-size: .9688rem;
	color: var(--text);
	border-bottom: 1px solid var(--rule);
}
.kamsi-list li:first-child { border-top: 1px solid var(--rule); }

.kamsi-list li::before {
	content: '';
	position: absolute; left: 0; top: 1.05em;
	width: 12px; height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b75' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Two-column variant. */
.kamsi-list--split { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 40px; }

/* --- Service area -----------------------------------------------------
   Towns read as a set, not a list, so they sit as an even centred grid
   under a centred heading. The earlier two-column split left the heading
   stranded in the left third with a sparse list beside it. */
.kamsi-areas {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	max-width: 940px;
	margin-inline: auto;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}

.kamsi-area {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 20px 14px;
	font-size: .9375rem;
	color: var(--ink);
	text-align: center;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	background: var(--card);
}

.kamsi-area::before {
	content: '';
	flex: none;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--gold);
}

.kamsi-areas__note {
	margin-top: 26px;
	text-align: center;
	font-size: .9375rem;
	color: var(--text-muted);
}

@media (max-width: 1024px) { .kamsi-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .kamsi-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px)  { .kamsi-areas { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------
   Numbered because this genuinely is a sequence — the order is information
   the reader needs, not decoration.
   ---------------------------------------------------------------------- */
.kamsi-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

.kamsi-step { position: relative; padding: 0 28px; }
.kamsi-step + .kamsi-step { border-left: 1px solid var(--rule); }
.kamsi-step:first-child { padding-left: 0; }
.kamsi-step:last-child { padding-right: 0; }

.kamsi-step__num {
	display: block;
	margin-bottom: 18px;
	font-family: var(--display);
	font-size: 2.6rem; font-weight: 400; line-height: 1;
	color: var(--gold);
	font-variant-numeric: lining-nums;
}

.kamsi-step h3 { font-size: 1.0625rem; margin: 0 0 10px; }
.kamsi-step p { font-size: .9375rem; color: var(--text-muted); margin: 0; }

/* -------------------------------------------------------------------------
   13. Cards
   ---------------------------------------------------------------------- */
.kamsi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.kamsi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kamsi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kamsi-card {
	display: flex; flex-direction: column;
	padding: 30px;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kamsi-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

.kamsi-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; margin-bottom: 18px;
	border-radius: var(--r-sm);
	background: var(--teal-wash); color: var(--teal);
}

.kamsi-card h3 { margin: 0 0 9px; font-size: 1.0625rem; }
.kamsi-card p { color: var(--text-muted); font-size: .9375rem; margin: 0; }

/* -------------------------------------------------------------------------
   14. Coverage grid — the signature
   -------------------------------------------------------------------------
   Replaces a generic stats row. Adult children choosing homecare are, above
   everything, worried about the hours nobody covers: 3am, Sunday, Christmas.
   Showing the whole week filled in says that better than the words "24/7".
   ---------------------------------------------------------------------- */
.kamsi-coverage { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 5vw, 72px); align-items: center; }

.kamsi-coverage__body h2 { margin: 0 0 14px; }
.kamsi-coverage__body p { color: var(--text-muted); max-width: 46ch; }

.kamsi-coverage__legend {
	display: flex; align-items: center; gap: 10px;
	margin-top: 24px;
	font-size: .875rem; color: var(--text-muted);
}
.kamsi-coverage__swatch {
	width: 14px; height: 14px; border-radius: 3px;
	background: var(--teal); flex: none;
}

.kamsi-matrix {
	display: grid;
	grid-template-columns: auto repeat(7, minmax(0, 1fr));
	gap: 5px;
}

.kamsi-matrix__day,
.kamsi-matrix__band {
	font-size: .6875rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--text-muted);
	display: flex; align-items: center;
}
.kamsi-matrix__day { justify-content: center; padding-bottom: 6px; }
.kamsi-matrix__band { padding-right: 14px; white-space: nowrap; }

.kamsi-matrix__cell {
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	background: var(--teal);
	opacity: .92;
	transition: opacity .16s ease, transform .16s ease;
}
.kamsi-matrix__cell:hover { opacity: 1; transform: scale(1.08); }

/* Overnight row carries the gold — it is the shift that matters most and
   the one most providers do not staff. */
.kamsi-matrix__cell--night { background: var(--gold); }

.kamsi-matrix__corner { }

/* -------------------------------------------------------------------------
   15. Quote
   -------------------------------------------------------------------------
   One real testimonial, presented as a pull quote. A carousel with a single
   slide advertises that there is only one.
   ---------------------------------------------------------------------- */
.kamsi-quote { max-width: 780px; }
.kamsi-quote__mark { display: block; font-family: var(--display); font-size: 4rem; line-height: .6; color: var(--gold); margin-bottom: 12px; }

.kamsi-quote blockquote {
	margin: 0 0 24px;
	font-family: var(--display);
	font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
	line-height: 1.35;
	font-weight: 400;
	color: var(--ink);
}

.kamsi-quote__by { font-size: .9375rem; color: var(--text-muted); }

/* --- Reasons panel ----------------------------------------------------
   Stands in for testimonials until there are real reviews to publish.
   Deliberately not the card treatment used on the About page — a gold
   hairline and open space, so the page does not read as three identical
   grids of boxes. Every claim here is drawn from Kamsi's own service copy;
   nothing asserts what a client said. */
.kamsi-reasons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 40px;
}

.kamsi-reason { padding-top: 22px; border-top: 2px solid var(--gold); }

.kamsi-reason h3 {
	margin: 0 0 10px;
	font-family: var(--display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}

.kamsi-reason p { margin: 0; font-size: .9375rem; color: var(--text-muted); }

@media (max-width: 1024px) { .kamsi-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; } }
@media (max-width: 767px)  { .kamsi-reasons { grid-template-columns: 1fr; gap: 30px; } }

/* --- Carousel ---------------------------------------------------------
   Slides sit in a flex row at 100% width each, so every slide is as tall as
   the tallest and the section never jumps height as it advances. */
.kamsi-testimonials { max-width: 900px; }

.kamsi-testimonials__viewport { overflow: hidden; }

.kamsi-testimonials__track {
	display: flex;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.kamsi-testimonial {
	flex: 0 0 100%;
	min-width: 0;
	padding-right: 2px;
}

.kamsi-testimonial blockquote {
	margin: 0 0 22px;
	font-family: var(--display);
	font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.875rem);
	line-height: 1.4;
	font-weight: 400;
	color: var(--ink);
}

.kamsi-testimonial figcaption { font-size: .9375rem; color: var(--text-muted); }
.kamsi-testimonial__name { font-weight: 600; color: var(--ink-soft); }

/* Controls sit on one line under the quote: arrows left, dots right. */
.kamsi-testimonials__controls {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}
.kamsi-testimonials__controls[hidden] { display: none; }

.kamsi-testimonials__arrows { display: flex; gap: 8px; }

.kamsi-testimonials__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	padding: 0;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.kamsi-testimonials__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--invert); }

.kamsi-testimonials__dots { display: flex; gap: 8px; margin-left: auto; }

.kamsi-testimonials__dot {
	width: 8px; height: 8px;
	padding: 0; border: 0; border-radius: 50%;
	background: var(--rule-strong);
	cursor: pointer;
	transition: background .2s ease, width .2s ease;
}
.kamsi-testimonials__dot[aria-selected='true'] { background: var(--gold); width: 24px; border-radius: 4px; }

.kamsi-testimonials__count {
	font-family: var(--display);
	font-size: .9375rem;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	.kamsi-testimonials__controls { gap: 14px; }
	.kamsi-testimonials__arrow { width: 38px; height: 38px; }
}

/* -------------------------------------------------------------------------
   16. CTA
   ---------------------------------------------------------------------- */
.kamsi-cta {
	padding: clamp(72px, 9vw, 116px) var(--gutter);
	background: var(--ink);
	color: rgba(255,255,255,.82);
	text-align: center;
}
.kamsi-cta h2 { color: var(--invert); margin: 0 0 16px; }
.kamsi-cta p { max-width: 48ch; margin: 0 auto 32px; font-size: 1.0625rem; }
.kamsi-cta .kamsi-eyebrow { justify-content: center; color: var(--gold); }

/* -------------------------------------------------------------------------
   17. FAQ
   ---------------------------------------------------------------------- */
.kamsi-faq { max-width: 820px; border-top: 1px solid var(--rule); }
.kamsi-faq__item { border-bottom: 1px solid var(--rule); }

.kamsi-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	width: 100%; padding: 26px 2px;
	border: 0; background: transparent;
	font-family: var(--display);
	font-size: 1.1875rem; font-weight: 500;
	color: var(--ink); text-align: left; cursor: pointer;
}
.kamsi-faq__q:hover { color: var(--teal); }

.kamsi-faq__chevron { flex: none; color: var(--text-muted); transition: transform .25s ease; }
.kamsi-faq__q[aria-expanded='true'] .kamsi-faq__chevron { transform: rotate(180deg); color: var(--gold); }

.kamsi-faq__a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.kamsi-faq__a > div { padding: 0 2px 28px; color: var(--text-muted); max-width: 62ch; }

/* -------------------------------------------------------------------------
   18. Contact
   ---------------------------------------------------------------------- */
.kamsi-contact-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; }
.kamsi-contact-grid > * { min-width: 0; }

.kamsi-contact-card {
	padding: 32px;
	background: var(--ink);
	color: rgba(255,255,255,.82);
	border-radius: var(--r-lg);
}
.kamsi-contact-card h2 { color: var(--invert); font-size: 1.5rem; margin-bottom: 10px; }

.kamsi-contact-card__row { display: flex; gap: 14px; padding: 18px 0; }
.kamsi-contact-card__row + .kamsi-contact-card__row { border-top: 1px solid rgba(255,255,255,.12); }
.kamsi-contact-card__row svg { flex: none; margin-top: 4px; color: var(--gold); }
.kamsi-contact-card__label {
	display: block; font-size: .6875rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255,255,255,.55); margin-bottom: 2px;
}
.kamsi-contact-card__value { font-size: .9688rem; color: rgba(255,255,255,.9); overflow-wrap: anywhere; }
.kamsi-contact-card__value a { color: rgba(255,255,255,.9); }
.kamsi-contact-card__value a:hover { color: var(--gold); }

/* The outline button is teal-on-transparent, which is unreadable against the
   dark card (~1.6:1). Inside the card it takes the light treatment instead. */
.kamsi-contact-card .kamsi-btn--outline {
	color: var(--invert);
	border-color: rgba(255, 255, 255, .45);
}
.kamsi-contact-card .kamsi-btn--outline:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .85);
	color: var(--invert);
}

/* -------------------------------------------------------------------------
   19. Forms
   ---------------------------------------------------------------------- */
.kamsi-form-card {
	padding: clamp(26px, 4vw, 40px);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
}
.kamsi-form-card h2 { font-size: 1.5rem; margin-bottom: 8px; }

.kamsi-field { margin-bottom: 20px; }
.kamsi-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.kamsi-field label {
	display: block; margin-bottom: 8px;
	font-size: .8125rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-soft);
}
.kamsi-field .req { color: #b4342b; }

.kamsi-field input,
.kamsi-field select,
.kamsi-field textarea {
	width: 100%; padding: 14px 16px;
	font-family: inherit; font-size: 1rem; color: var(--text);
	background: var(--paper);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.kamsi-field textarea { min-height: 140px; resize: vertical; }

.kamsi-field input:focus,
.kamsi-field select:focus,
.kamsi-field textarea:focus {
	outline: none; background: var(--card);
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(15, 107, 117, .13);
}
.kamsi-field ::placeholder { color: #9aa8aa; }

.kamsi-form-note { margin-top: 16px; font-size: .8125rem; color: var(--text-muted); }
.kamsi-form-card .kamsi-btn { width: 100%; }
.kamsi-form-card .kamsi-btn:disabled { opacity: .65; cursor: default; transform: none; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, but they happily fill this one in. */
.kamsi-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.kamsi-form-status {
	margin: 0 0 16px;
	padding: 13px 16px;
	border-radius: var(--r-sm);
	font-size: .9375rem;
	border: 1px solid transparent;
}
.kamsi-form-status[hidden] { display: none; }
.kamsi-form-status.is-pending { background: var(--linen); color: var(--text-muted); border-color: var(--rule); }
.kamsi-form-status.is-ok      { background: var(--teal-wash); color: var(--ink); border-color: #a8d3d6; }
.kamsi-form-status.is-error   { background: #fdf0ee; color: #8c2f22; border-color: #f0c4bc; }

/* Notices (used on the thank-you page). */
.kamsi-notice {
	margin-top: 26px;
	padding: 16px 20px;
	border-radius: var(--r-sm);
	border: 1px solid var(--rule);
	background: var(--linen);
	font-size: .9375rem;
}
.kamsi-notice--warn { background: #fffbeb; border-color: #f3d98b; color: #7a5a12; }
.kamsi-notice--warn a { color: #7a5a12; text-decoration: underline; }

/* -------------------------------------------------------------------------
   20. Booking
   ---------------------------------------------------------------------- */
.kamsi-booking {
	background: var(--linen);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.kamsi-booking iframe { display: block; width: 100%; min-height: 720px; border: 0; }

.kamsi-booking__inner { padding: clamp(36px, 6vw, 60px) clamp(22px, 4vw, 48px); text-align: center; }
.kamsi-booking__badge {
	display: inline-block; margin-bottom: 18px; padding: 6px 14px;
	border-radius: 999px; background: var(--gold-wash); color: var(--gold);
	font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.kamsi-booking__inner h3 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem); font-weight: 500; }
.kamsi-booking__inner > p { max-width: 50ch; margin: 0 auto 30px; color: var(--text-muted); }

/* -------------------------------------------------------------------------
   21. Footer
   ---------------------------------------------------------------------- */
.kamsi-footer { background: var(--ink); color: rgba(255,255,255,.68); }

.kamsi-footer__inner {
	display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 44px;
	max-width: var(--container); margin-inline: auto;
	padding: 80px var(--gutter) 52px;
}

.kamsi-footer h2 {
	margin: 0 0 20px;
	font-family: var(--sans);
	font-size: .6875rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: rgba(255,255,255,.5);
}

.kamsi-footer a { color: rgba(255,255,255,.68); }
.kamsi-footer a:hover { color: var(--gold); }
.kamsi-footer ul { list-style: none; display: grid; gap: 4px; font-size: .9375rem; }
.kamsi-footer ul li > a { display: inline-block; padding: 7px 0; }

.kamsi-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kamsi-footer__brand img { width: 46px; height: 46px; border-radius: var(--r-sm); background: #fff; padding: 4px; }
.kamsi-footer__brand span { font-family: var(--display); font-weight: 500; color: var(--invert); font-size: 1.0625rem; line-height: 1.3; }
.kamsi-footer__blurb { font-size: .9375rem; max-width: 34ch; }

.kamsi-footer__contact { display: grid; gap: 14px; font-size: .9375rem; }
.kamsi-footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.kamsi-footer__contact svg { flex: none; margin-top: 5px; color: var(--gold); opacity: .8; }

/* Social icons sit as a row under the contact details, with 44px touch
   targets rather than the 20px the icon alone would give. */
.kamsi-footer__social { display: flex; gap: 8px; padding-top: 4px; }
.kamsi-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: rgba(255, 255, 255, .78);
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.kamsi-footer__social a:hover {
	color: var(--ink);
	background: var(--gold);
	border-color: var(--gold);
}

/* The contact email is 42 unbroken characters. Grid items default to
   min-width:auto, so that word set a min-content floor wider than a 360px
   phone and pushed the whole page sideways.
   `overflow-wrap: break-word` does NOT lower intrinsic min-content width —
   only `anywhere` does — so both fixes are needed here. */
.kamsi-footer__inner > * { min-width: 0; }
.kamsi-footer__contact li,
.kamsi-footer__contact a { overflow-wrap: anywhere; }

.kamsi-footer__bar { border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; }
.kamsi-footer__bar-inner {
	display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
	max-width: var(--container); margin-inline: auto; padding: 24px var(--gutter);
}

/* -------------------------------------------------------------------------
   22. WhatsApp
   ---------------------------------------------------------------------- */
.kamsi-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; align-items: center; gap: 12px; }

.kamsi-whatsapp__bubble {
	position: relative; display: inline-flex; align-items: center;
	padding: 11px 30px 11px 16px;
	background: var(--card); color: var(--text);
	font-size: .875rem; border-radius: 999px;
	border: 1px solid var(--rule);
	box-shadow: var(--shadow); white-space: nowrap;
}
.kamsi-whatsapp__bubble[hidden] { display: none; }

.kamsi-whatsapp__bubble-close {
	position: absolute; top: 3px; right: 8px;
	display: inline-flex; padding: 3px; border: 0; border-radius: 50%;
	background: transparent; color: var(--text-muted); cursor: pointer;
}
.kamsi-whatsapp__bubble-close:hover { color: var(--ink); }

.kamsi-whatsapp__button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: #1f9d55; color: #fff;
	box-shadow: 0 6px 20px rgba(31,157,85,.35);
	transition: transform .16s ease, box-shadow .16s ease;
}
.kamsi-whatsapp__button:hover { color: #fff; transform: scale(1.05); box-shadow: 0 10px 26px rgba(31,157,85,.45); }

/* -------------------------------------------------------------------------
   23. Motion
   -------------------------------------------------------------------------
   Everything here is gated behind .js-reveal on <html>, which a tiny inline
   script in each page's <head> only adds when IntersectionObserver exists
   AND the visitor has not asked for reduced motion.

   That ordering matters. If the script never runs, the class is never added,
   nothing is ever hidden, and the page renders exactly as it would without
   animation. Content is never left invisible waiting for JS it didn't get.

   One distance (14px), one duration, one easing. No scale, no blur, no
   horizontal drift — this is a healthcare site, not a product launch.
   ---------------------------------------------------------------------- */
:root {
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--reveal: 620ms;
}

/* The hidden state is wrapped in :where() so it contributes no specificity.
   Without it the descendant selectors below outweigh the .is-in rule that is
   supposed to reveal them — `.kamsi-cta > .kamsi-container > *` scores three
   classes against .is-in's two, so adding the class did nothing and the
   content stayed invisible. :where() makes reveal always win, with no
   !important and no reliance on source order. */
.js-reveal :where(
	.kamsi-section__head,
	.kamsi-split__media,
	.kamsi-split__body,
	.kamsi-trust__item,
	.kamsi-step,
	.kamsi-card,
	.kamsi-coverage__body,
	.kamsi-matrix,
	.kamsi-quote,
	.kamsi-testimonials,
	.kamsi-reason,
	.kamsi-faq__item,
	.kamsi-form-card,
	.kamsi-contact-card,
	.kamsi-booking,
	.kamsi-cta > .kamsi-container > *
) {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--reveal) var(--ease-out),
		transform var(--reveal) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

/* Hero is above the fold, so it plays on load rather than on scroll — one
   short orchestrated entrance instead of a reveal nobody sees happen.

   Deliberately uses the same opacity/transform + .is-in mechanism as
   everything else rather than a keyframe animation. A keyframe that never
   completes leaves the headline invisible with nothing to recover it; this
   way the hero is covered by exactly the same failsafe as the rest of the
   page. One mechanism, one safety net. */
.js-reveal :where(.kamsi-hero__col > *) {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 720ms var(--ease-out),
		transform 720ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

/* Declared last and at higher specificity than every hidden rule above, so
   adding .is-in always reveals, whatever the element. */
.js-reveal .is-in {
	opacity: 1;
	transform: none;
}

/* The coverage grid fills in band by band. The build is the point: it reads
   as cover being laid down, and it lands on the gold overnight row last. */
.js-reveal .kamsi-matrix.is-in .kamsi-matrix__cell {
	animation: kamsi-cell-in 460ms var(--ease-out) both;
}

@keyframes kamsi-cell-in {
	from { opacity: 0; transform: scale(.82); }
	to   { opacity: .92; transform: none; }
}

.js-reveal .kamsi-matrix.is-in .kamsi-matrix__cell--night {
	animation-name: kamsi-cell-in-night;
}

@keyframes kamsi-cell-in-night {
	from { opacity: 0; transform: scale(.82); }
	to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   24. Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.kamsi-nav, .kamsi-header__cta { display: none; }
	.kamsi-burger { display: inline-flex; }

	.kamsi-trust { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.kamsi-trust__item:nth-child(odd) { border-left: 0; }
	.kamsi-trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }

	.kamsi-steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 0; }
	.kamsi-step:nth-child(odd) { border-left: 0; padding-left: 0; }
	.kamsi-step:nth-child(even) { padding-right: 0; }

	.kamsi-coverage { grid-template-columns: 1fr; }
	.kamsi-contact-grid { grid-template-columns: 1fr; }
	.kamsi-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.kamsi-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
	.kamsi-split { grid-template-columns: 1fr; }
	.kamsi-split--reverse .kamsi-split__media { order: 0; }
	.kamsi-split__media img { max-width: 560px; margin-inline: auto; }
	.kamsi-hero__col { max-width: 100%; }
}

@media (max-width: 767px) {
	.kamsi-grid--2, .kamsi-grid--3 { grid-template-columns: 1fr; }
	.kamsi-trust { grid-template-columns: 1fr; }
	.kamsi-trust__item { border-left: 0 !important; border-bottom: 1px solid var(--rule); }
	.kamsi-trust__item:last-child { border-bottom: 0; }

	.kamsi-steps { grid-template-columns: 1fr; gap: 32px; }
	.kamsi-step { border-left: 0 !important; padding: 0; }

	.kamsi-list--split { grid-template-columns: 1fr; }
	.kamsi-field--row { grid-template-columns: 1fr; gap: 0; }
	.kamsi-footer__inner { grid-template-columns: 1fr; }
	.kamsi-section__head { margin-bottom: 36px; }
	.kamsi-btn-row { flex-direction: column; }
	.kamsi-btn-row .kamsi-btn { width: 100%; }
	.kamsi-whatsapp { right: 16px; bottom: 16px; }
	.kamsi-whatsapp__button { width: 52px; height: 52px; }

	/* The floating button is fixed bottom-right and was sitting on top of
	   the footer's policy links, making them hard to tap. Clear a lane. */
	.kamsi-footer__bar-inner { padding-bottom: 88px; }
	.kamsi-whatsapp__bubble { display: none; }
	.kamsi-brand__tag { display: none; }
	.kamsi-booking iframe { min-height: 940px; }

	.kamsi-matrix { gap: 3px; }
	.kamsi-matrix__band { font-size: .5625rem; padding-right: 8px; }
	.kamsi-matrix__day { font-size: .5625rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

	/* Belt and braces: the inline script already declines to add .js-reveal
	   when reduced motion is set, but if the preference changes mid-session
	   nothing should stay hidden. */
	.js-reveal .kamsi-hero__col > *,
	.js-reveal .kamsi-section__head,
	.js-reveal .kamsi-split__media,
	.js-reveal .kamsi-split__body,
	.js-reveal .kamsi-trust__item,
	.js-reveal .kamsi-step,
	.js-reveal .kamsi-card,
	.js-reveal .kamsi-coverage__body,
	.js-reveal .kamsi-matrix,
	.js-reveal .kamsi-quote,
	.js-reveal .kamsi-faq__item,
	.js-reveal .kamsi-form-card,
	.js-reveal .kamsi-contact-card,
	.js-reveal .kamsi-booking,
	.js-reveal .kamsi-cta > .kamsi-container > *,
	.js-reveal .kamsi-matrix .kamsi-matrix__cell {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

@media print {
	.kamsi-announcement, .kamsi-header, .kamsi-whatsapp, .kamsi-drawer { display: none !important; }
	body { background: #fff; }
}