/*
 * Dr. Barsky Dermatology component styles. Every class is prefixed `.barsky-`.
 * Design direction lives in DESIGN.md (Impeccable) - see docs/architecture.md
 * → "Design system": style against it, no generic/templated patterns.
 */

/* bricks-dev:font:inter — locally hosted via add_local_font (GDPR-safe, no third-party CDN) */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
:root {
	--barsky-font-inter: "Inter", system-ui, sans-serif;
}

/* bricks-dev:font:source-serif-4 — locally hosted via add_local_font (GDPR-safe, no third-party CDN) */
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-500-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
:root {
	--barsky-font-source-serif-4: "Source Serif 4", system-ui, sans-serif;
}

/* ============================================================
 * DESIGN TOKENS — from DESIGN.md (Alden-derived, live-verified)
 * ============================================================ */
:root {
	/* Surfaces & ink */
	--barsky-paper: #ffffff;
	--barsky-parchment: #f3f1eb;
	--barsky-ink: #28262a;
	--barsky-graphite: #4a4a4c;
	--barsky-fog: #dddcdd;
	--barsky-silver: #cbcbcb;

	/* The only two chromatic accents. Sky annotates, sage acts. */
	--barsky-sky: #97cde5;
	--barsky-sky-wash: rgba(151, 205, 229, 0.55);
	--barsky-sage: #c8dfaa;
	--barsky-sage-hover: #b8d495;

	/* Errors and required marks need a colour the two accents cannot carry.
	   Deep enough to clear 4.5:1 on paper and on parchment alike. */
	--barsky-error: #8a1c1c;

	/* Type families */
	--barsky-sans: var(--barsky-font-inter);
	--barsky-serif: var(--barsky-font-source-serif-4);

	/* Type scale (px values from the verified contract) */
	--barsky-text-caption: 0.75rem;   /* 12 */
	--barsky-text-sm: 0.875rem;       /* 14 */
	--barsky-text-body: 1rem;         /* 16 */
	--barsky-text-lead: 1.125rem;     /* 18 */
	--barsky-text-h3: 1.5rem;         /* 24 */
	--barsky-text-h2: 2rem;           /* 32 */
	--barsky-text-h1: 3rem;           /* 48 */
	--barsky-text-display: 3.5rem;    /* 56 */

	/* Spacing rhythm */
	--barsky-space-1: 0.5rem;
	--barsky-space-2: 1rem;
	--barsky-space-3: 1.5rem;
	--barsky-space-4: 2rem;
	--barsky-space-5: 2.5rem;
	--barsky-section-y: 5rem;         /* 80 — DESIGN.md section-gap */
	--barsky-card-pad: 2.5rem;        /* 40 */
	--barsky-container: 1188px;
	--barsky-gutter: 2rem;

	/* Geometry — flat elevation, pill interactives */
	--barsky-radius-card: 16px;
	--barsky-radius-image: 24px;
	--barsky-radius-badge: 30px;
	--barsky-radius-pill: 100px;
	--barsky-radius-sm: 4px;

	--barsky-transition: 180ms ease-out;
}

@media (max-width: 991px) {
	:root {
		--barsky-text-display: 2.5rem;
		--barsky-text-h1: 2rem;
		--barsky-text-h2: 1.75rem;
		--barsky-section-y: 3.5rem;
		--barsky-card-pad: 1.5rem;
		--barsky-gutter: 1.5rem;
	}
}
@media (max-width: 575px) {
	:root { --barsky-gutter: 1.25rem; }
}

/* ============================================================
 * BASE
 * ============================================================ */
/*
 * Bricks ships `html { font-size: 62.5% }` in frontend-layer.min.css, its
 * convention for authoring in the builder where 1rem reads as 10px. Every token
 * above — and every rem value the page builder writes — was authored against a
 * 16px root, so the whole system was rendering at 62.5%: 16px body copy set at
 * 10px, the 48px heading at 30px, and section rhythm shrunk to match.
 *
 * `:root` (0,1,0) outranks Bricks' `html` (0,0,1) whatever the load order, and
 * 100% keeps the scale tied to the reader's own browser setting rather than
 * pinning it to 16px. Bricks' own stylesheet uses rem exactly twice, so nothing
 * of its own depends on the 62.5% root.
 *
 * Anything authored in the Bricks UI in rem will still be interpreted as 10px
 * by the builder's own preview — author in px there, or in these tokens.
 */
:root { font-size: 100%; }

body {
	font-family: var(--barsky-sans);
	font-size: var(--barsky-text-body);
	line-height: 1.5;
	color: var(--barsky-ink);
	background-color: var(--barsky-paper);
	-webkit-font-smoothing: antialiased;
	/* Stops iOS Safari inflating body copy in landscape, which would break the
	   measure the type scale is set to. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/*
 * BROWSER SURFACES
 *
 * The parts of the page the layout never draws — the selection highlight, the
 * caret, checkbox and radio fills, the scrollbar — ship with the browser's own
 * blue. On a system whose whole premise is "98% achromatic, two accents", that
 * blue is the one place generic chrome leaks in, so it is set from the palette
 * like everything else.
 */
:root {
	/* Declaring the scheme keeps form controls and scrollbars in the light
	   rendering the palette was designed against, whatever the OS is set to. */
	color-scheme: light;
	/* Ink, not sage: DESIGN.md reserves sage for the one conversion action, so a
	   checked box is drawn in the text colour rather than borrowing the CTA's. */
	accent-color: var(--barsky-ink);
	scrollbar-color: var(--barsky-silver) transparent;
	scrollbar-width: thin;
}

/* The same sky wash `.barsky-mark` uses to annotate a heading — selecting text
   reads as part of the system rather than as the browser interrupting it. */
::selection {
	background-color: var(--barsky-sky-wash);
	color: var(--barsky-ink);
}

/* Times, dates and phone numbers set in proportional figures jitter line to
   line; the practice's opening hours are a small table and should line up. */
.barsky-nums { font-variant-numeric: tabular-nums; }

.barsky-serif { font-family: var(--barsky-serif); font-weight: 400; }

/* ============================================================
 * ACCESSIBILITY — WCAG 2.1 AA is a hard requirement here.
 * ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--barsky-ink);
	outline-offset: 2px;
	border-radius: var(--barsky-radius-sm);
}

.skip-link,
.barsky-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--barsky-ink);
	color: var(--barsky-paper);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--barsky-radius-sm) 0;
	font-size: var(--barsky-text-sm);
	font-weight: 500;
}
.skip-link:focus,
.barsky-skip-link:focus {
	left: 0;
	outline: 2px solid var(--barsky-sky);
	outline-offset: -4px;
}

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.barsky-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
 * LAYOUT
 * ============================================================ */
/*
 * Bricks' container width comes from theme styles, which this project sets in
 * CSS instead so the contract's 1188px measure and responsive gutters live with
 * the rest of the tokens. Without the inline padding, content sits flush against
 * the viewport edge on mobile.
 */
.brxe-container {
	width: 100%;
	max-width: calc(var(--barsky-container) + (var(--barsky-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--barsky-gutter);
}
.barsky-band { padding-block: var(--barsky-section-y); }
.barsky-band--parchment { background-color: var(--barsky-parchment); }
.barsky-band--paper { background-color: var(--barsky-paper); }

/* ============================================================
 * TYPOGRAPHY COMPONENTS
 * ============================================================ */
/*
 * Sky as a highlighter wash BEHIND ink text — DESIGN.md's accessibility
 * override: #97cde5 as a text colour fails AA on white.
 */
.barsky-mark {
	background-image: linear-gradient(180deg, transparent 58%, var(--barsky-sky-wash) 58%);
	padding-inline: 0.25rem;
	color: inherit;
}

.barsky-lead {
	font-size: var(--barsky-text-lead);
	line-height: 1.5;
	color: var(--barsky-graphite);
}

/* ============================================================
 * BUTTONS — pill geometry, sage is the only saturated fill
 * ============================================================ */
.barsky-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	border-radius: var(--barsky-radius-pill);
	font-family: var(--barsky-sans);
	font-size: var(--barsky-text-body);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--barsky-transition), color var(--barsky-transition), border-color var(--barsky-transition);
}
.barsky-btn--primary {
	background-color: var(--barsky-sage);
	color: var(--barsky-ink);
	border: 1px solid var(--barsky-sage);
}
.barsky-btn--primary:hover,
.barsky-btn--primary:focus-visible {
	background-color: var(--barsky-sage-hover);
	border-color: var(--barsky-sage-hover);
	color: var(--barsky-ink);
}
.barsky-btn--secondary {
	background-color: transparent;
	color: var(--barsky-ink);
	border: 1px solid var(--barsky-ink);
}
.barsky-btn--secondary:hover,
.barsky-btn--secondary:focus-visible {
	background-color: var(--barsky-ink);
	color: var(--barsky-paper);
}

/*
 * Understated text link with a real underline (never colour alone).
 *
 * A genuine `text-decoration` rather than a bottom border: the rule then stays
 * glued to the text however tall the box grows, which is what lets the touch
 * targets below expand without the underline drifting away from the words. It
 * also skips descenders, which a border cannot.
 */
.barsky-link {
	color: var(--barsky-ink);
	font-weight: 500;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: color var(--barsky-transition), text-decoration-color var(--barsky-transition);
}
.barsky-link:hover,
.barsky-link:focus-visible {
	color: var(--barsky-graphite);
}

/* ============================================================
 * BADGE
 * ============================================================ */
.barsky-badge {
	display: inline-flex;
	align-items: center;
	background-color: var(--barsky-fog);
	color: var(--barsky-ink);
	font-size: var(--barsky-text-caption);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	border-radius: var(--barsky-radius-badge);
}

/* ============================================================
 * CARD — flat; contrast, never shadow
 * ============================================================ */
.barsky-card {
	display: flex;
	flex-direction: column;
	gap: var(--barsky-space-2);
	background-color: var(--barsky-paper);
	border-radius: var(--barsky-radius-card);
	padding: var(--barsky-card-pad);
	border: 1px solid transparent;
	transition: border-color var(--barsky-transition);
}
.barsky-card:hover { border-color: var(--barsky-fog); }
/*
 * Serif, because these are the same six service names the index on /services/
 * sets in serif — and DESIGN.md gives the serif every subhead from 24px up.
 * Two faces for one list of names was the drift, not a distinction.
 */
.barsky-card__title {
	font-family: var(--barsky-serif);
	font-size: var(--barsky-text-h3);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--barsky-ink);
	margin: 0;
}
.barsky-card__body { font-size: var(--barsky-text-body); color: var(--barsky-graphite); margin: 0; }
.barsky-card__icon { color: var(--barsky-ink); }
/* Whole-card link target without nesting interactive elements */
.barsky-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--barsky-radius-card);
}

/* ============================================================
 * IMAGE STAGE — photography sits on parchment, 24px, no shadow
 * ============================================================ */
.barsky-stage {
	border-radius: var(--barsky-radius-image);
	overflow: hidden;
	background-color: var(--barsky-parchment);
}
.barsky-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The hero stage can carry the ambient loop instead of a still. The clip is
   16:9 and the stage is portrait on desktop and a short landscape band on
   mobile, so `cover` does the cropping at each width rather than the crop
   being baked into the file. The poster is graded from the same footage, so
   the still and the first painted frame are the same colour — there is no pop
   when playback starts, and none when it never starts at all. */
.barsky-stage--video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Covers the gap between the poster painting and the first decoded frame. */
	background-color: var(--barsky-parchment);
}

/* ============================================================
 * TESTIMONIAL — serif, with the one permitted ambient wash
 * ============================================================ */
.barsky-quote {
	font-family: var(--barsky-serif);
	font-size: var(--barsky-text-h2);
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	color: var(--barsky-ink);
	margin: 0;
}
.barsky-wash {
	position: absolute;
	right: -5rem;
	bottom: -6rem;
	width: 26rem;
	height: 20rem;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(151, 205, 229, 0.35), rgba(151, 205, 229, 0));
	border-radius: 50%;
}

/* ============================================================
 * SERVICE INDEX — hairline rows
 * ============================================================ */
.barsky-row {
	display: flex;
	/* Bricks column containers align children to flex-start, which would let
	   these rows shrink-to-fit and leave the trailing links ragged. */
	width: 100%;
	align-self: stretch;
	align-items: baseline;
	gap: var(--barsky-space-4);
	padding: 1.625rem 0.5rem;
	border-top: 1px solid var(--barsky-fog);
}
.barsky-row:last-child { border-bottom: 1px solid var(--barsky-fog); }

/* ============================================================
 * HEADER / NAV
 * ============================================================ */
.barsky-header { background-color: var(--barsky-paper); }
.barsky-nav-link {
	color: var(--barsky-ink);
	/* 15px, deliberately between the ramp's 14 and 16: DESIGN.md's nav component
	   allows 14-16px, and PRODUCT.md notes this audience skews older, so the
	   step up from the reference's 14px is a legibility decision. 16px would
	   overflow the bar in the 992-1100px band where the desktop nav first
	   appears. */
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
	padding: 0.5rem 0;
	transition: color var(--barsky-transition);
}
.barsky-nav-link:hover,
.barsky-nav-link:focus-visible { color: var(--barsky-graphite); }
.barsky-nav-link[aria-current="page"] { font-weight: 500; box-shadow: inset 0 -1px 0 var(--barsky-ink); }
.barsky-logo { display: block; height: 38px; width: auto; }
/* The logo links home from every page including home, where Bricks marks it
   aria-current; it should not then wear the nav's current-page rule. */
.barsky-logo[aria-current="page"] { box-shadow: none; }

/*
 * MOBILE BAR
 *
 * Below 992px the wordmark, the phone number and the toggle stopped fitting on
 * one line, and a wrapped flex row dropped them into a crowded left-hand
 * cluster with the toggle stranded mid-bar. Two rows are the honest answer, so
 * the bar is built as two: identity and the menu on top, then the two things a
 * patient on a phone actually came for — call, or book — beneath, pushed to
 * opposite edges. This is also what keeps DESIGN.md's promise that the sage
 * pill and the phone number stay in the bar at every width.
 */
@media (max-width: 991px) {
	.barsky-header .brxe-container {
		row-gap: 0.875rem;
	}
	.barsky-logo { flex: 0 0 auto; }
	/* Full width so it becomes the second line, with its own ends. */
	.barsky-header__actions { flex: 1 0 100%; }
	.barsky-header__cta.barsky-btn {
		min-height: 44px;
		padding-inline: 1.25rem;
		font-size: var(--barsky-text-sm);
		white-space: nowrap;
	}
	.barsky-header__phone.barsky-nav-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		white-space: nowrap;
	}
}

/*
 * At the 320px WCAG reflow width the number and the pill can no longer share a
 * line, so the action row becomes two: number, then the pill across the full
 * width. Nothing is dropped and nothing scrolls sideways.
 */
@media (max-width: 389px) {
	.barsky-header__actions { flex-wrap: wrap; row-gap: 0.625rem; }
	.barsky-header__cta.barsky-btn { flex: 1 0 100%; }
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.barsky-footer { background-color: var(--barsky-paper); border-top: 1px solid var(--barsky-fog); }
.barsky-footer__heading {
	font-size: var(--barsky-text-caption);
	font-weight: 600;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--barsky-ink);
	margin: 0;
}
.barsky-footer__text { font-size: var(--barsky-text-sm); line-height: 1.6; color: var(--barsky-graphite); margin: 0; }
.barsky-footer__link {
	color: var(--barsky-graphite);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--barsky-silver);
	text-underline-offset: 0.25em;
	transition: color var(--barsky-transition), text-decoration-color var(--barsky-transition);
}
.barsky-footer__link:hover, .barsky-footer__link:focus-visible {
	color: var(--barsky-ink);
	text-decoration-color: var(--barsky-ink);
}

/*
 * TOUCH TARGETS
 *
 * DESIGN.md asks for 44px on touch, and a 14px standalone link is 20. The box
 * grows only where a finger is the pointer, and only for links that stand on
 * their own — `.brxe-text-link` is Bricks' own marker for a link element, so
 * links written inside a sentence keep flowing with the prose instead of
 * becoming atomic boxes that break the line.
 */
@media (pointer: coarse) {
	.brxe-text-link.barsky-link,
	.barsky-footer__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.barsky-form .forminator-button-submit { min-height: 44px !important; }
	/* The wordmark links home from both bars. Its drawn height stays 30/34px;
	   only the tappable box grows, and both bars are already 44px tall. */
	.barsky-logo {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ============================================================
 * FORMS (Forminator) — inherit the system, not the plugin's defaults
 *
 * Forminator scopes its default skin with an id
 * (`.forminator-ui#forminator-module-38.forminator-design--default .forminator-input`),
 * and an id outranks any number of classes. Every rule below therefore carries
 * `!important` — the same escape the submit button already needed. Without it
 * these fields silently render the plugin's own look: 12px/700 labels, 2px
 * radii, 41px rows. The alternative, matching their id, would break the moment
 * the form is rebuilt and its module number changes.
 * ============================================================ */
.barsky-form .forminator-label {
	font-family: var(--barsky-sans) !important;
	font-size: var(--barsky-text-sm) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--barsky-ink) !important;
	margin-bottom: 0.5rem !important;
}

/* Field-level help sits between the label and the control, so it is quieter
   than the label and never mistaken for the value. */
.barsky-form .forminator-description {
	font-size: var(--barsky-text-sm) !important;
	line-height: 1.5 !important;
	color: var(--barsky-graphite) !important;
	max-width: 58ch;
}

/* The required mark is information, not decoration: Forminator's stock
   #e51919 sits under 4.5:1 on white at 12px, so it uses the system's error
   ink, which clears it. */
.barsky-form .forminator-required {
	color: var(--barsky-error) !important;
	font-size: inherit !important;
}

.barsky-form .forminator-input,
.barsky-form .forminator-textarea,
.barsky-form select {
	font-family: var(--barsky-sans) !important;
	font-size: var(--barsky-text-body) !important;
	line-height: 1.5 !important;
	color: var(--barsky-ink) !important;
	background-color: var(--barsky-paper) !important;
	border: 1px solid var(--barsky-silver) !important;
	border-radius: var(--barsky-radius-sm) !important;
	padding: 0.6875rem 1rem !important;
	min-height: 44px !important;
	transition: border-color var(--barsky-transition);
}
.barsky-form .forminator-textarea {
	padding-block: 0.875rem !important;
}
.barsky-form .forminator-input::placeholder,
.barsky-form .forminator-textarea::placeholder {
	color: var(--barsky-graphite) !important;
	opacity: 1;
}
.barsky-form .forminator-input:hover,
.barsky-form .forminator-textarea:hover { border-color: var(--barsky-graphite) !important; }
.barsky-form .forminator-input:focus,
.barsky-form .forminator-textarea:focus {
	border-color: var(--barsky-ink) !important;
	outline: 2px solid var(--barsky-ink);
	outline-offset: 1px;
}

/*
 * Select2 replaces the native <select> with its own markup and collapses the
 * real control to 1px, so the visible dropdown missed every rule above and kept
 * the plugin's own warm-grey border at 40px tall. Forminator ships Select2
 * without its `--default` theme class, so these are scoped to the element
 * classes rather than the theme.
 */
.barsky-form .select2-container .select2-selection--single {
	height: 44px !important;
	background-color: var(--barsky-paper) !important;
	border: 1px solid var(--barsky-silver) !important;
	border-radius: var(--barsky-radius-sm) !important;
	transition: border-color var(--barsky-transition);
}
.barsky-form .select2-container .select2-selection--single:hover {
	border-color: var(--barsky-graphite) !important;
}
.barsky-form .select2-container .select2-selection__rendered {
	font-family: var(--barsky-sans) !important;
	font-size: var(--barsky-text-body) !important;
	color: var(--barsky-ink) !important;
	line-height: 42px !important;
	padding-inline: 1rem !important;
}
.barsky-form .select2-container .select2-selection__arrow {
	height: 42px !important;
	right: 0.75rem !important;
}
.barsky-form .select2-container--open .select2-selection--single,
.barsky-form .select2-container--focus .select2-selection--single {
	border-color: var(--barsky-ink) !important;
}
/*
 * The open list is a surface of the system too — flat, hairline, ink on white,
 * with the highlighted row carrying the same sky wash as a text selection.
 * Select2 appends the dropdown to <body>, outside .barsky-form, so these are
 * unscoped; this form is the only Select2 on the site.
 */
.select2-dropdown {
	border: 1px solid var(--barsky-fog) !important;
	border-radius: var(--barsky-radius-sm) !important;
	box-shadow: none !important;
}
.select2-results__option {
	font-family: var(--barsky-sans) !important;
	font-size: var(--barsky-text-body) !important;
	color: var(--barsky-ink) !important;
	padding: 0.625rem 1rem !important;
}
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
	background-color: var(--barsky-sky-wash) !important;
	color: var(--barsky-ink) !important;
}

/*
 * The one sage fill on the page, and the practice's actual conversion. Sized
 * and shaped like every other primary action in the system.
 */
.barsky-form .forminator-button-submit {
	background-color: var(--barsky-sage) !important;
	color: var(--barsky-ink) !important;
	border: 1px solid var(--barsky-sage) !important;
	border-radius: var(--barsky-radius-pill) !important;
	font-family: var(--barsky-sans) !important;
	font-size: var(--barsky-text-body) !important;
	font-weight: 500 !important;
	min-height: 44px !important;
	padding: 0.75rem 1.75rem !important;
	transition: background-color var(--barsky-transition), border-color var(--barsky-transition);
}
.barsky-form .forminator-button-submit:hover,
.barsky-form .forminator-button-submit:focus-visible {
	background-color: var(--barsky-sage-hover) !important;
	border-color: var(--barsky-sage-hover) !important;
}

/* Errors must not rely on colour alone */
.barsky-form .forminator-error-message {
	color: var(--barsky-error) !important;
	font-size: var(--barsky-text-sm) !important;
	font-weight: 500 !important;
}

/*
 * Submitting is the one moment here that carries the practice's business, and
 * Forminator plays it as two hard cuts. The plugin adds
 * `.forminator-fields-disabled`, which drops every direct child to opacity .5
 * with no transition of its own; the transition below lives on the rows rather
 * than on the disabled state, so it bridges the dim and the restore alike.
 * 160ms ease-out is the contract's own hover speed — confirming, not performing.
 */
.barsky-form .forminator-custom-form > .forminator-row {
	transition: opacity 160ms ease-out;
}

/*
 * The status region (loader, then success or error) is hidden by
 * `[aria-hidden="true"] { display: none }` and revealed with jQuery `.show()`,
 * so its entrance is a discrete display change — `allow-discrete` plus
 * `@starting-style` is what makes that transitionable in CSS alone, with no
 * hook into the plugin's JS. 6px of travel, half the section reveal's 12px:
 * a smaller element earns a shorter move.
 *
 * Browsers without these two features ignore both and get today's instant
 * appearance, which is the correct fallback rather than a broken one.
 */
.barsky-form .forminator-response-message {
	transition:
		opacity 200ms ease-out,
		transform 200ms ease-out,
		display 200ms allow-discrete;
}
@starting-style {
	.barsky-form .forminator-response-message {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* ============================================================
 * MOTION — one gentle entrance, nothing performative
 * ============================================================ */
.barsky-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.barsky-reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
 * CREDENTIAL ROW — hairline-separated proof items
 * ============================================================ */
.barsky-creds { flex-wrap: wrap; }
.barsky-creds > * + * { border-left: 1px solid var(--barsky-silver); padding-left: 2rem; }
@media (max-width: 575px) {
	.barsky-creds > * + * { border-left: 0; padding-left: 0; }
}
.barsky-cred {
	font-size: var(--barsky-text-sm);
	color: var(--barsky-graphite);
	margin: 0;
}

/* Band that hosts the ambient sky wash */
.barsky-quote-band { position: relative; overflow: hidden; }

/* Font-family helpers. Bricks' typography control runs strpos() on font-family
   and quotes the result, so a CSS variable can't go through it — fonts are
   applied with these classes instead. */
.barsky-sans { font-family: var(--barsky-sans); }

/* ============================================================
 * NAV — ul.brx-nav-nested-items is Bricks' own items wrapper; only the
 * rhythm is set here so its mobile collapse keeps working.
 * ============================================================ */
.barsky-nav {
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.barsky-nav-item {
	display: flex;
	align-items: center;
	list-style: none;
	/* Bricks' `block` element defaults to width:100%, which would make every
	   list item span the nav and wrap onto its own line. */
	width: auto;
	flex: 0 0 auto;
}

/* Hamburger / close button: honour the 44px touch target the rest of the
   system promises, without changing its visual weight. */
.barsky-nav-toggle {
	/* No `display` here: Bricks owns it, hiding the toggles above the mobile
	   breakpoint and revealing them below it. */
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--barsky-ink);
	cursor: pointer;
}

/* Mobile menu panel */
@media (max-width: 991px) {
	.barsky-nav {
		gap: 0.25rem;
		padding: 1.5rem;
	}
	.barsky-nav > li,
	.barsky-nav-item { width: 100%; flex: 0 0 auto; }
	.barsky-nav .barsky-nav-link {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 1.125rem;
	}
	.barsky-nav .barsky-btn { margin-top: 0.75rem; width: 100%; }
}

/* ============================================================
 * PORTRAIT FIGURE — a real, supplied photograph on a parchment stage
 * ============================================================ */
.barsky-portrait {
	border-radius: var(--barsky-radius-image);
	overflow: hidden;
	background-color: var(--barsky-parchment);
}
.barsky-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The supplied photograph is a snapshot, not studio work. A light grade
	 * settles it into the warm-neutral palette without retouching a real face. */
	filter: saturate(0.82) contrast(1.02);
}
.barsky-caption {
	font-size: var(--barsky-text-caption);
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: var(--barsky-graphite);
	margin: 0;
}

/* ============================================================
 * ACHIEVEMENTS — a standing record, not a dated log.
 * A figure strip states the scale of the practice, then themed pillars
 * carry the substance as prose. Nothing is ordered by year, so the
 * section cannot go stale the way a timeline does.
 * ============================================================ */
.barsky-figures {
	/* Bricks column containers align children to flex-start; without these
	   the grid would shrink to its content instead of holding its tracks. */
	display: grid;
	width: 100%;
	align-self: stretch;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	border-top: 1px solid var(--barsky-ink);
	padding-top: 1.5rem;
}
.barsky-figure__num {
	font-family: var(--barsky-serif);
	font-size: clamp(var(--barsky-text-h1), 5vw, var(--barsky-text-display));
	font-weight: 400;
	line-height: 1;
	color: var(--barsky-ink);
	margin: 0 0 0.5rem;
	font-variant-numeric: lining-nums tabular-nums;
}
.barsky-figure__label {
	font-size: var(--barsky-text-sm);
	line-height: 1.45;
	color: var(--barsky-graphite);
	margin: 0;
	/* Wide enough that a three-word label sets on one or two lines, not four. */
	max-width: 24ch;
}

.barsky-pillars {
	display: grid;
	width: 100%;
	align-self: stretch;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 3rem;
	row-gap: 2.5rem;
}
.barsky-pillar {
	border-top: 1px solid var(--barsky-fog);
	padding-top: 1.25rem;
}
.barsky-pillar__title {
	font-family: var(--barsky-serif);
	font-size: var(--barsky-text-h3);
	font-weight: 400;
	line-height: 1.3;
	color: var(--barsky-ink);
	margin: 0 0 0.625rem;
}
.barsky-pillar p {
	margin: 0;
	color: var(--barsky-graphite);
}

@media (max-width: 991px) {
	.barsky-pillars { column-gap: 2rem; row-gap: 2rem; }
}
@media (max-width: 767px) {
	.barsky-figures { gap: 1.25rem; padding-top: 1.25rem; }
	.barsky-figure__label { font-size: var(--barsky-text-caption); max-width: none; }
	.barsky-pillars { grid-template-columns: 1fr; row-gap: 1.75rem; }
}

/* ============================================================
 * AFFILIATION COLUMNS — hairline-topped lists, no cards
 * ============================================================ */
.barsky-cols {
	display: grid;
	width: 100%;
	align-self: stretch;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}
.barsky-col { border-top: 1px solid var(--barsky-ink); padding-top: 1rem; }
.barsky-col__title {
	font-size: var(--barsky-text-caption);
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: var(--barsky-ink);
	margin: 0 0 0.875rem;
}
.barsky-col ul { list-style: none; margin: 0; padding: 0; }
.barsky-col li {
	font-size: var(--barsky-text-body);
	line-height: 1.5;
	color: var(--barsky-graphite);
	padding-block: 0.4375rem;
}
.barsky-col li + li { border-top: 1px solid var(--barsky-fog); }

@media (max-width: 991px) {
	.barsky-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 575px) {
	.barsky-cols { grid-template-columns: 1fr; }
}