/* STUDIO ONYX – agency look: cream page, ink type and hairline grid lines, chartreuse only as small touches.
   Colours follow Elementor › Site Settings › Global Colours (Ink = primary, Chartreuse = secondary, Cream = page background). */
:root, body {
	--ox-ink: var(--e-global-color-primary, #1F1A17);
	--ox-acc: var(--e-global-color-secondary, #C9DC3C);
	--ox-cream: var(--e-global-color-kink, #EFECE4);
	--ox-muted: var(--e-global-color-kdim, #6E675F);
	--ox-line: var(--e-global-color-kline, #1F1A17);
	--ox-gut: 24px;
}
html, body { background-color: var(--ox-cream); }
body { color: var(--e-global-color-text, #3A332E); }
::selection { background: var(--ox-acc); color: var(--ox-ink); }
@media (max-width: 767px) { :root, body { --ox-gut: 12px; } }

/* ---------- The frame: every section with the class "ox-sec" sits between two vertical lines ---------- */
.e-con.ox-sec { margin-left: var(--ox-gut) !important; margin-right: var(--ox-gut) !important; width: auto !important; max-width: none !important; border-left: 1px solid var(--ox-line) !important; border-right: 1px solid var(--ox-line) !important; border-top: 0 !important; }
.e-con.ox-sec.ox-sec--line { border-bottom: 1px solid var(--ox-line) !important; }
.e-con.ox-sec.ox-line-t { border-top: 1px solid var(--ox-line) !important; }
.ox-line-t { border-top: 1px solid var(--ox-line) !important; }
.ox-line-b { border-bottom: 1px solid var(--ox-line) !important; }
.ox-line-l { border-left: 1px solid var(--ox-line) !important; }
@media (max-width: 767px) { .ox-line-l { border-left: 0 !important; border-top: 1px solid var(--ox-line) !important; } }

/* ---------- Header: a row of cells, like a ruled grid ---------- */
#masthead { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 99; background: var(--ox-cream); }
#masthead { margin: 0 var(--ox-gut); }
.e-con.ox-header { border-left: 1px solid var(--ox-line) !important; border-right: 1px solid var(--ox-line) !important; padding: 0 !important; }
.ox-nav { display: flex; align-items: stretch; border-bottom: 1px solid var(--ox-line); min-height: 52px; }
.ox-nav__brand { flex: 1.4 1 0; display: flex; align-items: center; font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--ox-ink); text-decoration: none; padding: 0 2px; }
.ox-nav__brand:hover { color: var(--ox-ink); }
.ox-nav__links { flex: 3 1 0; display: flex; margin: 0; padding: 0; list-style: none; }
.ox-nav__links li { flex: 1 1 0; display: flex; }
.ox-nav__links a, .ox-nav__cta { flex: 1 1 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--ox-line); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ox-ink); text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.ox-nav__links a:hover, .ox-nav__links .current-menu-item > a { background: var(--ox-ink); color: var(--ox-cream); }
.ox-nav__cta { flex: 1.15 1 0; background: var(--ox-ink); color: var(--ox-cream) !important; }
.ox-nav__cta:hover { background: var(--ox-acc); color: var(--ox-ink) !important; }
.ox-nav__burger { display: none; width: 56px; border: 0; border-left: 1px solid var(--ox-line); background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--ox-ink); }
.ox-nav__burger span { display: block; width: 22px; height: 2px; background: currentColor; box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor; }
.ox-mnav { display: none; }
@media (max-width: 1024px) {
	.ox-nav__links { display: none; }
	.ox-nav__burger { display: flex; }
	.ox-nav__cta { flex: 0 0 auto; padding: 0 18px; font-size: 12px; }
	.ox-mnav { border-bottom: 1px solid var(--ox-line); }
	.ox-mnav.is-open { display: block; }
	.ox-mnav a { display: block; padding: 18px 4px; border-top: 1px solid var(--ox-line); font-family: "Anton", sans-serif; font-size: 34px; text-transform: uppercase; color: var(--ox-ink); text-decoration: none; }
}
@media (max-width: 767px) { .ox-nav__cta { display: none; } }

/* ---------- Giant name ---------- */
.ox-giant .elementor-heading-title, .ox-foot-giant .elementor-heading-title { line-height: .86 !important; white-space: nowrap; letter-spacing: -.005em; }
.ox-giant .elementor-heading-title { font-size: 16vw; }
.ox-giant--fit .elementor-heading-title { display: flex; justify-content: space-between; align-items: flex-start; }
.ox-r { font-family: "Inter", sans-serif !important; font-weight: 700; font-size: .11em; line-height: 1; color: var(--ox-ink); display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border: .12em solid var(--ox-ink); border-radius: 50%; background: var(--ox-acc); margin: .25em .35em 0 .3em; vertical-align: top; letter-spacing: 0; text-transform: none; }

/* ---------- Small parts ---------- */
.ox-tag .elementor-heading-title { display: inline-block; border: 1px solid var(--ox-line); padding: 8px 14px; font-weight: 600 !important; }
.ox-tag--acc .elementor-heading-title { background: var(--ox-acc); border-color: var(--ox-acc); }
mark.ox-hl, .ox-hl { background: var(--ox-acc); color: var(--ox-ink); padding: 0 .12em; }
.ox-paren .elementor-heading-title::before { content: "("; } .ox-paren .elementor-heading-title::after { content: ")"; }

/* ---------- Stats ---------- */
.ox-stats { border: 1px solid var(--ox-line); }
.ox-stat { border-left: 1px solid var(--ox-line); min-height: 260px; }
.ox-stat:first-child { border-left: 0; }
@media (max-width: 767px) { .ox-stat { border-left: 0; border-top: 1px solid var(--ox-line); min-height: 180px; } .ox-stat:first-child { border-top: 0; } }

/* ---------- Headings that fill in, letter by letter, as you scroll (class "ox-fill") ---------- */
.ox-fill .ox-ch { color: rgba(31, 26, 23, .18); transition: color .25s linear; }
.ox-fill .ox-ch.is-on { color: inherit; }

/* ---------- Our Work: cards that stack as you scroll (container with the class "ox-stack") ---------- */
.ox-stack > .e-con, .ox-stack > .elementor-element { position: sticky; top: 110px; }
.ox-stack > *:nth-child(2) { top: 140px; } .ox-stack > *:nth-child(3) { top: 170px; } .ox-stack > *:nth-child(4) { top: 200px; }
.ox-card { background: var(--ox-cream); border: 1px solid var(--ox-line); }
.ox-card .elementor-widget-image img { display: block; }
.ox-work-side { position: sticky; top: 110px; align-self: flex-start; }
@media (max-width: 1024px) { .ox-work-side { position: relative; top: 0; } }
@media (max-width: 767px) { .ox-stack > .e-con, .ox-stack > .elementor-element { position: relative; top: 0 !important; } }

/* ---------- Services list ---------- */
.ox-svc { border-top: 1px solid var(--ox-line); transition: background-color .3s ease; }
.ox-svc:last-child { border-bottom: 1px solid var(--ox-line); }
.ox-svc:hover { background: var(--e-global-color-kpanel, #F6F4EE); }
.ox-svc .ox-arrow .elementor-heading-title { transition: transform .3s ease; }
.ox-svc:hover .ox-arrow .elementor-heading-title { transform: translateX(8px); }

/* ---------- Process steps & price cards ---------- */
.ox-step { border: 1px solid var(--ox-line); margin-left: -1px; }
.ox-price { border: 1px solid var(--ox-line); position: relative; }
.ox-price--hot { border-width: 2px; }
.e-con.ox-price--hot::before { content: "Most booked" !important; display: block !important; inset: auto !important; top: -15px !important; left: 28px !important; width: auto !important; height: auto !important; opacity: 1 !important; mix-blend-mode: normal !important; position: absolute; top: -15px; left: 28px; background: var(--ox-acc); color: var(--ox-ink); font: 600 12px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; z-index: 2; }

/* ---------- Buttons ---------- */
.elementor-button { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

/* ---------- Footer ---------- */
.ox-foot-giant .elementor-heading-title { font-size: 15vw; line-height: .82 !important; text-align: center; }

/* ---------- Header cells built from Elementor buttons (class "ox-cell") ---------- */
.e-con.ox-navrow { border-bottom: 1px solid var(--ox-line) !important; }
.e-con.ox-cell, .elementor-widget.ox-cell { flex: 1 1 0 !important; align-self: stretch; }
.ox-cell .elementor-button-wrapper, .ox-cell .elementor-button { height: 100%; width: 100%; }
.ox-cell .elementor-button { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--ox-line) !important; border-radius: 0; background: transparent; color: var(--ox-ink); padding: 18px 10px; }
.ox-cell .elementor-button:hover { background: var(--ox-ink); color: var(--ox-cream); }
.ox-cell--cta .elementor-button { background: var(--ox-ink); color: var(--ox-cream); }
.ox-cell--cta .elementor-button:hover { background: var(--ox-acc); color: var(--ox-ink); }
.ox-brand { flex: 1.4 1 0 !important; display: flex; align-items: center; }
@media (max-width: 1024px) { .ox-cell--link { display: none !important; } .ox-burger { display: block !important; } }
.ox-burger { display: none; flex: 0 0 auto !important; border-left: 1px solid var(--ox-line); padding: 0 14px; align-self: stretch; }
.ox-burger .hfe-nav-menu__toggle { height: 100%; }
@media (max-width: 767px) { .ox-cell--cta { display: none !important; } }
.ox-burger nav.hfe-dropdown { background: var(--ox-cream) !important; border-top: 1px solid var(--ox-line); border-bottom: 1px solid var(--ox-line); }
.ox-burger .hfe-dropdown a.hfe-menu-item { font-family: "Anton", sans-serif !important; font-size: 32px !important; text-transform: uppercase; border-bottom: 1px solid var(--ox-line) !important; color: var(--ox-ink) !important; }

/* Header frame */
.ox-brand .elementor-heading-title { padding-left: 22px; }
@media (max-width: 767px) { .ox-brand .elementor-heading-title { padding-left: 14px; } }
/* Client names band: lighter type than the headings */
.ox-sec .onyx-marquee__item, .ox-sec .onyx-marquee__sep { font-family: "Inter", sans-serif !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
/* Lists inside package cards */
.ox-list ul { list-style: none; margin: 0; padding: 0; }
.ox-list li { padding: 11px 0; border-top: 1px solid rgba(31,26,23,.18); }
.ox-list li:last-child { border-bottom: 1px solid rgba(31,26,23,.18); }
/* Footer */
.ox-sec footer, footer.ox-sec { }
.ox-foot-links .elementor-heading-title { text-transform: none !important; }

/* Package cards: buttons line up at the bottom */
.e-con.ox-price { display: flex; flex-direction: column; }
.e-con.ox-price > .elementor-widget-button { margin-top: auto; }
.e-con.ox-price--hot { border-width: 2px !important; }
/* Footer columns & sign-up */
.ox-sec .onyx-signup, .ox-sec .onyx-signup form { justify-content: flex-start !important; margin-left: 0 !important; }

/* ---------- Motion (assets/js/onyx-motion.js) ---------- */
.ox-lens { position: absolute !important; inset: 0; margin: 0 !important; background: var(--ox-cream, #EFECE4); pointer-events: none; clip-path: circle(0 at 0 0); transform: scale(1.32); will-change: clip-path, transform; filter: contrast(1.05); }
.ox-giant .elementor-widget-container, .ox-foot-giant .elementor-widget-container { position: relative; overflow: hidden; }
.ox-bubble { position: fixed; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%; background: var(--ox-acc, #C9DC3C); color: #1F1A17; display: grid; place-items: center; font: 600 13px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; z-index: 9999; opacity: 0; }
.ox-bubble span { display: block; transform: scale(.4); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ox-bubble.is-on { opacity: 1; }
.ox-bubble.is-on span { transform: scale(1); }
.ox-bubble { transition: opacity .25s ease, width .3s, height .3s; }
.ox-card.is-hover { cursor: none; }
.ox-card .elementor-widget-image img { transition: filter .4s ease; }
.ox-par .elementor-widget-container, .ox-par { overflow: hidden; }
.ox-par img { will-change: transform; transform: scale(1.14); }
.ox-motion .ox-up { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.ox-motion .ox-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ox-par img { transform: none !important; } }
a.e-con.ox-card, a.e-con.ox-card:hover { color: inherit; text-decoration: none; }
/* Packages: breathing room between the price and "per month" */
.e-con.ox-price > .elementor-widget-heading:nth-child(3) { margin-top: 16px !important; }
/* FAQ (class "ox-faq"): thin lines between questions */
.ox-faq .elementor-toggle-item { border-top: 1px solid var(--ox-line); margin: 0 !important; }
.ox-faq .elementor-toggle-item:last-child { border-bottom: 1px solid var(--ox-line); }
.ox-faq .elementor-tab-title { font-size: clamp(20px, 2vw, 28px) !important; border: 0 !important; }
.ox-faq .elementor-tab-content { border: 0 !important; max-width: 760px; }
/* Contact form: underlined fields + Inter button, like the rest of the site */
.onyx-cf .onyx-cf__field input:not([type=checkbox]):not([type=radio]), .onyx-cf .onyx-cf__field textarea, .onyx-cf .onyx-cf__field select { border: 0 !important; border-bottom: 1px solid var(--ox-line) !important; border-radius: 0 !important; background: transparent !important; padding: 12px 0 !important; box-shadow: none !important; }
.onyx-cf .onyx-cf__field textarea { min-height: 140px; }
.onyx-cf .onyx-ui-btn { font-family: Inter, "Helvetica Neue", Arial, sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .12em !important; text-transform: uppercase; padding: 16px 28px !important; }
/* Package cards: buttons row at the bottom */
.e-con.ox-price > .e-con.ox-price__ctas { margin-top: auto; }
/* Package details page: price card that stays in view */
.e-con.ox-pk-card { position: sticky; top: 110px; }
@media (max-width: 1024px) { .e-con.ox-pk-card { position: relative; top: 0; } }
/* Link in bio page (/links/) */
.ox-lb .ox-lb-avatar img { width: 96px !important; height: 96px !important; border-radius: 50%; object-fit: cover; border: 1px solid var(--ox-line); }
.ox-lb .ox-lb-btn .elementor-button { width: 100%; justify-content: center; padding: 18px 20px !important; background: transparent; border: 1px solid var(--ox-line) !important; color: var(--ox-ink) !important; transition: background .25s, color .25s; }
.ox-lb .ox-lb-btn .elementor-button:hover { background: var(--ox-ink) !important; color: var(--ox-cream) !important; }
.ox-lb .ox-lb-btn--main .elementor-button { background: var(--ox-acc) !important; border-color: var(--ox-acc) !important; }
.ox-lb .ox-lb-btn--main .elementor-button:hover { background: var(--ox-ink) !important; border-color: var(--ox-ink) !important; color: var(--ox-cream) !important; }
.ox-lb a.e-con.ox-lb-tile { color: inherit; text-decoration: none; }
.ox-lb .ox-lb-tile img { transition: transform .5s ease; }
.ox-lb .ox-lb-tile:hover img { transform: scale(1.04); }
.ox-lb .ox-lb-foot { font-size: 12px; opacity: .7; }
/* Testimonials slider (class "ox-quotes") */
.e-con.ox-quotes { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; padding-bottom: 2px !important; }
.e-con.ox-quotes::-webkit-scrollbar { display: none; }
.e-con.ox-quotes.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.e-con.ox-quotes > .e-con.ox-quote { flex: 0 0 calc(38% - 14px) !important; width: auto !important; scroll-snap-align: start; border: 1px solid var(--ox-line); min-height: 360px; background: var(--ox-panel, #F6F4EE); }
@media (max-width: 1024px) { .e-con.ox-quotes > .e-con.ox-quote { flex-basis: 70% !important; } }
@media (max-width: 767px) { .e-con.ox-quotes > .e-con.ox-quote { flex-basis: 86% !important; min-height: 300px; } }
.ox-stars .elementor-heading-title { color: var(--ox-ink) !important; letter-spacing: .3em !important; font-size: 13px !important; }
.ox-q-nav { display: flex; gap: 10px; }
.ox-q-nav button { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--ox-line); background: transparent; color: var(--ox-ink); font: 500 20px/1 Inter, sans-serif; cursor: pointer; transition: background .25s, color .25s; padding: 0; }
.ox-q-nav button:hover { background: var(--ox-ink); color: var(--ox-cream); }
.ox-q-nav button:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ox-ink); }
/* Free audit section */
#audit { scroll-margin-top: 90px; }
/* Contact form: extra questions laid out in a 2-column grid */
.onyx-cf .onyx-cf__extras { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.onyx-cf .onyx-cf__x { grid-column: 1 / -1; }
.onyx-cf .onyx-cf__x--half { grid-column: auto; }
@media (max-width: 767px) { .onyx-cf .onyx-cf__extras { grid-template-columns: 1fr; } .onyx-cf .onyx-cf__x--half { grid-column: 1 / -1; } }
/* Testimonials: quotes in Inter, sentence case */
.ox-quote__text .elementor-heading-title { font-family: "Inter", sans-serif !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: clamp(18px, 1.55vw, 23px) !important; line-height: 1.45 !important; }
.ox-q-nav button { width: 54px !important; height: 54px !important; border-radius: 50% !important; padding: 0 !important; border: 1px solid var(--ox-line) !important; background: transparent !important; color: var(--ox-ink) !important; display: grid; place-items: center; }
.ox-q-nav button:hover:not(:disabled) { background: var(--ox-ink) !important; color: var(--ox-cream) !important; }
/* Journal: same cream background as the rest of the site */
body .onyx-archive__head, body .onyx-side__cta { background: var(--ox-cream, #EFECE4) !important; }
/* Package link cards keep their full border */
a.e-con.ox-price { border: 1px solid var(--ox-line) !important; }
/* Giant titles: stay hidden for a split second until the fonts are loaded and the title is sized,
   so the page never shows a wrong-sized title first (safety: always shown after 1.5s). */
@keyframes oxShow { to { visibility: visible; } }
html:not(.ox-fitted) .ox-giant .elementor-heading-title, html:not(.ox-fitted) .ox-foot-giant .elementor-heading-title { visibility: hidden; animation: oxShow 0s 1.5s forwards; }
/* No sideways scrolling: the giant titles (and their lens copy) stay inside the page */
.ox-giant, .ox-foot-giant { overflow: hidden; }
html, body { overflow-x: clip; }

/* ================= Phones & tablets ================= */
@media (max-width: 767px) {
	/* line breaks written for big screens are dropped on phones */
	.elementor-heading-title br, .ox-sec .elementor-widget-text-editor p br { display: none; }
	/* small (label) under a heading gets a little air */
	.ox-sec .e-con > .e-con-full > .elementor-widget-heading + .elementor-widget-heading, .ox-sec .elementor-widget-heading.ox-fill + * { margin-top: 10px; }
	/* step / value / included cells: less empty space above the title */
	.e-con.ox-step > .elementor-widget-heading:nth-child(2) > .elementor-widget-container { margin-top: 30px !important; }
	/* closing headline: highlighted word does not overlap the line above */
	.ox-sec h2.elementor-heading-title { line-height: 1.02 !important; }
	mark.ox-hl { display: inline-block; line-height: 1; margin-top: .06em; padding: .02em .12em; }
	/* testimonial arrows sit under the heading with space */
	.ox-q-nav { margin-top: 14px; }
	/* back-to-top button smaller */
	body .onyx-totop { width: 40px; height: 40px; right: 14px; bottom: 14px; }
}
/* Newsletter button: Inter like every other button */
.onyx-su .onyx-ui-btn { font-family: "Inter", sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .12em !important; text-transform: uppercase; }
/* Phone menu: full screen panel, big links */
@media (max-width: 1024px) {
	.ox-burger nav.hfe-dropdown { position: fixed !important; left: 0 !important; right: 0 !important; top: var(--ox-head-h, 70px) !important; bottom: 0 !important; height: auto !important; overflow-y: auto; padding: 8px 20px 40px !important; z-index: 9998; }
	.ox-burger .hfe-dropdown li:last-child a.hfe-menu-item { background: var(--ox-acc) !important; border: 0 !important; margin-top: 18px; padding-left: 18px !important; }
}

@media (max-width: 1024px) {
	.ox-burger nav.hfe-dropdown.menu-is-active { max-height: none !important; height: calc(100vh - var(--ox-head-h, 70px)) !important; width: 100% !important; }
	.ox-burger nav.hfe-dropdown ul { overflow: visible !important; }
}
@media (max-width: 1024px) {
	.ox-burger nav.hfe-dropdown ul.hfe-nav-menu { display: block !important; height: auto !important; }
	.ox-burger nav.hfe-dropdown ul.hfe-nav-menu > li { display: block; }
}
/* Service rows are links: keep the text colours, nudge the arrow on hover */
a.e-con.ox-svc, a.e-con.ox-svc:hover { color: inherit; text-decoration: none; }
a.e-con.ox-svc .ox-arrow .elementor-heading-title { transition: transform .3s ease; }
a.e-con.ox-svc:hover .ox-arrow .elementor-heading-title { transform: translateX(8px); }
