/* Cleonox Cinema — carpet-build/patch-cine.js */
html { overflow-x: clip !important; overflow-y: visible !important; }
body:not([style*="overflow"]) { overflow-x: clip !important; overflow-y: visible !important; }
main { counter-reset: cxs; }
main > div.hero-section > section:not(#hero),
main > section.mx-auto:not(.xl\:flex-row),
main > section.bg-white.text-white,
main > section.xl\:flex-row,
main > section.md\:gap-20 { background: #FFFFFF !important; color: #0C0C0C !important; --line: rgba(12, 12, 12, .16); --mute: rgba(12, 12, 12, .58); }
main > section.hero-bg,
main > div.flex.md\:flex-row,
main > section.bg-\[\#0E0E0F\]:not(.items-center),
main > section.bg-\[\#0E0E0F\].items-center { background: #0C0C0C !important; color: #ECE9E2 !important; --line: rgba(236, 233, 226, .16); --mute: rgba(236, 233, 226, .56); }
main > div.hero-section > section:not(#hero) :is(h1, h2, h3, p, li, span, label),
main > section.mx-auto:not(.xl\:flex-row) :is(h1, h2, h3, p, li, span, label),
main > section.bg-white.text-white :is(h1, h2, h3, p, li, span, label),
main > section.xl\:flex-row :is(h1, h2, h3, p, li, span, label),
main > section.md\:gap-20 :is(h1, h2, h3, p, li, span, label),
main > section.hero-bg :is(h1, h2, h3, p, li, span, label),
main > div.flex.md\:flex-row :is(h1, h2, h3, p, li, span, label),
main > section.bg-\[\#0E0E0F\]:not(.items-center) :is(h1, h2, h3, p, li, span, label),
main > section.bg-\[\#0E0E0F\].items-center :is(h1, h2, h3, p, li, span, label) { color: inherit; }
main > div.hero-section > section:not(#hero),
main > section.mx-auto:not(.xl\:flex-row),
main > section.bg-white.text-white,
main > section.xl\:flex-row,
main > section.md\:gap-20,
main > section.hero-bg,
main > div.flex.md\:flex-row,
main > section.bg-\[\#0E0E0F\]:not(.items-center),
main > section.bg-\[\#0E0E0F\].items-center { position: relative; margin: 0 !important; max-width: none !important; }
main > div.hero-section > section:not(#hero) [data-aos],
main > section.mx-auto:not(.xl\:flex-row) [data-aos],
main > section.bg-white.text-white [data-aos],
main > section.xl\:flex-row [data-aos],
main > section.md\:gap-20 [data-aos],
main > section.hero-bg [data-aos],
main > div.flex.md\:flex-row [data-aos],
main > section.bg-\[\#0E0E0F\]:not(.items-center) [data-aos],
main > section.bg-\[\#0E0E0F\].items-center [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
#hero { margin-bottom: 0 !important; }
::selection { background: #2FDACA; color: #0C0C0C; }

/* ---------- section label: (02) Services ———————— Cleonox, New York ---------- */
main > div.hero-section > section:not(#hero), main > section.hero-bg, main > section.mx-auto:not(.xl\:flex-row), main > section.bg-white.text-white, main > section.bg-\[\#0E0E0F\]:not(.items-center), main > section.xl\:flex-row, main > section.bg-\[\#0E0E0F\].items-center, main > section.md\:gap-20 { counter-increment: cxs; padding-top: clamp(130px, 13vw, 210px) !important; padding-bottom: clamp(90px, 10vw, 170px) !important;
  padding-left: clamp(20px, 4vw, 64px) !important; padding-right: clamp(20px, 4vw, 64px) !important; }
main > div.hero-section > section:not(#hero)::before, main > section.hero-bg::before, main > section.mx-auto:not(.xl\:flex-row)::before, main > section.bg-white.text-white::before, main > section.bg-\[\#0E0E0F\]:not(.items-center)::before, main > section.xl\:flex-row::before, main > section.bg-\[\#0E0E0F\].items-center::before, main > section.md\:gap-20::before { position: absolute; z-index: 2; top: clamp(40px, 4vw, 64px); left: clamp(20px, 4vw, 64px); right: clamp(20px, 4vw, 64px);
  padding-top: 14px; border-top: 1px solid var(--line); font: 500 13px/1 Gilroy, sans-serif; letter-spacing: .02em; color: var(--mute);
  pointer-events: none; }
main > div.hero-section > section:not(#hero)::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-standard, "The standard"); }
main > section.hero-bg::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-services, "Services"); }
main > section.mx-auto:not(.xl\:flex-row)::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-industries, "Industries"); }
main > section.bg-white.text-white::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-work, "Selected work"); }
main > section.bg-\[\#0E0E0F\]:not(.items-center)::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-testimonials, "Testimonials"); }
main > section.xl\:flex-row::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-philosophy, "Philosophy"); }
main > section.bg-\[\#0E0E0F\].items-center::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-business, "For business"); }
main > section.md\:gap-20::before { content: "(" counter(cxs, decimal-leading-zero) ")\2003 " var(--cxl-contact, "Contact"); }
main > div.hero-section > section:not(#hero)::after, main > section.hero-bg::after, main > section.mx-auto:not(.xl\:flex-row)::after, main > section.bg-white.text-white::after, main > section.bg-\[\#0E0E0F\]:not(.items-center)::after, main > section.xl\:flex-row::after, main > section.bg-\[\#0E0E0F\].items-center::after, main > section.md\:gap-20::after { content: var(--cxl-ny, "Cleonox\2002\2014\2002New York"); position: absolute; z-index: 2; top: calc(clamp(40px, 4vw, 64px) + 15px);
  right: clamp(20px, 4vw, 64px); font: 500 13px/1 Gilroy, sans-serif; color: var(--mute); pointer-events: none; }

/* ---------- display type + word-mask reveal ---------- */
main > div.hero-section > section:not(#hero) h1,
main > section.hero-bg h2,
main > div.flex.md\:flex-row h3,
main > section.mx-auto:not(.xl\:flex-row) h3,
main > section.bg-white.text-white h2,
main > section.bg-\[\#0E0E0F\]:not(.items-center) h2,
main > section.xl\:flex-row h3.text-5xl,
main > section.bg-\[\#0E0E0F\].items-center h1,
main > section.md\:gap-20 h2 { font-family: Gilroy, sans-serif !important; font-weight: 600 !important; font-size: clamp(52px, 8.2vw, 150px) !important;
  line-height: .9 !important; letter-spacing: -.055em !important; max-width: none !important; width: auto !important; margin-bottom: 0 !important; color: inherit !important; }
.cx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
.cx-w > i { display: inline-block; font-style: normal; transform: translate3d(0, 108%, 0); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 55ms); }
.cx-in .cx-w > i { transform: none; }
html:not(.cx-ready) .cx-w > i { transform: none; transition: none; }
.cx-sw { transition: opacity .35s linear; opacity: .16; }
.cx-sw.on { opacity: 1; }
.cx-up { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.cx-up.cx-in { opacity: 1; transform: none; }

/* ---------- 01 intro ---------- */
main > div.hero-section > section:not(#hero) > div { max-width: none !important; }
/* the photo under the hero was removed (client 2026-10-09) */
main > div.hero-section > section:not(#hero) > div > img { display: none !important; }
main > div.hero-section > section:not(#hero) .grid { display: block !important; }
main > div.hero-section > section:not(#hero) .grid > h1 { display: block; }
main > div.hero-section > section:not(#hero) .grid > h1 > span:not(.cx-w) { display: block; margin-top: 26px; font-size: 15px !important; font-weight: 500 !important; letter-spacing: .01em !important; color: var(--mute); }
main > div.hero-section > section:not(#hero) .grid > p { margin: clamp(28px, 3vw, 48px) 0 clamp(70px, 8vw, 140px) 0 !important; max-width: none !important; width: 100%; font-size: clamp(30px, 3.6vw, 62px) !important;
  font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -.035em !important; color: #0C0C0C !important; }
main > div.hero-section > section:not(#hero) .grid { counter-reset: cxf; }
main > div.hero-section > section:not(#hero) .grid > div.flex { counter-increment: cxf; display: grid !important; grid-template-columns: 1fr 1fr 1.2fr; align-items: baseline; gap: 24px !important;
  max-width: none !important; padding: 34px 0 !important; border-top: 1px solid var(--line); position: relative; }
main > div.hero-section > section:not(#hero) .grid > div.flex:last-child { border-bottom: 1px solid var(--line); }
main > div.hero-section > section:not(#hero) .grid > div.flex::before { content: counter(cxf, decimal-leading-zero); font: 500 15px/1 Gilroy, sans-serif; color: var(--mute); }
main > div.hero-section > section:not(#hero) .grid > div.flex > div:first-child { display: none !important; }
main > div.hero-section > section:not(#hero) .grid > div.flex > div:last-child { display: contents; }
main > div.hero-section > section:not(#hero) .grid > div.flex h3 { font-size: clamp(24px, 2.4vw, 40px) !important; font-weight: 600 !important; letter-spacing: -.03em; line-height: 1.05; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
main > div.hero-section > section:not(#hero) .grid > div.flex p { color: var(--mute) !important; font-size: 17px; line-height: 1.55; max-width: 44ch; }
main > div.hero-section > section:not(#hero) .grid > div.flex:hover h3 { transform: translateX(18px); }

/* ---------- 02 services: pinned horizontal reel ---------- */
main > section.hero-bg > div { max-width: none !important; }
main > section.hero-bg > div > div:first-child { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; gap: 40px !important;
  padding: 0 !important; margin-bottom: clamp(40px, 5vw, 80px); }
main > section.hero-bg > div > div:first-child p { display: block !important; max-width: 34ch !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--mute) !important; }
main > section.hero-bg > div > div:first-child p span { color: #ECE9E2 !important; font-weight: 600 !important; }
main > section.hero-bg .cx-pk-grid { display: flex !important; gap: 18px !important; padding: 0 !important; grid-template-columns: none !important; }
main > section.hero-bg .cx-pk { flex: 0 0 clamp(300px, 27vw, 460px) !important; height: min(64vh, 620px); min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important;
  background: #1a1a1a !important; overflow: hidden; position: relative; isolation: isolate; box-shadow: none !important; opacity: 1 !important; transform: none !important; counter-increment: cxp; }
main > section.hero-bg .cx-pk-grid { counter-reset: cxp; }
main > section.hero-bg .cx-pk--wide { flex-basis: clamp(420px, 40vw, 700px) !important; }
main > section.hero-bg .cx-pk-media { position: absolute !important; inset: 0; aspect-ratio: auto !important; border-radius: 0 !important; z-index: -2; }
main > section.hero-bg .cx-pk-img { position: absolute; inset: 0; z-index: -2; height: 100% !important; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) !important; }
main > section.hero-bg .cx-pk:hover .cx-pk-img { transform: scale(1.06) !important; }
main > section.hero-bg .cx-pk::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .3) 45%, rgba(8, 8, 8, 0) 70%); }
main > section.hero-bg .cx-pk-shade { display: none !important; }
main > section.hero-bg .cx-pk::before { content: counter(cxp, decimal-leading-zero); position: absolute; top: 22px; right: 24px; font: 500 14px/1 Gilroy, sans-serif; color: rgba(255, 255, 255, .8); }
main > section.hero-bg .cx-pk-tag, main > section.hero-bg .cx-pk-badge { top: 18px !important; left: 18px !important; background: rgba(255, 255, 255, .92) !important; color: #0C0C0C !important; border: 0 !important;
  border-radius: 9999px; font-weight: 600 !important; }
main > section.hero-bg .cx-pk-body { position: absolute !important; left: 0; right: 0; bottom: 0; padding: 28px !important; display: flex; flex-direction: column; justify-content: flex-end; }
main > section.hero-bg .cx-pk-title { font-size: clamp(24px, 2vw, 32px) !important; font-weight: 600 !important; letter-spacing: -.03em; line-height: 1.05 !important; color: #fff !important; max-width: 16ch; }
main > section.hero-bg .cx-pk-sub, main > section.hero-bg .cx-pk-kicker { color: rgba(255, 255, 255, .75) !important; }
main > section.hero-bg .cx-pk-chips { margin: 14px 0 0 !important; }
main > section.hero-bg .cx-pk-chips li { background: transparent !important; border: 1px solid rgba(255, 255, 255, .35) !important; color: #fff !important; }
main > section.hero-bg .cx-pk-chips li::before { background: #fff !important; }
main > section.hero-bg .cx-pk-cta { margin-top: 22px !important; align-self: flex-start; width: auto !important; padding: 0 0 4px !important; background: none !important; border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .6) !important; border-radius: 0 !important; color: #fff !important; font-weight: 600 !important; gap: 8px !important; }
main > section.hero-bg .cx-pk-arrow { width: auto !important; height: auto !important; background: none !important; color: #fff !important; transition: transform .4s !important; }
main > section.hero-bg .cx-pk:hover .cx-pk-arrow { transform: translate(4px, -4px) rotate(-45deg) !important; }
cx-reel-bar { display: flex; align-items: center; gap: 18px; margin-top: 34px; font: 500 13px/1 Gilroy, sans-serif; color: var(--mute); }
cx-reel-bar i { position: relative; flex: 1; height: 1px; background: var(--line); }
cx-reel-bar i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: #ECE9E2; }
html.cx-hs main > section.hero-bg { padding-top: 0 !important; padding-bottom: 0 !important; }
html.cx-hs main > section.hero-bg::before, html.cx-hs main > section.hero-bg::after { position: sticky; display: block; }
html.cx-hs main > section.hero-bg::before { top: clamp(40px, 4vw, 64px); margin-bottom: -28px; }
html.cx-hs main > section.hero-bg::after { display: none; }
html.cx-hs main > section.hero-bg > div { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 96px; }
html.cx-hs main > section.hero-bg h2 { font-size: clamp(48px, 5.6vw, 104px) !important; }
html.cx-hs main > section.hero-bg > div > div:first-child { margin-bottom: 32px !important; }
html.cx-hs main > section.hero-bg .cx-pk { height: min(54vh, 560px); }
html.cx-hs main > section.hero-bg .cx-pk-grid { flex-wrap: nowrap !important; overflow: visible !important; will-change: transform; width: max-content; }
@media (max-width: 1023px) {
  main > section.hero-bg .cx-pk-grid { overflow-x: auto !important; scroll-snap-type: x mandatory; margin: 0 calc(-1 * clamp(20px, 4vw, 64px)) !important; padding: 0 clamp(20px, 4vw, 64px) !important; scrollbar-width: none; }
  main > section.hero-bg .cx-pk { flex-basis: 78vw !important; height: 480px; scroll-snap-align: start; }
  main > section.hero-bg > div > div:first-child { flex-direction: column; align-items: flex-start !important; }
  cx-reel-bar { display: none; }
}

/* ---------- safety ---------- */
/* photo pages: full-bleed cinematic scene — photo fills the block, slow scroll zoom, content panel bottom-left */
main > div.flex.md\:flex-row:has(> img) { position: relative; display: block !important; min-height: 100vh; overflow: hidden; isolation: isolate; }
main > div.flex.md\:flex-row:has(> img) > img { position: absolute !important; inset: 0; z-index: -2; width: 100% !important; height: 100% !important; object-fit: cover;
  transform: scale(var(--cx-zoom, 1.12)); transform-origin: 50% 60%; filter: saturate(.85) contrast(1.05); will-change: transform; }
main > div.flex.md\:flex-row:has(> img)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .72) 38%, rgba(8, 8, 8, .15) 72%, rgba(8, 8, 8, .05) 100%),
    linear-gradient(0deg, rgba(8, 8, 8, .7) 0%, rgba(8, 8, 8, 0) 45%); }
main > div.flex.md\:flex-row:has(> img) > div.bg-black { position: relative; background: transparent !important; width: 100% !important; min-height: 100vh; display: flex !important;
  flex-direction: column; justify-content: flex-end !important; align-items: flex-start !important; padding: 140px clamp(20px, 4vw, 64px) clamp(60px, 7vw, 110px) !important; }
main > div.flex.md\:flex-row > div.bg-black > div { max-width: 720px !important; margin: 0 !important; display: flex; flex-direction: column; }
main > div.flex.md\:flex-row > div.bg-black > div > * { order: 1; margin-top: 0 !important; }
main > div.flex.md\:flex-row > div.bg-black > div > cx-safe-pts { order: 2; margin-top: 44px !important; }
main > div.flex.md\:flex-row > div.bg-black > div > div.flex-wrap { order: 3; margin-top: 44px !important; }
main > div.flex.md\:flex-row > div.bg-black > div::before { content: var(--cxl-safety, "Safety & certification"); display: block; margin-bottom: 26px; padding-top: 14px; width: 220px;
  border-top: 1px solid rgba(236, 233, 226, .35); font: 500 13px/1 Gilroy, sans-serif; color: rgba(236, 233, 226, .7); }
main > div.flex.md\:flex-row h3 { font-size: clamp(56px, 7.4vw, 140px) !important; margin-bottom: 30px !important; color: #ECE9E2 !important; }
main > div.flex.md\:flex-row p { font-size: clamp(18px, 1.4vw, 21px) !important; line-height: 1.6 !important; color: rgba(236, 233, 226, .78) !important; font-weight: 400 !important; max-width: 46ch; }
cx-safe-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
cx-safe-pts div { padding-top: 16px; border-top: 1px solid rgba(236, 233, 226, .3); }
cx-safe-pts b { display: block; font-size: clamp(30px, 2.6vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #ECE9E2; }
cx-safe-pts span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: rgba(236, 233, 226, .65); }
main > div.flex.md\:flex-row div.flex-wrap { gap: 34px !important; align-items: center; padding-top: 0; border-top: 0; margin-top: 44px; }
main > div.flex.md\:flex-row div.flex-wrap img { height: 28px; width: auto; filter: grayscale(1) brightness(0) invert(1); opacity: .8; transition: opacity .3s; }
main > div.flex.md\:flex-row div.flex-wrap img[src^="data:"] { display: none; } /* 4th inline-SVG logo turns into a white box under the white filter (client 2026-10-16) */
main > div.flex.md\:flex-row div.flex-wrap img:hover { opacity: 1; }
/* /carpet keeps its before/after slider: split layout */
main > div.flex.md\:flex-row:not(:has(> img)) { min-height: 92vh; align-items: stretch !important; overflow: hidden; }
main > div.flex.md\:flex-row:not(:has(> img)) > .cx-ba { width: 50% !important; height: auto !important; min-height: 92vh; position: relative; overflow: hidden; }
main > div.flex.md\:flex-row:not(:has(> img)) > .cx-ba img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
@media (max-width: 1023px) { main > div.flex.md\:flex-row:not(:has(> img)) > .cx-ba { min-height: 60vh; } }
main > div.flex.md\:flex-row:not(:has(> img)) > div.bg-black { background: transparent !important; width: 50% !important; padding: clamp(60px, 7vw, 120px) clamp(20px, 4vw, 64px) !important; justify-content: flex-end !important; align-items: flex-start !important; }
@media (max-width: 767px) {
  main > div.flex.md\:flex-row:has(> img)::before { background: linear-gradient(0deg, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .75) 55%, rgba(8, 8, 8, .25) 100%); }
  main > div.flex.md\:flex-row:has(> img) > div.bg-black { padding: 120px 20px 60px !important; }
  cx-safe-pts { grid-template-columns: 1fr; gap: 0; }
  cx-safe-pts div { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; }
  cx-safe-pts span { margin: 0; }
}

/* ---------- industries: giant velocity marquee ---------- */
main > section.mx-auto:not(.xl\:flex-row) > div:first-child, main > section.bg-white.text-white > div:first-child, main > section.bg-\[\#0E0E0F\]:not(.items-center) > div > div:first-child, main > section.bg-\[\#0E0E0F\].items-center > div:first-child {
  max-width: none !important; width: 100%; margin: 0 0 clamp(50px, 6vw, 100px) !important; padding: 0 !important; display: flex !important; flex-direction: row !important;
  justify-content: space-between !important; align-items: flex-end !important; gap: 40px !important; }
main > section.mx-auto:not(.xl\:flex-row) > div:first-child p, main > section.bg-white.text-white > div:first-child p, main > section.bg-\[\#0E0E0F\]:not(.items-center) > div > div:first-child p, main > section.bg-\[\#0E0E0F\].items-center > div:first-child p {
  max-width: 34ch !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--mute) !important; margin: 0 !important; }
main > section.mx-auto:not(.xl\:flex-row):has(> cx-marquee) > ul { display: none !important; }
cx-marquee { display: block; margin: 0 calc(-1 * clamp(20px, 4vw, 64px)); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
cx-marquee > div { display: flex; width: max-content; padding: 18px 0; will-change: transform; }
cx-marquee > div + div { border-top: 1px solid var(--line); }
cx-marquee span { font-size: clamp(48px, 7.5vw, 132px); font-weight: 600; letter-spacing: -.05em; line-height: 1; white-space: nowrap; padding-right: .5em; }
cx-marquee span::after { content: "\2217"; display: inline-block; margin-left: .5em; color: #2FDACA; font-weight: 400; transform: translateY(-.05em); }
cx-marquee > div:nth-child(2) span { -webkit-text-stroke: 1.5px #0C0C0C; color: transparent; }

/* ---------- gallery v2: staggered 4-column grid with column parallax + lightbox (<cx-gallery>, cine.js) ---------- */
main > section.bg-white.text-white:has(> cx-gallery) > div.relative { display: none !important; }
cx-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); align-items: start; padding-bottom: 80px; }
cx-gallery > div { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 26px); will-change: transform; }
cx-gallery > div:nth-child(2) { margin-top: 90px; }
cx-gallery > div:nth-child(3) { margin-top: 30px; }
cx-gallery > div:nth-child(4) { margin-top: 140px; }
cx-gallery figure { margin: 0; cursor: zoom-in; }
cx-gallery .g-im { position: relative; overflow: hidden; aspect-ratio: 354 / 492; background: #d9d5cc; border-radius: 2px; }
cx-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .6s; filter: saturate(.9); }
cx-gallery figure:hover img { transform: scale(1.1); filter: saturate(1.05); }
cx-gallery .g-im::after { content: var(--cxl-ba, "Before / After"); position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 9999px; background: rgba(12, 12, 12, .72);
  color: #ECE9E2; font: 600 12px/1 Gilroy, sans-serif; letter-spacing: .04em; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1); }
cx-gallery figure:hover .g-im::after { opacity: 1; transform: none; }
cx-gallery.no-ba .g-im::after { content: var(--cxl-view, "View"); }
cx-gallery figcaption { display: flex; justify-content: space-between; margin-top: 12px; font: 500 13px/1 Gilroy, sans-serif; color: var(--mute); }
cx-gallery .g-more .g-im { display: flex; align-items: center; justify-content: center; background: #0C0C0C; }
cx-gallery .g-more .g-im img { position: absolute; inset: 0; opacity: .35; filter: grayscale(1); }
cx-gallery .g-more .g-im b { position: relative; z-index: 1; color: #ECE9E2; font-size: clamp(36px, 3.4vw, 60px); font-weight: 600; letter-spacing: -.04em; text-align: center; line-height: 1; }
cx-gallery .g-more .g-im b span { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: .7; }
cx-gallery .g-more .g-im::after { display: none; }
cx-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 8, .94); opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility 0s .4s; }
cx-lightbox.on { opacity: 1; visibility: visible; transition: opacity .4s; }
cx-lightbox img { max-height: 84vh; max-width: min(88vw, 900px); width: auto; height: auto; object-fit: contain; border-radius: 2px; transform: scale(.96); transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .25s; }
cx-lightbox.on img { transform: none; }
cx-lightbox button { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(236, 233, 226, .3); background: transparent; color: #ECE9E2; font-size: 22px;
  cursor: pointer; transition: background-color .3s, color .3s; }
cx-lightbox button:hover { background: #ECE9E2; color: #0C0C0C; }
cx-lightbox .lb-prev { left: clamp(12px, 3vw, 48px); top: 50%; margin-top: -32px; }
cx-lightbox .lb-next { right: clamp(12px, 3vw, 48px); top: 50%; margin-top: -32px; }
cx-lightbox .lb-close { right: clamp(12px, 3vw, 48px); top: clamp(12px, 3vw, 40px); }
cx-lightbox .lb-count { position: absolute; left: clamp(16px, 3vw, 48px); top: clamp(30px, 4vw, 60px); font: 500 14px/1 Gilroy, sans-serif; color: rgba(236, 233, 226, .7); }
@media (max-width: 1023px) {
  /* one swipeable strip in natural order (figures carry style.order) */
  cx-gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: clamp(20px, 4vw, 64px); margin: 0 calc(-1 * clamp(20px, 4vw, 64px)); padding: 0 clamp(20px, 4vw, 64px) 40px; scrollbar-width: none; }
  cx-gallery::-webkit-scrollbar { display: none; }
  cx-gallery > div { display: contents; }
  cx-gallery figure { flex: 0 0 min(72vw, 360px); scroll-snap-align: start; }
}
@media (max-width: 767px) { cx-lightbox button.lb-prev, cx-lightbox button.lb-next { top: auto; bottom: 30px; margin: 0; } cx-lightbox img { max-width: 94vw; } }
main > section.bg-white.text-white { overflow: hidden; }
main > section.bg-white.text-white > div.relative { margin: 0 calc(-1 * clamp(20px, 4vw, 64px)); }
main > section.bg-white.text-white .swiper-slide img { border-radius: 2px !important; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
main > section.bg-white.text-white .swiper-slide:hover img { transform: scale(1.03); }
main > section.bg-white.text-white .swiper-button-prev, main > section.bg-white.text-white .swiper-button-next { width: 64px !important; height: 64px !important; border-radius: 50% !important; border: 1px solid #0C0C0C !important;
  background: transparent !important; color: #0C0C0C !important; transition: background-color .3s, color .3s; }
main > section.bg-white.text-white .swiper-button-prev:hover, main > section.bg-white.text-white .swiper-button-next:hover { background: #0C0C0C !important; color: #ECE9E2 !important; }
main > section.bg-white.text-white .swiper-navigation-icon { height: 16px; width: auto; }
main > section.bg-white.text-white .swiper-navigation-icon path { fill: currentColor !important; }
main > section.bg-white.text-white .swiper-pagination, main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-pagination { background: transparent !important; box-shadow: none !important; }
main > section.bg-white.text-white .swiper-pagination-bullet, main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-pagination-bullet { width: 18px !important; height: 2px !important; border-radius: 0 !important; margin: 0 2px !important;
  background: currentColor !important; opacity: .25 !important; transition: opacity .3s, width .3s; }
main > section.bg-white.text-white .swiper-pagination-bullet { color: #0C0C0C; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-pagination-bullet { color: #ECE9E2; }
main > section.bg-white.text-white .swiper-pagination-bullet-active, main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-pagination-bullet-active { width: 40px !important; opacity: 1 !important; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-pagination-bullet-active::before, main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-pagination-bullet-active::after { display: none !important; }

/* ---------- reviews: big type quotes ---------- */
main > section.bg-\[\#0E0E0F\]:not(.items-center) > div > div:first-child { padding: 0 !important; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .reviewSwiper { overflow: visible !important; margin: 0 calc(-1 * clamp(20px, 4vw, 64px)) !important; padding: 0 clamp(20px, 4vw, 64px) !important; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide > div > div { background: transparent !important; color: #ECE9E2 !important; border-radius: 0 !important; padding: 30px 0 0 !important;
  border-top: 1px solid var(--line); gap: 26px !important; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide > div > div > p { order: -1; font-size: clamp(22px, 2vw, 32px) !important; line-height: 1.22 !important; font-weight: 500 !important; letter-spacing: -.02em; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide > div > div > p::before { content: "\201C"; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide > div > div > p::after { content: "\201D"; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide .w-\[45px\] { display: none !important; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide .text-2xl { font-size: 17px !important; font-weight: 600 !important; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide .text-sm, main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide span { color: var(--mute) !important; font-size: 14px; }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide img[src*="star"] { width: 13px; filter: grayscale(1) brightness(2); }
main > section.bg-\[\#0E0E0F\]:not(.items-center) .swiper-slide a { color: #ECE9E2 !important; font-size: 14px !important; text-decoration: none !important; border-bottom: 1px solid var(--line); align-self: flex-start; padding-bottom: 3px; }

/* ---------- why: text + sticky image ---------- */
main > section.xl\:flex-row { display: grid !important; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 7vw, 140px) !important; align-items: start !important; }
main > section.xl\:flex-row > div:first-child { padding: 0 !important; gap: 0 !important; align-items: flex-start !important; }
main > section.xl\:flex-row > div:first-child > h3 { margin-bottom: clamp(50px, 6vw, 100px) !important; }
main > section.xl\:flex-row > div:first-child > p { align-self: stretch !important; margin: 0 0 18px !important; text-align: left !important; max-width: none !important; width: 100%; font-size: 17px !important; line-height: 1.65 !important;
  color: var(--mute) !important; font-weight: 400 !important; }
main > section.xl\:flex-row > div:first-child > p:first-of-type { max-width: none !important; font-size: clamp(28px, 2.9vw, 48px) !important; line-height: 1.1 !important; font-weight: 500 !important;
  letter-spacing: -.03em; color: #0C0C0C !important; margin-bottom: clamp(40px, 5vw, 80px) !important; }
main > section.xl\:flex-row > div:first-child > div { display: block !important; width: 100%; margin-top: clamp(40px, 5vw, 80px); padding-bottom: 0 !important; }
main > section.xl\:flex-row a.rounded-full { display: flex !important; justify-content: space-between; align-items: center; background: none !important; color: #0C0C0C !important; border-radius: 0 !important;
  border-top: 1px solid var(--line); padding: 26px 0 !important; font-size: clamp(20px, 1.9vw, 30px) !important; font-weight: 600 !important; letter-spacing: -.02em; text-align: left !important;
  transition: padding .5s cubic-bezier(.16, 1, .3, 1); }
main > section.xl\:flex-row a.rounded-full:last-child { border-bottom: 1px solid var(--line); }
main > section.xl\:flex-row a.rounded-full::after { content: "\2197"; font-weight: 400; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
main > section.xl\:flex-row a.rounded-full:hover { padding-left: 18px !important; }
main > section.xl\:flex-row a.rounded-full:hover::after { transform: translate(4px, -4px); }
main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] { position: sticky; top: 110px; background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; gap: 28px !important; align-items: stretch !important; }
main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] > img { width: 100%; max-height: none !important; height: 72vh; object-fit: cover; border-radius: 2px !important; }
main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] > div:has(> a) { justify-content: flex-start !important; gap: 22px !important; }
main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] > div:has(> a) img { filter: grayscale(1) brightness(0); opacity: .7; max-height: 34px !important; }
main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] > div:not(:has(> a)) { display: none !important; }
main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] button { max-width: none !important; width: 100%; margin: 0 !important; background: #0C0C0C !important; color: #ECE9E2 !important; padding: 22px !important;
  font-size: 17px; font-weight: 600 !important; transition: background-color .3s, color .3s; }
main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] button:hover { background: #2FDACA !important; color: #0C0C0C !important; }

/* ---------- deals ---------- */
main > section.bg-\[\#0E0E0F\].items-center > div:last-child { max-height: none !important; align-items: stretch !important; gap: clamp(30px, 5vw, 90px) !important; }
main > section.bg-\[\#0E0E0F\].items-center img.rounded-4xl { border-radius: 2px !important; max-width: none !important; min-height: 520px; object-fit: cover; flex: 1.1 !important; }
main > section.bg-\[\#0E0E0F\].items-center .grid { flex: .9 !important; display: flex !important; flex-direction: column; gap: 0 !important; counter-reset: cxd; }
main > section.bg-\[\#0E0E0F\].items-center .box { counter-increment: cxd; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--line); flex-direction: row !important;
  align-items: center !important; gap: 22px !important; padding: 26px 0 !important; overflow: visible !important; }
main > section.bg-\[\#0E0E0F\].items-center .box::before, main > section.bg-\[\#0E0E0F\].items-center .box::after { display: none !important; }
main > section.bg-\[\#0E0E0F\].items-center .box img { width: 30px !important; height: 30px !important; filter: grayscale(1) brightness(2); opacity: .8; }
main > section.bg-\[\#0E0E0F\].items-center .box p { text-align: left !important; font-size: clamp(19px, 1.6vw, 26px) !important; font-weight: 500 !important; letter-spacing: -.02em; }
main > section.bg-\[\#0E0E0F\].items-center button.col-span-2 { margin-top: 30px !important; max-height: none !important; padding: 22px !important; background: #ECE9E2 !important; color: #0C0C0C !important; border-radius: 9999px !important;
  font-size: 17px; font-weight: 600 !important; transition: background-color .3s; }
main > section.bg-\[\#0E0E0F\].items-center button.col-span-2:hover { background: #2FDACA !important; }

/* ---------- form ---------- */
/* left: title, promise, direct contacts, 3-step process (<cx-form-aside>, cine.js) — right: ink request card */
main > section.md\:gap-20 { display: grid !important; grid-template-columns: 1fr minmax(0, 620px); gap: clamp(40px, 6vw, 120px) !important; align-items: start !important; }
main > section.md\:gap-20 > div:first-child { max-width: none !important; }
main > section.md\:gap-20 > div:first-child > p { color: var(--mute) !important; font-size: clamp(18px, 1.4vw, 21px) !important; font-weight: 400 !important; margin-top: 36px; max-width: 32ch; line-height: 1.5; }
main > section.md\:gap-20 > div:first-child > p.md\:hidden { display: none !important; }
cx-form-aside { display: block; margin-top: clamp(50px, 6vw, 90px); }
cx-form-aside .cfa-ph { display: inline-block; font-size: clamp(30px, 3.2vw, 52px); font-weight: 600; letter-spacing: -.035em; line-height: 1; color: #0C0C0C;
  background: linear-gradient(#0C0C0C, #0C0C0C) left bottom / 0 2px no-repeat; padding-bottom: 6px; transition: background-size .6s cubic-bezier(.16, 1, .3, 1); }
cx-form-aside .cfa-ph:hover { background-size: 100% 2px; }
cx-form-aside .cfa-em { display: block; margin-top: 14px; font-size: 18px; color: var(--mute); }
cx-form-aside .cfa-em:hover { color: #0C0C0C; }
cx-form-aside ol { list-style: none; margin: clamp(40px, 5vw, 70px) 0 0; padding: 0; counter-reset: cfa; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
cx-form-aside li { counter-increment: cfa; display: block; padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
cx-form-aside li::before { content: counter(cfa, decimal-leading-zero); display: block; margin-bottom: 18px; color: var(--mute); font-size: 14px; }
@media (max-width: 767px) { cx-form-aside ol { grid-template-columns: 1fr; gap: 0; } cx-form-aside li { padding-bottom: 18px; } }
cx-form-aside li b { display: block; font-weight: 600; }
cx-form-aside li span { color: var(--mute); }

/* the site's form stays (hidden) as the sender behind <cx-wizard> */
main > section.md\:gap-20 > form { display: none !important; }
cx-wizard { grid-column: 2; grid-row: 1; display: block; position: relative; background: #0C0C0C; color: #ECE9E2; border-radius: 6px; padding: clamp(26px, 3vw, 48px);
  box-shadow: 0 40px 80px -40px rgba(12, 12, 12, .55); min-height: 560px; overflow: hidden; }
cx-wizard button { font: inherit; color: inherit; cursor: pointer; }
.wz-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(236, 233, 226, .6); }
.wz-top b { color: #ECE9E2; font-weight: 600; }
.wz-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2FDACA; margin-right: 8px; vertical-align: 1px; animation: cfh-p 2s infinite; }
@keyframes cfh-p { 0% { box-shadow: 0 0 0 0 rgba(47, 218, 202, .6); } 70% { box-shadow: 0 0 0 8px rgba(47, 218, 202, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 218, 202, 0); } }
.wz-bar { height: 2px; margin: 18px 0 34px; background: rgba(236, 233, 226, .14); }
.wz-bar i { display: block; height: 100%; background: #2FDACA; transform-origin: left; transform: scaleX(.33); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
cx-wizard[data-step="4"] .wz-top, cx-wizard[data-step="4"] .wz-bar { visibility: hidden; }
.wz-steps { display: grid; }
.wz-steps > section { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(40px, 0, 0); transition: opacity .45s, transform .7s cubic-bezier(.16, 1, .3, 1), visibility 0s .45s; }
.wz-steps > section.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .1s, transform .8s .1s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
cx-wizard h4 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 28px; }
.wz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-tile { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; min-height: 64px; text-align: left; border-radius: 6px; background: rgba(236, 233, 226, .05);
  border: 1px solid rgba(236, 233, 226, .1); transition: background-color .3s, border-color .3s; }
.wz-tile img, .wz-tile em { flex: none; width: 48px; height: 48px; border-radius: 4px; object-fit: cover; }
.wz-tile em { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 20px; background: rgba(236, 233, 226, .08); color: rgba(236, 233, 226, .6); }
.wz-tile span { font-size: 15px; font-weight: 500; line-height: 1.25; }
.wz-tile:hover { background: rgba(236, 233, 226, .1); border-color: rgba(236, 233, 226, .3); }
.wz-tile.on { background: #ECE9E2; color: #0C0C0C; border-color: #ECE9E2; }
.wz-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.wz-kind button { text-align: left; padding: 22px; border-radius: 6px; border: 1px solid rgba(236, 233, 226, .18); background: transparent; transition: background-color .3s, border-color .3s, color .3s; }
.wz-kind b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.wz-kind span { display: block; margin-top: 6px; font-size: 14px; opacity: .6; }
.wz-kind button:hover { border-color: rgba(236, 233, 226, .5); }
.wz-kind button.on { background: #ECE9E2; color: #0C0C0C; border-color: #ECE9E2; }
.wz-f { display: block; padding: 14px 0 8px; border-bottom: 1px solid rgba(236, 233, 226, .22); transition: border-color .4s; }
.wz-f:focus-within { border-color: #2FDACA; }
.wz-f > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 233, 226, .5); }
.wz-f > span i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; margin-left: 6px; }
.wz-f input { width: 100%; height: 44px; background: transparent; border: 0; outline: none; color: #ECE9E2; font: 500 20px/1 Gilroy, sans-serif; padding: 0; }
.wz-f input::placeholder { color: rgba(236, 233, 226, .28); }
.wz-err { min-height: 22px; margin: 14px 0 0; font-size: 14px; color: #FF8A7A; }
.wz-nav { display: flex; gap: 12px; margin-top: 30px; }
.wz-back { flex: 0 0 auto; height: 64px; padding: 0 26px; border-radius: 9999px; border: 1px solid rgba(236, 233, 226, .25); background: transparent; font-weight: 600; transition: border-color .3s; }
.wz-back:hover { border-color: #ECE9E2; }
.wz-next, .wz-send { flex: 1; display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 10px 0 28px; border-radius: 9999px; border: 0;
  background: #ECE9E2; color: #0C0C0C !important; font-weight: 600; font-size: 17px; transition: background-color .35s; }
.wz-next::after, .wz-send::after { content: "\2192"; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #0C0C0C; color: #ECE9E2;
  font-size: 19px; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.wz-next:hover, .wz-send:hover { background: #2FDACA; }
.wz-next:hover::after, .wz-send:hover::after { transform: rotate(-45deg); }
.wz-send.busy { opacity: .6; pointer-events: none; }
.wz-note { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: rgba(236, 233, 226, .42); }
.wz-done { padding-top: 30px; }
.wz-check { width: 72px; height: 72px; border-radius: 50%; background: #2FDACA; margin-bottom: 30px; position: relative; }
.wz-check::after { content: ""; position: absolute; left: 27px; top: 18px; width: 16px; height: 28px; border: solid #0C0C0C; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.wz-done p { font-size: 18px; line-height: 1.5; color: rgba(236, 233, 226, .7); max-width: 34ch; }
.wz-again { margin-top: 30px; background: none; border: 0; border-bottom: 1px solid rgba(236, 233, 226, .4); padding: 0 0 4px; font-weight: 600; }
@media (max-width: 1023px) { cx-wizard { grid-column: 1; grid-row: auto; } }
@media (max-width: 767px) {
  cx-wizard { margin: 0 calc(-1 * clamp(20px, 4vw, 64px) + 12px); min-height: 0; }
  .wz-tiles { grid-template-columns: 1fr; }
  .wz-tile { min-height: 58px; }
  .wz-kind button { padding: 18px; }
}
@media (max-width: 1023px) { main > section.md\:gap-20 { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  main > section.md\:gap-20 form { margin: 0 calc(-1 * clamp(20px, 4vw, 64px) + 12px); column-gap: 10px !important; }
  main > section.md\:gap-20 form > input { grid-column: 1 / -1; }
  cx-form-head { flex-direction: column; }
}


/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  main > div.hero-section > section:not(#hero) .grid > div.flex { grid-template-columns: 50px 1fr; }
  main > div.hero-section > section:not(#hero) .grid > div.flex p { grid-column: 2; }
  main > section.xl\:flex-row, main > section.md\:gap-20 { grid-template-columns: 1fr; }
  main > section.xl\:flex-row > div.bg-\[\#0E0E0F\] { position: static; }
  main > div.flex.md\:flex-row > img, main > div.flex.md\:flex-row > .cx-ba, main > div.flex.md\:flex-row > div.bg-black { width: 100% !important; min-height: 0; }
  main > div.flex.md\:flex-row > img { height: 60vh !important; }
  main > section.mx-auto:not(.xl\:flex-row) > div:first-child, main > section.bg-white.text-white > div:first-child, main > section.bg-\[\#0E0E0F\]:not(.items-center) > div > div:first-child, main > section.bg-\[\#0E0E0F\].items-center > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  main > section.bg-\[\#0E0E0F\].items-center > div:last-child { flex-direction: column !important; }
  main > section.bg-\[\#0E0E0F\].items-center img.rounded-4xl { min-height: 300px; width: 100%; }
}
@media (max-width: 767px) {
  main > div.hero-section > section:not(#hero)::after, main > section.hero-bg::after, main > section.mx-auto:not(.xl\:flex-row)::after, main > section.bg-white.text-white::after, main > section.bg-\[\#0E0E0F\]:not(.items-center)::after, main > section.xl\:flex-row::after, main > section.bg-\[\#0E0E0F\].items-center::after, main > section.md\:gap-20::after { display: none; }

  main > section.md\:gap-20 form { grid-template-columns: 1fr !important; }
}