/* ==========================================================================
   Love Stories CBR
   Single-page cinematic Coming Soon.

   Colour, type and video tokens are injected as custom properties from the
   Customizer (see inc/customizer-css.php). Nothing here hard-codes a brand
   value, so changing a colour in the admin changes it everywhere.

   Contents
     1.  Reset and base
     2.  Utilities
     3.  Fleuron — the page's only divider
     4.  Buttons
     5.  Hero
     6.  Section flow and bleeds
     7.  Brand introduction
     8.  Enquiry form
     9.  Contact and social
     10. Colophon
     11. Reveal animations
     12. Responsive
     13. Reduced motion, print, forced colours
   ========================================================================== */


/* 1. Reset and base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ls-evergreen);
	color: var(--ls-evergreen);
	font-family: var(--ls-font-body);
	font-size: var(--ls-body-size);
	font-weight: 300;
	line-height: var(--ls-body-leading);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

img {
	height: auto;
}

h1,
h2,
h3,
p,
ul,
figure {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input {
	font: inherit;
	color: inherit;
	margin: 0;
}

.ls-page {
	position: relative;
	isolation: isolate;
}


/* 2. Utilities
   ========================================================================== */

.ls-shell {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 6vw, 4rem);
}

.ls-shell--narrow {
	max-width: 680px;
}

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

/* Honeypot. Off-screen rather than display:none, which more bots skip. */
.ls-hp {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ls-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1rem 1.5rem;
	background: var(--ls-cream);
	color: var(--ls-evergreen);
	font-size: 0.75rem;
	letter-spacing: var(--ls-label-track);
	text-transform: uppercase;
}

.ls-skip:focus {
	left: 1rem;
	top: 1rem;
}

/* The eyebrow: small, wide, quiet. Used above every section heading. */
.ls-eyebrow {
	font-size: 0.688rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: calc(var(--ls-label-track) * 1.6);
	text-transform: uppercase;
	color: var(--ls-moss);
	margin-bottom: 1.75rem;
}

.ls-eyebrow--light {
	color: rgba(var(--ls-cream-rgb), 0.62);
}

:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--ls-moss);
	outline-offset: 3px;
	border-radius: 1px;
}

.ls-hero :where(a, button):focus-visible,
.ls-contact :where(a, button):focus-visible,
.ls-colophon :where(a, button):focus-visible {
	outline-color: var(--ls-cream);
}

.ls-enquire:focus {
	outline: none;
}


/* 3. Fleuron — the page's only divider
   --------------------------------------------------------------------------
   A hairline interrupted by a small diamond, taken from the ornament under the
   wordmark in the logo. It is the single structural device on the page: no
   boxes, no numbered markers, no icon rows. The rules draw outward from the
   centre as each section arrives.
   ========================================================================== */

.ls-fleuron {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	width: min(320px, 62%);
	margin: 2.25rem auto;
}

.ls-fleuron__rule {
	display: block;
	flex: 1;
	height: 1px;
	transition: transform 1.6s cubic-bezier(0.16, 0.68, 0.32, 1) 0.15s;
}

.ls-fleuron__rule:first-child {
	transform-origin: right center;
}

.ls-fleuron__rule:last-child {
	transform-origin: left center;
}

.ls-fleuron__mark {
	width: 13px;
	height: 13px;
	flex: none;
	transition:
		opacity 1s ease 0.05s,
		transform 1.4s cubic-bezier(0.16, 0.68, 0.32, 1) 0.05s;
}

.ls-fleuron--dark .ls-fleuron__rule {
	background: rgba(var(--ls-evergreen-rgb), 0.28);
}

.ls-fleuron--dark .ls-fleuron__mark {
	fill: var(--ls-moss);
}

.ls-fleuron--light .ls-fleuron__rule {
	background: rgba(var(--ls-cream-rgb), 0.34);
}

.ls-fleuron--light .ls-fleuron__mark {
	fill: rgba(var(--ls-cream-rgb), 0.85);
}


/* 4. Buttons
   --------------------------------------------------------------------------
   One mechanic, used twice: a bordered rectangle that fills slowly from the
   bottom on hover while the label inverts. Slow enough to read as deliberate.
   ========================================================================== */

.ls-cta,
.ls-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 1.15rem 3.1rem;
	border: 1px solid;
	background: transparent;
	font-family: var(--ls-font-body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: calc(var(--ls-label-track) * 1.5);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		border-color 0.6s ease,
		letter-spacing 0.6s ease;
}

.ls-cta__label,
.ls-btn__label {
	position: relative;
	z-index: 2;
	transition: color 0.55s ease;
}

.ls-cta__rule,
.ls-btn__rule {
	position: absolute;
	inset: 0;
	z-index: 1;
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 0.7s cubic-bezier(0.16, 0.68, 0.32, 1);
}

.ls-cta:hover,
.ls-cta:focus-visible,
.ls-btn:hover,
.ls-btn:focus-visible {
	letter-spacing: calc(var(--ls-label-track) * 1.75);
}

.ls-cta:hover .ls-cta__rule,
.ls-cta:focus-visible .ls-cta__rule,
.ls-btn:hover .ls-btn__rule,
.ls-btn:focus-visible .ls-btn__rule {
	transform: scaleY(1);
}

/* On the video: cream outline, fills to cream, label inverts to evergreen. */
.ls-cta {
	border-color: rgba(var(--ls-cream-rgb), 0.55);
	color: var(--ls-cream);
}

.ls-cta__rule {
	background: var(--ls-cream);
}

.ls-cta:hover,
.ls-cta:focus-visible {
	border-color: var(--ls-cream);
}

.ls-cta:hover .ls-cta__label,
.ls-cta:focus-visible .ls-cta__label {
	color: var(--ls-evergreen);
}

/* On the form: solid evergreen, fills to moss. */
.ls-btn {
	border-color: var(--ls-btn-bg);
	background: var(--ls-btn-bg);
	color: var(--ls-btn-text);
	width: 100%;
}

.ls-btn__rule {
	background: var(--ls-btn-bg-hover);
}

.ls-btn:hover,
.ls-btn:focus-visible {
	border-color: var(--ls-btn-bg-hover);
}

.ls-btn[disabled] {
	opacity: 0.55;
	cursor: progress;
}


/* 5. Hero
   ========================================================================== */

.ls-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(3.5rem, 10vh, 7rem) clamp(1.5rem, 6vw, 4rem) clamp(5rem, 12vh, 7.5rem);
	background: var(--ls-evergreen);
	text-align: center;
	overflow: hidden;
}

.ls-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ls-evergreen);
}

.ls-hero__poster,
.ls-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ls-video-pos);
}

.ls-hero__video {
	opacity: 0;
	transition: opacity 1.8s ease;
}

/* The video only fades up once it is genuinely playing, so a device that
   refuses autoplay simply keeps the fallback image with no flicker. */
.ls-hero__video.is-playing {
	opacity: 1;
}

/* A flat, colour-neutral darkener so the headline stays readable over the
   footage. Black rather than evergreen, so it reduces brightness without
   shifting the colour of the video at all. Set Overlay darkness to 0 to leave
   the footage completely untouched. */
.ls-hero__scrim {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--ls-overlay);
	pointer-events: none;
}

.ls-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	/* Wide enough for COMING SOON to hold one line on desktop; it wraps
	   naturally below this, which is where the vertical space exists. */
	max-width: 1180px;
}

.ls-hero__brand {
	margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

/* The supplied mark is a tall crest, so height is the binding constraint on
   almost every screen. object-fit keeps the aspect correct while the height
   cap decides how much of the first screen the logo claims. */
.ls-logo {
	width: var(--ls-logo-w);
	max-width: 80vw;
	max-height: var(--ls-logo-maxh, 42vh);
	height: auto;
	object-fit: contain;
	margin-inline: auto;
}

.ls-logo--text {
	display: block;
	font-family: var(--ls-font-display);
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	color: var(--ls-cream);
	width: auto;
}

.ls-hero__heading {
	font-family: var(--ls-font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.35rem, 5.2vw, var(--ls-h1-max));
	font-weight: var(--ls-h1-weight);
	line-height: var(--ls-h1-leading);
	letter-spacing: var(--ls-h1-tracking);
	text-indent: var(--ls-h1-tracking);
	text-transform: uppercase;
	color: var(--ls-cream);
	text-wrap: balance;
}

/* Per-character reveal for the headline. The only sequenced moment on the
   page: slow, low amplitude, and over before it draws attention to itself. */
.ls-word {
	display: inline-block;
	white-space: nowrap;
}

.ls-char {
	display: inline-block;
	transition:
		opacity 1.1s ease,
		transform 1.3s cubic-bezier(0.16, 0.68, 0.32, 1);
}

.ls-char--space {
	width: 0.32em;
}

.ls-hero__statement {
	font-family: var(--ls-font-display);
	font-style: italic;
	font-size: clamp(1.05rem, 2.5vw, 1.55rem);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0.012em;
	color: rgba(var(--ls-cream-rgb), 0.9);
	max-width: 30ch;
	text-wrap: balance;
}

.ls-hero__cta {
	margin-top: clamp(1.75rem, 4vh, 2.75rem);
}

.ls-hero__cue {
	position: absolute;
	bottom: clamp(1.75rem, 4vh, 3rem);
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}

.ls-hero__cue-text {
	font-size: 0.625rem;
	letter-spacing: calc(var(--ls-label-track) * 1.8);
	text-transform: uppercase;
	color: rgba(var(--ls-cream-rgb), 0.5);
}

.ls-hero__cue-line {
	width: 1px;
	height: 52px;
	background: var(--ls-cream);
	opacity: 0.4;
	transform-origin: top center;
	animation: ls-drift 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ls-drift {
	0%,
	100% {
		transform: scaleY(0.35);
		opacity: 0.45;
	}
	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}


/* 6. Section blocks
   --------------------------------------------------------------------------
   Flat colour blocks with hard edges. Each section is one solid field of
   colour; the change of surface is what separates them, so no rules, borders
   or soft transitions are needed between blocks.
   ========================================================================== */

.ls-main {
	position: relative;
	display: block;
}

.ls-section {
	position: relative;
	padding: clamp(5rem, 13vh, 9rem) 0;
	text-align: center;
}

.ls-intro {
	background: var(--ls-sage-hint);
}

.ls-enquire {
	background: var(--ls-mint);
}

.ls-contact {
	background: var(--ls-evergreen);
	color: var(--ls-cream);
	padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.ls-section > .ls-shell {
	position: relative;
	z-index: 1;
}


/* 7. Brand introduction
   ========================================================================== */

.ls-intro__heading {
	font-family: var(--ls-font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-size: clamp(1.85rem, 5.2vw, var(--ls-display-max));
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: 0.005em;
	color: var(--ls-evergreen);
	text-wrap: balance;
}

.ls-intro__body {
	margin-top: 1.85rem;
	margin-inline: auto;
	max-width: 46ch;
	color: rgba(var(--ls-evergreen-rgb), 0.82);
	text-wrap: pretty;
}

.ls-services {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.55rem 1.35rem;
}

.ls-services__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: 0.688rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: calc(var(--ls-label-track) * 1.3);
	text-transform: uppercase;
	color: var(--ls-moss);
}

/* The fleuron diamond again, at the smallest size it works, as a separator. */
.ls-services__item + .ls-services__item::before {
	content: "";
	width: 4px;
	height: 4px;
	margin-right: 1.35rem;
	background: currentColor;
	opacity: 0.55;
	transform: rotate(45deg);
	flex: none;
}


/* 8. Enquiry form
   ========================================================================== */

.ls-enquire__heading {
	font-family: var(--ls-font-display);
	font-optical-sizing: auto;
	font-style: italic;
	font-size: clamp(1.75rem, 4.8vw, calc(var(--ls-display-max) * 0.92));
	font-weight: 400;
	line-height: 1.24;
	color: var(--ls-evergreen);
	text-wrap: balance;
}

.ls-enquire__intro {
	margin-top: 1.35rem;
	margin-inline: auto;
	max-width: 42ch;
	color: rgba(var(--ls-evergreen-rgb), 0.78);
}

.ls-form__wrap {
	margin-top: clamp(2.75rem, 6vh, 4rem);
	padding: clamp(1.85rem, 5vw, 3.25rem);
	background: var(--ls-form-surface);
	border: 1px solid rgba(var(--ls-sage-rgb), 0.5);
	text-align: left;
}

.ls-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.85rem 1.5rem;
}

.ls-field {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	min-width: 0;
}

.ls-field--wide {
	grid-column: 1 / -1;
}

.ls-field__label {
	font-size: 0.625rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: calc(var(--ls-label-track) * 1.5);
	text-transform: uppercase;
	color: var(--ls-moss);
}

.ls-field__req {
	margin-left: 0.35em;
	color: rgba(var(--ls-moss-rgb), 0.7);
}

/* Contact Form 7 wraps each control in a span; make it behave as a block. */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.ls-input,
.ls-form input[type="text"],
.ls-form input[type="tel"],
.ls-form input[type="email"],
.ls-form textarea {
	width: 100%;
	padding: 0.65rem 0.15rem;
	border: 0;
	border-bottom: 1px solid rgba(var(--ls-sage-rgb), 0.85);
	border-radius: 0;
	background: transparent;
	font-family: var(--ls-font-body);
	font-size: 1rem;
	font-weight: 300;
	color: var(--ls-evergreen);
	transition:
		border-color 0.45s ease,
		box-shadow 0.45s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ls-input:hover {
	border-bottom-color: var(--ls-moss);
}

.ls-input:focus {
	outline: none;
	border-bottom-color: var(--ls-evergreen);
	box-shadow: 0 1px 0 0 var(--ls-evergreen);
}

.ls-input:focus-visible {
	outline: none;
}

.ls-input:autofill,
.ls-input:-webkit-autofill {
	-webkit-text-fill-color: var(--ls-evergreen);
	box-shadow: 0 0 0 100px var(--ls-form-surface) inset;
}

/* The message box keeps the same underline treatment as the single-line
   fields, so the form still reads as one instrument rather than a box bolted
   onto a set of rules. */
.ls-textarea {
	min-height: 7.5em;
	line-height: 1.65;
	resize: vertical;
	font-family: var(--ls-font-body);
}

.ls-field__hint {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: rgba(var(--ls-moss-rgb), 0.95);
}

.ls-form__actions {
	margin: 2.5rem 0 0;
}

/* Error text, from both the native handler and Contact Form 7. */
.ls-field__error,
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: #8C3B34;
}

.ls-field__error:empty {
	display: none;
}

.ls-input[aria-invalid="true"],
.wpcf7-not-valid {
	border-bottom-color: #8C3B34;
}

/* Response messages, restyled away from the CF7 default box. */
.ls-form__response,
.ls-form__flash,
.wpcf7-response-output {
	margin: 1.75rem 0 0 !important;
	padding: 1.05rem 1.35rem !important;
	border: 0 !important;
	border-left: 2px solid var(--ls-moss) !important;
	background: rgba(var(--ls-sage-rgb), 0.16);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ls-evergreen);
	text-align: left;
}

.ls-form__response:empty {
	display: none;
}

.ls-form__flash {
	margin-bottom: 1.75rem !important;
	margin-top: 0 !important;
}

.wpcf7 form.sent .wpcf7-response-output,
.ls-form__flash--ok,
.ls-form__response--ok {
	border-left-color: var(--ls-evergreen) !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.ls-form__flash--error,
.ls-form__response--error {
	border-left-color: #8C3B34 !important;
	background: rgba(140, 59, 52, 0.07);
}

/* CF7's spinner, reduced to a quiet pulse in the brand colour. */
.wpcf7-spinner {
	width: 8px !important;
	height: 8px !important;
	margin: 0 0 0 1rem !important;
	background: var(--ls-moss) !important;
	border-radius: 50%;
	opacity: 0.8;
}

.wpcf7-spinner::before {
	display: none !important;
}

.wpcf7 form .wpcf7-list-item {
	margin: 0;
}


/* 9. Contact and social
   ========================================================================== */

.ls-contact__email {
	margin-top: 0.35rem;
}

.ls-contact__email a {
	position: relative;
	display: inline-block;
	padding-bottom: 0.35rem;
	font-family: var(--ls-font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.15rem, 3.4vw, 1.85rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--ls-cream);
}

.ls-contact__email a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
	transform: scaleX(0.999);
	transform-origin: center;
	transition:
		opacity 0.55s ease,
		transform 0.7s cubic-bezier(0.16, 0.68, 0.32, 1);
}

.ls-contact__email a:hover::after,
.ls-contact__email a:focus-visible::after {
	opacity: 1;
}

.ls-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem clamp(1rem, 3.5vw, 2.25rem);
	margin-top: clamp(2rem, 5vh, 3.25rem);
}

/* 44px is the minimum comfortable touch target, so the box never shrinks below
   it on any device even though the icon inside it scales. */
.ls-social__link {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: rgba(var(--ls-cream-rgb), 0.65);
	transition:
		color 0.5s ease,
		transform 0.5s cubic-bezier(0.16, 0.68, 0.32, 1);
}

.ls-social__link:hover,
.ls-social__link:focus-visible {
	color: var(--ls-cream);
	transform: translateY(-2px);
}

.ls-social__icon {
	width: 19px;
	height: 19px;
	fill: currentColor;
}


/* 10. Colophon
   ========================================================================== */

.ls-colophon {
	background: var(--ls-evergreen);
	padding: 0 clamp(1.5rem, 6vw, 4rem) clamp(2.25rem, 5vh, 3.25rem);
	text-align: center;
}

.ls-colophon__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.625rem;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: calc(var(--ls-label-track) * 0.9);
	text-transform: uppercase;
	color: rgba(var(--ls-cream-rgb), 0.38);
}

.ls-colophon__sep {
	opacity: 0.5;
}

.ls-colophon a {
	color: inherit;
	transition: color 0.45s ease;
}

.ls-colophon a:hover,
.ls-colophon a:focus-visible {
	color: rgba(var(--ls-cream-rgb), 0.75);
}


/* 11. Reveal animations
   ========================================================================== */

.ls-reveal {
	transition:
		opacity 1.15s cubic-bezier(0.16, 0.68, 0.32, 1),
		transform 1.15s cubic-bezier(0.16, 0.68, 0.32, 1);
	transition-delay: var(--ls-delay, 0ms);
}

/* Every element's resting style is its FINAL state. The pre-reveal state is
   expressed as :not(.is-in), which means adding .is-in simply removes an
   override rather than competing with one. If the script never loads, or if
   these rules are ever reordered, content still renders visible. */
.ls-js .ls-reveal:not(.is-in) {
	opacity: 0;
	transform: translateY(16px);
}

.ls-js [data-lscbr-split]:not(.is-in) .ls-char {
	opacity: 0;
	transform: translateY(0.22em);
}

.ls-js .ls-fleuron:not(.is-in) .ls-fleuron__rule {
	transform: scaleX(0);
}

.ls-js .ls-fleuron:not(.is-in) .ls-fleuron__mark {
	opacity: 0;
	transform: rotate(-45deg) scale(0.35);
}


/* 12. Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.ls-hero__heading {
		line-height: calc(var(--ls-h1-leading) * 1.06);
	}

	.ls-fleuron {
		width: min(260px, 74%);
	}

	/* Tablet: slightly larger icons, since the row sits in more open space. */
	.ls-social__icon {
		width: 21px;
		height: 21px;
	}
}

@media (max-width: 640px) {
	.ls-hero {
		justify-content: center;
		padding-bottom: clamp(3.5rem, 9vh, 5.5rem);
	}

	.ls-hero__brand {
		margin-bottom: 1.25rem;
	}

	.ls-hero__heading {
		font-size: clamp(1.1rem, 6.4vw, 1.75rem);
		letter-spacing: calc(var(--ls-h1-tracking) * 0.8);
		text-indent: calc(var(--ls-h1-tracking) * 0.8);
	}

	.ls-hero__statement {
		font-size: 1rem;
		max-width: 26ch;
	}

	.ls-cta {
		padding: 1.05rem 2.25rem;
		letter-spacing: calc(var(--ls-label-track) * 1.2);
	}

	.ls-hero__cue {
		display: none;
	}

	.ls-section {
		padding: clamp(3.75rem, 9vh, 5.5rem) 0;
	}

	.ls-form__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.6rem;
	}

	.ls-form__wrap {
		padding: 1.6rem 1.35rem 1.85rem;
	}

	/* Comfortable tap targets on the enquiry form. */
	.ls-input {
		padding-block: 0.8rem;
		font-size: 16px; /* Stops iOS zooming on focus. */
	}

	.ls-textarea {
		min-height: 6.5em;
	}

	.ls-btn {
		padding-block: 1.25rem;
	}

	/* Mobile: keep all three on one row with full-size touch targets. */
	.ls-social {
		gap: 0.5rem clamp(0.75rem, 6vw, 1.75rem);
	}

	.ls-social__link {
		width: 48px;
		height: 48px;
	}

	.ls-social__icon {
		width: 22px;
		height: 22px;
	}

	.ls-services {
		gap: 0.4rem 1rem;
	}

	.ls-services__item + .ls-services__item::before {
		margin-right: 1rem;
	}
}

@media (max-width: 380px) {
	.ls-cta {
		width: 100%;
		padding-inline: 1.25rem;
	}
}

/* The scroll cue and the enquiry button compete for the same band of the hero.
   Measured, the gap between them only becomes comfortable past roughly 1000px
   of viewport height, so below that the cue is dropped. The button is the only
   conversion path on the page; the cue is decoration. */
@media (max-height: 980px) {
	.ls-hero__cue {
		display: none;
	}
}

/* Short landscape phones: reclaim vertical space. */
@media (max-height: 520px) and (orientation: landscape) {
	.ls-hero {
		min-height: 620px;
		justify-content: center;
	}

	.ls-hero__cue {
		display: none;
	}
}


/* 13. Reduced motion, print, forced colours
   ========================================================================== */

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

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

	.ls-reveal,
	.ls-char,
	.ls-fleuron__rule,
	.ls-fleuron__mark {
		opacity: 1 !important;
		transform: none !important;
	}

	.ls-hero__video {
		opacity: 1;
	}

	.ls-hero__cue-line {
		animation: none;
		transform: scaleY(1);
	}
}

@media print {
	.ls-hero__media,
	.ls-hero__cue,
	.ls-social,
	.ls-form__wrap {
		display: none;
	}

	.ls-hero,
	.ls-contact,
	.ls-colophon {
		background: none;
		color: #000;
	}
}

@media (forced-colors: active) {
	.ls-cta,
	.ls-btn {
		border: 1px solid ButtonText;
	}

	.ls-fleuron__rule {
		background: CanvasText;
	}
}