/* FFF Clinic, phone layer.
   Everything here is inside max-width: 600px, so tablets and desktops are untouched.
   Loaded after fff.css. Audit that prompted it (2026-09-24): the homepage ran to 9.2 phone
   screens, the first screen was nearly all photo with the Book button below the fold, and
   type ran a size large (17px body, 44px headline on three lines, 54-60px buttons). */

@media (max-width: 600px) {

	/* ---------- Scale: one size down, set on the theme's own presets ---------- */
	html:root {
		--wp--preset--font-size--md: 1rem;          /* body 17px -> 16px */
		--wp--preset--font-size--lg: 1.0625rem;     /* ledes 19px -> 17px */
		--wp--preset--font-size--xl: 1.625rem;      /* section titles 31px -> 26px */
		--wp--preset--font-size--xxl: 2.125rem;     /* hero headline 44px -> 34px */
		--section-y: 2.25rem;                       /* was resolving to 36px; keep it there */
	}
	body { line-height: 1.6; }
	h3, .fff-step h3, .fff-card h3 { font-size: 1.25rem; }
	.fff-eyebrow { font-size: .6875rem; letter-spacing: .1em; margin-block-end: .5rem; }
	.fff-section__title { margin-block-end: 1.25rem; }
	.fff-row { font-size: 1.0625rem; padding-block: 1rem; grid-template-columns: 2.25rem 1fr; }
	.fff-quote__text { font-size: 1.0625rem; }
	.fff-lede { font-size: 1.0625rem; }

	/* ---------- Touch: quiet, fast feedback ---------- */
	* { -webkit-tap-highlight-color: transparent; }
	html { scroll-behavior: smooth; }
	.wp-block-button__link, .fff-form__submit, .fff-card, .fff-tab, .fff-jump a,
	.woocommerce ul.products li.product .button, .fff-cart, .fff-dots button {
		transition: transform .16s ease, background-color .2s ease, border-color .2s ease;
	}
	.wp-block-button__link:active, .fff-form__submit:active, .fff-tab:active, .fff-jump a:active,
	.woocommerce ul.products li.product .button:active { transform: scale(.97); }
	.fff-card:active, .woocommerce ul.products li.product:active { transform: scale(.985); }
	.fff-card:hover { transform: none; }   /* no hover lift on touch */

	/* Buttons: 54-60px -> about 48px, still an easy thumb target */
	/* line-height 1.2: buttons were inheriting the body's 1.6 and coming out 53px */
	.wp-block-button__link { padding: .8rem 1.35rem; font-size: .9375rem; line-height: 1.2; }
	.fff-btn-lg .wp-block-button__link { padding: .85rem 1.5rem; font-size: 1rem; }

	/* ---------- Header ----------
	   Was a faint mark on the left and an oversized "Book consultation" pill crowding the
	   icons. Now: monogram + a two-line serif name as a lockup on the left; on the right a
	   compact Book pill, the cart, and the menu at the edge where the thumb expects it.
	   It slides away while scrolling down and returns on the way up (phone.js). */
	.wp-site-blocks > header.wp-block-template-part {
		transition: transform .35s cubic-bezier(.2, .7, .2, 1);
		will-change: transform;
	}
	.wp-site-blocks > header.wp-block-template-part.is-tucked { transform: translateY(-100%); }
	.has-modal-open .wp-site-blocks > header.wp-block-template-part { transform: none; }
	.fff-header__bar { padding-block: .6rem; gap: .75rem; }
	.fff-brand { gap: .55rem; }
	.fff-brand .wp-block-site-logo { width: 36px !important; }
	.fff-brand .fff-logo {
		display: block;
		font-size: .9375rem;
		line-height: 1.05;
		letter-spacing: 0;
		max-width: 6.2em;          /* breaks "Farzeen's / Fitness First" onto two lines */
	}
	.fff-header__right { gap: .35rem; }
	.fff-header__right > .fff-header__cta { order: 1; }
	.fff-header__right > p { order: 2; }                 /* cart */
	.fff-header__right > .fff-nav { order: 3; }
	.fff-header__cta.fff-header__cta .wp-block-button__link {
		font-size: 0;              /* the full label stays for screen readers; shows "Book" */
		padding: .5rem .95rem;
		line-height: 1;
	}
	.fff-header__cta.fff-header__cta .wp-block-button__link::after {
		content: "Book";
		font-size: .8125rem;
		letter-spacing: .01em;
	}
	.fff-cart { width: 38px; height: 38px; }
	.fff-nav .wp-block-navigation__responsive-container-open {
		width: 38px;
		height: 38px;
		display: grid !important;
		place-items: center;
		margin-right: -6px;        /* optical: the icon's own padding made the edge look indented */
	}

	/* Hero headline one step larger than other titles, so the first screen has a clear lead */
	.fff-hero__title { font-size: 2.5rem; line-height: 1.04; letter-spacing: -.015em; }

	/* Her "signature" under the Book button: a small round photo, her name and degree.
	   Present but quiet. Built by phone.js from the hero photo already on the page. */
	.fff-sig { display: flex; align-items: center; gap: .7rem; margin-top: 1.25rem; }
	.fff-sig img {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		object-fit: cover;
		object-position: 50% 18%;
		border: 2px solid var(--wp--preset--color--white);
		box-shadow: 0 0 0 1px var(--line);
	}
	.fff-sig strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1rem; line-height: 1.2; color: var(--ink); }
	.fff-sig span { font-size: .75rem; color: var(--muted); }

	/* ---------- First screen, default: no photo ----------
	   The words and the Book button alone. Her portrait still leads on desktop.
	   ?phonehero=soft switches to the soft-backdrop version below, for comparison. */
	:root:not(.phone-hero-soft):not(.hero-full):not(.hero-split):not(.hero-backdrop) .fff-hero__cols > .fff-hero__media.fff-hero__media { display: none !important; }
	:root:not(.phone-hero-soft):not(.hero-full):not(.hero-split):not(.hero-backdrop) .fff-hero__text { padding-block: 2.5rem 0; }

	/* ---------- First screen, alternative: her portrait as a soft backdrop behind the words ----------
	   A full-width face banner here felt "very up in your face" (user, 2026-09-24). The
	   portrait now sits faded behind the headline like a watermark and dissolves before
	   the Book button, so the words lead and the photo sets the mood. Desktop keeps its arch.
	   Scoped away from the design lab's own heroes (hero-full / split / backdrop). */
	.fff-hero { padding-block-start: 0; }
	.fff-hero .fff-eyebrow { letter-spacing: .05em; }   /* keeps the location line to one row */
	.fff-hero__title { margin-block: 0 .75rem; max-width: none; }
	.fff-hero__lede { font-size: 1rem; margin-block-end: 1.25rem; max-width: none; }

	:root.phone-hero-soft:not(.hero-full):not(.hero-split):not(.hero-backdrop) .fff-hero__cols {
		position: relative;
		isolation: isolate;
		flex-direction: column !important;
		gap: 0 !important;
	}
	:root.phone-hero-soft:not(.hero-full):not(.hero-split):not(.hero-backdrop) .fff-hero__cols > .fff-hero__media.fff-hero__media {
		position: absolute;
		inset: 0 calc(-1 * var(--gutter)) 0;
		z-index: -1;
		flex: none !important;
		width: auto !important;
		margin: 0 !important;
		pointer-events: none;
	}
	:root.phone-hero-soft:not(.hero-full):not(.hero-split):not(.hero-backdrop) .fff-hero__photo { height: 100%; margin: 0; }
	:root.phone-hero-soft:not(.hero-full):not(.hero-split):not(.hero-backdrop) .fff-hero__photo img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		object-fit: cover;
		object-position: 62% 12%;
		opacity: .2;
		filter: saturate(.55);
		/* Strongest at the top, gone by the button, and eased off on the left where the
		   headline starts, so no letter sits on a busy patch. */
		-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 40%, transparent 78%);
		mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 40%, transparent 78%);
	}
	:root.phone-hero-soft:not(.hero-full):not(.hero-split):not(.hero-backdrop) .fff-hero__text { padding-block: 9.5rem 0; }

	/* ---------- Swipe rows ----------
	   Items keep a generous size and the row peeks the next one, rather than shrinking
	   things into a grid. scroll-snap-align: start, so the neighbour stays visible. */
	.fff-cards, .fff-quotes, .fff-supplements ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: .75rem !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		margin-inline: calc(-1 * var(--gutter)) !important;
		padding: .25rem var(--gutter) .75rem !important;
		scrollbar-width: none;
	}
	.fff-cards::-webkit-scrollbar, .fff-quotes::-webkit-scrollbar,
	.fff-stats::-webkit-scrollbar, .fff-supplements ul.products::-webkit-scrollbar { display: none; }
	.fff-cards > .fff-card, .fff-quotes > .fff-quote { flex: 0 0 76vw !important; scroll-snap-align: start; }
	.fff-supplements ul.products li.product { flex: 0 0 62vw !important; scroll-snap-align: start; }
	.woocommerce ul.products li.product .button { padding: .65rem 1rem; line-height: 1.2; font-size: .9375rem; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.0625rem; }
	.fff-sample-note { margin: 0 0 1.25rem; }

	/* Stats: a slim two-by-two of numbers with hairlines, not big boxes (heavy for "200+") */
	.fff-stats.fff-stats {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		overflow: visible;
		margin: 1.75rem 0 0 !important;
		padding: 0 !important;
		border-top: 1px solid var(--line);
	}
	.fff-stats > .fff-stat.fff-stat {
		margin: 0;
		padding: .8rem 0 .8rem 0 !important;
		border: 0 !important;
		border-bottom: 1px solid var(--line) !important;
		background: none;
		font-size: .75rem;
	}
	.fff-stats > .fff-stat:nth-child(even) { padding-left: 1rem !important; border-left: 1px solid var(--line) !important; }
	.fff-stat strong { font-size: 1.125rem; margin-bottom: 0; }

	/* Dots under swipe rows, added by phone.js */
	.fff-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .25rem; }
	.fff-dots button {
		width: 6px;
		height: 6px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--line);
		transition: width .25s ease, background-color .25s ease;
	}
	.fff-dots button.is-on { width: 18px; background: var(--teal); }

	/* ---------- Homepage order on phones ----------
	   "Meet your doctor" comes straight after the hero, before "The problem" (user,
	   2026-09-24): who she is first, then the problem she solves, then her method. Done with
	   flex order so the page content, and the desktop order, stay as they are. The other
	   sections keep their source order (equal order values keep document order). */
	.home .wp-block-post-content { display: flex; flex-direction: column; }
	.home .wp-block-post-content > * { order: 4; }
	.home .wp-block-post-content > .fff-hero { order: 1; }
	.home .wp-block-post-content > .fff-doctor { order: 2; }
	.home .wp-block-post-content > .fff-problem { order: 3; }

	/* ---------- Doctor section: her portrait in a small arch, bio folds ----------
	   On desktop this section shows the clinic desk. On phones it shows her, in a smaller
	   version of the desktop hero arch, so "Meet your doctor" is actually her. */
	.fff-doctor .fff-split { gap: 1.5rem; }
	.fff-doctor__photo {
		width: 62%;
		margin: 0 auto !important;
		aspect-ratio: 4 / 5;
		border-radius: 999px 999px 18px 18px;
		overflow: hidden;
		background: url("../img/dr-farzeen-portrait.jpg") 50% 22% / cover no-repeat var(--paper-deep);
	}
	/* The desk photo stays in the page for desktop. Hidden outright (not just transparent) so its
	   lazy loading means phones never download it; the figure keeps its shape from aspect-ratio. */
	.fff-doctor__photo img { display: none; }
	.fff-doctor .fff-lede.is-clamped {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.fff-more {
		margin-top: .35rem;
		padding: 0;
		border: 0;
		background: none;
		color: var(--teal);
		font: 500 .9375rem/1.4 var(--sans);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}
	.fff-creds { margin-block: 1rem 1.25rem; }
	.fff-creds li { padding-block: .65rem; font-size: .9375rem; }
	.fff-creds li::before { top: 1.1rem; }

	/* ---------- Protocols page: each detail opens on tap ---------- */
	.fff-protocol-intro__lede { margin-block-end: 1.25rem; }
	.fff-jump p { gap: .4rem; }
	.fff-jump a { padding: .45rem .85rem; font-size: .875rem; }
	.fff-fact.is-fold { display: block; padding: 0; }
	.fff-fact__toggle {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 1rem 0;
		border: 0;
		background: none;
		text-align: left;
		cursor: pointer;
		font: 500 .75rem/1.3 var(--sans);
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--teal);
	}
	.fff-fact__toggle::after {
		content: "";
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-right: 4px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform .3s ease;
	}
	.fff-fact.is-open .fff-fact__toggle::after { transform: rotate(-135deg) translateY(-2px); }
	/* Smooth open: the grid row animates from 0fr to 1fr, which works in every current browser. */
	.fff-fact__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1); }
	.fff-fact.is-open .fff-fact__body { grid-template-rows: 1fr; }
	.fff-fact__inner { overflow: hidden; }
	/* fff.css styles every span in a detail row as its small uppercase label. The answer
	   is wrapped in spans too once folded, so put it back to plain body text. */
	.fff-fact .fff-fact__body, .fff-fact .fff-fact__body span {
		font: inherit;
		font-size: 1rem;
		letter-spacing: normal;
		text-transform: none;
		color: var(--ink);
		padding-top: 0;
	}
	.fff-fact__inner > span { display: block; padding-bottom: 1rem; }

	/* FAQ: smooth open where the browser supports animating <details>; instant elsewhere. */
	.fff-qa summary { font-size: 1.0625rem; }
	.fff-qa::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size .35s cubic-bezier(.2, .7, .2, 1), content-visibility .35s allow-discrete;
	}
	.fff-qa[open]::details-content { block-size: auto; }

	/* ---------- Shop page: tabs on one sliding row, products sooner ---------- */
	.fff-shop-head { padding-block-start: 1.75rem; }
	.fff-shop-head__title { font-size: 1.875rem; }
	.fff-tabs-wrap { padding-block-start: 1.25rem; }
	.fff-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--gutter)) !important;   /* fff.css zeroes section children's margins with !important */
		padding: 0 var(--gutter) 1rem;
		scroll-padding-inline: var(--gutter);
	}
	.fff-tabs::-webkit-scrollbar { display: none; }
	.fff-tab { flex: 0 0 auto; padding: .45rem .9rem; font-size: .875rem; }
	.fff-shop { padding-block-start: 1.25rem; }
	.fff-shop .woocommerce-breadcrumb { display: none; }
	.fff-shop .woocommerce-ordering { margin-bottom: 1rem; }
	.fff-shop .woocommerce-ordering select { padding: .4rem .9rem; font-size: .875rem; }

	/* ---------- Book page ---------- */
	.fff-book__lede { margin-block-end: 1.5rem; }
	.fff-form { padding: 1.25rem; border-radius: 18px; }
	.fff-field + .fff-field { margin-top: 1rem; }
	.fff-field input, .fff-field select, .fff-field textarea { padding: .75rem .9rem; }   /* stays 16px: iOS zooms on anything smaller */
	.fff-aside-card { padding: 1.25rem; }

	/* ---------- Method steps: compact numbered rows, matching the problem list ---------- */
	.fff-steps { counter-reset: fff-step; border-top: 1px solid var(--line); }
	.fff-steps > .fff-step.fff-step {
		counter-increment: fff-step;
		display: grid;
		grid-template-columns: 2.25rem 1fr;
		column-gap: 0;
		padding: 1rem 0 !important;
		border: 0 !important;
		border-bottom: 1px solid var(--line) !important;
	}
	.fff-step > * { grid-column: 2; }
	.fff-step .fff-step__num {
		grid-column: 1;
		grid-row: 1 / span 2;
		font-size: 0;              /* "Step 1" becomes "01", like the rows above */
		padding-top: .35rem;
	}
	.fff-step .fff-step__num::before {
		content: "0" counter(fff-step);
		font-size: .75rem;
		letter-spacing: .08em;
		color: var(--teal);
	}
	.fff-step h3 { margin: 0 0 .25rem; font-size: 1.125rem; }
	.fff-step p { font-size: .9375rem; }

	/* ---------- Footer: links in two columns ---------- */
	.fff-footer__links { columns: 2; column-gap: 1.5rem; line-height: 2; }
	.fff-footer__cols > .wp-block-column:first-child { margin-bottom: .5rem; }

	/* ---------- WhatsApp bubble: smaller, and steps aside while you scroll ---------- */
	.fff-wa-float { width: 52px; height: 52px; transition: transform .3s ease, opacity .3s ease; }
	.fff-wa-float svg { width: 25px; height: 25px; }
	.fff-wa-float.is-resting { transform: translateY(12px) scale(.9); opacity: 0; pointer-events: none; }

	/* ---------- Section rhythm ---------- */
	.fff-cta__title { font-size: 1.75rem; }
	.fff-cta__text { margin-block-end: 1.5rem; }
	.fff-partners { padding-block: 2rem; }
	.fff-footer { padding-block: 2.5rem 1.5rem; }
	.fff-footer__cols { gap: 1.5rem; }

	/* ---------- About page ----------
	   Her portrait comes first as a small arch, the same shape as "Meet your doctor" on the
	   homepage, so the page opens on her face without a full-screen photo. */
	.fff-about-hero.fff-about-hero { padding-block: 1.25rem 2.5rem; }
	.fff-about-hero__cols { gap: 1.25rem; }
	.fff-about-hero__cols > .fff-about-hero__media { order: -1; }
	.fff-about-hero__photo { width: 48%; margin: 0 auto !important; }
	.fff-about-hero__photo img { border-radius: 999px 999px 16px 16px; }
	.fff-about-hero__title { font-size: 2.25rem; line-height: 1.06; letter-spacing: -.015em; max-width: none; margin-block-end: .75rem; }
	.fff-about-hero .fff-lede { margin-block-end: 1.25rem; }
	.fff-story .fff-split, .fff-approach .fff-split { gap: .25rem; }
	.fff-story__text .fff-story__lead { font-size: 1.25rem; }
	.fff-film .fff-split { gap: 1.25rem; }
	.fff-film__video { max-width: none; margin: 0; }
	.fff-film__video video { max-height: 78vh; }
	.fff-record .fff-split { gap: 2.5rem; }

	/* ---------- Contact page: ways to reach us stack, WhatsApp first ---------- */
	.fff-contact.fff-contact { padding-block: 1.5rem 2.5rem; }
	.fff-contact__lede { margin-block-end: 1.5rem; }
	.fff-ways { grid-template-columns: 1fr; gap: .75rem; }
	.fff-way { display: grid; grid-template-columns: 28px 1fr; column-gap: 1rem; padding: 1.1rem 1.25rem; }
	.fff-way::before { grid-row: 1 / span 3; margin: .15rem 0 0; width: 24px; height: 24px; }
	.fff-way__title { font-size: 1.25rem; margin-block-end: .2rem; }
	.fff-way p { font-size: .9375rem; margin-block-end: .6rem; }
	.fff-visit .fff-split { gap: 1.5rem; }
	.fff-hours { margin-block: 1rem 1.5rem; }
	.fff-hours__row { font-size: .9375rem; }
	.fff-map { min-height: 300px; }

	/* Team: a swipe row, like the protocol cards, so each person keeps a proper photo and bio. */
	.fff-team {
		display: flex;
		gap: .9rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		margin-inline: calc(-1 * var(--gutter)) !important;
		padding: .25rem var(--gutter) .75rem;
		scrollbar-width: none;
	}
	.fff-team::-webkit-scrollbar { display: none; }
	.fff-team__card { flex: 0 0 64vw; scroll-snap-align: start; }
	.fff-team__name { font-size: 1.2rem; margin-block-start: .9rem; }

	/* ---------- Gentle arrival as sections scroll in (added by phone.js) ---------- */
	.fff-reveal-on .fff-reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
	}
	.fff-reveal-on .fff-reveal.is-in { opacity: 1; transform: none; }
}

/* Smaller iPhones (SE, mini, 375px): the location line still wrapped and left "UK" alone
   on a second row. Tighter tracking keeps it to one line. */
@media (max-width: 389px) {
	.fff-hero .fff-eyebrow { letter-spacing: .01em; font-size: .65rem; }
}

/* ---------- Testimonials and Partners pages ---------- */
@media (max-width: 600px) {
	.fff-partner-directory.fff-partner-directory { padding-block-start: 1.75rem; }
	.fff-blog__topics.fff-blog__topics { margin-block-start: 1.25rem; }
	.fff-blog.fff-blog { padding-block-start: 1.5rem; }
	.fff-post-grid, .fff-blog__rest .fff-post-grid { grid-template-columns: 1fr; gap: .75rem; }
	.fff-post-feature__body { padding: 1.25rem 1.25rem 1.5rem; }
	.fff-post-feature__title { font-size: 1.5rem; }
	.fff-post-grid > * > :not(figure) { margin-inline: 1.25rem; }
	.fff-post-card__title { font-size: 1.2rem; }
	.fff-article.fff-article { padding-block-start: 1.75rem; }
	.fff-article .fff-article__head { text-align: left; }
	.fff-article__title { font-size: 2rem; }
	.fff-article .fff-article__cover { margin-block: 1.5rem !important; border-radius: 12px; }
	.fff-article__cover .fff-cover { aspect-ratio: 16 / 9; }
	.fff-prose p, .fff-prose li { font-size: 1.0625rem; line-height: 1.7; }
	.fff-prose h2 { font-size: 1.45rem; margin-block-start: 2.25rem; }
	.fff-article-cta { margin-block-start: 2.5rem; }
	.fff-legal.fff-legal { padding-block-start: 1.75rem; }
	.fff-legal__title { font-size: 2.1rem; }
	.fff-legal__contents { columns: 1; padding: 1rem 1.25rem 1rem 2.25rem; }
	.fff-legal__contents li { font-size: .9375rem !important; margin-bottom: .25rem !important; }
	.fff-legal .fff-sample-note { margin-bottom: 1.25rem; }
	.fff-legal__body h2 { font-size: 1.3rem; }
	.fff-footer__partners { margin-block-start: 2rem; padding-block-start: 1.5rem; }
	.fff-author { gap: 1rem; margin-block-start: 2.25rem; }
	.fff-author__photo { flex-basis: 56px; width: 56px; height: 56px; }
	.fff-stats--three.fff-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fff-stats--three > .fff-stat.fff-stat + .fff-stat { padding-left: .75rem !important; border-left: 1px solid var(--line) !important; }
	.fff-video-row > .fff-quote { flex-basis: 70vw !important; }
	.fff-case__nums strong { font-size: 2rem; }
	.fff-cases { gap: .75rem; }
	.fff-cases__intro { margin-block-end: 1.25rem; }
	.fff-partner-list { gap: .75rem; }
	.fff-partner__mark { height: 44px; margin-block-end: .9rem; }
	.fff-partner__mark .fff-logo-slot { font-size: 1.3rem; }
	.fff-invite__list { grid-template-columns: 1fr; }
	.fff-invite__item { padding-block: 1.1rem; }
	.fff-invite__item h3 { font-size: 1.15rem; }
	.fff-invite__text { margin-block-end: 1.5rem; }
	.fff-stories-hero.fff-stories-hero { padding-block: 1.75rem 1.5rem; }
	.fff-stories-hero__title { font-size: 2rem; line-height: 1.08; letter-spacing: -.015em; margin-block-end: .75rem; }
	.fff-stories.fff-stories { padding-block-start: 1.5rem; }
	.fff-wall__filters { margin-block-end: 1.25rem; padding-bottom: .25rem; }
	.fff-wall > .fff-quote { margin-block-end: .75rem; }
	.fff-wall .fff-quote__text { margin-block-end: 1.1rem; }
	.fff-quote__tag { margin-block-end: .75rem; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fff-reveal-on .fff-reveal { opacity: 1; transform: none; }
}