/* ==========================================================================
   ONYX Builder — front-end styles
   Colors / fonts come from CSS variables (--ob-primary, --ob-font-heading…)
   set in ONYX Builder > Settings. Breakpoints: tablet ≤1024px, mobile ≤767px.
   ========================================================================== */
:root {
  --ob-ease: cubic-bezier(.2, .8, .2, 1);
  --ob-fire: linear-gradient(100deg, var(--ob-secondary, #e93f39) 0%, var(--ob-primary, #ff7a18) 48%, var(--ob-mid) 78%, var(--ob-accent, #fcef44) 100%);
  --ob-mid: color-mix(in srgb, var(--ob-primary, #ff7a18) 50%, var(--ob-accent, #fcef44));
  --ob-primary-soft: color-mix(in srgb, var(--ob-primary, #ff7a18) 45%, #fff);
  --ob-header-bg: color-mix(in srgb, var(--ob-bg, #060505) 88%, transparent);
  --ob-line1: color-mix(in srgb, var(--ob-glass) 8%, transparent);
  --ob-line2: color-mix(in srgb, var(--ob-glass) 14%, transparent);
  --ob-mute: color-mix(in srgb, var(--ob-text, #f4f1ec) 64%, transparent);
  --ob-faint: color-mix(in srgb, var(--ob-text, #f4f1ec) 42%, transparent);
  --ob-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ob-panel: linear-gradient(180deg, color-mix(in srgb, var(--ob-glass) 5%, transparent), color-mix(in srgb, var(--ob-glass) 1.2%, transparent)), var(--ob-surface, #110e0d);
}

body.ob-page { margin: 0; background: var(--ob-bg, #060505); color: var(--ob-text, #f4f1ec); font-family: var(--ob-font-body); -webkit-font-smoothing: antialiased; }
body.ob-page.ob-layout-theme { background: revert-layer; }
.ob-main, .ob-part, .ob-embed { display: block; width: 100%; color: var(--ob-text, #f4f1ec); font-family: var(--ob-font-body); line-height: 1.6; }
.ob-main *, .ob-part *, .ob-embed * { box-sizing: border-box; }
.ob-main img, .ob-part img, .ob-embed img { max-width: 100%; height: auto; display: block; }
.ob-main a, .ob-part a, .ob-embed a { color: inherit; }
.ob-skip { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 10px 16px; background: #fff; color: #000; }
.ob-skip:focus { left: 10px; top: 10px; }
.ob-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- Layout */
.ob-section { position: relative; isolation: isolate; overflow-x: clip; }
.ob-section.ob-has-fx, .ob-section:has(> .ob-bg-video) { overflow: hidden; }
.ob-section.ob-h-screen { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.ob-container { position: relative; z-index: 1; width: 100%; max-width: var(--ob-container, 1240px); margin: 0 auto; padding: 0 20px; }
.ob-layout-full > .ob-container { max-width: none; }
.ob-layout-narrow > .ob-container { max-width: 860px; }
.ob-row { display: flex; flex-wrap: wrap; gap: var(--ob-gap, 24px); align-items: stretch; }
.ob-col { position: relative; display: flex; flex: 1 1 calc(var(--ob-w, 100%) - var(--ob-gap, 24px)); min-width: 0; }
.ob-col-inner { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; }
.ob-w { position: relative; width: 100%; flex: 0 0 100%; min-width: 0; translate: var(--ob-x, 0) var(--ob-y, 0); }
.ob-overlay { position: absolute; inset: 0; z-index: 0; opacity: .6; pointer-events: none; }
.ob-bg-video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .ob-stack-tablet.ob-reverse > .ob-container > .ob-row { flex-direction: column-reverse; } }
@media (max-width: 767px) { .ob-stack-mobile.ob-reverse > .ob-container > .ob-row { flex-direction: column-reverse; } .ob-container { padding: 0 16px; } }

/* Column cards */
.ob-colcard-glass > .ob-col-inner { padding: 28px; border: 1px solid var(--ob-line1); border-radius: var(--ob-radius, 18px); background: var(--ob-panel); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ob-glass) 5%, transparent), 0 30px 80px rgba(0, 0, 0, .3); }
.ob-colcard-fire > .ob-col-inner { padding: 32px; border-radius: var(--ob-radius, 18px); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ob-glass) 35%, transparent), transparent 45%), linear-gradient(120deg, #e93f39 0%, #ff7a18 45%, #ffc23a 80%, #fcef44 110%); color: var(--ob-on-primary); }
.ob-colcard-fire > .ob-col-inner :is(h1, h2, h3, h4, .ob-heading) { color: var(--ob-on-primary); }
.ob-colcard-outline > .ob-col-inner { padding: 28px; border: 1px solid var(--ob-line2); border-radius: var(--ob-radius, 18px); }

/* --------------------------------------------------------------- Effects */
.ob-fx { position: absolute; z-index: 0; pointer-events: none; }
.ob-fx-ribbons { inset: 0; }
.ob-fx-ribbons.ob-fx-right { left: 30%; } .ob-fx-ribbons.ob-fx-left { right: 30%; }
.ob-fx-ribbons.ob-fx-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.ob-fx-ribbons.ob-fx-left { -webkit-mask-image: linear-gradient(270deg, transparent, #000 30%); mask-image: linear-gradient(270deg, transparent, #000 30%); }
.ob-ribbon-layer { position: absolute; inset: -3%; width: 106%; height: 106%; opacity: 0; transition: opacity 1.4s ease; }
.ob-fx-ribbons.is-ready .ob-ribbon-layer:first-child, .ob-shape-ribbons .is-ready .ob-ribbon-layer:first-child { opacity: 1; }
.is-moving .ob-ribbon-layer { will-change: opacity, transform; animation: obRibbon var(--ob-rdur, 14s) ease-in-out infinite; animation-delay: calc(var(--k) * var(--ob-rdur, 14s) / -3); transition: none; }
.is-paused .ob-ribbon-layer { animation-play-state: paused; }
@keyframes obRibbon { 0% { opacity: 0; transform: translate3d(-1.2%, 1.2%, 0) scale(1.01); } 33% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.03); } 66% { opacity: 0; transform: translate3d(1.2%, -1.2%, 0) scale(1.01); } 100% { opacity: 0; transform: translate3d(-1.2%, 1.2%, 0) scale(1.01); } }
.ob-fx-contour { width: min(70vw, 720px); top: 50%; color: color-mix(in srgb, var(--ob-glass) 50%, transparent); opacity: .35; translate: 0 -50%; }
.ob-fx-contour.ob-fx-right { right: -14%; } .ob-fx-contour.ob-fx-left { left: -14%; } .ob-fx-contour.ob-fx-center, .ob-fx-contour.ob-fx-full { left: 50%; translate: -50% -50%; }
.ob-fx-dots { inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--ob-glass) 12%, transparent) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 70%); }
.ob-fx-glow { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; top: -30%; background: radial-gradient(circle, color-mix(in srgb, var(--ob-primary) 22%, transparent), transparent 62%); }
.ob-fx-glow.ob-fx-right { right: -20%; } .ob-fx-glow.ob-fx-left { left: -20%; } .ob-fx-glow.ob-fx-center, .ob-fx-glow.ob-fx-full { left: 50%; translate: -50% 0; }

/* -------------------------------------------------------------- Headings */
.ob-heading { margin: 0; max-width: none; font-family: var(--ob-font-heading); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: inherit; text-transform: none; text-wrap: balance; overflow-wrap: break-word; }
/* Themes style bare tags (p, li, h2…); builder content keeps its own colors. */
.ob-el .ob-text :is(p, li, ul, ol) { color: inherit; font-size: inherit; line-height: inherit; max-width: none; }
.ob-el :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; }
h1.ob-heading { font-size: clamp(2.5rem, 5.8vw, 5.4rem); font-weight: 700; line-height: 1.02; }
h2.ob-heading { font-size: clamp(2rem, 4vw, 3.5rem); }
h3.ob-heading { font-size: clamp(1.4rem, 2.2vw, 2rem); }
h4.ob-heading { font-size: 1.35rem; } h5.ob-heading { font-size: 1.1rem; } h6.ob-heading { font-size: .95rem; letter-spacing: 0; }
p.ob-heading, div.ob-heading { font-size: 1.2rem; }
.ob-heading a { text-decoration: none; }
.ob-accent { padding-right: .06em; }
.ob-acc-fire-serif .ob-accent, .ob-acc-fire .ob-accent { background: var(--ob-fire); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ob-acc-fire-serif .ob-accent, .ob-acc-serif .ob-accent { font-family: var(--ob-font-accent); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.06em; line-height: .9; }
.ob-acc-color .ob-accent { color: var(--ob-primary); }
.ob-acc-underline .ob-accent { background: var(--ob-fire) left 92% / 100% .12em no-repeat; padding-bottom: .02em; }

/* ------------------------------------------------------------------ Text */
.ob-text { color: var(--ob-mute); font-size: 1.05rem; line-height: 1.65; }
.ob-text > :first-child { margin-top: 0; } .ob-text > :last-child { margin-bottom: 0; }
.ob-text p { margin: 0 0 1em; }
.ob-text a { color: var(--ob-primary); text-underline-offset: 3px; }
.ob-text strong, .ob-text b { color: inherit; font-weight: 700; }
.ob-text ul, .ob-text ol { padding-left: 1.2em; }
.ob-text .ob-accent { color: var(--ob-primary); }
@media (max-width: 767px) { .ob-text { text-align: start; } }

/* --------------------------------------------------------------- Buttons */
.ob-btn-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.ob-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 999px; font-family: var(--ob-font-body); font-weight: 600; letter-spacing: -.005em; line-height: 1; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: transform .35s var(--ob-ease), background .3s ease, border-color .3s ease, box-shadow .35s ease, color .3s ease, filter .3s ease; }
.ob-btn-sm { min-height: 38px; padding: 0 16px; font-size: .84rem; }
.ob-btn-md { min-height: 46px; padding: 0 22px; font-size: .94rem; }
.ob-btn-lg { min-height: 54px; padding: 0 28px; font-size: 1.02rem; }
.ob-btn-xl { min-height: 64px; padding: 0 36px; font-size: 1.12rem; }
.ob-btn .ob-btn-icon { width: 1.05em; height: 1.05em; transition: transform .35s var(--ob-ease); flex: 0 0 auto; }
.ob-btn:hover .ob-btn-icon { transform: translateX(3px); }
.ob-btn:hover { transform: translateY(-2px); }
.ob-btn-fire { background: var(--ob-fire); color: var(--ob-on-primary); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ob-glass) 55%, transparent), inset 0 -2px 6px rgba(150, 30, 0, .35), 0 8px 28px color-mix(in srgb, var(--ob-primary) 32%, transparent); }
.ob-btn-fire:hover { color: var(--ob-on-primary); filter: brightness(1.06) saturate(1.05); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ob-glass) 60%, transparent), inset 0 -2px 6px rgba(150, 30, 0, .35), 0 14px 44px color-mix(in srgb, var(--ob-primary) 48%, transparent); }
.ob-btn-solid { background: var(--ob-primary); color: var(--ob-on-primary); }
.ob-btn-solid:hover { filter: brightness(1.08); }
.ob-btn-outline { border-color: var(--ob-line2); color: var(--ob-text); background: transparent; }
.ob-btn-outline:hover { border-color: var(--ob-primary); color: var(--ob-text); background: color-mix(in srgb, var(--ob-primary) 8%, transparent); }
.ob-btn-ghost { border-color: var(--ob-line2); background: color-mix(in srgb, var(--ob-glass) 5%, transparent); color: var(--ob-text); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ob-glass) 6%, transparent); }
.ob-btn-ghost:hover { background: color-mix(in srgb, var(--ob-glass) 10%, transparent); }
.ob-btn-white { background: #fff; color: #120a06; }
.ob-btn-dark { background: #120a06; color: #fff; }
.ob-btn-dark:hover { background: #000; }
.ob-btn-link { padding-left: 0 !important; padding-right: 0 !important; min-height: 0; background: none; color: var(--ob-primary); border-radius: 0; }
.ob-btn-link:hover { transform: none; }
@media (max-width: 767px) { .ob-btn-xl { min-height: 56px; padding: 0 26px; font-size: 1rem; } }

/* ----------------------------------------------------------------- Badge */
.ob-badge { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; font-family: var(--ob-mono); font-size: .74rem; color: var(--ob-mute); text-transform: lowercase; line-height: 1.3; }
.ob-badge-dot { padding: 7px 13px 7px 11px; border: 1px solid var(--ob-line2); border-radius: 999px; background: color-mix(in srgb, var(--ob-bg) 30%, transparent); }
.ob-badge-fire { padding: 7px 14px; border-radius: 999px; background: var(--ob-fire); color: var(--ob-on-primary); font-weight: 500; }
.ob-badge-fire .ob-dot { background: var(--ob-on-primary); box-shadow: none; }
.ob-badge-line::before { content: ""; width: 34px; height: 1px; background: var(--ob-fire); }
.ob-badge-line .ob-dot, .ob-badge-mono .ob-dot { display: none; }
.ob-badge-line { text-transform: uppercase; letter-spacing: .14em; font-family: var(--ob-font-body); font-weight: 700; font-size: .72rem; color: var(--ob-primary); }
.ob-badge-mono { color: var(--ob-faint); }
.ob-dot { position: relative; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-primary); box-shadow: 0 0 10px var(--ob-primary); }
.ob-badge-dot .ob-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ob-primary); animation: obPulse 2.4s ease-out infinite; }
@keyframes obPulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3); opacity: 0; } }

/* ----------------------------------------------------------------- Image */
.ob-image { margin: 0; }
.ob-image-frame { position: relative; max-width: 100%; overflow: hidden; border-radius: 14px; }
.ob-image-frame img { width: 100%; height: 100%; transition: transform .8s var(--ob-ease), filter .6s ease; }
.ob-fit-cover img { object-fit: cover; } .ob-fit-contain img { object-fit: contain; }
.ob-image-frame[style*="aspect-ratio"] img, .ob-image-frame[style*="height"] img { height: 100%; }
.ob-caption { margin-top: 8px; font-size: .85rem; color: var(--ob-faint); }
.ob-ih-zoom:hover img { transform: scale(1.06); }
.ob-ih-gray img { filter: grayscale(1); } .ob-ih-gray:hover img { filter: none; }
.ob-ih-tilt .ob-image-frame { transition: transform .6s var(--ob-ease); } .ob-ih-tilt:hover .ob-image-frame { transform: perspective(900px) rotateX(4deg) rotateY(-6deg); }
.ob-ih-shine .ob-image-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--ob-glass) 25%, transparent) 50%, transparent 70%); transform: translateX(-100%); transition: transform .9s var(--ob-ease); pointer-events: none; }
.ob-ih-shine:hover .ob-image-frame::after { transform: translateX(100%); }

/* ----------------------------------------------------------------- Video */
.ob-video { position: relative; width: 100%; overflow: hidden; border-radius: 16px; background: #000; }
.ob-video iframe, .ob-video video, .ob-video-cover, .ob-video-cover img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ob-vm-background iframe { pointer-events: none; transform: scale(1.2); }
.ob-video-cover { cursor: pointer; }
.ob-video-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .45), transparent 60%); }
.ob-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; background: var(--ob-fire); color: var(--ob-on-primary); cursor: pointer; box-shadow: 0 0 0 10px color-mix(in srgb, var(--ob-primary) 18%, transparent), 0 20px 50px rgba(0, 0, 0, .4); transition: transform .4s var(--ob-ease); }
.ob-play .ob-icon { width: 30px; height: 30px; margin-left: 4px; }
.ob-video-cover:hover .ob-play { transform: scale(1.08); }

/* ------------------------------------------------------- Spacer / divider */
.ob-spacer { height: 40px; }
.ob-divider { width: 100%; border: 0; border-top: 1px solid var(--ob-line2); }
.ob-divider-dashed { border-top-style: dashed; } .ob-divider-dotted { border-top-style: dotted; }
.ob-divider-fire { border-top-color: transparent !important; height: 2px; border: 0; background: var(--ob-fire); }
.ob-divider-glow { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ob-primary), transparent); box-shadow: 0 0 12px var(--ob-primary); }

/* ------------------------------------------------------------------ Icons */
.ob-icon { width: 1em; height: 1em; display: block; flex: 0 0 auto; }
.ob-icon-wrap { --ob-size: 32px; display: inline-grid; place-items: center; font-size: var(--ob-size); color: var(--ob-primary); line-height: 1; }
.ob-look-circle, .ob-look-square, .ob-look-glass { width: calc(var(--ob-size) * 2); height: calc(var(--ob-size) * 2); font-size: var(--ob-size); background: color-mix(in srgb, var(--ob-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ob-primary) 25%, transparent); }
.ob-look-circle { border-radius: 50%; } .ob-look-square { border-radius: calc(var(--ob-size) * .5); }
.ob-look-glass { border-radius: calc(var(--ob-size) * .5); background: color-mix(in srgb, var(--ob-glass) 5%, transparent); border-color: var(--ob-line2); }
.ob-look-fire { font-size: calc(var(--ob-size) * .9); }
.ob-key { position: relative; z-index: 2; display: grid; place-items: center; width: calc(var(--ob-size, 46px) * 2); height: calc(var(--ob-size, 46px) * 2); border-radius: 28%; color: #2a0d03; background: radial-gradient(120% 120% at 28% 18%, #fff3b0 0%, #ffc23a 22%, #ff7a18 55%, #e93f39 100%); box-shadow: inset 0 2px 1px color-mix(in srgb, var(--ob-glass) 70%, transparent), inset 0 -8px 14px rgba(140, 24, 0, .55), inset 0 0 0 1px color-mix(in srgb, var(--ob-glass) 20%, transparent), 0 18px 40px color-mix(in srgb, var(--ob-secondary) 45%, transparent), 0 0 90px color-mix(in srgb, var(--ob-primary) 50%, transparent); transition: transform .8s var(--ob-ease); }
.ob-key::after { content: ""; position: absolute; inset: 6% 12% auto; height: 38%; border-radius: 40% 40% 50% 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--ob-glass) 45%, transparent), transparent); pointer-events: none; }
.ob-key-face { width: 60%; height: 60%; display: grid; place-items: center; }
.ob-key-face .ob-icon { width: 100%; height: 100%; }
.ob-key-mark { width: 100%; height: 100%; color: #2a0d03; }
.ob-key-mark path { stroke-opacity: .75 !important; stroke-width: 6 !important; }
.ob-key-xl { --ob-size: 60px; }
.ob-w:hover .ob-key, .ob-svc:hover .ob-key { transform: translateY(-6px) rotate(-4deg) scale(1.04); }

/* ------------------------------------------------------------ Feature box */
.ob-iconbox { display: flex; flex-direction: column; gap: 16px; height: 100%; text-decoration: none; color: inherit; }
.ob-ib-left { flex-direction: row; align-items: flex-start; }
.ob-iconbox .ob-icon-wrap { --ob-size: 24px; }
.ob-iconbox-title { margin: 0 0 6px; font-family: var(--ob-font-heading); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ob-text); }
.ob-iconbox-text { margin: 0; color: var(--ob-mute); font-size: .96rem; line-height: 1.6; }
.ob-box-glass { padding: 26px; border: 1px solid var(--ob-line1); border-radius: var(--ob-radius, 18px); background: var(--ob-panel); transition: border-color .4s ease, transform .5s var(--ob-ease); }
.ob-box-outline { padding: 26px; border: 1px solid var(--ob-line2); border-radius: var(--ob-radius, 18px); }
a.ob-box-glass:hover, a.ob-box-outline:hover { border-color: color-mix(in srgb, var(--ob-primary) 40%, transparent); transform: translateY(-4px); }
.ob-iconbox[style*="center"] .ob-icon-wrap, .ob-w[class] .ob-iconbox:where([style]) { align-self: auto; }

/* ------------------------------------------------------------- Icon list */
.ob-iconlist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ob-il-inline { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }
.ob-iconlist li { margin: 0; }
.ob-iconlist li, .ob-iconlist li > a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ob-li-icon { color: var(--ob-primary); font-size: 1.1em; }
.ob-li-text { color: var(--ob-text); }
.ob-il-lines li + li { padding-top: 10px; border-top: 1px solid var(--ob-line1); }

/* ----------------------------------------------------------------- Slider */
.ob-slider { position: relative; height: 560px; overflow: hidden; border-radius: 18px; background: var(--ob-bg); }
.ob-slides, .ob-slide { position: absolute; inset: 0; }
.ob-slide { display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s, transform .9s var(--ob-ease); }
.ob-sfx-slide .ob-slide { transform: translateX(6%); }
.ob-sfx-slide .ob-slide.is-prev { transform: translateX(-6%); }
.ob-sfx-zoom .ob-slide .ob-slide-bg { transform: scale(1.12); transition: transform 7s linear; }
.ob-sfx-zoom .ob-slide.is-active .ob-slide-bg { transform: scale(1); }
.ob-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.ob-slide-bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.ob-slide::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ob-bg) 45%, transparent); }
.ob-slide-content { position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 0 clamp(24px, 6vw, 80px); display: grid; gap: 16px; justify-items: start; }
.ob-slide-content[style*="center"], .ob-slider .ob-slide-content:where(:not([style])) { }
.ob-slide-title { margin: 0; font-family: var(--ob-font-heading); font-weight: 700; font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.ob-slide-text { margin: 0; max-width: 52ch; color: color-mix(in srgb, var(--ob-glass) 78%, transparent); font-size: 1.05rem; }
.ob-slide.is-active .ob-slide-content > * { animation: obRise .9s var(--ob-ease) both; }
.ob-slide.is-active .ob-slide-content > :nth-child(2) { animation-delay: .1s; } .ob-slide.is-active .ob-slide-content > :nth-child(3) { animation-delay: .2s; } .ob-slide.is-active .ob-slide-content > :nth-child(4) { animation-delay: .3s; }
@keyframes obRise { from { opacity: 0; transform: translateY(18px); } }
.ob-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--ob-line2); border-radius: 50%; background: color-mix(in srgb, var(--ob-bg) 70%, transparent); color: #fff; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.ob-arrow .ob-icon { width: 20px; height: 20px; }
.ob-arrow:hover { background: var(--ob-fire); color: var(--ob-on-primary); border-color: transparent; }
.ob-slider > .ob-arrow { position: absolute; top: 50%; z-index: 3; margin-top: -23px; }
.ob-slider > .ob-prev { left: 18px; } .ob-slider > .ob-next { right: 18px; }
.ob-dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.ob-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--ob-glass) 40%, transparent); cursor: pointer; transition: width .4s var(--ob-ease), background .3s; }
.ob-dots button.is-active { width: 28px; background: var(--ob-primary); }
@media (max-width: 767px) { .ob-slider > .ob-arrow { display: none; } }

/* ---------------------------------------------------------------- Gallery */
.ob-gallery { --ob-cols: 3; --ob-gap: 12px; display: grid; grid-template-columns: repeat(var(--ob-cols), minmax(0, 1fr)); gap: var(--ob-gap); }
.ob-gallery-item { position: relative; display: block; overflow: hidden; border-radius: 12px; }
.ob-gallery-media { display: block; overflow: hidden; }
.ob-gallery-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ob-ease), filter .5s ease, opacity .4s ease; }
.ob-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent); font-size: .85rem; color: #fff; }
.ob-gal-masonry { display: block; columns: var(--ob-cols); column-gap: var(--ob-gap); }
.ob-gal-masonry .ob-gallery-item { break-inside: avoid; margin-bottom: var(--ob-gap); }
.ob-gal-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; }
.ob-gal-bento .ob-gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.ob-gal-bento .ob-gallery-item:nth-child(6n+4) { grid-column: span 2; }
.ob-gal-bento .ob-gallery-media { height: 100%; }
.ob-gal-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ob-gal-carousel::-webkit-scrollbar { display: none; }
.ob-gal-carousel .ob-gallery-item { flex: 0 0 calc((100% - (var(--ob-cols) - 1) * var(--ob-gap)) / var(--ob-cols)); scroll-snap-align: start; }
.ob-gh-zoom .ob-gallery-item:hover img { transform: scale(1.06); }
.ob-gh-gray img { filter: grayscale(1); } .ob-gh-gray .ob-gallery-item:hover img { filter: none; }
.ob-gh-dim:hover .ob-gallery-item img { opacity: .45; } .ob-gh-dim .ob-gallery-item:hover img { opacity: 1; }
@media (max-width: 767px) { .ob-gal-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; } }

/* --------------------------------------------------------------- Projects */
.ob-projects-wrap { width: 100%; }
.ob-pfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ob-pfilters button { padding: 9px 16px; border: 1px solid var(--ob-line2); border-radius: 999px; background: color-mix(in srgb, var(--ob-glass) 3%, transparent); color: var(--ob-mute); font: 500 .86rem/1 var(--ob-font-body); cursor: pointer; transition: all .3s ease; }
.ob-pfilters button:hover, .ob-pfilters button.is-active { background: var(--ob-fire); color: var(--ob-on-primary); border-color: transparent; }
@media (max-width: 767px) { .ob-pfilters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .ob-pfilters button { flex: 0 0 auto; white-space: nowrap; } }
.ob-projects { --ob-cols: 3; --ob-gap: 14px; --ob-row: 300px; --ob-shade: .6; display: grid; grid-template-columns: repeat(var(--ob-cols), minmax(0, 1fr)); gap: var(--ob-gap); }
.ob-pcard { position: relative; display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--ob-line1); background: var(--ob-surface); color: #fff; text-decoration: none !important; isolation: isolate; transition: transform .6s var(--ob-ease), border-color .4s ease, box-shadow .5s ease, opacity .4s ease; }
.ob-pcard[hidden] { display: none !important; }
.ob-pcard-media { position: relative; display: block; height: 100%; overflow: hidden; }
.ob-pcard-media img, .ob-pcard-empty { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1s var(--ob-ease), filter .6s ease; }
.ob-pcard-empty { display: grid; place-items: center; color: color-mix(in srgb, var(--ob-primary) 50%, transparent); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--ob-primary) 20%, transparent), #0d0b0a 70%); }
.ob-pcard-empty svg { width: 70%; }
.ob-pcard-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; padding: 20px; }
.ob-pt-overlay .ob-pcard-info, .ob-pt-hover .ob-pcard-info, .ob-pl-bento .ob-pcard-info { background: linear-gradient(0deg, rgba(5, 4, 4, calc(var(--ob-shade) + .2)), transparent); }
.ob-pcard-cat { justify-self: start; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ob-primary) 90%, transparent); color: var(--ob-on-primary); font: 500 .66rem/1.2 var(--ob-mono); text-transform: lowercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-pcard-title { font-family: var(--ob-font-heading); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.ob-pcard-ex { font-size: .88rem; color: color-mix(in srgb, var(--ob-glass) 72%, transparent); line-height: 1.5; }
.ob-pt-below .ob-pcard { background: transparent; border: 0; overflow: visible; }
.ob-pt-below .ob-pcard-media { border-radius: inherit; border: 1px solid var(--ob-line1); }
.ob-pt-below .ob-pcard-info { position: static; padding: 14px 2px 0; }
.ob-pt-below .ob-pcard-title { color: var(--ob-text); }
.ob-pt-hover .ob-pcard-info { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .5s var(--ob-ease); }
.ob-pt-hover .ob-pcard:hover .ob-pcard-info { opacity: 1; transform: none; }
@media (hover: none) { .ob-pt-hover .ob-pcard-info { opacity: 1; transform: none; } }
.ob-ph-zoom .ob-pcard:hover img { transform: scale(1.07); }
.ob-ph-reveal .ob-pcard img { filter: grayscale(1) brightness(.8); } .ob-ph-reveal .ob-pcard:hover img { filter: none; transform: scale(1.04); }
.ob-ph-glow .ob-pcard:hover { border-color: color-mix(in srgb, var(--ob-primary) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ob-primary) 30%, transparent), 0 24px 70px color-mix(in srgb, var(--ob-primary) 20%, transparent); transform: translateY(-4px); }
.ob-ph-tilt .ob-pcard { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out, box-shadow .4s; }
.ob-ph-tilt .ob-pcard:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
/* layouts */
.ob-pl-grid .ob-pcard-media { aspect-ratio: 4/5; }
.ob-pl-masonry { display: block; columns: var(--ob-cols); column-gap: var(--ob-gap); }
.ob-pl-masonry .ob-pcard { break-inside: avoid; margin-bottom: var(--ob-gap); }
.ob-pl-masonry .ob-pcard-media img { height: auto !important; }
.ob-pl-masonry .ob-pcard:nth-child(3n+2) .ob-pcard-media { min-height: 320px; } .ob-pl-masonry .ob-pcard:nth-child(3n+2) .ob-pcard-media img { height: 100% !important; position: absolute; inset: 0; }
.ob-pl-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--ob-row); }
.ob-bs-3 { grid-column: span 3; } .ob-bs-4 { grid-column: span 4; } .ob-bs-5 { grid-column: span 5; } .ob-bs-6 { grid-column: span 6; } .ob-bs-7 { grid-column: span 7; } .ob-bs-12 { grid-column: span 12; }
@media (max-width: 1024px) { .ob-pl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ob-pl-bento .ob-pcard { grid-column: span 1; } .ob-pl-bento .ob-pcard.ob-bfull { grid-column: span 2; } }
@media (max-width: 767px) { .ob-pl-bento .ob-pcard-title { font-size: .98rem; } .ob-pl-bento .ob-pcard-info { padding: 12px; } }
.ob-pl-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.ob-pl-carousel::-webkit-scrollbar { display: none; }
.ob-pl-carousel .ob-pcard { flex: 0 0 calc((100% - (var(--ob-cols) - 1) * var(--ob-gap)) / var(--ob-cols)); scroll-snap-align: start; }
.ob-pnav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* cover-flow */
.ob-pl-coverflow { display: block; position: relative; height: clamp(360px, 46vw, 560px); perspective: 1400px; overflow: hidden; }
.ob-pl-coverflow .ob-pcard { position: absolute; left: 50%; top: 50%; width: clamp(220px, 28vw, 360px); translate: -50% -50%; transition: transform .8s var(--ob-ease), opacity .6s ease, filter .6s ease; cursor: pointer; }
.ob-pl-coverflow .ob-pcard-media { aspect-ratio: 3/4; }
.ob-pl-coverflow .ob-pcard.is-active { border-color: color-mix(in srgb, var(--ob-primary) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ob-primary) 40%, transparent), 0 30px 90px color-mix(in srgb, var(--ob-primary) 25%, transparent); }
/* list */
.ob-pl-list { display: block; border-top: 1px solid var(--ob-line1); }
.ob-prow { position: relative; display: grid; grid-template-columns: 48px 1fr auto 44px; align-items: center; gap: 20px; padding: 24px 6px; border-bottom: 1px solid var(--ob-line1); text-decoration: none !important; color: var(--ob-text); transition: padding .5s var(--ob-ease), color .3s; }
.ob-prow[hidden] { display: none; }
.ob-prow-num { font: .76rem var(--ob-mono); color: var(--ob-faint); }
.ob-prow .ob-pcard-title { color: inherit; font-size: clamp(1.4rem, 3.4vw, 2.8rem); }
.ob-prow .ob-pcard-cat { background: none; color: var(--ob-faint); padding: 0; }
.ob-prow-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ob-line2); border-radius: 50%; transition: all .4s var(--ob-ease); }
.ob-prow-arrow .ob-icon { width: 16px; height: 16px; }
.ob-prow:hover { padding-left: 20px; }
.ob-prow:hover .ob-prow-arrow { background: var(--ob-fire); color: var(--ob-on-primary); border-color: transparent; transform: rotate(45deg); }
.ob-prow-img { position: fixed; left: 0; top: 0; z-index: 50; width: 300px; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(var(--px, -999px), var(--py, -999px)) translate(-50%, -50%) scale(.85) rotate(-4deg); transition: opacity .3s ease, transform .35s var(--ob-ease); }
.ob-prow-img img { width: 100%; height: 100% !important; object-fit: cover; }
.ob-prow:hover .ob-prow-img { opacity: 1; transform: translate(var(--px, -999px), var(--py, -999px)) translate(-50%, -50%) scale(1) rotate(-4deg); }
@media (hover: none), (max-width: 767px) { .ob-prow { grid-template-columns: 34px 1fr 36px; } .ob-prow .ob-pcard-cat { display: none; } .ob-prow-img { display: none; } .ob-prow-arrow { width: 36px; height: 36px; } }
/* stack */
.ob-pl-stack { display: block; }
.ob-pl-stack .ob-pcard { position: sticky; top: calc(90px + var(--i, 0) * 18px); height: min(72vh, 620px); margin-bottom: 24px; box-shadow: 0 -20px 60px rgba(0, 0, 0, .45); }
.ob-pl-stack .ob-pcard-title { font-size: clamp(1.6rem, 4vw, 3.2rem); }
.ob-pl-stack .ob-pcard-info { padding: clamp(20px, 4vw, 44px); background: linear-gradient(0deg, color-mix(in srgb, var(--ob-bg) 85%, transparent), transparent); }
/* showcase */
.ob-pl-showcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ob-show-main { height: clamp(320px, 52vw, 620px); }
.ob-show-main .ob-pcard-info { padding: clamp(20px, 4vw, 44px); background: linear-gradient(0deg, color-mix(in srgb, var(--ob-bg) 85%, transparent), transparent); }
.ob-show-main .ob-pcard-title { font-size: clamp(1.6rem, 4vw, 3rem); }
.ob-show-main img { transition: opacity .4s ease, transform 1s var(--ob-ease); }
.ob-show-main.is-swapping img { opacity: 0; transform: scale(1.03); }
.ob-show-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.ob-show-thumb { position: relative; flex: 0 0 clamp(120px, 16vw, 190px); aspect-ratio: 4/3; padding: 0; overflow: hidden; border: 1px solid var(--ob-line1); border-radius: 12px; background: var(--ob-surface); cursor: pointer; opacity: .55; transition: opacity .3s, border-color .3s; }
.ob-show-thumb img { width: 100%; height: 100% !important; object-fit: cover; }
.ob-show-thumb span { position: absolute; left: 8px; right: 8px; bottom: 6px; font-size: .72rem; color: #fff; text-align: left; text-shadow: 0 1px 6px #000; }
.ob-show-thumb.is-active, .ob-show-thumb:hover { opacity: 1; border-color: var(--ob-primary); }
.ob-pmore { display: flex; justify-content: center; margin-top: 24px; }

/* ----------------------------------------------------- Service card (ONYX) */
.ob-svc { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--ob-line1); border-radius: var(--ob-radius, 18px); background: var(--ob-panel); transition: border-color .4s ease, transform .6s var(--ob-ease); }
.ob-svc.is-play { border-color: color-mix(in srgb, var(--ob-primary) 35%, transparent); transform: translateY(-4px); }
.ob-svc-viz { position: relative; height: 250px; overflow: hidden; border-bottom: 1px solid var(--ob-line1); background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--ob-primary) 7%, transparent), transparent 70%); }
.ob-svc-viz::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--ob-primary) 14%, transparent), transparent 70%); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ob-svc.is-play .ob-svc-viz::after { opacity: 1; }
.ob-svc-body { position: relative; display: grid; align-content: start; gap: 6px; padding: 24px 26px 26px; }
.ob-svc-num { font: .72rem var(--ob-mono); color: var(--ob-faint); }
.ob-svc-body h3 { margin: 0; font-family: var(--ob-font-heading); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ob-text); }
.ob-svc-body p { margin: 0 0 14px; color: var(--ob-mute); font-size: .94rem; line-height: 1.6; }
.ob-svc-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ob-line1); color: var(--ob-mute); font-size: .88rem; font-weight: 600; text-decoration: none !important; }
a.ob-svc-link::after { content: ""; position: absolute; inset: -600px 0 0; }
.ob-svc-arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ob-line2); border-radius: 50%; transition: all .45s var(--ob-ease); }
.ob-svc-arrow .ob-icon { width: 14px; height: 14px; }
.ob-svc.is-play .ob-svc-arrow { background: var(--ob-fire); border-color: transparent; color: var(--ob-on-primary); transform: rotate(45deg); }
.ob-svc .oba-art, .ob-svc .oba-art * { box-sizing: border-box; }
.oba-art { position: absolute; inset: 0; display: grid; place-items: center; }
@keyframes obHead { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ---------------------------------------------------------------- Counter */
.ob-counter { position: relative; display: grid; gap: 6px; height: 100%; }
.ob-counter.ob-box-glass, .ob-counter.ob-box-outline { padding: 26px 28px 40px; }
.ob-counter-num { font-family: var(--ob-font-heading); font-size: clamp(2.6rem, 4.6vw, 4rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--ob-text); font-variant-numeric: tabular-nums; }
.ob-counter-label { font: .76rem var(--ob-mono); color: var(--ob-mute); text-transform: lowercase; }
.ob-counter-bar { position: absolute; left: 28px; right: 28px; bottom: 22px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ob-glass) 7%, transparent); overflow: hidden; }
.ob-counter-bar::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--ob-fire); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ob-ease) .2s; }
.ob-counter.is-in .ob-counter-bar::after { transform: scaleX(1); }
.ob-box-none .ob-counter-bar { left: 0; right: 0; bottom: -10px; }

/* ---------------------------------------------------------------- Marquee */
.ob-mq { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ob-mq-track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.ob-mq-item { flex: 0 0 auto; display: grid; place-items: center; width: 180px; height: 84px; padding: 14px 20px; border-radius: 14px; text-decoration: none !important; transition: transform .4s var(--ob-ease); }
.ob-mq-item img { max-width: 100%; max-height: 100%; width: auto; height: auto !important; object-fit: contain; transition: filter .4s ease, opacity .4s ease; }
.ob-mq-text { font: 800 .9rem/1 var(--ob-font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--ob-text); white-space: nowrap; }
.ob-mq-dark .ob-mq-item { border: 1px solid var(--ob-line1); background: var(--ob-panel); }
.ob-mq-light .ob-mq-item { background: #fff; } .ob-mq-light .ob-mq-text { color: #111; }
.ob-mqc-gray img { filter: grayscale(1); opacity: .8; }
.ob-mqc-gray-hover img { filter: grayscale(1); opacity: .75; } .ob-mqc-gray-hover .ob-mq-item:hover img { filter: none; opacity: 1; }
.ob-mqc-white img { filter: brightness(0) invert(1); opacity: .85; }
.ob-mq-item:hover { transform: translateY(-3px); }

/* ---------------------------------------------------------------- Shapes */
.ob-shape { width: 320px; max-width: 100%; color: color-mix(in srgb, var(--ob-glass) 55%, transparent); }
.ob-shape svg { width: 100%; height: auto; }
.ob-shape-motion svg { animation: obSpin 60s linear infinite; }
@keyframes obSpin { to { transform: rotate(360deg); } }
.ob-shape-key { display: grid; place-items: center; aspect-ratio: 1; }
.ob-shape-key.ob-shape-motion .ob-key { animation: obFloat 6s ease-in-out infinite; }
@keyframes obFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.ob-shape-orb { aspect-ratio: 1; display: grid; place-items: center; }
.ob-shape-orb span { width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff3b0, #ffc23a 20%, #ff7a18 50%, #e93f39 80%); box-shadow: 0 0 120px color-mix(in srgb, var(--ob-primary) 60%, transparent), inset -20px -30px 60px rgba(120, 20, 0, .6); filter: saturate(1.1); }
.ob-shape-orb.ob-shape-motion span { animation: obFloat 7s ease-in-out infinite; }
.ob-shape-ribbons { position: relative; width: 100%; height: 360px; }
.ob-shape-ribbons .ob-fx-ribbons { position: absolute; inset: 0; }

/* ------------------------------------------------------------------- Card */
.ob-card { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; overflow: hidden; border-radius: var(--ob-radius, 18px); isolation: isolate; }
.ob-card-body { position: relative; z-index: 2; display: grid; gap: 4px; padding: clamp(26px, 4vw, 46px); }
.ob-card-label { font: .74rem var(--ob-mono); text-transform: lowercase; opacity: .7; }
.ob-card-title { margin: 6px 0 10px; font-family: var(--ob-font-heading); font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }
.ob-card-text { margin: 0 0 20px; max-width: 54ch; font-size: .98rem; line-height: 1.6; }
.ob-card-fire { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ob-glass) 35%, transparent), transparent 45%), linear-gradient(120deg, #e93f39 0%, #ff7a18 45%, #ffc23a 80%, #fcef44 110%); color: var(--ob-on-primary); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ob-glass) 50%, transparent), 0 30px 90px color-mix(in srgb, var(--ob-primary) 22%, transparent); }
.ob-card-fire .ob-card-text { color: rgba(23, 11, 4, .75); }
.ob-card-fire .ob-accent { font-family: var(--ob-font-accent); font-style: italic; font-weight: 400; }
.ob-card-glass { border: 1px solid var(--ob-line1); background: var(--ob-panel); }
.ob-card-glass .ob-card-text, .ob-card-outline .ob-card-text { color: var(--ob-mute); }
.ob-card-glass .ob-accent, .ob-card-outline .ob-accent, .ob-card-image .ob-accent { background: var(--ob-fire); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--ob-font-accent); font-style: italic; font-weight: 400; }
.ob-card-outline { border: 1px solid var(--ob-line2); }
.ob-card-image { min-height: 380px; justify-content: flex-end; color: #fff; }
.ob-card-image .ob-card-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100% !important; object-fit: cover; }
.ob-card-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--ob-bg) 85%, transparent), color-mix(in srgb, var(--ob-bg) 10%, transparent)); }
.ob-card-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* -------------------------------------------------------------- Accordion */
.ob-acc { display: grid; gap: 10px; }
.ob-acc-item { border: 1px solid var(--ob-line1); border-radius: 14px; background: var(--ob-panel); overflow: hidden; transition: border-color .3s; }
.ob-acc-item.is-open { border-color: color-mix(in srgb, var(--ob-primary) 35%, transparent); }
.ob-acc-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 22px; border: 0; background: none; color: var(--ob-text); font: 600 1.05rem/1.3 var(--ob-font-heading); text-align: start; cursor: pointer; }
.ob-acc-icon { position: relative; flex: 0 0 26px; height: 26px; border: 1px solid var(--ob-line2); border-radius: 50%; color: var(--ob-primary); }
.ob-acc-icon::before, .ob-acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: currentColor; transition: transform .4s var(--ob-ease); }
.ob-acc-icon::after { transform: rotate(90deg); }
.ob-acc-item.is-open .ob-acc-icon::after { transform: rotate(0); }
.ob-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ob-ease); }
.ob-acc-item.is-open .ob-acc-body { grid-template-rows: 1fr; }
.ob-acc-inner { overflow: hidden; padding: 0 22px; color: var(--ob-mute); }
.ob-acc-item.is-open .ob-acc-inner { padding-bottom: 20px; }
.ob-acc-inner p { margin: 0 0 .8em; }

/* ------------------------------------------------------------------- Tabs */
.ob-tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ob-tab-btn { padding: 10px 18px; border: 1px solid var(--ob-line2); border-radius: 999px; background: none; color: var(--ob-mute); font: 600 .92rem/1 var(--ob-font-body); cursor: pointer; transition: all .3s ease; }
.ob-tab-btn.is-active { background: var(--ob-fire); color: var(--ob-on-primary); border-color: transparent; }
.ob-tabs-line .ob-tab-list { gap: 26px; border-bottom: 1px solid var(--ob-line1); }
.ob-tabs-line .ob-tab-btn { padding: 12px 0; border: 0; border-radius: 0; border-bottom: 2px solid transparent; }
.ob-tabs-line .ob-tab-btn.is-active { background: none; color: var(--ob-text); border-bottom-color: var(--ob-primary); }
.ob-tabs-vertical { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 28px; }
.ob-tabs-vertical .ob-tab-list { flex-direction: column; }
.ob-tabs-vertical .ob-tab-btn { border-radius: 12px; text-align: start; }
@media (max-width: 767px) { .ob-tabs-vertical { grid-template-columns: 1fr; } .ob-tabs-vertical .ob-tab-list { flex-direction: row; overflow-x: auto; } }
.ob-tab-panel { color: var(--ob-mute); animation: obRise .5s var(--ob-ease); }

/* ----------------------------------------------------------- Testimonials */
.ob-testi { --ob-cols: 2; display: grid; grid-template-columns: repeat(var(--ob-cols), minmax(0, 1fr)); gap: 16px; }
.ob-testi-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ob-testi-carousel::-webkit-scrollbar { display: none; }
.ob-testi-carousel .ob-testi-item { flex: 0 0 calc((100% - (var(--ob-cols) - 1) * 16px) / var(--ob-cols)); scroll-snap-align: start; }
.ob-testi-item { margin: 0; display: grid; align-content: space-between; gap: 22px; padding: 28px; border: 1px solid var(--ob-line1); border-radius: var(--ob-radius, 18px); background: var(--ob-panel); }
.ob-stars { display: flex; gap: 3px; color: var(--ob-primary); }
.ob-stars .ob-icon { width: 16px; height: 16px; }
.ob-testi-quote { margin: 0; font-family: var(--ob-font-heading); font-size: 1.2rem; line-height: 1.45; letter-spacing: -.01em; color: var(--ob-text); }
.ob-testi-item figcaption { display: flex; align-items: center; gap: 12px; }
.ob-testi-img { width: 46px !important; height: 46px !important; border-radius: 50%; object-fit: cover; }
.ob-testi-item figcaption span { display: grid; }
.ob-testi-item small { color: var(--ob-faint); }

/* ------------------------------------------------------------------- Form */
.ob-form { width: 100%; }
.ob-form-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.ob-field { display: grid; gap: 7px; flex: 0 0 100%; min-width: 0; }
.ob-half { flex: 1 1 calc(50% - 7px); }
@media (max-width: 767px) { .ob-half { flex-basis: 100%; } }
.ob-form label { font: .74rem var(--ob-mono); color: var(--ob-mute); text-transform: lowercase; }
.ob-form label span { color: var(--ob-primary); }
.ob-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) { width: 100%; padding: 14px 16px; border: 1px solid var(--ob-line2); border-radius: 12px; background: color-mix(in srgb, var(--ob-glass) 3.5%, transparent); color: var(--ob-text); font: 1rem/1.4 var(--ob-font-body); transition: border-color .3s, box-shadow .3s; }
.ob-form select option { color: #111; }
.ob-form :is(input, textarea, select):focus { outline: none; border-color: color-mix(in srgb, var(--ob-primary) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-primary) 14%, transparent); }
.ob-form [aria-invalid="true"] { border-color: #ff5a4f !important; }
.ob-check { display: flex !important; align-items: center; gap: 10px; font: .95rem var(--ob-font-body) !important; text-transform: none !important; color: var(--ob-text) !important; }
.ob-check input { width: 18px; height: 18px; accent-color: var(--ob-primary); }
.ob-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.ob-form-msg { margin: 0; font-size: .92rem; color: var(--ob-mute); }
.ob-form-msg.is-ok { color: #7ee2a8; } .ob-form-msg.is-err { color: #ff8a80; }
.ob-form.is-busy button[type="submit"] { opacity: .6; pointer-events: none; }
.ob-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ob-form-inline { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ob-glass) 92%, transparent); max-width: 560px; }
.ob-form-inline .ob-form-grid { flex: 1; gap: 0; }
.ob-form-inline .ob-field { gap: 0; }
.ob-form-inline :is(input, select) { border: 0 !important; background: transparent !important; color: var(--ob-on-primary) !important; box-shadow: none !important; padding: 12px 16px !important; }
.ob-form-inline input::placeholder { color: rgba(23, 11, 4, .5); }
.ob-form-inline .ob-form-foot { margin: 0; }
.ob-form-inline .ob-form-msg { position: absolute; margin-top: 70px; }
.ob-form-inline { position: relative; }
@media (max-width: 767px) { .ob-form-inline { flex-direction: column; align-items: stretch; border-radius: 18px; } .ob-form-inline .ob-btn { width: 100%; } }

/* ------------------------------------------------------- Map & social */
.ob-map { height: 380px; overflow: hidden; border-radius: 16px; border: 1px solid var(--ob-line1); }
.ob-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.ob-map-dark iframe { filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.9); }
.ob-social { --ob-size: 38px; display: flex; flex-wrap: wrap; gap: 8px; }
.ob-social a { display: grid; place-items: center; width: var(--ob-size); height: var(--ob-size); color: var(--ob-text); text-decoration: none; transition: background .3s, border-color .3s, transform .3s var(--ob-ease), color .3s; }
.ob-social .ob-icon { width: 45%; height: 45%; }
.ob-so-square a { border: 1px solid var(--ob-line2); border-radius: 10px; background: color-mix(in srgb, var(--ob-glass) 3%, transparent); }
.ob-so-circle a { border: 1px solid var(--ob-line2); border-radius: 50%; background: color-mix(in srgb, var(--ob-glass) 3%, transparent); }
.ob-so-plain a .ob-icon { width: 70%; height: 70%; }
.ob-social a:hover { transform: translateY(-2px); border-color: transparent; background: var(--ob-fire); color: var(--ob-on-primary); }
.ob-so-plain a:hover { background: none; color: var(--ob-primary); }

/* ------------------------------------------------------------------- Menu */
.ob-menu { position: relative; display: flex; align-items: center; width: 100%; }
.ob-menu-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.ob-menu-list > li { position: relative; margin: 0; }
.ob-menu-list a { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: var(--mn-py, 8px) var(--mn-px, 12px); border-radius: 999px; color: var(--ob-mute); font: 500 .92rem/1.2 var(--ob-font-body); text-decoration: none !important; transition: color .25s, background .25s, transform .25s, text-shadow .25s; }
.ob-menu-list a:hover, .ob-menu-list .is-current > a { color: var(--ob-text); }
.ob-mh-pill .ob-menu-list a:hover { background: var(--mn-hbg, color-mix(in srgb, var(--ob-primary) 12%, transparent)); color: var(--ob-primary); }
.ob-mh-glow .ob-menu-list a:hover { color: var(--ob-primary); text-shadow: 0 0 14px var(--ob-primary); }
.ob-mh-lift .ob-menu-list a:hover { transform: translateY(-2px); color: var(--ob-primary); }
.ob-mh-underline .ob-menu-list > li > a::before { content: ""; position: absolute; left: var(--mn-px, 12px); right: var(--mn-px, 12px); bottom: 3px; height: 2px; border-radius: 2px; background: var(--ob-fire, var(--ob-primary)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ob-ease); }
.ob-mh-underline .ob-menu-list > li > a:hover::before { transform: scaleX(1); }
.ob-mcta .ob-menu-list > li:last-child > a { background: var(--mn-cta-bg, var(--ob-fire, var(--ob-primary))); color: var(--mn-cta-color, var(--ob-on-primary, #160b05)); font-weight: 700; padding-left: calc(var(--mn-px, 12px) + 8px); padding-right: calc(var(--mn-px, 12px) + 8px); }
.ob-mcta .ob-menu-list > li:last-child > a::after { display: none; }
.ob-mv .ob-menu-list { flex-direction: column; align-items: stretch; }
.ob-act-dot .is-current > a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ob-primary); box-shadow: 0 0 8px var(--ob-primary); }
.ob-act-underline .is-current > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ob-fire); }
.ob-act-pill .is-current > a { background: color-mix(in srgb, var(--ob-primary) 12%, transparent); color: var(--ob-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ob-primary) 40%, transparent); }
.ob-sub-ic { width: 14px; height: 14px; }
.ob-submenu { position: absolute; left: 0; top: 100%; z-index: 50; min-width: 220px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--ob-line1); border-radius: 14px; background: color-mix(in srgb, var(--ob-bg) 97%, transparent); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .25s ease; }
.has-sub:hover > .ob-submenu, .has-sub:focus-within > .ob-submenu { opacity: 1; visibility: visible; transform: none; }
.ob-submenu a { display: flex; width: 100%; border-radius: 10px; }
.ob-burger { display: none; position: relative; z-index: 102; width: var(--mn-size, 44px); height: var(--mn-size, 44px); margin-left: auto; padding: 0; border: 1px solid var(--mn-bd, var(--ob-line2)); border-radius: var(--mn-r, 12px); background: var(--mn-bg, color-mix(in srgb, var(--ob-glass) 4%, transparent)); color: var(--ob-primary); cursor: pointer; font: 600 .85rem/1 var(--ob-font-body); }
.ob-burger span { position: absolute; left: 25%; right: 25%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ob-ease), opacity .25s; }
.ob-burger span:nth-child(1) { top: calc(50% - 7px); } .ob-burger span:nth-child(2) { top: calc(50% - 1px); } .ob-burger span:nth-child(3) { top: calc(50% + 5px); }
.ob-menu.is-open .ob-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .ob-menu.is-open .ob-burger span:nth-child(2) { opacity: 0; } .ob-menu.is-open .ob-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.ob-burger-t { display: none; font-style: normal; }
.ob-bl-dots .ob-burger span { left: calc(50% - 2px); right: auto; width: 4px; height: 4px; border-radius: 50%; }
.ob-bl-dots .ob-burger span:nth-child(1) { top: calc(50% - 9px); } .ob-bl-dots .ob-burger span:nth-child(2) { top: calc(50% - 2px); } .ob-bl-dots .ob-burger span:nth-child(3) { top: calc(50% + 5px); }
.ob-bl-dots.is-open .ob-burger span { transform: none; opacity: 1; }
.ob-bl-text .ob-burger { width: auto; min-width: var(--mn-size, 44px); padding: 0 18px; }
.ob-bl-text .ob-burger span { display: none; } .ob-bl-text .ob-burger-t { display: inline; }
@media (max-width: 1024px) { .ob-bp-tablet .ob-burger { display: block; }
.ob-bp-tablet .ob-menu-list { position: fixed; z-index: 101; left: 16px; top: 72px; width: calc(100vw - 32px); max-width: 420px; max-height: calc(100vh - 100px); flex-direction: column; flex-wrap: nowrap; justify-content: flex-start !important; align-items: stretch; gap: var(--mp-gap, 4px); margin: 0; padding: var(--mp-pad, 14px); border: 1px solid var(--mp-border, var(--ob-line2)); border-radius: var(--mp-radius, 18px); background: var(--mp-bg, color-mix(in srgb, var(--ob-bg, #0b0908) 98%, transparent)); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ob-ease), transform .3s var(--ob-ease), visibility .3s; overflow-y: auto; scrollbar-width: none; }
.ob-bp-tablet .ob-menu-list::-webkit-scrollbar { display: none; }
.ob-bp-tablet.is-open .ob-menu-list { opacity: 1; visibility: visible; transform: none; }
.ob-bp-tablet.ob-ms-fullscreen .ob-menu-list { left: 0; top: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; border: 0; border-radius: 0; padding: 90px 24px 40px; justify-content: center !important; }
.ob-bp-tablet.ob-ms-inline { flex-wrap: wrap; }
.ob-bp-tablet.ob-ms-inline .ob-menu-list { position: static; order: 3; width: 100%; max-width: none; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; overflow: hidden; transition: max-height .4s var(--ob-ease), padding .3s; }
.ob-bp-tablet.ob-ms-inline.is-open .ob-menu-list { max-height: 80vh; padding: var(--mp-pad, 14px); border-width: 1px; overflow-y: auto; }
.ob-bp-tablet .ob-menu-list > li { width: 100%; }
.ob-bp-tablet .ob-menu-list a { display: flex; justify-content: var(--mp-align, flex-start); width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 12px; font-size: var(--mp-size, 17px); color: var(--mp-color, var(--ob-text, #f4f1ec)); background: transparent; transform: none; text-shadow: none; }
.ob-bp-tablet .ob-menu-list a:hover { color: var(--mp-hover, var(--ob-primary)); background: var(--mn-hbg, color-mix(in srgb, var(--ob-primary) 8%, transparent)); }
.ob-bp-tablet .ob-menu-list .is-current > a { color: var(--mp-active, var(--ob-primary)); }
.ob-bp-tablet .ob-menu-list a::after, .ob-bp-tablet .ob-menu-list a::before { display: none !important; }
.ob-bp-tablet.ob-mcta .ob-menu-list > li:last-child > a { justify-content: center; color: var(--mn-cta-color, var(--ob-on-primary, #160b05)); }
.ob-bp-tablet .ob-submenu { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; } }
/* burger chosen by the script: "Automatic" (links no longer fit) or "At a screen width I choose" */
.ob-bp-auto.ob-fb .ob-burger { display: block; }
.ob-bp-auto.ob-fb .ob-menu-list { position: fixed; z-index: 101; left: 16px; top: 72px; width: calc(100vw - 32px); max-width: 420px; max-height: calc(100vh - 100px); flex-direction: column; flex-wrap: nowrap; justify-content: flex-start !important; align-items: stretch; gap: var(--mp-gap, 4px); margin: 0; padding: var(--mp-pad, 14px); border: 1px solid var(--mp-border, var(--ob-line2)); border-radius: var(--mp-radius, 18px); background: var(--mp-bg, color-mix(in srgb, var(--ob-bg, #0b0908) 98%, transparent)); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ob-ease), transform .3s var(--ob-ease), visibility .3s; overflow-y: auto; scrollbar-width: none; }
.ob-bp-auto.ob-fb .ob-menu-list::-webkit-scrollbar { display: none; }
.ob-bp-auto.ob-fb.is-open .ob-menu-list { opacity: 1; visibility: visible; transform: none; }
.ob-bp-auto.ob-fb.ob-ms-fullscreen .ob-menu-list { left: 0; top: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; border: 0; border-radius: 0; padding: 90px 24px 40px; justify-content: center !important; }
.ob-bp-auto.ob-fb.ob-ms-inline { flex-wrap: wrap; }
.ob-bp-auto.ob-fb.ob-ms-inline .ob-menu-list { position: static; order: 3; width: 100%; max-width: none; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; overflow: hidden; transition: max-height .4s var(--ob-ease), padding .3s; }
.ob-bp-auto.ob-fb.ob-ms-inline.is-open .ob-menu-list { max-height: 80vh; padding: var(--mp-pad, 14px); border-width: 1px; overflow-y: auto; }
.ob-bp-auto.ob-fb .ob-menu-list > li { width: 100%; }
.ob-bp-auto.ob-fb .ob-menu-list a { display: flex; justify-content: var(--mp-align, flex-start); width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 12px; font-size: var(--mp-size, 17px); color: var(--mp-color, var(--ob-text, #f4f1ec)); background: transparent; transform: none; text-shadow: none; }
.ob-bp-auto.ob-fb .ob-menu-list a:hover { color: var(--mp-hover, var(--ob-primary)); background: var(--mn-hbg, color-mix(in srgb, var(--ob-primary) 8%, transparent)); }
.ob-bp-auto.ob-fb .ob-menu-list .is-current > a { color: var(--mp-active, var(--ob-primary)); }
.ob-bp-auto.ob-fb .ob-menu-list a::after, .ob-bp-auto.ob-fb .ob-menu-list a::before { display: none !important; }
.ob-bp-auto.ob-fb.ob-mcta .ob-menu-list > li:last-child > a { justify-content: center; color: var(--mn-cta-color, var(--ob-on-primary, #160b05)); }
.ob-bp-auto.ob-fb .ob-submenu { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; }

@media (max-width: 767px) { .ob-bp-mobile .ob-burger { display: block; }
.ob-bp-mobile .ob-menu-list { position: fixed; z-index: 101; left: 16px; top: 72px; width: calc(100vw - 32px); max-width: 420px; max-height: calc(100vh - 100px); flex-direction: column; flex-wrap: nowrap; justify-content: flex-start !important; align-items: stretch; gap: var(--mp-gap, 4px); margin: 0; padding: var(--mp-pad, 14px); border: 1px solid var(--mp-border, var(--ob-line2)); border-radius: var(--mp-radius, 18px); background: var(--mp-bg, color-mix(in srgb, var(--ob-bg, #0b0908) 98%, transparent)); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ob-ease), transform .3s var(--ob-ease), visibility .3s; overflow-y: auto; scrollbar-width: none; }
.ob-bp-mobile .ob-menu-list::-webkit-scrollbar { display: none; }
.ob-bp-mobile.is-open .ob-menu-list { opacity: 1; visibility: visible; transform: none; }
.ob-bp-mobile.ob-ms-fullscreen .ob-menu-list { left: 0; top: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; border: 0; border-radius: 0; padding: 90px 24px 40px; justify-content: center !important; }
.ob-bp-mobile.ob-ms-inline { flex-wrap: wrap; }
.ob-bp-mobile.ob-ms-inline .ob-menu-list { position: static; order: 3; width: 100%; max-width: none; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; overflow: hidden; transition: max-height .4s var(--ob-ease), padding .3s; }
.ob-bp-mobile.ob-ms-inline.is-open .ob-menu-list { max-height: 80vh; padding: var(--mp-pad, 14px); border-width: 1px; overflow-y: auto; }
.ob-bp-mobile .ob-menu-list > li { width: 100%; }
.ob-bp-mobile .ob-menu-list a { display: flex; justify-content: var(--mp-align, flex-start); width: 100%; box-sizing: border-box; padding: 13px 16px; border-radius: 12px; font-size: var(--mp-size, 17px); color: var(--mp-color, var(--ob-text, #f4f1ec)); background: transparent; transform: none; text-shadow: none; }
.ob-bp-mobile .ob-menu-list a:hover { color: var(--mp-hover, var(--ob-primary)); background: var(--mn-hbg, color-mix(in srgb, var(--ob-primary) 8%, transparent)); }
.ob-bp-mobile .ob-menu-list .is-current > a { color: var(--mp-active, var(--ob-primary)); }
.ob-bp-mobile .ob-menu-list a::after, .ob-bp-mobile .ob-menu-list a::before { display: none !important; }
.ob-bp-mobile.ob-mcta .ob-menu-list > li:last-child > a { justify-content: center; color: var(--mn-cta-color, var(--ob-on-primary, #160b05)); }
.ob-bp-mobile .ob-submenu { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 14px; } }
body.ob-menu-open { overflow: hidden; }

/* --------------------------------------------------------- Logo & posts */
.ob-logo { display: inline-flex; align-items: center; text-decoration: none !important; }
.ob-logo img { width: 150px; height: auto; }
.ob-logo-text { font: 800 1.4rem/1 var(--ob-font-heading); letter-spacing: .04em; color: var(--ob-text); }
.ob-posts { --ob-cols: 3; display: grid; grid-template-columns: repeat(var(--ob-cols), minmax(0, 1fr)); gap: 18px; }
.ob-post { display: grid; align-content: start; overflow: hidden; border: 1px solid var(--ob-line1); border-radius: 16px; background: var(--ob-panel); text-decoration: none !important; transition: transform .5s var(--ob-ease), border-color .3s; }
.ob-post:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ob-primary) 35%, transparent); }
.ob-post-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ob-post-body { display: grid; gap: 8px; padding: 20px; }
.ob-post-date { font: .72rem var(--ob-mono); color: var(--ob-faint); }
.ob-post-title { font: 600 1.15rem/1.3 var(--ob-font-heading); color: var(--ob-text); letter-spacing: -.01em; }
.ob-post-excerpt { font-size: .92rem; color: var(--ob-mute); }

/* ----------------------------------------------------- Motion & hover */
.ob-anim { opacity: 0; transition: opacity .9s ease var(--ob-delay, 0ms), transform 1s var(--ob-ease) var(--ob-delay, 0ms), filter .9s ease var(--ob-delay, 0ms); }
.ob-anim-fade-up { transform: translateY(28px); } .ob-anim-zoom { transform: scale(.92); } .ob-anim-slide-left { transform: translateX(48px); } .ob-anim-slide-right { transform: translateX(-48px); } .ob-anim-blur { filter: blur(12px); }
.ob-anim.is-in { opacity: 1; transform: none; filter: none; }
html:not(.ob-js) .ob-anim, .ob-no-js .ob-anim, .ob-editing .ob-anim { opacity: 1; transform: none; filter: none; }
.ob-hv-lift, .ob-hv-grow, .ob-hv-glow { transition: transform .5s var(--ob-ease), box-shadow .5s ease; }
.ob-hv-lift:hover { transform: translateY(-6px); } .ob-hv-grow:hover { transform: scale(1.03); } .ob-hv-glow:hover { box-shadow: 0 20px 60px color-mix(in srgb, var(--ob-shadow-c, var(--ob-primary)) 30%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .ob-main *, .ob-part * { animation: none !important; transition: none !important; }
  .ob-anim { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------- Lightbox */
.ob-lb { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 4vw; background: color-mix(in srgb, var(--ob-bg) 94%, transparent); opacity: 0; transition: opacity .3s ease; }
.ob-lb.is-open { opacity: 1; }
.ob-lb img, .ob-lb iframe, .ob-lb video { max-width: 100%; max-height: 86vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.ob-lb iframe { width: min(1100px, 92vw); aspect-ratio: 16/9; height: auto; border: 0; }
.ob-lb button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--ob-glass) 20%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--ob-bg) 50%, transparent); color: #fff; cursor: pointer; }
.ob-lb button .ob-icon { width: 20px; height: 20px; }
.ob-lb-close { top: 18px; right: 18px; } .ob-lb-prev { left: 18px; top: 50%; } .ob-lb-next { right: 18px; top: 50%; }

/* --------------------------------------------------- Editor placeholders */
.ob-placeholder { display: grid; place-items: center; min-height: 120px; padding: 20px; border: 1px dashed color-mix(in srgb, var(--ob-primary) 50%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--ob-primary) 5%, transparent); color: var(--ob-mute); font: .8rem var(--ob-mono); text-align: center; }

/* ----------------------------------------------------------------- Print */
.ob-print-bar { position: sticky; top: 0; z-index: 9999; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; background: #111; color: #fff; font: 14px/1.4 system-ui, sans-serif; }
.ob-print-bar button { padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ob-primary); color: #111; font-weight: 700; cursor: pointer; }
@media print {
  .ob-print-bar, .ob-burger, .ob-arrow, .ob-dots, .ob-pnav, .ob-pfilters, #wpadminbar { display: none !important; }
  body.ob-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ob-anim { opacity: 1 !important; transform: none !important; }
  .ob-section { break-inside: avoid; }
  .ob-slide { position: relative; opacity: 1; visibility: visible; transform: none; }
  .ob-slider { height: auto !important; } .ob-slide:not(.is-active) { display: none; }
}

/* ------------------------------------------------------- Header behaviour */
.ob-part-header { display: contents; }
.ob-sticky-sticky { position: sticky; top: 0; z-index: 90; transition: background .3s ease, box-shadow .3s ease, padding .3s ease; }
.ob-sticky-overlay { position: absolute; left: 0; right: 0; top: 0; z-index: 90; }
.ob-sticky-overlay-sticky { position: fixed; left: 0; right: 0; top: 0; z-index: 90; transition: background .3s ease, box-shadow .3s ease; }
.admin-bar .ob-sticky-sticky, .admin-bar .ob-sticky-overlay, .admin-bar .ob-sticky-overlay-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .ob-sticky-sticky, .admin-bar .ob-sticky-overlay, .admin-bar .ob-sticky-overlay-sticky { top: 46px; } .admin-bar .ob-sticky-sticky.is-scrolled, .admin-bar .ob-sticky-overlay-sticky.is-scrolled { top: 0; } }
.ob-sticky-sticky.is-scrolled, .ob-sticky-overlay-sticky.is-scrolled { box-shadow: 0 1px 0 var(--ob-line1), 0 10px 30px rgba(0, 0, 0, .25); }
.ob-editing .ob-sticky-overlay, .ob-editing .ob-sticky-overlay-sticky, .ob-editing .ob-sticky-sticky { position: relative; top: 0; }

.ob-fade-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: min(30%, 260px); background: linear-gradient(0deg, var(--ob-bg, #060505), transparent); pointer-events: none; }

/* ---------------- Moving video thumbnails ---------------- */
.ob-pcard-media, .ob-pg-item { position: relative; }
.ob-pvideo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease, transform .9s var(--ob-ease); pointer-events: none; }
.has-vplaying > .ob-pvideo { opacity: 1; }
.ob-pcard:hover .ob-pvideo { transform: scale(1.04); }
.ob-pcard-media:has(.ob-pvideo)::after { content: ""; position: absolute; right: 14px; top: 14px; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--ob-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-glass) 8%, transparent), 0 0 14px var(--ob-primary); opacity: .9; }

/* ---------------- Project page (themes without a project template) ---------------- */
.ob-project-page { background: var(--ob-bg); color: var(--ob-text); }
.ob-proj-hero { position: relative; display: flex; align-items: flex-end; min-height: min(86vh, 860px); padding: 160px 0 70px; overflow: hidden; isolation: isolate; }
.ob-proj-hero-media { position: absolute; inset: 0; z-index: -1; }
.ob-proj-hero-media img, .ob-proj-hero-media video { width: 100%; height: 100%; object-fit: cover; }
.ob-proj-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15) 40%, var(--ob-bg, #0b0908) 98%); }
.ob-proj-hero-in { display: grid; gap: 18px; }
.ob-proj-hero .ob-heading { margin: 0; font-size: clamp(42px, 8vw, 112px); line-height: .95; max-width: 14ch; }
.ob-proj-brief { max-width: 56ch; margin: 0; color: var(--ob-muted); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; }
.ob-proj-body { display: grid; gap: 48px; padding: 30px 0 110px; }
.ob-proj-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin: 0; padding: 26px 0; border-top: 1px solid var(--ob-line); border-bottom: 1px solid var(--ob-line); }
.ob-proj-meta dt { margin-bottom: 6px; color: var(--ob-muted); font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.ob-proj-meta dd { margin: 0; font-weight: 700; font-size: 17px; }
.ob-proj-meta a { color: var(--ob-primary); text-decoration: none; }
.ob-proj-content { max-width: 760px; font-size: 17px; line-height: 1.75; color: var(--ob-muted); }
.ob-pgallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ob-pgallery-masonry { display: block; columns: 3 280px; column-gap: 14px; }
.ob-pgallery-masonry .ob-pg-item { margin-bottom: 14px; break-inside: avoid; }
.ob-pg-item { display: block; overflow: hidden; border-radius: calc(var(--ob-radius) * .8); background: var(--ob-surface); cursor: zoom-in; }
.ob-pg-item img, .ob-pg-item video { display: block; width: 100%; height: auto; transition: transform .8s var(--ob-ease); }
.ob-pg-item:hover img { transform: scale(1.04); }
.ob-pg-item .ob-pvideo, .ob-pg-item > video { position: static; opacity: 1; }
.ob-pg-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(120deg, var(--ob-secondary), var(--ob-primary), var(--ob-accent)); color: var(--ob-on-primary); transform: translate(-50%, -50%); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: transform .3s; }
.ob-pg-item:hover .ob-pg-play { transform: translate(-50%, -50%) scale(1.08); }
.ob-pg-play svg { width: 22px; height: 22px; margin-left: 3px; }
.ob-proj-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ob-proj-nav a { display: grid; gap: 6px; padding: 26px; border: 1px solid var(--ob-line); border-radius: var(--ob-radius); color: var(--ob-text); text-decoration: none; transition: border-color .3s, background .3s; }
.ob-proj-nav a:hover { border-color: var(--ob-primary); background: color-mix(in srgb, var(--ob-primary) 5%, transparent); }
.ob-proj-nav a.is-next { text-align: right; grid-column: 2; }
.ob-proj-nav small { color: var(--ob-muted); font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.ob-proj-nav b { font-size: clamp(18px, 2.2vw, 26px); }
.ob-lb-media video { max-width: 92vw; max-height: 86vh; border-radius: 12px; background: #000; }
@media (max-width: 767px) { .ob-pgallery { grid-template-columns: 1fr 1fr; } .ob-proj-nav { grid-template-columns: 1fr; } .ob-proj-nav a.is-next { grid-column: auto; } .ob-proj-hero { min-height: 70vh; padding: 130px 0 40px; } }

/* ---------------- Shop widgets (WooCommerce) ---------------- */
.ob-products.ob-pl-grid { display: grid; grid-template-columns: repeat(var(--ob-cols, 4), minmax(0, 1fr)); gap: var(--ob-gap, 16px); }
.ob-products.ob-pl-carousel > .ob-prod { flex: 0 0 calc((100% - (var(--ob-cols, 4) - 1) * var(--ob-gap, 16px)) / var(--ob-cols, 4)); }
.ob-prod { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ob-line1); border-radius: var(--ob-radius); background: var(--ob-panel); color: var(--ob-text); transition: border-color .3s, transform .4s var(--ob-ease); }
.ob-prod[hidden] { display: none; }
.ob-prod:hover { border-color: color-mix(in srgb, var(--ob-primary) 45%, transparent); transform: translateY(-3px); }
.ob-prod-media { position: relative; display: block; overflow: hidden; background: var(--ob-surface); }
.ob-prod-media img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: opacity .5s ease, transform 1s var(--ob-ease); }
.ob-prod-img2 { opacity: 0; }
.ob-prod:hover .ob-prod-img2 { opacity: 1; }
.ob-prod:hover .ob-prod-media img { transform: scale(1.04); }
.ob-prod-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ob-faint); }
.ob-prod-empty .ob-icon { width: 46px; height: 46px; }
.ob-prod-sale { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 99px; background: var(--ob-fire); color: var(--ob-on-primary); font: 700 .68rem/1 var(--ob-font-body); letter-spacing: .04em; text-transform: uppercase; }
.ob-prod-sale.is-out { background: var(--ob-surface); color: var(--ob-mute); border: 1px solid var(--ob-line2); }
.ob-prod-info { display: grid; gap: 7px; padding: 14px 16px 16px; flex: 1; align-content: start; }
.ob-prod-cat { color: var(--ob-faint); font: 500 .66rem/1.2 var(--ob-mono); letter-spacing: .08em; text-transform: uppercase; }
.ob-prod-title { color: var(--ob-text); font-family: var(--ob-font-heading); font-weight: 600; font-size: 1.02rem; line-height: 1.25; text-decoration: none; }
.ob-prod-price { color: var(--ob-primary); font-weight: 700; font-size: .98rem; }
.ob-prod-price del { margin-right: 6px; color: var(--ob-faint); font-weight: 500; }
.ob-prod-price ins { text-decoration: none; }
.ob-prod .ob-btn { justify-self: start; margin-top: 6px; }
.ob-btn .ob-icon:only-child, .ob-btn > span + .ob-icon { width: 1.1em; height: 1.1em; }
.ob-btn.loading { opacity: .65; pointer-events: none; }
.ob-btn.added::after { content: "✓"; margin-left: 4px; }
.added_to_cart.wc-forward { display: inline-block; margin-top: 6px; color: var(--ob-primary); font-size: .82rem; font-weight: 600; }
.ob-atc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ob-atc .ob-prod-price { font-size: 1.3rem; }
.ob-atc-qty { width: 76px; height: 46px; padding: 0 10px; border: 1px solid var(--ob-line2); border-radius: 12px; background: var(--ob-surface); color: var(--ob-text); font: 600 1rem var(--ob-font-body); }
.ob-cart { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--ob-text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ob-cart .ob-icon { width: var(--ob-size, 22px); height: var(--ob-size, 22px); }
.ob-cart-count { position: absolute; left: calc(var(--ob-size, 22px) - 8px); top: -7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--ob-primary); color: var(--ob-on-primary); font: 700 10px/1 var(--ob-font-body); }
.ob-cart-count.is-empty { display: none; }
@media (max-width: 767px) { .ob-prod-info { padding: 11px 12px 13px; } .ob-prod .ob-btn { padding-inline: 12px; font-size: .78rem; } .ob-products.ob-pl-carousel > .ob-prod { flex-basis: 72%; } }

/* ---------------- Language switcher ---------------- */
.ob-lang { display: inline-flex; align-items: center; gap: 8px; font: 600 .82rem/1 var(--ob-font-body); }
.ob-lang a { color: var(--ob-mute); text-decoration: none; transition: color .2s; }
.ob-lang a:hover, .ob-lang a.is-current { color: var(--ob-text); }
.ob-lang-codes a.is-current { color: var(--ob-primary); }
.ob-lang-sep { color: var(--ob-faint); }
.ob-lang-other a { padding: 8px 14px; border: 1px solid var(--ob-line2); border-radius: 99px; color: var(--ob-text); }
.ob-lang-other a:hover { border-color: var(--ob-primary); }

/* ---------------- Dark / light switch ---------------- */
.ob-mode { --s: var(--ob-size, 40px); position: relative; display: inline-flex; align-items: center; justify-content: space-between; height: calc(var(--s) * .72); padding: 0 calc(var(--s) * .14); border: 1px solid var(--ob-line2); border-radius: 99px; background: var(--ob-surface); color: var(--ob-text); cursor: pointer; }
.ob-mode-pill { width: calc(var(--s) * 1.5); }
.ob-mode-icon { width: calc(var(--s) * .9); height: calc(var(--s) * .9); justify-content: center; padding: 0; }
.ob-mode svg { width: calc(var(--s) * .4); height: calc(var(--s) * .4); display: block; }
.ob-mode-i { position: relative; z-index: 1; display: grid; place-items: center; transition: opacity .3s, transform .4s var(--ob-ease); }
.ob-mode-knob { position: absolute; top: 50%; left: calc(var(--s) * .07); width: calc(var(--s) * .56); height: calc(var(--s) * .56); border-radius: 50%; background: var(--ob-fire); transform: translateY(-50%); transition: transform .4s var(--ob-ease); }
.ob-mode { direction: ltr; }
.ob-mode-pill .ob-mode-knob { transform: translate(calc(var(--s) * .72), -50%); }
html[data-ob-mode="light"] .ob-mode-pill .ob-mode-knob { transform: translate(0, -50%); }
.ob-mode-pill .ob-mode-moon, html[data-ob-mode="light"] .ob-mode-pill .ob-mode-sun { color: var(--ob-on-primary); }
html[data-ob-mode="light"] .ob-mode-pill .ob-mode-moon { color: var(--ob-text); }
.ob-mode-icon .ob-mode-knob { display: none; }
.ob-mode-icon .ob-mode-i { position: absolute; }
.ob-mode-icon .ob-mode-moon, html[data-ob-mode="light"] .ob-mode-icon .ob-mode-sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-ob-mode="light"] .ob-mode-icon .ob-mode-moon { opacity: 1; transform: none; }
html.ob-mode-anim, html.ob-mode-anim * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }

/* ---------------- Right-to-left (Arabic…) ---------------- */
[dir="rtl"] .ob-main, [dir="rtl"] .ob-part { text-align: right; }
[dir="rtl"] .ob-main *, [dir="rtl"] .ob-part * { letter-spacing: normal !important; }
[dir="rtl"] .ob-btn-icon, [dir="rtl"] .ob-arrow svg, [dir="rtl"] .ob-prow-arrow svg, [dir="rtl"] .ob-svc-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .ob-heading, [dir="rtl"] .ob-accent { font-style: normal; }
[dir="rtl"] .ob-badge, [dir="rtl"] .ob-prod-cat, [dir="rtl"] .ob-pcard-cat, [dir="rtl"] .ob-proj-meta dt, [dir="rtl"] .ob-proj-nav small { text-transform: none; font-family: var(--ob-font-body); }
[dir="rtl"] .ob-proj-nav a.is-next { text-align: left; }
/* Hidden helpers: clipped instead of pushed off-screen (no sideways scroll in right-to-left pages). */
.ob-skip:not(:focus), .ob-hp { position: absolute !important; left: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.ob-skip:focus { left: 10px; top: 10px; }

/* ---------------- Service illustrations (ported from the ONYX theme) ---------------- */
/* 1. Strategy — rings tighten on a target, ideas orbit, crosshair locks */
.oba-art-rings { position: absolute; width: 270px; max-width: 100%; color: rgba(255, 255, 255, .45); left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 1.4s var(--ob-ease); }
.ob-svc.is-play .oba-art-rings { transform: translate(-50%, -50%) scale(.86) rotate(-6deg); }
.oba-target { position: relative; width: 74px; height: 74px; }
.oba-target i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ob-primary) 50%, transparent); }
.oba-target i:nth-child(2) { inset: 16px; border-color: color-mix(in srgb, var(--ob-mid) 70%, transparent); }
.oba-target i:nth-child(3) { inset: 30px; background: var(--ob-fire); border: 0; box-shadow: 0 0 24px color-mix(in srgb, var(--ob-primary) 90%, transparent); }
.ob-svc.is-play .oba-target i:first-child { animation: obPing 1.8s ease-out infinite; }
@keyframes obPing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.oba-cross { position: absolute; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ob-primary) 70%, transparent), transparent); left: 50%; top: 50%; transition: transform 1s var(--ob-ease) .1s; }
.oba-cross-h { width: 70%; height: 1px; transform: translate(-50%, -50%) scaleX(0); }
.oba-cross-v { width: 1px; height: 80%; transform: translate(-50%, -50%) scaleY(0); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ob-primary) 70%, transparent), transparent); }
.ob-svc.is-play .oba-cross-h { transform: translate(-50%, -50%) scaleX(1); }
.ob-svc.is-play .oba-cross-v { transform: translate(-50%, -50%) scaleY(1); }
.oba-chipx { position: absolute; left: 50%; top: 50%; padding: 4px 10px; border: 1px solid var(--ob-line2); border-radius: 999px; background: var(--ob-surface); font-family: var(--ob-mono); font-size: .66rem; color: var(--ob-mute); transform: rotate(var(--a)) translateX(104px) rotate(calc(var(--a) * -1)) translate(-50%, -50%); }
.ob-svc.is-play .oba-chipx { animation: obChip 9s linear infinite; color: var(--ob-primary-soft); border-color: color-mix(in srgb, var(--ob-primary) 40%, transparent); }
@keyframes obChip { to { transform: rotate(calc(var(--a) + 360deg)) translateX(104px) rotate(calc((var(--a) + 360deg) * -1)) translate(-50%, -50%); } }

/* 2. Branding — the mark draws itself, then type + palette arrive */
.oba-art-branding { grid-template-columns: auto auto; gap: clamp(18px, 4vw, 44px); }
.oba-mark { width: 150px; height: 150px; color: rgba(255, 255, 255, .55); }
.oba-mark path { fill: none; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.oba-mark path:nth-child(2) { stroke-width: 3; }
.ob-svc.is-play .oba-mark path { animation: obDraw 1.6s var(--ob-ease) both; animation-delay: calc(var(--i) * .12s); }
@keyframes obDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.oba-brand-side { display: grid; gap: 12px; }
.oba-brand-word { font-family: Montserrat, var(--ob-font-body); font-weight: 800; font-size: 2.1rem; letter-spacing: .02em; color: #e7e7e7; line-height: 1; }
.oba-brand-type { display: flex; align-items: baseline; gap: 10px; font-size: 2.2rem; line-height: 1; }
.oba-brand-type b { font-weight: 700; }
.oba-brand-type em { font-family: var(--ob-font-accent); background: var(--ob-fire); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.oba-brand-sw { display: flex; gap: 6px; }
.oba-brand-sw i { width: 26px; height: 26px; border-radius: 7px; background: var(--c); border: 1px solid var(--ob-line2); transition: transform .6s var(--ob-ease); }
.ob-svc.is-play .oba-brand-sw i { transform: translateY(-6px); }
.ob-svc.is-play .oba-brand-sw i:nth-child(2) { transition-delay: .05s; } .ob-svc.is-play .oba-brand-sw i:nth-child(3) { transition-delay: .1s; } .ob-svc.is-play .oba-brand-sw i:nth-child(4) { transition-delay: .15s; } .ob-svc.is-play .oba-brand-sw i:nth-child(5) { transition-delay: .2s; }
.oba-brand-side > * { transition: transform .7s var(--ob-ease), opacity .7s ease; }
.ob-svc.is-play .oba-brand-word { transform: translateX(6px); }

/* 3. Creative visuals — a stack of artworks fans out like a moodboard */
.oba-vcard { position: absolute; left: 50%; top: 50%; width: 130px; height: 164px; margin: -82px 0 0 -65px; padding: 8px; border: 1px solid var(--ob-line2); border-radius: 12px; background: var(--ob-surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); transform: rotate(calc((var(--n) - 1.5) * 4deg)) translateY(calc(var(--n) * -3px)); transition: transform .9s var(--ob-ease); transition-delay: calc(var(--n) * .05s); }
.oba-vimg { display: block; height: 116px; border-radius: 7px; }
.oba-vimg-a { background: radial-gradient(circle at 30% 30%, #ffd25a, #e93f39 70%); }
.oba-vimg-b { background: linear-gradient(160deg, #2d2a2b, #0a0908), radial-gradient(circle at 70% 70%, #ff7a18, transparent 50%); background-blend-mode: screen; }
.oba-vimg-c { background: repeating-linear-gradient(135deg, #ff7a18 0 10px, #1b1716 10px 20px); }
.oba-vimg-d { background: conic-gradient(from 200deg, #e93f39, #fcef44, #ff7a18, #e93f39); }
.oba-vcard b { display: block; height: 8px; width: 70%; margin-top: 12px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.ob-svc.is-play .oba-vcard { transform: translateX(calc((var(--n) - 1.5) * 92px)) rotate(calc((var(--n) - 1.5) * 7deg)) translateY(calc(var(--n) * -2px + (var(--n) - 1.5) * (var(--n) - 1.5) * 6px)); }
.oba-pen { position: absolute; right: 18%; bottom: 18%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 0 18px rgba(255, 255, 255, .7); opacity: 0; transition: opacity .4s ease .4s; }
.ob-svc.is-play .oba-pen { opacity: 1; animation: obPen 3s ease-in-out infinite .5s; }
@keyframes obPen { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-60px, -40px); } 66% { transform: translate(-120px, 6px); } }

/* 4. Website — the page builds block by block, then the cursor clicks */
.oba-browser { position: relative; width: min(84%, 380px); height: 196px; border: 1px solid var(--ob-line2); border-radius: 12px; background: var(--ob-surface); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.oba-browser-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--ob-line1); }
.oba-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.oba-browser-bar i:first-child { background: var(--ob-secondary); } .oba-browser-bar i:nth-child(2) { background: var(--ob-mid); }
.oba-browser-bar span { margin-left: 10px; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-family: var(--ob-mono); font-size: .6rem; color: var(--ob-faint); }
.oba-browser-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px; }
.oba-w { display: block; border-radius: 6px; background: rgba(255, 255, 255, .07); transition: transform .6s var(--ob-ease), opacity .6s ease, background .6s ease; transition-delay: calc(var(--d) * .14s); }
.oba-w-nav { grid-column: 1 / -1; height: 12px; }
.oba-w-hero { grid-column: 1 / -1; height: 70px; padding: 12px; display: grid; align-content: center; gap: 6px; background: linear-gradient(120deg, color-mix(in srgb, var(--ob-secondary) 25%, transparent), color-mix(in srgb, var(--ob-mid) 20%, transparent)); }
.oba-w-hero b { display: block; height: 8px; width: 60%; border-radius: 4px; background: rgba(255, 255, 255, .6); }
.oba-w-hero b + b { width: 40%; background: rgba(255, 255, 255, .3); }
.oba-w-hero em { display: block; width: 54px; height: 14px; margin-top: 4px; border-radius: 99px; background: var(--ob-fire); }
.oba-w-card { height: 46px; }
.ob-svc:not(.is-play) .oba-w { opacity: .5; }
.ob-svc.is-play .oba-w { animation: obBuild .7s var(--ob-ease) both; animation-delay: calc(var(--d) * .14s); }
@keyframes obBuild { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.oba-cursor { position: absolute; left: 70%; top: 80%; width: 14px; height: 14px; border-left: 10px solid #fff; border-top: 0; clip-path: polygon(0 0, 100% 60%, 45% 65%, 30% 100%); background: #fff; opacity: 0; }
.ob-svc.is-play .oba-cursor { animation: obCursor 2.6s var(--ob-ease) .8s infinite; }
@keyframes obCursor { 0% { opacity: 0; transform: translate(60px, 40px); } 20% { opacity: 1; } 55% { opacity: 1; transform: translate(-200px, -86px); } 62% { transform: translate(-200px, -86px) scale(.8); } 70% { transform: translate(-200px, -86px) scale(1); } 100% { opacity: 0; transform: translate(-200px, -86px); } }

/* 5. Social — a feed scrolls, hearts pop, numbers rise */
.oba-phone { position: relative; width: 132px; height: 228px; margin-top: 40px; border: 2px solid rgba(255, 255, 255, .16); border-radius: 22px; background: var(--ob-bg); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.oba-phone-notch { position: absolute; left: 50%; top: 6px; z-index: 2; width: 40px; height: 8px; margin-left: -20px; border-radius: 8px; background: #000; }
.oba-feed { display: grid; gap: 8px; padding: 22px 8px 8px; transition: transform 1.6s var(--ob-ease); }
.oba-post { position: relative; display: block; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.oba-post-img { display: block; height: 62px; border-radius: 6px; background: linear-gradient(135deg, #e93f39, #ffb21a); }
.oba-post:nth-child(2n) .oba-post-img { background: linear-gradient(135deg, #2d2a2b, #ff7a18); }
.oba-post-line { display: block; height: 5px; width: 64%; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.oba-heart { position: absolute; right: 8px; bottom: 6px; width: 10px; height: 10px; background: #ff4d4d; clip-path: path("M5 9 L1 5 A2.2 2.2 0 0 1 5 2 A2.2 2.2 0 0 1 9 5 Z"); transform: scale(0); }
.ob-svc.is-play .oba-feed { transform: translateY(-120px); }
.ob-svc.is-play .oba-heart { animation: obHeart 1.8s ease-out infinite; animation-delay: calc(var(--n) * .35s + .4s); }
@keyframes obHeart { 0% { transform: scale(0); } 20% { transform: scale(1.5); } 40%, 80% { transform: scale(1); } 100% { transform: scale(0); } }
.oba-stat-pop { position: absolute; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--ob-primary) 35%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--ob-bg) 92%, transparent); font-family: var(--ob-mono); font-size: .7rem; color: var(--ob-primary-soft); opacity: 0; transform: translateY(14px) scale(.9); transition: transform .7s var(--ob-ease), opacity .5s ease; }
.oba-pop-a { left: calc(50% - 170px); top: 34%; } .oba-pop-b { left: calc(50% + 86px); top: 26%; transition-delay: .2s; } .oba-pop-c { left: calc(50% + 80px); top: 62%; transition-delay: .4s; }
.ob-svc.is-play .oba-stat-pop { opacity: 1; transform: none; }

/* 6. Production — viewfinder, blinking REC, the timeline plays */
.oba-art-production { grid-template-rows: 1fr auto; gap: 14px; padding: 22px 28px; }
.oba-frame { position: relative; width: 100%; height: 100%; min-height: 140px; border-radius: 10px; background: radial-gradient(120% 120% at 70% 30%, color-mix(in srgb, var(--ob-primary) 25%, transparent), transparent 55%), linear-gradient(160deg, #1b1716, #0a0908); overflow: hidden; }
.oba-corner { position: absolute; width: 18px; height: 18px; border-color: rgba(255, 255, 255, .7); border-style: solid; border-width: 0; transition: transform .7s var(--ob-ease); }
.oba-c1 { left: 10px; top: 10px; border-left-width: 2px; border-top-width: 2px; } .oba-c2 { right: 10px; top: 10px; border-right-width: 2px; border-top-width: 2px; }
.oba-c3 { left: 10px; bottom: 10px; border-left-width: 2px; border-bottom-width: 2px; } .oba-c4 { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
.ob-svc.is-play .oba-c1 { transform: translate(8px, 8px); } .ob-svc.is-play .oba-c2 { transform: translate(-8px, 8px); } .ob-svc.is-play .oba-c3 { transform: translate(8px, -8px); } .ob-svc.is-play .oba-c4 { transform: translate(-8px, -8px); }
.oba-rec { position: absolute; left: 36px; top: 18px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--ob-mono); font-size: .64rem; color: #fff; }
.oba-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px #ff3b30; }
.ob-svc.is-play .oba-rec i { animation: obBlink 1s steps(2) infinite; }
@keyframes obBlink { 50% { opacity: .15; } }
.oba-tc { position: absolute; right: 36px; top: 18px; font-family: var(--ob-mono); font-size: .64rem; color: var(--ob-mute); }
.oba-focus { position: absolute; left: 50%; top: 55%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid var(--ob-mid); border-radius: 4px; opacity: .5; transform: scale(1.4); transition: transform .6s var(--ob-ease), opacity .6s ease; }
.ob-svc.is-play .oba-focus { transform: scale(1); opacity: 1; }
.oba-timeline { position: relative; width: 100%; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.oba-timeline span { position: absolute; top: 5px; bottom: 5px; left: var(--x); width: var(--w); border-radius: 4px; background: rgba(255, 255, 255, .14); }
.oba-timeline span.is-hot { background: var(--ob-fire); }
.oba-tl-head { position: absolute; inset: 0; transform: translateX(-70%); }
.oba-tl-head::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.ob-svc.is-play .oba-tl-head { animation: obHead 4s linear infinite; }

/* 7. Media buying — results climb, markets fill */
.oba-art-media { grid-template-rows: 1fr auto; padding: 26px 28px 22px; gap: 14px; }
.oba-line { width: 100%; height: 100%; min-height: 110px; overflow: visible; }
.oba-line .oba-stroke { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ob-primary) 60%, transparent)); }
.oba-line .oba-area { opacity: .8; transition: opacity .8s ease; }
.ob-svc.is-play .oba-line .oba-stroke { animation: obDraw 1.6s var(--ob-ease) both; }
.ob-svc.is-play .oba-line .oba-area { animation: obFade 1.6s ease both; }
@keyframes obFade { from { opacity: 0; } }
.oba-roas { position: absolute; right: 30px; top: 22px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--ob-primary) 35%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--ob-bg) 90%, transparent); font-family: var(--ob-mono); font-size: .68rem; color: var(--ob-mute); }
.oba-roas b { color: var(--ob-primary-soft); font-weight: 500; }
.oba-mbars { display: grid; gap: 8px; width: 100%; }
.oba-mbars span { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.oba-mbars em { font-style: normal; font-family: var(--ob-mono); font-size: .64rem; color: var(--ob-mute); }
.oba-mbars i { position: relative; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.oba-mbars i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--ob-fire); transform-origin: left; transform: scaleX(.35); transition: transform 1.1s var(--ob-ease); transition-delay: calc(var(--i) * .12s); }
.ob-svc.is-play .oba-mbars i::after { transform: scaleX(1); }

/* 8. Events — lights sweep the stage, the crowd moves */
.oba-art-events { place-items: end center; overflow: hidden; }
.oba-beam { position: absolute; bottom: 70px; width: 120px; height: 260px; transform-origin: 50% 100%; background: linear-gradient(0deg, color-mix(in srgb, var(--ob-mid) 55%, transparent), color-mix(in srgb, var(--ob-primary) 0%, transparent)); clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); opacity: .35; transition: opacity .6s ease; }
.oba-beam-a { left: calc(50% - 140px); transform: rotate(-18deg); }
.oba-beam-b { left: calc(50% - 60px); transform: rotate(0deg); background: linear-gradient(0deg, color-mix(in srgb, var(--ob-accent) 50%, transparent), transparent); }
.oba-beam-c { left: calc(50% + 20px); transform: rotate(18deg); background: linear-gradient(0deg, color-mix(in srgb, var(--ob-secondary) 55%, transparent), transparent); }
.ob-svc.is-play .oba-beam { opacity: .9; animation: obSweep 3s ease-in-out infinite alternate; }
.ob-svc.is-play .oba-beam-b { animation-duration: 2.4s; animation-delay: -.6s; }
.ob-svc.is-play .oba-beam-c { animation-direction: alternate-reverse; }
@keyframes obSweep { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
.oba-stage { position: absolute; bottom: 52px; left: 50%; width: 260px; height: 22px; margin-left: -130px; border-radius: 4px; background: linear-gradient(180deg, #2d2a2b, #141110); box-shadow: 0 -2px 30px color-mix(in srgb, var(--ob-primary) 35%, transparent); display: grid; place-items: center; }
.oba-stage b { position: absolute; bottom: 30px; font-family: Montserrat, var(--ob-font-body); font-weight: 800; font-size: 1.4rem; letter-spacing: .08em; color: rgba(255, 255, 255, .85); text-shadow: 0 0 20px color-mix(in srgb, var(--ob-primary) 60%, transparent); transition: transform .8s var(--ob-ease); }
.ob-svc.is-play .oba-stage b { transform: scale(1.12); }
.oba-crowd { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; width: 300px; padding-bottom: 8px; }
.oba-crowd i { width: 12px; height: 12px; border-radius: 50% 50% 4px 4px; background: rgba(255, 255, 255, .22); }
.oba-crowd i:nth-child(3n) { background: color-mix(in srgb, var(--ob-mid) 45%, transparent); }
.ob-svc.is-play .oba-crowd i { animation: obJump .7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes obJump { to { transform: translateY(-6px); } }


.ob-section.ob-menu-lift { z-index: 1000 !important; }

/* Section "Columns display" layouts */
.ob-disp-grid > .ob-container > .ob-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ob-mincol, 280px)), 1fr)); }
.ob-disp-grid > .ob-container > .ob-row > .ob-col { flex: none; width: auto; }
.ob-disp-scroll > .ob-container > .ob-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ob-disp-scroll > .ob-container > .ob-row > .ob-col { flex: 0 0 min(86%, var(--ob-mincol, 280px)); scroll-snap-align: start; }
.ob-disp-masonry > .ob-container > .ob-row { display: block; column-width: var(--ob-mincol, 280px); column-gap: var(--ob-gap, 24px); }
.ob-disp-masonry > .ob-container > .ob-row > .ob-col { display: block; break-inside: avoid; margin-bottom: var(--ob-gap, 24px); }
.ob-disp-center > .ob-container > .ob-row { flex-direction: column; align-items: center; max-width: 760px; margin-inline: auto; text-align: center; }
.ob-disp-center > .ob-container > .ob-row > .ob-col { flex: none; width: 100%; }
.ob-disp-split > .ob-container > .ob-row > .ob-col:not(:first-child) { margin-inline-start: -4%; margin-top: 40px; }
.ob-disp-split > .ob-container > .ob-row { flex-wrap: nowrap; }
@media (max-width: 767px) { .ob-disp-split > .ob-container > .ob-row { flex-wrap: wrap; } .ob-disp-split > .ob-container > .ob-row > .ob-col:not(:first-child) { margin: 0; } }

/* mobile options: menu + button */
@media (max-width: 1024px) {
.ob-bp-tablet.ob-ms-side .ob-menu-list, .ob-bp-tablet.ob-ms-sideleft .ob-menu-list { top: 0; bottom: 0; height: 100vh; max-height: none; width: min(86vw, 340px); max-width: none; border-radius: 0; border-width: 0 0 0 1px; padding: 84px 18px 28px; transform: translateX(100%); right: 0; left: auto; }
.ob-bp-tablet.ob-ms-sideleft .ob-menu-list { left: 0; right: auto; transform: translateX(-100%); border-width: 0 1px 0 0; }
.ob-bp-tablet.ob-ms-side.is-open .ob-menu-list, .ob-bp-tablet.ob-ms-sideleft.is-open .ob-menu-list { transform: none; }
.ob-bp-tablet.ob-ms-bottom .ob-menu-list { top: auto; bottom: 0; left: 0; width: 100vw; max-width: none; max-height: 75vh; border-radius: 22px 22px 0 0; padding: 22px 18px 30px; transform: translateY(100%); }
.ob-bp-tablet.ob-ms-bottom.is-open .ob-menu-list { transform: none; }
.ob-bp-tablet.ob-mcompact .ob-menu-list { gap: 0; padding: 8px; }
.ob-bp-tablet.ob-mcompact .ob-menu-list a { padding: 9px 12px; font-size: 14px; }
.ob-bp-tablet.ob-mhidecta.ob-mcta .ob-menu-list > li:last-child { display: none; }
.ob-bp-tablet.ob-bpos-left .ob-burger { margin-left: 0; margin-right: auto; }
.ob-bp-tablet.ob-bpos-center .ob-burger { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
.ob-bp-mobile.ob-ms-side .ob-menu-list, .ob-bp-mobile.ob-ms-sideleft .ob-menu-list { top: 0; bottom: 0; height: 100vh; max-height: none; width: min(86vw, 340px); max-width: none; border-radius: 0; border-width: 0 0 0 1px; padding: 84px 18px 28px; transform: translateX(100%); right: 0; left: auto; }
.ob-bp-mobile.ob-ms-sideleft .ob-menu-list { left: 0; right: auto; transform: translateX(-100%); border-width: 0 1px 0 0; }
.ob-bp-mobile.ob-ms-side.is-open .ob-menu-list, .ob-bp-mobile.ob-ms-sideleft.is-open .ob-menu-list { transform: none; }
.ob-bp-mobile.ob-ms-bottom .ob-menu-list { top: auto; bottom: 0; left: 0; width: 100vw; max-width: none; max-height: 75vh; border-radius: 22px 22px 0 0; padding: 22px 18px 30px; transform: translateY(100%); }
.ob-bp-mobile.ob-ms-bottom.is-open .ob-menu-list { transform: none; }
.ob-bp-mobile.ob-mcompact .ob-menu-list { gap: 0; padding: 8px; }
.ob-bp-mobile.ob-mcompact .ob-menu-list a { padding: 9px 12px; font-size: 14px; }
.ob-bp-mobile.ob-mhidecta.ob-mcta .ob-menu-list > li:last-child { display: none; }
.ob-bp-mobile.ob-bpos-left .ob-burger { margin-left: 0; margin-right: auto; }
.ob-bp-mobile.ob-bpos-center .ob-burger { margin-left: auto; margin-right: auto; }
}
@media (max-width: 1024px) {
.ob-bq-tablet.ob-bm-compact .ob-btn { min-height: 34px; padding: 0 14px; font-size: .8rem; gap: 6px; }
.ob-bq-tablet.ob-bm-icon .ob-btn { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }
.ob-bq-tablet.ob-bm-icon .ob-btn > span, .ob-bq-tablet.ob-bm-float .ob-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-bq-tablet.ob-bm-float .ob-btn { position: fixed; z-index: 90; bottom: 18px; right: 18px; width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.ob-bq-tablet.ob-bm-float.ob-bf-left .ob-btn { right: auto; left: 18px; }
.ob-bq-tablet.ob-bm-float.ob-bf-center .ob-btn { right: auto; left: 50%; transform: translateX(-50%); }
.ob-bq-tablet.ob-bm-hide { display: none; }
}
@media (max-width: 767px) {
.ob-bq-mobile.ob-bm-compact .ob-btn { min-height: 34px; padding: 0 14px; font-size: .8rem; gap: 6px; }
.ob-bq-mobile.ob-bm-icon .ob-btn { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }
.ob-bq-mobile.ob-bm-icon .ob-btn > span, .ob-bq-mobile.ob-bm-float .ob-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-bq-mobile.ob-bm-float .ob-btn { position: fixed; z-index: 90; bottom: 18px; right: 18px; width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.ob-bq-mobile.ob-bm-float.ob-bf-left .ob-btn { right: auto; left: 18px; }
.ob-bq-mobile.ob-bm-float.ob-bf-center .ob-btn { right: auto; left: 50%; transform: translateX(-50%); }
.ob-bq-mobile.ob-bm-hide { display: none; }
}
@media (max-width: 767px) { .ob-w:has(> .ob-bq-mobile.ob-bm-float) { translate: none; } }
@media (max-width: 1024px) { .ob-w:has(> .ob-bq-tablet.ob-bm-float) { translate: none; } }
@media (max-width: 767px) { .ob-w.ob-anim:has(> .ob-bq-mobile.ob-bm-float) { opacity: 1; transform: none; filter: none; } }
@media (max-width: 1024px) { .ob-w.ob-anim:has(> .ob-bq-tablet.ob-bm-float) { opacity: 1; transform: none; filter: none; } }
@media (max-width: 767px) { .ob-container:has(.ob-bq-mobile.ob-bm-float) { z-index: auto; } }
@media (max-width: 1024px) { .ob-container:has(.ob-bq-tablet.ob-bm-float) { z-index: auto; } }
@media (max-width: 767px) { .ob-section:has(.ob-bq-mobile.ob-bm-float) { isolation: auto; } }
@media (max-width: 1024px) { .ob-section:has(.ob-bq-tablet.ob-bm-float) { isolation: auto; } }

/* YouTube background video */
.ob-section:has(> .ob-bg-yt) { overflow: hidden; }
.ob-bg-yt { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size; }
.ob-bg-yt iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; }
/* header extras */

.ob-hdr-smart { transition: transform .35s ease, background .3s ease, box-shadow .3s ease; }
.ob-hdr-smart.is-hidden { transform: translateY(-110%); }
.ob-editing .ob-hdr-smart.is-hidden { transform: none; }

/* ---- compact widgets in a header: menu button, search icon and buttons take only the space they need ---- */
/* (every widget is full width by default; the dropdown panel of a menu is fixed to the screen, not to the column) */
/* A transform on the widget would turn it into the "screen" of the fixed dropdown, so these widgets are moved with left/top
   (the same Move left/right + up/down settings, and the editor's move handle, still work — on every device). */
.ob-w:has(.ob-menu), .ob-w:has(.obx-search__layer) { translate: none !important; transform: none !important; left: var(--ob-x, 0); top: var(--ob-y, 0); }
@media (max-width: 767px) { .ob-w:has(.ob-menu.ob-bp-mobile), .ob-w:has(.ob-menu.ob-bp-tablet) { flex: 0 0 auto; width: auto; margin-inline-start: auto; } }
@media (min-width: 768px) and (max-width: 1024px) { .ob-w:has(.ob-menu.ob-bp-tablet) { flex: 0 0 auto; width: auto; margin-inline-start: auto; } }
.ob-w:has(.obx-search--icon) { flex: 0 0 auto; width: auto; }
header.ob-section .ob-col-inner, .ob-part-header .ob-col-inner { align-items: center; column-gap: 10px; }
header.ob-section .ob-w:has(> .ob-btn-wrap), .ob-part-header .ob-w:has(> .ob-btn-wrap) { flex: 0 0 auto; width: auto; }

/* A sticky header needs a page that is not its own scroll box: themes often set overflow-x:hidden on html/body,
   which silently turns sticky off. "clip" hides sideways overflow without creating a scroll container. */
html:has(.ob-sticky-sticky), html:has(.ob-sticky-overlay-sticky), body:has(.ob-sticky-sticky), body:has(.ob-sticky-overlay-sticky) { overflow: visible !important; overflow-x: clip !important; overflow-y: visible !important; }

/* ---- 1.5.9: social icon looks, brand colours, shared overlay ---- */
.ob-social a{border-radius: var(--ob-so-r, 10px);}
.ob-so-circle a{border-radius: 50%;}
.ob-so-outline a{border: 2px solid currentColor; background: none; border-radius: var(--ob-so-r, 12px);}
.ob-so-solid a{background: var(--ob-primary); color: var(--ob-on-primary); border: 0; border-radius: var(--ob-so-r, 12px);}
.ob-so-gradient a{background: var(--ob-fire); color: var(--ob-on-primary); border: 0; border-radius: var(--ob-so-r, 12px);}
.ob-so-glass a{background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--ob-so-r, 14px); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);}
.ob-so-soft a{background: color-mix(in srgb, var(--ob-primary) 16%, transparent); color: var(--ob-primary); border: 0; border-radius: var(--ob-so-r, 12px);}
.ob-so-brand a, .ob-so-brandc a{border: 0; color: #fff; background: var(--ob-nb, #444); border-radius: var(--ob-so-r, 12px);}
.ob-so-brandc a{border-radius: 50%;}
.ob-so-brandi a{background: none; border: 0; color: var(--ob-nb, currentColor);}
.ob-social a[data-net="instagram"]{--ob-nb: #E4405F;} .ob-social a[data-net="facebook"]{--ob-nb: #1877F2;} .ob-social a[data-net="linkedin"]{--ob-nb: #0A66C2;} .ob-social a[data-net="youtube"]{--ob-nb: #FF0000;} .ob-social a[data-net="tiktok"]{--ob-nb: #111;} .ob-social a[data-net="x"]{--ob-nb: #000;} .ob-social a[data-net="whatsapp"]{--ob-nb: #25D366;} .ob-social a[data-net="behance"]{--ob-nb: #1769FF;} .ob-social a[data-net="mail"]{--ob-nb: #EA4335;} .ob-social a[data-net="phone"]{--ob-nb: #2E7D32;} .ob-social a[data-net="globe"]{--ob-nb: #555;}
.ob-social .ob-icon{width: var(--ob-so-i, 45%); height: var(--ob-so-i, 45%);}
.ob-so-hv-none a:hover{transform: none;}
.ob-so-hv-grow a:hover{transform: scale(1.14);}
.ob-so-hv-rotate a:hover{transform: rotate(10deg) scale(1.08);}
.ob-so-hv-brand a:hover{background: var(--ob-nb, var(--ob-primary)); color: #fff; border-color: transparent;}
.ob-social a:hover{color: var(--ob-so-hc, var(--ob-on-primary));}
.ob-so-brand a:hover, .ob-so-brandc a:hover, .ob-so-gradient a:hover, .ob-so-solid a:hover{color: #fff;}
.ob-so-brandi a:hover{background: none; color: var(--ob-nb);}

/* ---- 1.5.9: columns -> carousel (mobile / tablet) ---- */
.ob-mc-nav{display: none;}
@media (max-width: 767px){
  .ob-stack-carousel.ob-mc-on > .ob-container, .ob-stack-carousel-t.ob-mc-on > .ob-container{position: relative;}
  .ob-stack-carousel.ob-mc-on > .ob-container > .ob-row{flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;}
  .ob-stack-carousel.ob-mc-on > .ob-container > .ob-row::-webkit-scrollbar{display: none;}
  .ob-stack-carousel.ob-mc-on > .ob-container > .ob-row > .ob-col{flex: 0 0 calc((100% - var(--ob-gap, 24px) * (var(--mcpv, 1) - 1)) / var(--mcpv, 1)); width: auto; max-width: none; scroll-snap-align: start;}
  .ob-stack-carousel.ob-mc-on .ob-mc-nav{display: flex;}
}
@media (max-width: 1024px){
  .ob-stack-carousel-t.ob-mc-on > .ob-container > .ob-row{flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;}
  .ob-stack-carousel-t.ob-mc-on > .ob-container > .ob-row::-webkit-scrollbar{display: none;}
  .ob-stack-carousel-t.ob-mc-on > .ob-container > .ob-row > .ob-col{flex: 0 0 calc((100% - var(--ob-gap, 24px) * (var(--mcpv, 1) - 1)) / var(--mcpv, 1)); width: auto; max-width: none; scroll-snap-align: start;}
  .ob-stack-carousel-t.ob-mc-on .ob-mc-nav{display: flex;}
}
.ob-mc-dots-box{justify-content: center; gap: 8px; margin-top: 14px;}
.ob-mc-dots-box button{width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--ob-line2, rgba(255, 255, 255, .25)); cursor: pointer; transition: width .3s, background .3s;}
.ob-mc-dots-box button.is-on{width: 26px; background: var(--ob-primary);}
.ob-mc-arrow{position: absolute; top: 45%; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ob-line2, rgba(255, 255, 255, .25)); background: rgba(10, 10, 10, .65); color: #fff; display: none; place-items: center; cursor: pointer; padding: 0; font-size: 18px; line-height: 1;}
.ob-mc-arrows .ob-mc-arrow{display: grid;}
.ob-mc-prev{inset-inline-start: 4px;} .ob-mc-next{inset-inline-end: 4px;}
.ob-mc-arrow:disabled{opacity: .3;}
[dir="rtl"] .ob-mc-arrow{transform: scaleX(-1);}
/* header glass: a real see-through tint + blur, always on when the option is chosen */
.ob-hdr-blur{background-color: color-mix(in srgb, var(--ob-header-bg, #0a0a0a) 55%, transparent) !important; -webkit-backdrop-filter: blur(var(--ob-hb, 18px)) saturate(1.5); backdrop-filter: blur(var(--ob-hb, 18px)) saturate(1.5);}

/* Header on tablets / phones. "Automatic" = one row, logo at the start, menu / actions at the end.
   It is written with :where() so every column setting you make (width, align, order, gap) still wins over it, and the two
   "Header on tablet / mobile" options of the section can switch it off: "My column widths" or "One under another". */
@media (max-width: 1024px) {
  header.ob-section:not(.ob-hdt-stack):not(.ob-hdm-stack) > .ob-container > .ob-row, .ob-part-header .ob-section:not(.ob-hdt-stack):not(.ob-hdm-stack) > .ob-container > .ob-row { flex-wrap: nowrap !important; }
  :where(header.ob-section, .ob-part-header) > .ob-container > .ob-row { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px; }
  :where(header.ob-section, .ob-part-header) > .ob-container > .ob-row > .ob-col { flex: 0 1 auto; width: auto; max-width: none; }
  :where(header.ob-section, .ob-part-header) > .ob-container > .ob-row > .ob-col > .ob-col-inner { flex-wrap: nowrap; justify-content: flex-end; }
  :where(header.ob-section, .ob-part-header) > .ob-container > .ob-row > .ob-col:first-child > .ob-col-inner { justify-content: flex-start; }
  header.ob-section img, .ob-part-header img { max-width: 100%; height: auto; }
}
/* option: My column widths — the columns keep the widths set for that device, side by side */
@media (min-width: 768px) and (max-width: 1024px) {
  .ob-hdt-cols > .ob-container > .ob-row { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--ob-gap, 10px); }
  .ob-hdt-cols > .ob-container > .ob-row > .ob-col { flex: 0 1 calc(var(--ob-w, 100%) - var(--ob-gap, 10px)); width: auto; }
  .ob-hdt-cols > .ob-container > .ob-row > .ob-col > .ob-col-inner { flex-wrap: nowrap; justify-content: flex-start; }
  .ob-hdt-cols > .ob-container > .ob-row { flex-wrap: nowrap !important; } .ob-hdt-cols > .ob-container > .ob-row > .ob-col { min-width: 0; }
  .ob-hdt-stack > .ob-container > .ob-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .ob-hdt-stack.ob-reverse > .ob-container > .ob-row { flex-direction: column-reverse; }
  .ob-hdt-stack > .ob-container > .ob-row > .ob-col { flex: 0 0 auto; width: 100%; }
  .ob-hdt-stack > .ob-container > .ob-row > .ob-col > .ob-col-inner { justify-content: center; }
}
@media (max-width: 767px) {
  .ob-hdm-cols > .ob-container > .ob-row { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--ob-gap, 10px); }
  .ob-hdm-cols > .ob-container > .ob-row > .ob-col { flex: 0 1 calc(var(--ob-w, 100%) - var(--ob-gap, 10px)); width: auto; }
  .ob-hdm-cols > .ob-container > .ob-row > .ob-col > .ob-col-inner { flex-wrap: nowrap; justify-content: flex-start; }
  .ob-hdm-cols > .ob-container > .ob-row { flex-wrap: nowrap !important; } .ob-hdm-cols > .ob-container > .ob-row > .ob-col { min-width: 0; }
  .ob-hdm-stack > .ob-container > .ob-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .ob-hdm-stack.ob-reverse > .ob-container > .ob-row { flex-direction: column-reverse; }
  .ob-hdm-stack > .ob-container > .ob-row > .ob-col { flex: 0 0 auto; width: 100%; }
  .ob-hdm-stack > .ob-container > .ob-row > .ob-col > .ob-col-inner { justify-content: center; }
}

/* The whole widget frame (not only its content) breaks out of a narrow column. */
.ob-w:is(.ob-wfit-wide,:has(.obx-bleed--wide)){flex:0 0 auto;width:min(calc(100vw - 40px),1440px);margin-inline-start:calc(50% - min(calc(100vw - 40px),1440px) / 2)}
.ob-w:is(.ob-wfit-full,:has(.obx-bleed--full)){flex:0 0 auto;width:100vw;margin-inline-start:calc(50% - 50vw)}
[dir=rtl] .ob-w:is(.ob-wfit-wide,:has(.obx-bleed--wide)){margin-inline-start:0;margin-inline-end:calc(50% - min(calc(100vw - 40px),1440px) / 2)}
[dir=rtl] .ob-w:is(.ob-wfit-full,:has(.obx-bleed--full)){margin-inline-start:0;margin-inline-end:calc(50% - 50vw)}
html:has(:is(.obx-bleed--full,.ob-wfit-full)){overflow-x:clip}
@media(max-width:767px){.ob-w:is(.ob-wfit-wide,:has(.obx-bleed--wide)){width:calc(100vw - 32px);margin-inline-start:calc(50% - (100vw - 32px) / 2)}[dir=rtl] .ob-w:is(.ob-wfit-wide,:has(.obx-bleed--wide)){margin-inline-start:0;margin-inline-end:calc(50% - (100vw - 32px) / 2)}}

/* menu links hidden per device (Menu widget › Links › Hide this link on…) */
@media (min-width: 1025px) { .ob-menu li.ob-hd { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .ob-menu li.ob-ht { display: none !important; } }
@media (max-width: 767px) { .ob-menu li.ob-hm { display: none !important; } }

.ob-w:has(.ob-menu.ob-bp-auto.ob-fb) { flex: 0 0 auto; width: auto; margin-inline-start: auto; }

/* the same mobile menu options for the script-chosen burger */
.ob-bp-auto.ob-fb.ob-ms-side .ob-menu-list, .ob-bp-auto.ob-fb.ob-ms-sideleft .ob-menu-list { top: 0; bottom: 0; height: 100vh; max-height: none; width: min(86vw, 340px); max-width: none; border-radius: 0; border-width: 0 0 0 1px; padding: 84px 18px 28px; transform: translateX(100%); right: 0; left: auto; }
.ob-bp-auto.ob-fb.ob-ms-sideleft .ob-menu-list { left: 0; right: auto; transform: translateX(-100%); border-width: 0 1px 0 0; }
.ob-bp-auto.ob-fb.ob-ms-side.is-open .ob-menu-list, .ob-bp-auto.ob-fb.ob-ms-sideleft.is-open .ob-menu-list { transform: none; }
.ob-bp-auto.ob-fb.ob-ms-bottom .ob-menu-list { top: auto; bottom: 0; left: 0; width: 100vw; max-width: none; max-height: 75vh; border-radius: 22px 22px 0 0; padding: 22px 18px 30px; transform: translateY(100%); }
.ob-bp-auto.ob-fb.ob-ms-bottom.is-open .ob-menu-list { transform: none; }
.ob-bp-auto.ob-fb.ob-mcompact .ob-menu-list { gap: 0; padding: 8px; }
.ob-bp-auto.ob-fb.ob-mcompact .ob-menu-list a { padding: 9px 12px; font-size: 14px; }
.ob-bp-auto.ob-fb.ob-mhidecta.ob-mcta .ob-menu-list > li:last-child { display: none; }
.ob-bp-auto.ob-fb.ob-bpos-left .ob-burger { margin-left: 0; margin-right: auto; }
.ob-bp-auto.ob-fb.ob-bpos-center .ob-burger { margin-left: auto; margin-right: auto; }

/* button: small-screen look on tablets only */
@media (min-width: 768px) and (max-width: 1024px) {
.ob-bq-tabletonly.ob-bm-compact .ob-btn { min-height: 34px; padding: 0 14px; font-size: .8rem; gap: 6px; }
.ob-bq-tabletonly.ob-bm-icon .ob-btn { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }
.ob-bq-tabletonly.ob-bm-icon .ob-btn > span, .ob-bq-tabletonly.ob-bm-float .ob-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-bq-tabletonly.ob-bm-float .ob-btn { position: fixed; z-index: 90; bottom: 18px; right: 18px; width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.ob-bq-tabletonly.ob-bm-float.ob-bf-left .ob-btn { right: auto; left: 18px; }
.ob-bq-tabletonly.ob-bm-float.ob-bf-center .ob-btn { right: auto; left: 50%; transform: translateX(-50%); }
.ob-bq-tabletonly.ob-bm-hide { display: none; }
}

/* no animation while the menu decides between links and the burger */
.ob-menu.ob-mm .ob-menu-list, .ob-menu.ob-mm .ob-burger{transition:none !important}