/*
 * Services — Split Screen Scroll, image right (Figma 143:691; mobile 12:553).
 *
 * Same shell as the About block with the columns swapped: a 100svh sticky
 * image in the right column and four states in the left, each one at least a
 * viewport tall so the section settles state by state under natural document
 * scroll. No scroll driver. The SERVICES rail is a zero-width sticky track in
 * the states column so it sits at the page's left edge as the design shows,
 * even though the sticky image is on the other side.
 *
 * Panel guides are shared with About in assets/css/main.css (Frames 1–7).
 * Titles are 32px Formiga; text spacing and width match About,
 * body 16/20 Work Sans. The section is Rust, not the About block's Espresso.
 */
.es-services { --es-services-rust: var( --wp--preset--color--contrast-alt, #703319 ); --es-services-cream: var( --wp--preset--color--base, #f0eeed ); --es-services-white: var( --wp--preset--color--base-alt, #ffffff ); --es-services-mist: var( --wp--preset--color--mist, #dbd0d4 ); --es-services-line: rgba( 240, 238, 237, 0.4 ); position: relative; background: var( --es-services-rust ); color: var( --es-services-white ); }
.es-services p, .es-services h2, .es-services ul, .es-services figure, .es-services blockquote { margin: 0; }
.es-services__story { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); align-items: start; }
.es-services__sticky { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* Mobile-image <picture> (eleventh_space_picture) adds no box; img rules and crops apply as before. */
.es-services picture { display: contents; }
.es-services__sticky img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.es-services__rail-track { grid-column: 1; grid-row: 1; position: sticky; top: 0; align-self: start; width: 0; height: 100vh; height: 100svh; pointer-events: none; }
.es-services__rail { position: absolute; top: 50%; left: 1.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.125rem; line-height: 0.9375rem; text-transform: uppercase; white-space: nowrap; transform: translate( -50%, -50% ) rotate( -90deg ); }
.es-services__label { display: none; }
.es-services__states { grid-column: 1; grid-row: 1; padding: 0 var( --es-split-gutter-x ); }
.es-services__state { display: flex; flex-direction: column; align-items: flex-start; min-height: 100vh; min-height: 100svh; padding-block: var( --es-split-gutter-y ); }
.es-services__state h2 { max-width: none; color: var( --es-services-cream ); font-family: var( --wp--preset--font-family--display, "formiga", serif ); font-size: 2rem; font-weight: 400; letter-spacing: -0.015625rem; line-height: 1.1; }
.es-services__media { position: relative; order: 1; flex: none; align-self: flex-end; width: var( --es-split-image-width ); aspect-ratio: 339 / 424; overflow: hidden; }
.es-services__state-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.es-services__media--mobile { display: none; }
.es-services__content { order: 2; align-self: stretch; width: 100%; max-width: var( --es-split-copy-width ); margin: 0; font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif ); font-size: 1rem; font-weight: 400; letter-spacing: -0.015625rem; line-height: 1.25; }
@media ( min-width: 768px ) {
	.es-services:not( .es-services--editor, .es-services--preview ) .es-services__state h2 { grid-area: 1 / 1 / 2 / 3; }
	.es-services:not( .es-services--editor, .es-services--preview ) .es-services__state--white-box h2 { grid-column-end: 2; }
	.es-services:not( .es-services--editor, .es-services--preview ) .es-services__media { grid-area: 1 / 2 / 3 / 3; justify-self: end; align-self: start; }
	.es-services:not( .es-services--editor, .es-services--preview ) .es-services__content { grid-area: 3 / 1 / 4 / 3; align-self: end; }
	/* Frame 5's White Box crop; the selected Media Library image remains editable. */
	.es-services__state--white-box .es-services__state-image { position: absolute; width: 111.03%; height: 110.5%; max-width: none; left: -6.65%; top: -7.14%; object-fit: fill; }
}
@media ( min-width: 768px ) and ( max-width: 1200px ) {
	.es-services:not( .es-services--editor, .es-services--preview ) .es-services__state h2 { grid-area: 1 / 1 / 2 / 2; }
	.es-services:not( .es-services--editor, .es-services--preview ) .es-services__media { grid-area: 2 / 1 / 3 / 2; }
	.es-services:not( .es-services--editor, .es-services--preview ) .es-services__content { grid-area: 3 / 1 / 4 / 2; }
}
.es-services__content p + p, .es-services__content .es-services__lead + p { margin-top: 1.25rem; }
.es-services__lead { color: var( --es-services-cream ); font-family: var( --wp--preset--font-family--display, "formiga", serif ); }
/*
 * In This Order accordion (Figma "Interactive List" 143:694). Closed rows are
 * 46px at 66% opacity; the open row lifts to full opacity, its title goes
 * semibold and the copy sits below a 16px gap, 112px tall with a two-line
 * body. Rules are 1px. The default marker is removed on both engines and the
 * +/- marker drawn by the stylesheet is shown only on mobile, where there is
 * no hover to hint at the interaction.
 */
 /* "In This Order, Always" steps: an <es-accordion> (base styles in assets/css/main.css); this is the Services skin — 12px caps summary, 12/16 body, 27rem measure. */
.es-services__steps { --es-accordion-line: var( --es-services-line ); width: 100%; margin-top: clamp( 1.5rem, 4svh, 3rem ); }
.es-services__steps .es-accordion__summary { min-height: 2.875rem; padding: 0.9375rem 0; font-size: 0.75rem; letter-spacing: 0.125rem; line-height: 1rem; text-transform: uppercase; }
.es-services__steps .es-accordion__marker { display: none; }
.es-services__steps .es-accordion__body { max-width: 27rem; padding: 1rem 0 1.125rem; font-size: 0.75rem; letter-spacing: -0.015625rem; line-height: 1rem; }
.es-services__steps .es-accordion__body p + p { margin-top: 1rem; }
/* Seen Through Completely: quote with the OB signature, rules, team paragraph, service list (13px Work Sans Medium, 27px lines, 2px tracking). */
.es-services__quote { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; gap: 1rem 1.5rem; align-items: end; color: var( --es-services-mist ); }
.es-services__quote blockquote { max-width: 21.75rem; }
.es-services__quote figcaption { line-height: 0; }
.es-services__signature { display: block; width: 7.875rem; height: auto; }
.es-services__rule { width: 100%; height: 1px; margin: clamp( 1rem, 2.5svh, 1.75rem ) 0; border: 0; background: var( --es-services-line ); }
.es-services__rule + p { margin-top: 0; }
.es-services__content p + .es-services__rule { margin-block: clamp( 1rem, 2.5svh, 1.75rem ); }
.es-services__list { padding-left: 1.25rem; color: var( --es-services-mist ); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.125rem; line-height: 1.6875rem; text-transform: uppercase; }
/* Compact the reading column before a shorter or narrower screen adds scroll. */
@media ( min-width: 768px ) and ( max-height: 800px ), ( min-width: 768px ) and ( max-width: 1100px ) {
	.es-services__content { font-size: 0.875rem; }
	.es-services__content p + p, .es-services__content .es-services__lead + p { margin-top: 0.875rem; }
	.es-services__list { line-height: 1.5rem; }
	.es-services__quote { gap: 1rem; }
	.es-services__signature { width: 6rem; }
}
/* Editor canvas: shorter states so the block can be scanned in the block editor. */
.es-services--editor .es-services__sticky { height: 42rem; }
.es-services--editor .es-services__rail-track { height: 42rem; }
.es-services--editor .es-services__states { padding-inline: clamp( 1.5rem, 4vw, 3rem ); }
.es-services--editor .es-services__state { min-height: 0; padding: 3rem 0; }
.es-services--editor .es-services__state h2 { font-size: 1.625rem; }
.es-services--editor .es-services__media { margin-block: 2rem; }
.es-services--editor .es-services__content { font-size: 0.8125rem; }
.es-services--editor .es-services__content p + p { margin-top: 0.875rem; }
.es-services--editor .es-services__steps { margin-top: 2rem; }
.es-block-repeater__item { padding: 0.75rem 0; border-bottom: 1px solid #ddd; }
.es-block-repeater__heading { margin: 0 0 0.5rem; font-weight: 600; }
.es-block-repeater__actions { display: flex; gap: 0.25rem; }
.es-block-media-control { margin-bottom: 1.5rem; }
.es-block-media-control img { display: block; width: 100%; max-height: 10rem; margin-bottom: 0.5rem; object-fit: cover; }
/*
 * Mobile (Figma "05-Services" 12:553): a plain stack. In-flow SERVICES label
 * with a rule, then for each state an inset 367×447 image, 20px Formiga
 * title, 13/18 body and a 1px separator. The sticky panel and rail are gone;
 * the first state shows the sticky photograph inline instead. 18px gutters.
 */
@media ( width < 768px ) {
	.es-services__story { display: block; }
	.es-services__sticky, .es-services__rail-track { display: none; }
	.es-services__states { padding: 0 1.125rem; }
	.es-services__label { display: flex; align-items: center; gap: 1.6875rem; padding: 4.875rem 0 1.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.125rem; line-height: 1; text-transform: uppercase; }
	.es-services__label::after { flex: 1; height: 1px; background: var( --es-services-line ); content: ""; }
	.es-services__state { min-height: 0; padding: clamp( 1.5rem, 4svh, 2.5rem ) 0; }
	.es-services__state:first-of-type { padding-top: 0; }
	.es-services__state + .es-services__state { border-top: 1px solid var( --es-services-line ); }
	/* The accordion's own bottom rule already closes the third state. */
	.es-services__state--in-this-order { padding-bottom: 0; }
	.es-services__state--in-this-order + .es-services__state { border-top: 0; }
	.es-services__state h2 { order: 1; max-width: none; margin-bottom: 1rem; font-size: 1.25rem; }
	/* Match About’s 2rem image-to-heading gap. */
	.es-services__media, .es-services__media--mobile { display: block; order: 0; width: 100%; height: auto; margin: 0 0 2rem; aspect-ratio: 367 / 447; }
	.es-services__content { order: 2; align-self: auto; width: 100%; max-width: none; margin: 0; font-size: 0.8125rem; line-height: 1.125rem; }
	.es-services__content p + p, .es-services__content .es-services__lead + p { margin-top: 0.75rem; }
	.es-services__steps { margin-top: 1.5rem; }
	.es-services__steps .es-accordion__marker { display: block; }
	.es-services__steps .es-accordion__body { max-width: none; font-size: 0.8125rem; letter-spacing: -0.015625rem; line-height: 1.125rem; }
	.es-services__quote { grid-template-columns: minmax( 0, 1fr ); }
	.es-services__quote figcaption { justify-self: end; }
	.es-services__rule { display: block; }
	.es-services__rule + p { margin-top: 1.5rem; }
	.es-services__content .es-services__list { columns: 1; margin-top: 1.5rem; font-size: 0.6875rem; letter-spacing: 0.0625rem; line-height: 1.4; }
	.es-services__list li { break-inside: avoid; margin-bottom: 0.5rem; }
	.es-services--editor .es-services__states { padding: 0 1.125rem; }
	.es-services--editor .es-services__state { padding: 2rem 0; }
	.es-services--editor .es-services__media { margin: 0 0 2rem; }
}
/* Inserter preview: a fixed 16:9 window on the first state. */
.es-services--preview { height: auto; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.es-services--preview .es-services__story { display: grid; height: 100%; }
.es-services--preview .es-services__sticky, .es-services--preview .es-services__rail-track { position: sticky; height: 100%; }
.es-services--preview .es-services__states { padding-inline: clamp( 1rem, 3vw, 2rem ); }
.es-services--preview .es-services__state { padding-top: 2rem; }

/* Only prepare decorative reveals when the front-end observer is available. */
@media ( prefers-reduced-motion: no-preference ) {
	.es-services__rule.is-detail-ready { transform: scaleX( 0 ); transform-origin: left center; transition: transform 900ms cubic-bezier( 0.22, 1, 0.36, 1 ); }
	.es-services__signature.is-detail-ready { clip-path: inset( 0 100% 0 0 ); transition: clip-path 1400ms ease-in-out; }
	.es-services__rule.is-detail-visible { transform: scaleX( 1 ); }
	.es-services__signature.is-detail-visible { clip-path: inset( 0 ); }
}