/* Odisal Sections: shared pieces every widget uses. Colours and fonts come from --osx-* (Settings → Odisal Sections). */
:root {
  --osx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --osx-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --osx-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --osx-gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --osx-gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
.osx, .osx * { box-sizing: border-box; }
.osx { font: 300 16px/1.5 var(--osx-body); color: var(--osx-text); -webkit-tap-highlight-color: transparent; }
/* Links take the section's colour unless a widget says otherwise (one class strong, so a theme's plain "a" colour loses and every widget rule still wins) */
.osx :where(a) { color: inherit; }
.osx img { max-width: 100%; display: block; }
.osx p { margin: 0; }
.osx :is(h1, h2, h3, h4) { margin: 0; font-weight: 400; text-wrap: balance; }
.osx a, .osx button { touch-action: manipulation; }
.osx :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--osx-accent); outline-offset: 2px; }
.osx-wrap { max-width: 1140px; margin: 0 auto; padding-left: var(--osx-gutter-l); padding-right: var(--osx-gutter-r); }
/* also ".osx …" so a builder's "svg { fill: currentColor }" (Header Footer Elementor has one) doesn't fill the line icons */
.osx-ico, .osx-btn-ar { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.osx .osx-ico, .osx .osx-btn-ar { fill: none; stroke: currentColor; }

/* Coloured section: the brand fade with an optional texture. Add the class "osx-green" to any Elementor container. */
.osx-green { position: relative; background: linear-gradient(90deg, var(--osx-dark) 0%, var(--osx-dark-2) 100%); }
.osx-green::before { content: ""; position: absolute; inset: 0; background: var(--osx-texture) center / 360px auto; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
.osx-green > * { position: relative; }
/* The same fade without the texture (the inner pages). */
.osx-fade { background: linear-gradient(90deg, var(--osx-dark) 0%, var(--osx-dark-2) 100%); }

/* Section label: a small chip in the accent colour */
.osx-label { display: inline-block; padding: 8px 13px; border-radius: 999px; background: color-mix(in srgb, var(--osx-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--osx-accent) 35%, transparent); font: 700 11px/1 var(--osx-label); letter-spacing: 2px; text-transform: uppercase; color: var(--osx-accent); }

/* Buttons: a pill with an arrow disc; a pill-shaped fill sweeps in on hover */
.osx-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; height: 54px; padding: 0 7px 0 26px; border: 0; border-radius: 999px; background: var(--osx-accent); color: var(--osx-dark); font: 700 12px/1 var(--osx-label); letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 12px 26px -14px rgba(0,0,0,.8); transition: transform 160ms var(--osx-ease-out), background-color 200ms ease, color 200ms ease; }
.osx-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 750ms var(--osx-ease-out); }
.osx-btn:active { transform: scale(0.97); }
/* A <button> pill: one element stronger than a theme's "button, [type=submit]" and their :hover / :focus rules,
   whichever order the sheets load in (Elementor sometimes loads widget styles before the theme's) */
.osx button.osx-btn, .osx button.osx-btn:is(:hover, :focus) { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; height: 54px; padding: 0 7px 0 26px; border: 0; border-radius: 999px; background-color: var(--_accent, var(--osx-accent)); color: var(--osx-dark); font: 700 12px/1 var(--osx-label); letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.osx-btn .osx-btn-ar { display: block; width: 40px; height: 40px; padding: 12px; flex: none; border-radius: 50%; background: var(--osx-dark); color: var(--osx-accent); transition: transform 300ms var(--osx-ease-out); }
.osx-btn--line { padding: 0 28px; background: transparent; color: var(--osx-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.osx-btn--line::after { background: rgba(255,255,255,.14); }
.osx-btn--light { background: #fff; color: var(--osx-dark); }
.osx-btn--light::after { background: var(--osx-accent); }
.osx-btn--glass { padding: 0 28px; justify-content: center; gap: 12px; background: color-mix(in srgb, var(--osx-dark) 55%, transparent); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.osx-btn--glass::after { background: color-mix(in srgb, var(--osx-dark) 40%, transparent); }
/* Elementor's ".elementor a { box-shadow: none }" would wipe the outlines and shadows above */
.osx .osx-btn { box-shadow: 0 12px 26px -14px rgba(0,0,0,.8); }
.osx .osx-btn--line { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.osx .osx-btn--glass { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.osx-btn--glass .osx-ico { width: 17px; height: 17px; color: var(--osx-accent); }
@media (hover: hover) and (pointer: fine) {
  .osx-btn:hover::after { clip-path: inset(0 0 0 0 round 999px); }
  .osx-btn:hover .osx-btn-ar { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .osx-btn::after, .osx-btn .osx-btn-ar { transition: none; } }

/* Scroll reveal: add .osx-rv to anything below the first screen; reveal.js marks it .in once seen */
.osx-js .osx-rv { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--osx-ease-out), transform 800ms var(--osx-ease-out); transition-delay: var(--osx-d, 0ms); }
.osx-js .osx-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .osx-js .osx-rv { opacity: 1; transform: none; transition: none; } }
.elementor-editor-active .osx-rv { opacity: 1 !important; transform: none !important; }

/* A theme's "a:hover, a:active { color: … }" (Hello Elementor's is navy) outranks the one-class colour rules above,
   and on phones a tapped link stays in :hover. These keep each link's own colour, one step stronger than the theme. */
.osx a.osx-btn:where(:hover, :active, :focus) { color: var(--osx-dark); }
.osx a.osx-btn--line:where(:hover, :active, :focus) { color: var(--osx-text); }
.osx a.osx-btn--light:where(:hover, :active, :focus) { color: var(--osx-dark); }
.osx a.osx-btn--glass:where(:hover, :active, :focus) { color: #fff; }
.osx a:is(.osx-projects-tile, .osx-ptl-tile, .osx-showroom-card, .osx-contact-tile):where(:hover, :active, :focus) { color: var(--osx-text); }
.osx .osx-quickbar-bar a:where(:hover, :active, :focus) { color: var(--osx-text); }
.osx .osx-quickbar-bar a.osx-quickbar-quote:where(:hover, :active, :focus) { color: var(--osx-dark); }
.osx a.osx-quickbar-top:where(:hover, :active, :focus) { color: var(--_top-ico); }