/* EDOL Stux: global type, gutters, rhythm, buttons, header, menu, section labels and heading rows, footer, motion.
   Sizes were measured on the Stux template at a 1280px-wide viewport. Loads after theme.css. */
:root {
	--sx-bg: var(--wp--preset--color--paper, #efefef);
	--sx-ink: var(--wp--preset--color--ink, #0b0b0b);
	--sx-muted: var(--wp--preset--color--muted, #6b6b6b);
	--sx-line: var(--wp--preset--color--line, #d4d4d4);
	--sx-yellow: var(--wp--preset--color--oak, #e8e21a);
	--sx-label: #5c5c5c;                       /* section labels "01 —— ABOUT US" */
	--sx-pad: clamp(16px, 2.2vw, 36px);        /* side gutter: 28px at 1280 */
	--sx-gap: clamp(96px, 14.5vw, 220px);      /* space between sections: 186px at 1280 */
	--sx-header-h: 76px;                       /* height of the fixed header */
	--sx-hdr: var(--sx-header-h);              /* alias */
	--edol-logo-h: 36px;                       /* logo height in the header and menu; phones: --edol-logo-hm */
	--edol-logo-hm: 30px;                      /* (Appearance → EDOL Logo sets these and grows the header to fit) */
	--edol-logo-fk: 1;                         /* footer logo size, 1 = theme size */
	--sx-ease: cubic-bezier(.2, .75, .1, 1);
	/* Fonts follow Appearance → Editor → Styles → Typography (Text, Headings, Buttons). Body text and headings take
	   them straight from the styles; these variables carry them to the theme's own parts (inc/fonts.php sets them). */
	--edol-font-text: var(--wp--preset--font-family--body);
	--edol-font-head: var(--wp--preset--font-family--display);
	--edol-font-btn: var(--edol-font-text);
}
@media (max-width: 600px) { :root { --sx-header-h: 66px; } }
html { scroll-padding-top: calc(var(--sx-header-h) + 16px); }

/* type: normal-width body text, tightly tracked; headings slightly extended */
body { background: var(--sx-bg); color: var(--sx-ink); font-stretch: 100%; letter-spacing: -.01em; }
h1, h2, h3, h4, .wp-block-heading { font-stretch: 110%; letter-spacing: -.02em; }
/* large display lines that are not headings use the headings font */
.sx-stat-n, .sx-row-n, .sx-big-sentence, .sx-quote, .sx-ceo-quote, .sx-foot-word, .sx-watermark { font-family: var(--edol-font-head); }
em { color: inherit; }
.edol-main { padding-left: 0 !important; padding-right: 0 !important; }
.edol-main > .wp-block-post-content { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.edol-main > .alignfull, .edol-main > .wp-block-post-content > .alignfull { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto; }
.edol-main > .wp-block-post-content > :not(.alignfull) { padding-left: var(--sx-pad); padding-right: var(--sx-pad); }
.edol-main .alignfull.is-layout-constrained { padding-left: var(--sx-pad) !important; padding-right: var(--sx-pad) !important; }
.sx-sec, .sx-cover, .sx-page-title, .sx-band, .sx-wide { box-sizing: border-box; }
/* zero specificity, so a single class (.sx-strong, .sx-stat-l ...) can still set its own max-width */
:where(.sx-sec, .sx-cover) p { max-width: none; }
.sx-sec > *, .sx-sec .wp-block-group > * { margin-block: 0; }
.sx-sec { padding: var(--sx-gap) var(--sx-pad) 0; }

/* ---------------------------------------------------------- buttons
   Black block, tight heavy label, yellow arrow square inset 4px (LET'S TALK 143x52, MORE ABOUT US 177x52). */
.wp-block-button__link, .wp-element-button, .edol-form button {
	display: inline-flex !important; align-items: center; gap: 0; box-sizing: border-box; height: 52px; padding: 0 0 0 15px !important;
	background: var(--sx-ink) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important;
	font: 800 12.5px/1 var(--edol-font-btn); font-stretch: 100%; text-transform: uppercase; letter-spacing: -.04em; word-spacing: 0;
	text-decoration: none; white-space: nowrap; cursor: pointer;
}
.wp-block-button__link::after, .edol-form button::after {
	content: "↗"; flex: none; display: grid; place-items: center; width: 42px; height: 44px; margin: 0 4px 0 15px;
	background: var(--sx-yellow); color: var(--sx-ink); font-size: 15px; font-weight: 400; letter-spacing: 0; word-spacing: 0; transition: transform .3s;
}
.wp-block-button__link:hover::after, .edol-form button:hover::after { transform: rotate(45deg); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: var(--sx-ink) !important; color: #fff !important; border: 0 !important; padding: 0 0 0 15px !important; }

/* ---------------------------------------------------------- header
   Fixed on every page, 76px tall (66px on phones). Pages that start with a full-bleed .sx-hero run it from y=0
   under a transparent header; every other page gets padding-top: var(--sx-header-h) on .edol-main.
   stux.js sets body.sx-hero-top (visible page starts with a hero) and body.sx-over-hero (header is over the hero). */
.edol-header-part { position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin: 0 !important; }
body.admin-bar .edol-header-part { top: 32px; }
@media (max-width: 782px) { body.admin-bar .edol-header-part { top: 46px; } }
main.edol-main { padding-top: var(--sx-header-h); }
.edol-main:has(> .sx-hero:first-child), .edol-main:has(> :first-child > .sx-hero:first-child), body.sx-hero-top .edol-main { padding-top: 0; }
.sx-header { background-color: var(--sx-bg); color: var(--sx-ink); transition: background-color .35s ease, color .35s ease; }
body.sx-over-hero .sx-header,
body.sx-hdr-js:not(.sx-hdr-live):has(:not([hidden]) > .edol-main > :first-child > .sx-hero:first-child) .sx-header { background-color: transparent; color: #fff; }
.sx-nav { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; box-sizing: border-box; height: var(--sx-header-h); padding: 0 var(--sx-pad); }
.sx-nav > * { margin: 0 !important; }
/* studio logo (inc/logo.php): the monogram, centred, in the header's text colour; or the owner's image (Appearance → EDOL Logo),
   turned white where the background is dark unless they switched that off */
.sx-logo { justify-self: center; line-height: 0; }
.sx-logo a { display: block; padding: 6px 0; text-decoration: none; color: inherit; }
.edol-logo-svg { display: block; width: auto; height: 100%; overflow: visible; }
.sx-logo .edol-logo-svg, .sx-drawer-logo .edol-logo-svg, .sx-logo .edol-logo-img, .sx-drawer-logo .edol-logo-img { height: var(--edol-logo-h); }
.edol-logo-img { display: block; width: auto; max-width: min(40vw, 460px); object-fit: contain; transition: filter .35s ease; }
body.sx-over-hero .sx-logo .edol-logo-white,
body.sx-hdr-js:not(.sx-hdr-live):has(:not([hidden]) > .edol-main > :first-child > .sx-hero:first-child) .sx-logo .edol-logo-white,
.sx-drawer-logo .edol-logo-white, .sx-foot-logo .edol-logo-white { filter: brightness(0) invert(1); }
.sx-nav-cta { justify-self: end; }
.sx-burger { justify-self: start; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; width: 44px; height: 44px; color: inherit; }
.sx-burger i { display: block; width: 31px; height: 1.5px; background: currentColor; transition: width .3s; }
.sx-burger i:nth-child(3) { width: 23px; } /* the middle line (child 1 is the hidden "Menu" text) */
.sx-burger:hover i:nth-child(3) { width: 31px; }
@media (max-width: 600px) {
	.sx-nav-cta .wp-block-button__link { padding-left: 0 !important; font-size: 0; width: 46px; height: 46px; }
	.sx-nav-cta .wp-block-button__link::after { margin: 0 4px; width: 38px; height: 38px; font-size: 16px; }
	.sx-logo .edol-logo-svg, .sx-drawer-logo .edol-logo-svg, .sx-logo .edol-logo-img, .sx-drawer-logo .edol-logo-img { height: var(--edol-logo-hm); }
}

/* ---------------------------------------------------------- full-screen menu (same top row as the header) */
.sx-drawer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--sx-ink); color: #fff; padding: 0 var(--sx-pad) 32px; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity .35s, transform .35s, visibility 0s .35s; overflow-y: auto; }
body:not(.sx-js) .sx-drawer:target, body.sx-menu-open .sx-drawer { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }
.sx-drawer-top { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: var(--sx-header-h); }
.sx-drawer-logo { grid-column: 2; line-height: 0; }
.sx-drawer-close { grid-column: 3; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; background: var(--sx-yellow); color: var(--sx-ink) !important; font-size: 28px; font-weight: 300; line-height: 1; text-decoration: none; }
.sx-drawer-nav { flex: 1; display: flex; align-items: center; padding: 32px 0; }
.sx-drawer-nav ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.sx-drawer-nav li { border-bottom: 1px solid rgba(255,255,255,.14); }
.sx-drawer-nav a { display: flex; align-items: baseline; gap: 22px; padding: 12px 0; color: #fff !important; text-decoration: none; font: 500 clamp(30px, min(5.2vw, 7.6vh), 72px)/1.04 var(--edol-font-head); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.03em; transition: color .25s, padding .25s; }
.sx-drawer-nav a:hover, .sx-drawer-nav a:focus-visible { color: var(--sx-yellow) !important; padding-left: 14px; }
.sx-dn { font-size: 13px; font-weight: 400; font-stretch: 110%; letter-spacing: -.02em; color: rgba(255,255,255,.5); min-width: 22px; }
.sx-drawer-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 15px; color: rgba(255,255,255,.8); }
.sx-drawer-foot p { margin: 0; }
.sx-drawer-foot span { display: block; font-size: 13px; font-stretch: 110%; text-transform: uppercase; letter-spacing: -.02em; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.sx-drawer-foot a { color: #fff !important; text-decoration: none; }
body.sx-menu-open { overflow: hidden; }
@media (max-width: 700px) { .sx-drawer-foot { grid-template-columns: 1fr; gap: 14px; } }

/* ---------------------------------------------------------- section label "01 —— ABOUT US" */
.sx-label { display: flex; align-items: center; gap: 11px; font-size: 13px !important; font-weight: 400; font-stretch: 110%; line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; color: var(--sx-label); margin: 0; }
.sx-dash { flex: none; display: inline-block; width: 41px; height: 1px; background: currentColor; opacity: .6; }

/* ---------------------------------------------------------- section heading row
   Label in the left column; heading (and its button, below it) starts at one third of the page width. */
.sx-head { display: grid; grid-template-columns: calc(33.333% - var(--sx-pad) / 3) minmax(0, 1fr); column-gap: 0; row-gap: 22px; align-items: start; margin-bottom: clamp(48px, 7vw, 100px) !important; }
.sx-head .sx-label { padding-right: 16px; }
.sx-head-main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 2.7vw, 36px); min-width: 0; }
.sx-h2 { font-size: clamp(30px, 3.6vw, 58px) !important; line-height: 1.1 !important; font-weight: 500 !important; font-stretch: 110%; letter-spacing: -.03em; text-transform: uppercase; text-wrap: pretty; max-width: 13.6em; margin: 0 !important; }
/* wide variant (sx_head(..., 'sx-head-wide')): label on top, heading at the left edge, button at the right */
.sx-head.sx-head-wide { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 3.4vw, 46px); }
.sx-head-wide .sx-head-main { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
@media (max-width: 760px) { .sx-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- footer */
.sx-footer { background: var(--sx-ink); color: #fff; padding: 18px var(--sx-pad) 0; overflow: hidden; container-type: inline-size; }
.sx-footer > * { margin-block-start: 0 !important; }
.sx-footer a { color: inherit; text-decoration: none; transition: color .3s; }
.sx-footer a:hover { color: var(--sx-yellow); }
.sx-footer p { margin: 0; }
.sx-foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sx-foot-logo { margin: 0; line-height: 0; }
.sx-foot-logo a { display: block; }
.sx-foot-logo .edol-logo-svg, .sx-foot-logo .edol-logo-img { height: clamp(calc(62px * var(--edol-logo-fk)), calc(6.2vw * var(--edol-logo-fk)), calc(88px * var(--edol-logo-fk))); } /* monogram + name, white on the dark footer */
.sx-foot-logo .edol-logo-img { max-width: min(70vw, 560px); }
.sx-foot-social { margin-top: 26px !important; font: 700 11px/1 var(--edol-font-text); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0; }
.sx-foot-mid { text-align: center; padding: clamp(40px, 5.6vw, 84px) 0 clamp(48px, 5.9vw, 88px); }
.sx-foot-mail { font-size: clamp(16px, 1.55vw, 21px); font-weight: 400; line-height: 1.3; }
.sx-foot-phone { font-size: clamp(28px, 3.75vw, 56px) !important; font-weight: 500; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.1; color: var(--sx-yellow); margin-top: 14px !important; }
.sx-foot-phone a { transition: color .4s ease; }
.sx-foot-phone a:hover { color: #cfcfcf; }
.sx-foot-base { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: end; font-size: 16px; font-weight: 500; line-height: 1.25; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.2); }
.sx-foot-addr { text-align: center; font-size: 15px; font-weight: 400; } .sx-foot-links { text-align: right; }
/* giant wordmark, cut by the end of the page like Stux's: the visible top of "EDOL" (800/125%: 2.92em of ink
   in the top 56% of the cap, .08em left bearing) runs exactly from gutter to gutter */
.sx-foot-word { font-size: calc((100vw - 2 * var(--sx-pad)) / 2.92) !important; font-size: calc(100cqw / 2.92) !important; font-weight: 800; font-stretch: 125%; line-height: .73; text-align: left; letter-spacing: -.03em; margin: 30px 0 -.345em -.08em !important; color: #f0f0f0; white-space: nowrap; }
@media (max-width: 640px) { .sx-foot-base { grid-template-columns: 1fr; text-align: left; } .sx-foot-addr, .sx-foot-links { text-align: left; } }
footer.wp-block-template-part { margin-top: 0 !important; }

/* AI assistant in the Stux palette */
.edol-ai-toggle { border-radius: 0; background: var(--sx-ink); font: 800 12.5px/1 var(--edol-font-btn); font-stretch: 100%; letter-spacing: -.03em; text-transform: uppercase; padding: 15px 18px; }
.edol-ai-dot { background: var(--sx-yellow); box-shadow: 0 0 0 4px rgba(232, 226, 26, .3); }
.edol-ai-toggle:hover { background: var(--sx-ink); color: var(--sx-yellow); }
.edol-ai-panel, .edol-ai-form input, .edol-ai-chips button { border-radius: 0; }
.edol-ai-form button { background: var(--sx-yellow); color: var(--sx-ink); }

@media (prefers-reduced-motion: reduce) { .sx-acc, .sx-proj-frame { transition: none !important; } }

/* older inner-page sections (service pages, posts, 404) in the Stux type style */
.edol-page-hero .edol-display, .single .edol-display, .page-template-default .edol-display { text-transform: uppercase; font-weight: 800 !important; font-size: clamp(40px, 6.4vw, 100px) !important; line-height: .95 !important; }
.edol-section h2, .edol-sec-row h2, .edol-h2-sm { text-transform: uppercase; font-weight: 500 !important; font-size: clamp(26px, 3.2vw, 48px) !important; line-height: 1.1 !important; letter-spacing: -.03em; }
.edol-section h3, .edol-svc-nav a { font-stretch: 110%; }
.edol-section { border-top: 1px solid var(--sx-line); }
.edol-label { font-family: inherit; font-size: 13px !important; font-stretch: 110%; letter-spacing: -.02em; color: var(--sx-label); }
.edol-prose > * { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
.edol-prose h2 { text-transform: uppercase; font-weight: 600; font-size: clamp(22px, 2.4vw, 32px) !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
body.sx-menu-open .edol-ai { display: none !important; }

/* ---------------------------------------------------------- motion (only under .sx-fx, i.e. motion allowed) */
/* button label rolls up on hover */
.sx-roll { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: middle; }
.sx-roll > span { display: block; transition: transform .45s var(--sx-ease); }
.sx-roll > span::after { content: attr(data-t); display: block; }
.wp-block-button__link:hover .sx-roll > span, .edol-form button:hover .sx-roll > span { transform: translateY(-1.3em); }

/* headings: words rise into place. Words are not clipped.
   The animation only fills backwards, so once it ends the element's own styles apply again. */
.sx-w { display: inline-block; }
.sx-fx [data-fx="words"]:not(.is-in) .sx-w { opacity: 0; }
.sx-fx [data-fx="words"].is-in .sx-w { animation: sx-word .8s var(--sx-ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes sx-word { from { opacity: 0; translate: 0 .35em; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
/* blocks fade up a short way as soon as they cross the bottom of the viewport */
.sx-fx [data-fx="up"]:not(.is-in) { opacity: 0; }
.sx-fx [data-fx="up"].is-in { animation: sx-up .75s var(--sx-ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes sx-up { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
/* photos settle from a slight zoom (they are visible from the first pixel, as in Stux) */
.sx-fx [data-fx="img"] { overflow: hidden; }
.sx-fx [data-fx="img"]:not(.is-in) img { scale: 1.08; }
.sx-fx [data-fx="img"].is-in img { animation: sx-img 1.4s var(--sx-ease) backwards; }
@keyframes sx-img { from { scale: 1.08; } to { scale: 1; } }

@media (prefers-reduced-motion: reduce) { .sx-roll > span { transition: none; } }
html, body { overflow-x: clip; }