/* The House of Seyd'amour — component styles.
 *
 * Design system: black, white, baby pink. Tokens live in theme.json and arrive as
 * --wp--preset--* custom properties, so colour and type changes are made in the Site
 * Editor rather than here.
 *
 * One button style. One card style per purpose. One heading scale. If a component is
 * needed twice it is defined once and reused.
 */

:root {
	--hos-hair: rgba(11, 11, 13, .10);
	--hos-hair-pink: rgba(217, 154, 168, .34);
	--hos-shadow: 0 18px 50px rgba(11, 11, 13, .07);
	--hos-shadow-lg: 0 28px 70px rgba(11, 11, 13, .12);
}

body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ==========================================================================
   Shared type helpers
   ==========================================================================

   Two rose tokens, and the difference matters.

   --pink-deep is the decorative one: icons, hairlines, hover states. Nothing whose
   meaning is lost if it is hard to read.

   --rose-ink is the same rose taken dark enough to read. Deep pink on the blush sections
   measures about 1.9:1 against the background, and readable text needs 4.5:1, so every
   price and every eyebrow label on the site was sitting at well under half the minimum.
   Rose ink is 5.2:1 on blush. Anything a visitor has to actually read uses it.

   If a price or a label ever looks washed out again, this is the line it crossed.
   ========================================================================== */
.hos-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rose-ink);
	font-weight: 400;
	margin: 0;
}
.hos-script {
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--preset--font-size--script-lg);
	color: var(--wp--preset--color--rose-ink);
	line-height: 1.2;
	margin: 0 0 .2em;
	font-weight: 400;
}
.hos-lede { line-height: 1.85; color: var(--wp--preset--color--smoke); }
/* The coloured word in the hero headline. Rose ink, not deep pink: it is a headline word,
   it has to be read, and on the pale hero background deep pink measured about 2.1:1 —
   under even the 3:1 that large text is allowed. It also survives the palette going
   monochrome, where deep pink becomes a light grey that would vanish entirely. */
.hos-pink-word { color: var(--wp--preset--color--rose-ink); }

/* A hairline with a small diamond, used under section headings in the reference. */
.hos-rule {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 1.4rem 0 0;
	color: var(--hos-hair-pink);
}
.hos-rule::before,
.hos-rule::after {
	content: "";
	height: 1px;
	flex: 1;
	background: currentColor;
	max-width: 190px;
}
/* The mid accent, not the light one: on a pale section the light accent is the background's
   near neighbour and the diamond disappears. */
.hos-rule span { color: var(--wp--preset--color--pink-deep); font-size: .7rem; }
.hos-rule.is-left::before { display: none; }

/* ==========================================================================
   Buttons — one primary, one outline, everywhere
   ========================================================================== */
.wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	white-space: nowrap;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--noir);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--white);
}
/* On black sections the outline flips to white. */
.has-noir-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.hos-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, .5);
}
.has-noir-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.hos-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--pink);
	border-color: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--noir);
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.hos-announce { padding-block: .7em; }
.hos-announce__inner { gap: 1rem; }
.hos-announce p { margin: 0; letter-spacing: .1em; }
.hos-announce__link { letter-spacing: .18em; text-transform: uppercase; }
.hos-announce__link a { border-bottom: 1px solid transparent; transition: border-color .35s ease; }
.hos-announce__link a:hover { border-bottom-color: var(--wp--preset--color--noir); color: inherit; }
@media (max-width: 720px) {
	.hos-announce__inner { justify-content: center; }
	.hos-announce__link { display: none; }
	.hos-announce p { font-size: .62rem; text-align: center; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.hos-header {
	position: sticky;
	top: 0;
	z-index: 60;
	transition: box-shadow .45s ease, background-color .45s ease;
}
.hos-header.is-stuck { box-shadow: 0 12px 40px rgba(11, 11, 13, .28); }
.hos-nav { min-height: clamp(74px, 7vw, 104px); gap: 1.5rem; }
.hos-nav__right { min-width: 0; }

.hos-logo { flex: 0 0 auto; min-width: 0; }
.hos-logo .custom-logo-link { display: block; }
.hos-logo img {
	display: block;
	width: clamp(168px, 17vw, 270px);
	height: auto;
	max-width: 100%;
	transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.hos-header.is-stuck .hos-logo img { width: clamp(126px, 12vw, 186px); }

/* The menu sits on black. WordPress applies the global body text colour to navigation
   links with a more specific selector than a bare .hos-menu a, which rendered the whole
   menu near-black on a near-black bar and made it invisible. These selectors match the
   specificity WordPress uses, so the white wins. */
.hos-header .hos-menu,
.hos-header .hos-menu a,
.hos-header .wp-block-navigation .wp-block-navigation-item__content,
.hos-header .wp-block-navigation .wp-block-navigation-item__label,
.hos-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: #ffffff;
}
.hos-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	position: relative;
	padding-block: .5em;
	transition: color .3s ease, opacity .3s ease;
	opacity: .88;
}
.hos-header .wp-block-navigation .wp-block-navigation-item__content:hover { opacity: 1; }
.hos-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	background: var(--wp--preset--color--pink);
	transition: width .4s cubic-bezier(.22, 1, .36, 1);
}
.hos-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.hos-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { width: 100%; }
.hos-menu .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--ink);
	border: 1px solid rgba(255, 255, 255, .12);
	padding-block: .5rem;
	min-width: 15rem;
}
.hos-menu .wp-block-navigation__submenu-container a { padding: .8em 1.4em; }
.hos-menu .wp-block-navigation__responsive-container-open,
.hos-menu .wp-block-navigation__responsive-container-close { color: #fff; }

.hos-header-cta { flex: 0 0 auto; }
.hos-header-cta .wp-block-button { margin: 0; }
.hos-header-cta .wp-block-button__link { font-size: .66rem; padding: 1em 1.9em; }

@media (max-width: 1180px) {
	.hos-menu a { font-size: .64rem; letter-spacing: .1em; }
	.hos-header-cta .wp-block-button__link { padding: .9em 1.3em; font-size: .6rem; }
}
@media (max-width: 999px) {
	.hos-logo img { width: clamp(132px, 34vw, 172px); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hos-hero { position: relative; overflow: hidden; background: var(--wp--preset--color--petal); }
.hos-hero__figure img {
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 82svh;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}
/* The reference sets the hero headline in caps. Applied here rather than typed in caps
   so the editor still holds readable sentence-case text. */
.hos-hero h1 {
	margin: .3em 0 .45em;
	text-transform: uppercase;
	letter-spacing: .012em;
	line-height: 1.06;
}

/* ==========================================================================
   Trust strip — four points under the hero, five in the footer
   ========================================================================== */
.hos-trust { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.hos-trust__item {
	padding: clamp(1.2rem, 2vw, 1.6rem) clamp(.8rem, 1.6vw, 1.4rem);
	border-left: 1px solid var(--hos-hair-pink);
	text-align: left;
}
.hos-trust__item:first-child { border-left: 0; padding-left: 0; }
.hos-trust__icon {
	display: block;
	font-size: 1.25rem;
	color: var(--wp--preset--color--pink-deep);
	margin-bottom: .7rem;
	line-height: 1;
}
.hos-trust__title {
	display: block;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	margin-bottom: .35rem;
	line-height: 1.45;
	text-wrap: balance;
}
.hos-trust__sub { display: block; font-size: .82rem; color: var(--wp--preset--color--smoke); line-height: 1.5; }
@media (max-width: 620px) {
	.hos-trust { grid-template-columns: repeat(2, 1fr); }
	.hos-trust__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--hos-hair-pink); }
	.hos-trust__item:nth-child(-n+2) { border-top: 0; }
}

/* Footer version sits on black and centres. */
.hos-trust--dark .hos-trust__item { border-left-color: rgba(255, 255, 255, .14); text-align: center; padding-inline: 1rem; }
.hos-trust--dark .hos-trust__item:first-child { padding-left: 1rem; }
.hos-trust--dark .hos-trust__icon { color: var(--wp--preset--color--pink); }
.hos-trust--dark .hos-trust__title { color: #fff; }
.hos-trust--dark .hos-trust__sub { color: rgba(255, 255, 255, .55); }
@media (max-width: 860px) {
	.hos-trust--dark { grid-template-columns: repeat(2, 1fr); }
	.hos-trust--dark .hos-trust__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
	.hos-trust--dark .hos-trust__item:nth-child(-n+2) { border-top: 0; }
}

/* ==========================================================================
   Stats row
   ========================================================================== */
.hos-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
.hos-stat { text-align: center; padding-inline: .8rem; border-left: 1px solid var(--hos-hair-pink); }
.hos-stat:first-child { border-left: 0; }
.hos-stat strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.8rem, 2.7vw, 2.5rem);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--noir);
	font-variant-numeric: tabular-nums;
}
.hos-stat span {
	display: block;
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke);
	margin-top: .55rem;
}

/* ==========================================================================
   Treatment icon cards — the six-up grid from the reference
   ========================================================================== */
.hos-tcard {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hos-hair-pink);
	padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1rem, 1.8vw, 1.35rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease, border-color .5s ease;
}
.hos-tcard:hover {
	transform: translateY(-6px);
	box-shadow: var(--hos-shadow);
	border-color: var(--wp--preset--color--pink);
}
.hos-tcard__icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--blush);
	display: grid;
	place-items: center;
	font-size: 1.15rem;
	color: var(--wp--preset--color--pink-deep);
	margin: 0 0 .3rem;
	flex: 0 0 auto;
}
/* Cards that carry a real before-and-after photograph. The image runs to the card edges
   and the icon is dropped, so a results card reads as evidence rather than decoration. */
.hos-tcard--result { padding-top: 0; padding-inline: 0; }
.hos-tcard--result > *:not(.hos-tcard__ba) { padding-inline: clamp(1rem, 1.8vw, 1.35rem); }
.hos-tcard__ba {
	margin: 0 0 1rem;
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--blush);
}
/*
 * The whole photograph, at its own proportions.
 *
 * These were cropped to 4/3 and covered, which is a landscape frame. The photographs are
 * portraits — 1100x1957 for the cheeks one — so the crop threw away between a third and a
 * half of every image, taking the tops of heads with it. On a before and after that is not
 * a styling choice, it is losing the evidence.
 *
 * Cards therefore no longer agree on image height. That is the cost, and it is the right
 * way round: the picture decides its shape, and the card accommodates it.
 */
/*
 * One shape for every card, and the whole photograph a click away.
 *
 * These are portraits — 1100x1957 for one of them — and the cards used to crop them to 4/3,
 * a landscape frame, which cut the tops of heads off. Showing them uncropped instead fixed
 * that and broke something else: the cards no longer agreed on height and the row looked
 * broken.
 *
 * 4/5 is the compromise, and it is not much of one. Two of the three photographs are 4/5
 * already, so they are not cropped at all; only the tall one loses anything. And every card
 * image opens full size on click, so nothing is actually hidden.
 */
.hos-tcard__ba img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.hos-tcard--result:hover .hos-tcard__ba img { transform: scale(1.04); }
.hos-tcard__ba figcaption {
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
	padding: .6em 1rem .1em;
	text-align: center;
}

.hos-tcard__title {
	font-size: .84rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	margin: 0;
	line-height: 1.5;
}
.hos-tcard__copy { font-size: .92rem; color: var(--wp--preset--color--smoke); margin: 0; line-height: 1.7; flex: 1; }
.hos-tcard__link {
	display: inline-block;
	margin-top: .5rem;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--hos-hair-pink);
	padding: .8em 1.4em;
	transition: background-color .35s ease, border-color .35s ease;
}
.hos-tcard__link:hover { background: var(--wp--preset--color--blush); border-color: var(--wp--preset--color--pink); color: var(--wp--preset--color--noir); }

/* Grids for the html-block sections. Defined here so the markup stays declarative. */
.hos-tgrid {
	display: grid;
	gap: clamp(.7rem, 1.2vw, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
}
.hos-cgrid {
	display: grid;
	gap: clamp(.8rem, 1.4vw, 1.1rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hos-cgrid-min, 220px)), 1fr));
}
/* Cards written straight into page content carry their own width from the entry flow,
   which would fight the grid track. Inside the grid the track decides. */
.hos-cgrid > * { width: auto !important; margin-inline: 0 !important; }

/* Full-bleed side photographs in the hero and treatments rows. */
.hos-treatments__figure img,
.hos-hero__figure img { height: 100%; }
.hos-treatments__figure img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}
.hos-about__img img { width: 100%; display: block; box-shadow: var(--hos-shadow); }

@media (max-width: 781px) {
	.hos-hero__figure img,
	.hos-treatments__figure img { aspect-ratio: 4 / 3; max-height: 62svh; }
}

/* ==========================================================================
   Photo card — used for treatment and results panels
   ========================================================================== */
.hos-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hos-hair-pink);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
.hos-card:hover { transform: translateY(-6px); box-shadow: var(--hos-shadow); }
.hos-card--photo { padding: 0 0 clamp(1.5rem, 2.2vw, 2rem); gap: .65rem; }
.hos-card--photo > *:not(.hos-card__img) { margin-inline: clamp(1.4rem, 2vw, 1.8rem); }
.hos-card__img { margin: 0 0 clamp(1rem, 1.6vw, 1.4rem); overflow: hidden; }
.hos-card__img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 28%;
	display: block;
	transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.hos-card--photo:hover .hos-card__img img { transform: scale(1.05); }
.hos-card h3, .hos-card p { margin: 0; }
.hos-card__from {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	color: var(--wp--preset--color--rose-ink);
	padding-top: .9rem;
	border-top: 1px solid var(--hos-hair-pink);
	margin-top: auto;
}
/* Text-only variant for archives with no image. */
.hos-card--text { padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.5rem, 2.2vw, 2rem); gap: .7rem; }

/* ==========================================================================
   Course cards and the dark masterclass panel
   ========================================================================== */
.hos-course {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hos-hair-pink);
	padding: clamp(1.6rem, 2.6vw, 2.2rem);
	display: flex;
	flex-direction: column;
	gap: .75rem;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
.hos-course:hover { transform: translateY(-6px); box-shadow: var(--hos-shadow); }
.hos-course__tag {
	font-size: .6rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rose-ink);
	margin: 0;
}
.hos-course h3 { margin: 0; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .01em; }
.hos-course p { margin: 0; }
.hos-course__price { margin-top: auto; padding-top: .8rem; }
.hos-course__was {
	display: block;
	text-decoration: line-through;
	color: var(--wp--preset--color--mist);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.hos-course__now {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.7rem;
	color: var(--wp--preset--color--rose-ink);
	line-height: 1.2;
}
.hos-course__now small {
	font-family: var(--wp--preset--font-family--body);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke);
	margin-right: .5em;
}

.hos-master {
	background: var(--wp--preset--color--noir);
	color: rgba(255, 255, 255, .8);
	padding: clamp(1.8rem, 3vw, 2.6rem);
	display: flex;
	flex-direction: column;
	gap: .9rem;
}
.hos-master h3 { color: #fff; margin: 0; text-transform: uppercase; font-size: 1.4rem; line-height: 1.3; }
.hos-master .hos-course__tag { color: var(--wp--preset--color--pink); }
.hos-master ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hos-master li { font-size: .92rem; display: flex; gap: .7em; align-items: baseline; }
.hos-master li::before { content: "✓"; color: var(--wp--preset--color--pink); font-size: .8em; }
.hos-master__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.1rem;
	color: var(--wp--preset--color--pink);
	margin-top: auto;
	padding-top: .6rem;
}
.hos-master__price small {
	font-family: var(--wp--preset--font-family--body);
	font-size: .64rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin-left: .5em;
}

/* ==========================================================================
   Price list — every row is an editable paragraph
   ========================================================================== */
.hos-price-list p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .95em 0;
	border-bottom: 1px solid var(--hos-hair-pink);
}
.hos-price-list p:last-child { border-bottom: 0; }
.hos-price__name { font-size: 1rem; color: var(--wp--preset--color--graphite); }
.hos-price__name small { display: block; font-size: .74rem; color: var(--wp--preset--color--mist); margin-top: .18em; }
.hos-price__amt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	color: var(--wp--preset--color--rose-ink);
	white-space: nowrap;
}
.hos-panel__note {
	font-size: .78rem;
	color: var(--wp--preset--color--mist);
	margin-top: 1.6rem;
	line-height: 1.9;
	padding-left: 1rem;
	border-left: 1px solid var(--hos-hair-pink);
}

/* ==========================================================================
   Accordions
   ========================================================================== */
.hos-accordions .wp-block-details { border-bottom: 1px solid var(--hos-hair-pink); padding: .4rem 0; }
.hos-accordions .wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	padding: .85em 2.5rem .85em 0;
	cursor: pointer;
	list-style: none;
	position: relative;
	color: var(--wp--preset--color--noir);
}
.hos-accordions .wp-block-details summary::-webkit-details-marker { display: none; }
.hos-accordions .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: .3rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	/* The open and close control, not decoration, so it reads at the darker rose. */
	color: var(--wp--preset--color--rose-ink);
	transition: transform .35s ease;
}
.hos-accordions .wp-block-details[open] summary::after { content: "−"; }

/* ==========================================================================
   Marquee strip
   ========================================================================== */
.hos-marquee {
	background: var(--wp--preset--color--noir);
	overflow: hidden;
	padding: 1em 0;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
.alignfull > .hos-marquee { margin-inline: 0; width: auto; max-width: none; }
.hos-marquee__track { display: flex; width: max-content; animation: hos-slide 48s linear infinite; }
.hos-marquee__track span {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(.85rem, 1.3vw, 1.05rem);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	padding-inline: 1.6rem;
	white-space: nowrap;
}
.hos-marquee__track span::after { content: "·"; margin-left: 3.2rem; color: var(--wp--preset--color--pink); }
@keyframes hos-slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.hos-footer { background: var(--wp--preset--color--noir); color: rgba(255, 255, 255, .62); }
.hos-footer h4 {
	font-family: var(--wp--preset--font-family--body);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--pink);
	font-weight: 400;
	margin-bottom: 1.2rem;
}
.hos-footer p, .hos-footer li { color: rgba(255, 255, 255, .62); }
.hos-footer a:hover { color: var(--wp--preset--color--pink); }
.hos-footer .hos-logo img { width: clamp(170px, 18vw, 236px); }
.hos-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.hos-legal-links a { margin-inline: .2em; }

/* ==========================================================================
   Sticky mobile booking bar
   ========================================================================== */
.hos-sticky {
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 70;
	display: flex;
	gap: 8px;
	transform: translateY(150%);
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.hos-sticky.is-visible { transform: none; }
.hos-sticky .wp-block-button { flex: 1; margin: 0; }
.hos-sticky .wp-block-button__link {
	width: 100%;
	padding-inline: 1em;
	font-size: .64rem;
	box-shadow: 0 12px 30px rgba(11, 11, 13, .25);
}
@media (min-width: 1000px) { .hos-sticky { display: none; } }

/* ==========================================================================
   Section rhythm helpers
   ========================================================================== */
.hos-section-head { max-width: 46rem; }
.hos-section-head.is-center { margin-inline: auto; text-align: center; }
.hos-section-head.is-center .hos-rule { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	.hos-marquee__track { animation: none; }
	.hos-card:hover, .hos-tcard:hover, .hos-course:hover { transform: none; }
	.hos-card--photo:hover .hos-card__img img { transform: none; }
}