/*
 * Herano Studio - "Website coming soon" landing page
 *
 * Built from the supplied desktop (1440px) and mobile (402px) exports. Type and
 * spacing are interpolated between those two reference widths with clamp(), so
 * every viewport in between lands on the designed proportions rather than
 * snapping at a breakpoint. Only the layout itself (gallery columns, card
 * orientation, contact row) changes at breakpoints.
 */

/* ---------------------------------------------------------------- Sofia Pro */

@font-face {
	font-family: 'Sofia Pro';
	src: url('../fonts/sofia-pro-400.woff2') format('woff2'),
	     url('../fonts/sofia-pro-400.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sofia Pro';
	src: url('../fonts/sofia-pro-500.woff2') format('woff2'),
	     url('../fonts/sofia-pro-500.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sofia Pro';
	src: url('../fonts/sofia-pro-600.woff2') format('woff2'),
	     url('../fonts/sofia-pro-600.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Sofia Pro';
	src: url('../fonts/sofia-pro-700.woff2') format('woff2'),
	     url('../fonts/sofia-pro-700.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------- Tokens */

:root {
	--hs-blue: #182cd3;
	--hs-blue-dark: #1224a8;
	--hs-ink: #0f0f0f;
	--hs-card: #f9f9fb;
	--hs-white: #fff;

	--hs-font: 'Sofia Pro', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Type - interpolated 402px -> 1440px. */
	--hs-fs-h1: clamp(28px, 20.25px + 1.927vw, 48px);
	--hs-fs-intro: clamp(14px, 10.13px + 0.963vw, 24px);
	--hs-fs-lead: clamp(16px, 12.9px + 0.771vw, 24px);
	--hs-fs-eyebrow: clamp(13px, 10.29px + 0.674vw, 20px);
	--hs-fs-h2: clamp(26px, 23.68px + 0.578vw, 32px);
	--hs-fs-label: clamp(14px, 13.61px + 0.096vw, 15px);
	--hs-fs-ui: 16px;

	/* Vertical rhythm. */
	--hs-pad-top: clamp(42px, 20.31px + 5.395vw, 98px);
	--hs-pad-bottom: clamp(32px, 5.28px + 6.647vw, 101px);
	--hs-gap-logo-title: clamp(28px, 16.72px + 2.88vw, 58px);
	--hs-gap-title-intro: clamp(15px, 12.56px + 0.628vw, 22px);
	--hs-gap-intro-gallery: clamp(30px, 27.08px + 0.723vw, 38px);
	--hs-gap-gallery-tagline: 27px;
	--hs-gap-tagline-contact: clamp(8px, 5.13px + 0.665vw, 15px);
	--hs-gap-contact-card: clamp(34px, 18.9px + 3.757vw, 73px);

	/* Component metrics. */
	--hs-logo-w: clamp(146px, 96.2px + 12.49vw, 276px);
	--hs-intro-max: clamp(290px, 61.5px + 56.84vw, 880px);
	--hs-gallery-gap: clamp(8px, 5.68px + 0.578vw, 14px);
	--hs-gallery-radius: clamp(6px, 5.23px + 0.193vw, 8px);
	--hs-pill-h: 44px;
	--hs-card-pad: clamp(16px, 13.68px + 0.578vw, 22px);
	--hs-card-radius: clamp(20px, 12.25px + 1.927vw, 40px);
	--hs-photo-radius: clamp(10px, 7.68px + 0.578vw, 16px);

	/* Form metrics - these run the other way: taller, rounder fields on
	   small screens where they are touch targets. */
	--hs-input-h: clamp(30px, 43.9px - 0.963vw, 40px);
	--hs-input-radius: clamp(0px, 11.1px - 0.771vw, 8px);
	--hs-gap-label-input: clamp(9px, 7.82px + 0.27vw, 12px);
	--hs-gap-field: clamp(12px, 7.65px + 1.156vw, 24px);
	--hs-gap-field-submit: clamp(23px, 19.9px + 0.771vw, 31px);
	--hs-gap-h2-form: clamp(10px, -2.88px + 3.179vw, 43px);

	/* Thank-you panel. The heading is offset by the height the eyebrow would
	   have taken, so it lands on the same baseline as the subscribe heading. */
	--hs-fs-thanks: clamp(16px, 14.45px + 0.385vw, 20px);
	--hs-gap-thanks-top: clamp(20px, 16.4px + 0.896vw, 29px);
	--hs-gap-thanks-copy: clamp(26px, 20.38px + 1.397vw, 40.5px);

	/* Height reserved for a one-line validation message - see the note on
	   .wpcf7-not-valid-tip below. */
	--hs-tip-space: 23px;
}

/* -------------------------------------------------------------- Page shell */

.hs-body {
	margin: 0;
	background: var(--hs-blue);
	color: var(--hs-white);
	font-family: var(--hs-font);
	font-size: var(--hs-fs-intro);
	font-weight: 400;
	line-height: 1.16;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

.hs {
	display: block;
	padding: var(--hs-pad-top) 0 var(--hs-pad-bottom);
	overflow-x: clip;
}

.hs img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Two containers: the hero column is a little narrower than the form card,
   exactly as drawn (1140 vs 1188 at 1440px, 330 vs 350 at 402px). */
.hs-wrap {
	margin-inline: auto;
	width: 100%;
}

.hs-wrap--hero {
	max-width: 1212px;
	padding-inline: 36px;
	text-align: center;
}

.hs-wrap--card {
	max-width: 1240px;
	padding-inline: 26px;
}

/* ------------------------------------------------------------------- Hero */

.hs-logo {
	width: var(--hs-logo-w);
	height: auto;
	margin-inline: auto;
}

.hs-title {
	margin: var(--hs-gap-logo-title) 0 0;
	font-size: var(--hs-fs-h1);
	font-weight: 400;
	line-height: 1.15;
	color: var(--hs-white);
}

.hs-intro {
	max-width: var(--hs-intro-max);
	margin: var(--hs-gap-title-intro) auto 0;
	font-size: var(--hs-fs-intro);
	font-weight: 400;
	line-height: 1.16;
	text-wrap: pretty;
}

.hs-intro strong {
	font-weight: 700;
}

/* ---------------------------------------------------------------- Gallery */

.hs-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hs-gallery-gap);
	margin: var(--hs-gap-intro-gallery) 0 0;
	padding: 0;
	list-style: none;
}

.hs-gallery__item {
	margin: 0;
}

.hs-gallery__img {
	width: 100%;
	aspect-ratio: 371 / 216;
	object-fit: cover;
	border-radius: var(--hs-gallery-radius);
}

/* ------------------------------------------------------- Tagline + contact */

.hs-tagline {
	margin: var(--hs-gap-gallery-tagline) 0 0;
	font-size: var(--hs-fs-lead);
	font-weight: 400;
	line-height: 1.2;
}

.hs-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--hs-gap-tagline-contact);
}

.hs-contact__label {
	font-size: var(--hs-fs-lead);
	line-height: 1.2;
}

.hs-contact__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hs-pill-h);
	padding: 0 34px;
	border-radius: calc(var(--hs-pill-h) / 2);
	background: var(--hs-white);
	color: var(--hs-blue);
	font-size: var(--hs-fs-ui);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 4px 8px rgb(0 0 0 / 18%);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hs-contact__pill:hover,
.hs-contact__pill:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgb(0 0 0 / 26%);
}

/* ------------------------------------------------------------- Form card */

.hs-card {
	display: grid;
	/* 1.107:1 reproduces the drawn 580 / 524 track split at 1440px, and lets
	   the photo shrink with the card instead of pinning it at 524px. */
	grid-template-columns: minmax(0, 1.107fr) minmax(0, 1fr);
	gap: 40px;
	margin-top: var(--hs-gap-contact-card);
	padding: var(--hs-card-pad);
	border-radius: var(--hs-card-radius);
	background: var(--hs-card);
	color: var(--hs-ink);
	text-align: left;
}

.hs-card__body {
	order: 1;
	padding: 14px 0 0 20px;
	min-width: 0;
}

.hs-card__media {
	order: 2;
	position: relative;
	align-self: start;
	container-type: inline-size;
	border-radius: var(--hs-photo-radius);
	overflow: hidden;
}

.hs-card__photo {
	width: 100%;
	aspect-ratio: 524 / 354;
	object-fit: cover;
	object-position: center 40%;
}

/* Hand-lettered annotations over the photo. Positions are percentages of the
   photo box, and the type/arrow scale with the photo via container units. */
.hs-note {
	position: absolute;
	color: var(--hs-white);
	font-size: clamp(12px, 3.4cqw, 16px);
	font-weight: 400;
	line-height: 1.24;
	text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
	pointer-events: none;
}

.hs-note__text {
	display: block;
}

.hs-note__arrow {
	width: clamp(25px, 7.2cqw, 33.5px);
	height: auto;
	margin-top: 0.375em;
	transform: rotate(83deg);
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 30%));
}

.hs-note--founder {
	top: 12.2%;
	left: 35.7%;
}

.hs-note--founder .hs-note__arrow {
	margin-left: 0.2em;
}

.hs-note--pooch {
	top: 32.8%;
	left: 76.1%;
}

/* ------------------------------------------------------------ Card copy */

.hs-eyebrow {
	margin: 0;
	color: var(--hs-blue);
	font-size: var(--hs-fs-eyebrow);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.hs-card__title {
	margin: 4px 0 0;
	color: var(--hs-ink);
	font-size: var(--hs-fs-h2);
	font-weight: 700;
	line-height: 1.16;
	text-wrap: pretty;
}

.hs-form {
	margin-top: var(--hs-gap-h2-form);
	max-width: 530px;
}

/* ------------------------------------------------------- Thank-you panel */

.hs-card__title--thanks {
	margin-top: var(--hs-gap-thanks-top);
}

.hs-card__title--thanks:focus {
	outline: none;
}

.hs-card__title--thanks:focus-visible {
	outline: 2px solid var(--hs-blue);
	outline-offset: 4px;
}

.hs-thanks__copy {
	margin: var(--hs-gap-thanks-copy) 0 0;
	max-width: 34em;
	color: var(--hs-ink);
	font-size: var(--hs-fs-thanks);
	font-weight: 400;
	line-height: 1.15;
}

/* The drawn gap between the two blocks is exactly one line. */
.hs-thanks__copy + .hs-thanks__copy {
	margin-top: 1.15em;
}

/* --------------------------------------------------- Contact Form 7 fields */

/* CF7 runs its own autop over the form template, which wraps each field in a
   <p>; zero those out so the designed rhythm survives. */
.hs-form .wpcf7,
.hs-form form.wpcf7-form,
.hs-form p {
	margin: 0;
}

.hs-form .hs-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.hs-form .hs-form__field {
	margin: 0;
}

.hs-form .hs-form__field--full {
	margin-top: var(--hs-gap-field);
}

.hs-form label {
	display: block;
	margin-bottom: var(--hs-gap-label-input);
	color: var(--hs-ink);
	font-size: var(--hs-fs-label);
	font-weight: 400;
	line-height: 1.2;
}

.hs-form .hs-form__req {
	color: var(--hs-blue);
}

.hs-form .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.hs-form input[type='text'],
.hs-form input[type='email'],
.hs-form input[type='tel'],
.hs-form textarea {
	display: block;
	width: 100%;
	height: var(--hs-input-h);
	padding: 0 12px;
	border: 1px solid var(--hs-ink);
	border-radius: var(--hs-input-radius);
	background: var(--hs-white);
	color: var(--hs-ink);
	font-family: inherit;
	font-size: var(--hs-fs-label);
	line-height: 1.2;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hs-form textarea {
	height: auto;
	min-height: 96px;
	padding: 10px 12px;
	resize: vertical;
}

.hs-form input:focus,
.hs-form textarea:focus {
	outline: none;
	border-color: var(--hs-blue);
	box-shadow: 0 0 0 2px rgb(24 44 211 / 25%);
}

/* Submit */

.hs-form .hs-form__actions {
	margin: var(--hs-gap-field-submit) 0 0;
	line-height: 0;
}

.hs-form .hs-form__actions p {
	line-height: 0;
}

.hs-form input.hs-form__submit,
.hs-form button.hs-form__submit,
.hs-form input.wpcf7-submit {
	display: inline-block;
	width: auto;
	height: 44px;
	padding: 0 48px;
	border: 0;
	border-radius: 22px;
	background: var(--hs-blue);
	color: var(--hs-white);
	font-family: inherit;
	font-size: var(--hs-fs-ui);
	font-weight: 700;
	line-height: 44px;
	cursor: pointer;
	appearance: none;
	box-shadow: 0 4px 8px rgb(0 0 0 / 28%);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hs-form button.hs-form__submit:hover,
.hs-form button.hs-form__submit:focus-visible,
.hs-form input.wpcf7-submit:hover,
.hs-form input.wpcf7-submit:focus-visible {
	background: var(--hs-blue-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgb(0 0 0 / 32%);
}

.hs-form button.hs-form__submit:active,
.hs-form input.wpcf7-submit:active {
	transform: translateY(0);
	box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
}

.hs-form button.hs-form__submit:disabled {
	cursor: not-allowed;
	opacity: 0.7;
	transform: none;
}

.hs-form .hs-form__msg {
	margin: 0;
	min-height: 1.35em;
	font-size: 14px;
	line-height: 1.35;
}

.hs-form .hs-form__msg:not(:empty) {
	margin-top: 14px;
}

/* CF7 feedback: strip the plugin's default boxed styling and match the page. */

.hs-form .wpcf7-spinner {
	margin: 0 0 0 14px;
	vertical-align: middle;
}

/*
 * Validation messages are taken out of the flow, and the space they need is
 * reserved for as long as the form is in its invalid state.
 *
 * CF7 validates text fields on `change`, so it clears every outstanding tip at
 * once when the last field loses focus - which is exactly the moment the
 * pointer is coming down on the submit button. In the flow that collapsed ~70px
 * of layout mid-click, the button moved out from under the pointer, and the
 * click was swallowed: users had to press "Sign me up!" twice after correcting
 * an error. Reserving the space keeps the button still.
 */
.hs-form .wpcf7-not-valid-tip {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0;
	color: #c1121f;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
}

.hs-form form.invalid .hs-form__field {
	padding-bottom: var(--hs-tip-space);
}

.hs-form input.wpcf7-not-valid {
	border-color: #c1121f;
}

.hs-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 14px;
	border: 1px solid currentcolor;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.35;
}

.hs-form form.sent .wpcf7-response-output {
	color: #0b6b3a;
	border-color: #0b6b3a;
}

.hs-form form.invalid .wpcf7-response-output,
.hs-form form.unaccepted .wpcf7-response-output,
.hs-form form.payment-required .wpcf7-response-output,
.hs-form form.failed .wpcf7-response-output,
.hs-form form.aborted .wpcf7-response-output,
.hs-form form.spam .wpcf7-response-output {
	color: #c1121f;
	border-color: #c1121f;
}

.hs-form .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ Breakpoints */

/* Below the desktop card layout: photo on top, copy beneath. */
@media (max-width: 1023px) {
	.hs-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.hs-card__media {
		order: 1;
	}

	.hs-card__photo {
		aspect-ratio: 318 / 167;
	}

	.hs-card__body {
		order: 2;
		padding: 19px 0 0;
	}

	.hs-form {
		max-width: none;
	}

	/* Annotation positions are redrawn for the shorter mobile crop. */
	.hs-note--founder {
		top: 4.2%;
		left: 37.9%;
	}

	.hs-note--pooch {
		top: 22.2%;
		left: 77%;
	}
}

/* Tablet and below: two gallery columns, stacked contact row, full-width
   controls - matching the mobile export. */
@media (max-width: 767px) {
	.hs-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-contact {
		flex-direction: column;
		gap: 12px;
	}

	.hs-contact__pill {
		width: 100%;
		padding: 0 16px;
	}

	.hs-form .hs-form__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hs-gap-field);
	}

	.hs-form button.hs-form__submit,
	.hs-form input.wpcf7-submit {
		display: block;
		width: 100%;
		padding: 0 16px;
	}

	/* Full-width button: float the spinner over it rather than letting the
	   (permanently rendered, visibility-toggled) element add a second line. */
	.hs-form .hs-form__actions p {
		position: relative;
	}

	.hs-form .wpcf7-spinner {
		position: absolute;
		top: 50%;
		right: 16px;
		margin: 0;
		transform: translateY(-50%);
	}
}

/* Very narrow phones - keep the gutters proportional. */
@media (max-width: 400px) {
	.hs-wrap--hero {
		padding-inline: 20px;
	}

	.hs-wrap--card {
		padding-inline: 14px;
	}
}

/* --------------------------------------------------------- Accessibility */

.hs a:focus-visible,
.hs input:focus-visible {
	outline: 2px solid var(--hs-white);
	outline-offset: 3px;
}

.hs-card a:focus-visible,
.hs-card input:focus-visible {
	outline-color: var(--hs-blue);
}

@media (prefers-reduced-motion: reduce) {
	.hs *,
	.hs *::before,
	.hs *::after {
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.hs-body {
		background: #fff;
		color: #000;
	}
}