/* Mazin.ai — global styles */
@font-face { font-family:'Bahnschrift'; src:url('/assets/fonts/Bahnschrift-SemiLight.otf') format('opentype'); font-weight:300; font-display:swap; }
  @font-face { font-family:'Bahnschrift'; src:url('/assets/fonts/Bahnschrift-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
  @font-face { font-family:'Bahnschrift'; src:url('/assets/fonts/Bahnschrift-SemiBold.otf') format('opentype'); font-weight:600; font-display:swap; }
  html, body { margin:0; padding:0; background:#fff; }
  * { box-sizing:border-box; }
  a { color:#E8430A; text-decoration:none; }
  a:hover { color:#c8380a; }
  input, textarea, select { font-family:inherit; }
  ::selection { background:#E8430A; color:#fff; }
  @keyframes m4-drift { 0% { transform:translate3d(-2%,-1%,0) scale(1); } 50% { transform:translate3d(3%,2%,0) scale(1.08); } 100% { transform:translate3d(-2%,-1%,0) scale(1); } }
  @keyframes m4-lineup { from { transform:translateY(105%) rotate(2deg); } to { transform:translateY(0) rotate(0); } }
  @keyframes m4-softin { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

/* generated interaction states */
.scp0:hover { color: rgb(232, 67, 10) !important; }
.scp1:hover { background: rgb(232, 67, 10) !important; }
.scp2:hover { background: rgb(250, 249, 247) !important; }
.scp3:hover { background: rgb(242, 239, 234) !important; }
.scp4:hover { background: rgba(255, 255, 255, 0.1) !important; }
.scp5:hover { opacity: 0.7 !important; }
.scp6:focus { box-shadow: rgb(232, 67, 10) 0px 0px 0px 1px inset !important; }
.scp7:hover { background: rgb(244, 124, 89) !important; }
.scp8:hover { color: rgb(255, 255, 255) !important; }

/* static export helpers */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
[data-reveal].is-in{opacity:1!important;transform:none!important}
.faq-answer{font-size:15px;line-height:1.7;color:#3F444B;margin:0 0 24px;max-width:80ch;display:none}
.faq-answer.is-open{display:block}
a.navlink{color:inherit;text-decoration:none}
a.navlink:hover{color:#E8430A}

/* nav: language switch + demo button */
.lang-alt:hover{color:#E8430A}
.btn-demo{transition:background .25s ease}
.btn-demo:hover{background:#E8430A!important}
.btn-demo:hover span,.btn-demo:hover a{color:#fff!important}
.btn-demo span,.btn-demo a{color:#fff!important}

.btn-demo:hover{background:#E8430A!important}
.btn-demo span,.btn-demo span a,.btn-demo a.navlink{color:#fff!important}
.btn-demo:hover span,.btn-demo:hover a.navlink{color:#fff!important}

/* language switch (rendered pill) */
.scp0[style*="rgba(0, 0, 0, 0.5)"]:hover{color:#E8430A!important}

/* ---- hover system (static export) ---- */
a,div[style*="cursor: pointer"],button{transition:color .3s ease,background-color .35s ease,box-shadow .35s ease,transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease}
/* nav links */
.navlink:hover{color:#E8430A!important}
.lang-alt:hover{color:#E8430A!important}
/* primary / secondary buttons */
.btn-demo:hover{background:#E8430A!important;transform:translateY(-2px)}
.btn-demo span,.btn-demo a.navlink,.btn-demo:hover span,.btn-demo:hover a.navlink{color:#fff!important}
div[style*="border-radius: 60px"][style*="background: rgb(232, 67, 10)"]:hover{background:#f4643a!important;transform:translateY(-2px)}
div[style*="border-radius: 60px"][style*="box-shadow: inset 0 0 0 1px rgba(255,255,255"]:hover,
div[style*="border-radius: 60px"][style*="rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset"]:hover{background:rgba(255,255,255,.12)!important}
/* chips / pills */
div[style*="border-radius: 60px"][style*="rgba(0, 0, 0, 0.14) 0px 0px 0px 1px inset"]:hover{background:#FAF9F7!important;box-shadow:inset 0 0 0 1px rgba(232,67,10,.55)!important;color:#E8430A!important}
/* cards: masked, light, dark and grid cells */
div[style*="mask-image"][style*="card-shape"]:hover{transform:translateY(-8px)}
div[style*="background: rgb(255, 255, 255)"][style*="min-height"]:hover{background:#FAF9F7!important}
div[style*="background: rgb(250, 249, 247)"][style*="min-height"]:hover{background:#F2EFEA!important}
/* imagery */
img{transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s ease,filter .5s ease}
div[style*="overflow: hidden"]:hover>img,div[style*="mask-image"]:hover>img{transform:scale(1.045)}
a:hover>img{opacity:.75}
/* article cards */
div[style*="border-radius: 20px"][style*="overflow: hidden"]:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(232,67,10,.5)!important}
/* FAQ rows */
div[style*="border-top: 1px solid rgba(0, 0, 0, 0.12)"]>div[style*="cursor: pointer"]:hover{opacity:.7}
/* form send */
div[style*="background: rgb(232, 67, 10)"][style*="height: 52px"]:hover{background:#f4643a!important}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* sector cards: repeatable hover */
[data-reveal]{will-change:transform}
[data-reveal]:not([data-stack]):not([data-stack] *):hover{transform:translateY(-8px)!important}
[data-stack],[data-stack] [data-reveal]{transform:none}
/* FAQ rows: colour only, no opacity dip */
div[style*="border-top: 1px solid rgba(0, 0, 0, 0.12)"] > div[style*="cursor: pointer"]:hover{opacity:1!important}
div[style*="border-top: 1px solid rgba(0, 0, 0, 0.12)"] > div[style*="cursor: pointer"]:hover > div{color:#E8430A!important}
div[style*="border-top: 1px solid rgba(255, 255, 255, 0.14)"] > div[style*="cursor: pointer"]:hover{opacity:1!important}
div[style*="border-top: 1px solid rgba(255, 255, 255, 0.14)"] > div[style*="cursor: pointer"]:hover > div{color:#E8430A!important}
/* blog carousel */
.blog-rail{display:flex!important;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;-ms-overflow-style:none;scrollbar-width:none}
.blog-rail::-webkit-scrollbar{display:none}
.blog-rail > div{flex:0 0 clamp(280px,32%,420px);scroll-snap-align:start}
.rail-btn{width:48px;height:48px;border-radius:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);color:#fff;font-size:18px;user-select:none;transition:background .3s ease}
.rail-btn:hover{background:rgba(255,255,255,.14)}

/* ================= RESPONSIVE ================= */
html,body{max-width:100%}
body{overflow-x:clip}
img,svg,video{max-width:100%}
input,textarea,select{max-width:100%}

/* mobile nav shell */
.r-burger{display:none;width:46px;height:46px;border-radius:60px;background:#000;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;flex:0 0 auto}
.r-burger span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .3s ease,opacity .3s ease}
.r-burger.open span:first-child{transform:translateY(3.2px) rotate(45deg)}
.r-burger.open span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.r-sheet{position:fixed;inset:0;z-index:998;background:#000;display:none;flex-direction:column;justify-content:center;gap:10px;padding:96px 34px 48px}
.r-sheet.open{display:flex}
.r-sheet-links{display:flex;flex-direction:column;gap:6px}
.r-sheet-links > div{padding:14px 0!important;font-size:30px!important;line-height:1.1!important;border-bottom:1px solid rgba(255,255,255,.14)}
.r-sheet-links a,.r-sheet-links > div{color:#fff!important;font-family:'Bahnschrift',sans-serif;font-weight:600;letter-spacing:-.02em}
.r-sheet-links a:hover,.r-sheet-links > div:hover{color:#E8430A!important}
.r-sheet-lang{display:flex;gap:6px;margin-top:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)!important;border-radius:60px;width:max-content;padding:4px}
.r-sheet-lang > div{color:#fff!important}

@media (max-width:1180px){
  .r-pad{padding-left:44px!important;padding-right:44px!important}
  .r-gap56{column-gap:32px!important;row-gap:44px!important}
}
@media (max-width:1000px){
  .r-nav{gap:12px!important;padding:10px 10px 10px 22px!important}
  .r-nav > div[style*="flex-wrap: wrap"]{display:none!important}
  .r-nav .lang-alt{font-size:13px!important}
  .r-burger{display:flex}
  .r-g3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r-tall{min-height:0!important}
  .r-card{padding-left:34px!important;padding-right:34px!important}
}
@media (max-width:760px){
  .r-pad{padding-left:24px!important;padding-right:24px!important}
  .r-g3,.r-gauto{grid-template-columns:minmax(0,1fr)!important}
  .r-gap56{column-gap:0!important;row-gap:34px!important}
  .r-pad[style*="padding: 230px"],.r-pad[style*="padding: 190px"]{padding-top:130px!important;padding-bottom:110px!important}
  .r-card{padding-top:56px!important;padding-bottom:56px!important}
  .r-sheet-links > div{font-size:26px!important}
  /* hero */
  div[style*="min-height: 1030px"]{min-height:0!important}
  div[style*="min-height: 720px"]{min-height:0!important}
}
@media (max-width:520px){
  .r-pad{padding-left:18px!important;padding-right:18px!important}
  .r-nav{padding:8px 8px 8px 16px!important}
  .r-nav img{height:19px!important}
  .r-sheet{padding:88px 22px 40px}
  .r-sheet-links > div{font-size:23px!important}
  .r-card{padding-left:24px!important;padding-right:24px!important}
  .blog-rail > div{flex:0 0 84%}
}
/* stop hover-lift on touch devices */
@media (hover:none){
  [data-reveal]:hover,.r-card:hover,div[style*="border-radius: 20px"]:hover{transform:none!important}
}

/* blog rail */
.rail-ctrl{display:flex;gap:10px;align-self:flex-end;flex:0 0 auto}
.blog-rail{scroll-padding-left:0}
.blog-rail > div{min-width:0}
@media (max-width:760px){.rail-ctrl{align-self:flex-start}}

/* mobile navbar: one row, burger inline, never wraps */
@media (max-width:1000px){
  .r-nav{flex-wrap:nowrap!important;width:auto!important;max-width:calc(100vw - 36px)!important;justify-content:space-between!important;min-height:64px!important;gap:14px!important;padding:8px 8px 8px 22px!important}
  .r-nav > *{flex:0 0 auto}
  .r-nav > .btn-demo{display:none!important}
}
.r-sheet .btn-demo{display:flex!important;height:56px!important;margin-top:24px;justify-content:center;background:#E8430A!important;box-shadow:none!important}
.r-sheet .btn-demo span,.r-sheet .btn-demo a{color:#fff!important;font-size:17px!important}

/* Why Mazin.ai — stacking cards */
.stack-wrap{display:block!important}
.stack-card{position:sticky!important;will-change:transform}
.stack-card:hover{transform:none!important}
@media (max-width:760px){
  .stack-card{margin-bottom:26vh!important;margin-left:0!important;margin-right:0!important}
  .stack-card:last-child{margin-bottom:0!important}
}

/* stacking cards: never taller than the viewport while pinned */
.stack-card > div{min-height:min(74vh,640px)}
@media (max-height:900px){
  .stack-card > div > div:last-child{padding-top:clamp(56px,7vh,92px)!important;padding-bottom:clamp(56px,7vh,92px)!important}
}
/* responsive: swap the cut-corner mask for plain radii where it would deform */
@media (max-width:900px){
  [style*="mask-image"]{-webkit-mask-image:none!important;mask-image:none!important}
  .r-card,.stack-card > div > div:first-child{border-radius:28px!important}
  .stack-card > div > div:first-child{overflow:hidden}
  div[style*="footer-shape"],div[style*="section-mask"],div[style*="hero-shape"]{border-radius:0!important}
}
@media (max-width:900px) and (min-width:1px){
  div[style*="card-shape"]{border-radius:26px!important}
}

/* pinned card always fits the viewport: vh-based stagger + capped height */
.stack-card > div{min-height:min(68vh,620px)!important}

/* stacking cards: equal heights + enough trailing travel for the last card */
.stack-wrap{padding-bottom:60px!important}
.stack-card{margin-bottom:0!important}
.stack-gap{height:540px;pointer-events:none}
.stack-gap:last-child{height:820px}
@media (max-width:760px){.stack-gap{height:300px}.stack-gap:last-child{height:420px}}
.stack-card > div{min-height:min(74vh,640px)!important}

/* ===== navbar: CSS-only responsive menu (server-rendered) ===== */
.nav-burger{display:none;width:46px;height:46px;border-radius:60px;background:#0B0B0C;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;flex:0 0 auto}
.nav-burger span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .3s ease,opacity .3s ease}
.nav-toggle:checked ~ .nav-burger span:first-child,
.r-nav .nav-toggle:checked + .nav-burger span:first-child{transform:translateY(3.2px) rotate(45deg)}
.r-nav .nav-toggle:checked + .nav-burger span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.nav-sheet{display:none}
.nav-sheet-inner{display:flex;flex-direction:column;gap:2px}
@media (max-width:1060px){
  .r-nav{flex-wrap:nowrap!important;width:auto!important;max-width:calc(100vw - 40px)!important;justify-content:space-between!important;gap:12px!important;padding:8px 8px 8px 20px!important;min-height:64px!important}
  .r-nav > div[style*="flex-wrap: wrap"],.r-nav > div[style*="flex-wrap:wrap"]{display:none!important}
  .r-nav > .btn-demo{display:none!important}
  .nav-burger{display:flex}
  .nav-sheet{display:block;position:fixed;inset:0;z-index:998;background:#0B0B0C;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;overflow-y:auto}
  .r-nav .nav-toggle:checked ~ .nav-sheet,
  body:has(.nav-toggle:checked) .nav-sheet{opacity:1;visibility:visible}
  .nav-sheet-inner{padding:110px 34px 60px;min-height:100%;justify-content:center}
  .nav-sheet a{display:block;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:Bahnschrift,'Noto Kufi Arabic',sans-serif;font-size:clamp(24px,7vw,34px);font-weight:600;letter-spacing:-.02em;color:#fff;text-decoration:none}
  .nav-sheet a:hover{color:#E8430A}
  .nav-sheet-cta{margin-top:26px;border:none!important;background:#E8430A;border-radius:60px;text-align:center;font-size:18px!important;padding:18px 24px!important}
  .nav-sheet-lang{display:flex;gap:8px;margin-top:26px}
  .nav-sheet-lang a{border-bottom:none;border-radius:60px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);padding:10px 18px!important;font-size:15px!important;font-family:'Instrument Sans',sans-serif;font-weight:500}
  .nav-sheet-lang a.on{background:#fff;color:#0B0B0C}
}
@media (max-width:560px){
  .r-nav{padding:8px 8px 8px 16px!important;gap:10px!important}
  .r-nav img{height:19px!important}
  .r-nav .lang-alt,.r-nav > div[style*="inset 0 0 0 1px rgba(0,0,0,0.12)"]{display:none!important}
}

@media (max-width:1060px){ body:has(.nav-toggle:checked){overflow:hidden} }

/* ===== responsive pass (PHP build) ===== */
html,body{max-width:100%}
body{overflow-x:clip}
img,svg,video,iframe,spline-viewer{max-width:100%}
@media (max-width:1180px){
  .r-pad,[style*="padding: 110px 80px"],[style*="padding: 230px 80px"],[style*="padding: 190px 80px"]{padding-left:44px!important;padding-right:44px!important}
}
@media (max-width:900px){
  [style*="mask-image"]{-webkit-mask-image:none!important;mask-image:none!important}
  [style*="card-shape"]{border-radius:26px!important;overflow:hidden}
  [style*="grid-template-columns: repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:760px){
  .r-pad,[style*="padding: 110px 80px"],[style*="padding: 230px 80px"],[style*="padding: 190px 80px"],[style*="padding: 100px 80px"],[style*="padding: 90px 80px"]{padding-left:22px!important;padding-right:22px!important}
  [style*="grid-template-columns: repeat(3"],[style*="grid-template-columns: repeat(auto-fit"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="column-gap: 56px"],[style*="gap: 56px"]{column-gap:0!important;row-gap:32px!important}
  [style*="min-height: 1030px"],[style*="min-height: 720px"],[style*="min-height: 560px"],[style*="min-height: 520px"]{min-height:0!important}
  [style*="padding: 170px 80px"]{padding:140px 22px 90px!important}
  .stack-card{margin-left:0!important;margin-right:0!important}
  .stack-gap{height:280px!important}
  .stack-gap:last-child{height:360px!important}
  h1{font-size:clamp(32px,9vw,46px)!important;line-height:1.02!important}
  h2{font-size:clamp(27px,7.4vw,38px)!important;line-height:1.06!important}
  spline-viewer{height:52vh!important}
  table{display:block;overflow-x:auto}
}
@media (max-width:520px){
  .r-pad{padding-left:16px!important;padding-right:16px!important}
  [style*="padding: 86px 48px"],[style*="padding: 56px 44px"]{padding:40px 22px!important}
}
@media (hover:none){
  [data-reveal]:hover,.stack-card:hover{transform:none!important}
}
/* RTL: mirror the nav row and the decorative cuts */
[dir="rtl"] .nav-sheet-inner a{text-align:right}
[dir="rtl"] .r-nav{padding:10px 30px 10px 10px!important}
@media (max-width:1060px){ [dir="rtl"] .r-nav{padding:8px 20px 8px 8px!important} }

/* cards must never move sideways on hover — only a vertical lift */
[data-reveal]:hover,[style*="card-shape"]:hover,.stack-card:hover{transform:translateY(-6px)}
[dir="rtl"] [data-reveal]:hover,[dir="rtl"] [style*="card-shape"]:hover{transform:translateY(-6px)!important}
.stack-card:hover{transform:none!important}

/* ===== Oct-01 pass: hovers, carousel, outlines ===== */
/* blog carousel: cards are <a> now — size every child, leave room for the hover lift */
.blog-rail{padding-top:14px!important;margin-top:-14px!important;padding-bottom:14px!important}
.blog-rail > *{flex:0 0 clamp(290px,32%,420px)!important;min-width:0;scroll-snap-align:start}
@media (max-width:900px){ .blog-rail > *{flex:0 0 62%!important} }
@media (max-width:760px){ .blog-rail{display:flex!important;grid-template-columns:none!important} .blog-rail > *{flex:0 0 84%!important} }
.blog-rail > a{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}
.blog-rail > a:hover{transform:translateY(-6px)!important;box-shadow:rgba(232,67,10,.55) 0 0 0 1px inset!important}
.blog-rail > a [style*="background-image"]{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.blog-rail > a:hover [style*="background-image"]{transform:scale(1.06)}

/* hero Spline off on phones */
@media (max-width:760px){ spline-viewer{display:none!important} }

/* sector cards: image zoom */
.sector-card > div:first-child{transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s ease}
.sector-card:hover > div:first-child{transform:scale(1.08);filter:grayscale(0) contrast(1.05) brightness(.95)!important}


/* About: iON tags + logo */
.ion-tag{transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.ion-tag:hover{background:#0B0B0C;color:#fff!important;box-shadow:none!important}
.ion-logo-link img{transition:opacity .25s ease,transform .35s ease}
.ion-logo-link:hover img{opacity:.75;transform:translateY(-2px)}

/* sitewide hover baseline: every interactive element answers the pointer */
a,button,[class^="scp"],[class*=" scp"],label.nav-burger{transition:color .25s ease,background-color .25s ease,box-shadow .25s ease,opacity .25s ease,transform .3s ease}
a:not([class]):hover{color:#E8430A}
.navlink:hover,.scpa:hover a{color:#E8430A!important}
.btn-demo:hover,[class*="scp1"]:hover{background:#E8430A!important}
.btn-demo:hover *,[class*="scp1"]:hover *{color:#fff!important}
[class*="scp2"]:hover{filter:brightness(1.08)}
[class*="scp9"]:hover{background:rgba(255,255,255,.12)!important}
button[type="submit"]:hover{filter:brightness(1.08);transform:translateY(-1px)}
[data-faq-row] > div:first-child:hover > div:first-child{color:#E8430A}
.nav-burger:hover{background:#E8430A}
[data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
[data-reveal]:not(.stack-card):not([style*="border-top"]):hover{transform:translateY(-6px)}
[data-reveal][style*="border-top"]:hover{border-top-color:#E8430A!important}
[data-reveal][style*="border-top"]:hover svg{transform:translateY(-3px)}
[data-reveal] svg{transition:transform .35s ease}
input:hover,textarea:hover,select:hover{box-shadow:inset 0 0 0 1px rgba(11,11,12,.28)!important}
input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 1.5px #E8430A!important}
@media (hover:none){ [data-reveal]:hover,.sector-card:hover > div:first-child,.blog-rail > a:hover{transform:none!important} }

/* blog index + related posts */
a[data-reveal],.post-related a{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
a[data-reveal]:hover,.post-related a:hover{transform:translateY(-6px);box-shadow:rgba(232,67,10,.5) 0 0 0 1px inset!important}
a[data-reveal] img,.post-related a img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
a[data-reveal]:hover img,.post-related a:hover img{transform:scale(1.06)}
.post-body a:hover{text-decoration:underline}

/* ===== form + cards fixes ===== */
/* dark / orange cards keep their own colour on hover */
[data-reveal][style*="background: rgb(0, 0, 0)"]:hover{background:rgb(0,0,0)!important}
[data-reveal][style*="background: rgb(232, 67, 10)"]:hover{background:rgb(232,67,10)!important}

/* About values: orange frame stays visible on hover */
.card-outlined{transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.card-outlined:hover{transform:translateY(-6px)}
.card-outlined .card-outlined-inner{transition:background .35s ease}
.card-outlined:hover .card-outlined-inner{background:rgb(26,26,26)!important}
@media (max-width:900px){
  .card-outlined{border-radius:26px!important}
  .card-outlined-inner{border-radius:24.5px!important}
}

/* submit button */
.mz-submit{transition:background .25s ease,transform .25s ease,opacity .25s ease}
.mz-submit:hover{background:#c8380a!important;color:#fff!important;transform:translateY(-1px)}
.mz-submit:focus-visible{outline:2px solid #E8430A;outline-offset:3px}
.mz-submit.is-sending{opacity:.7;cursor:progress;transform:none}

/* custom select */
.mz-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%230B0B0C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")!important;background-repeat:no-repeat!important;
  background-position:right 18px center!important;background-size:12px 8px!important;padding-right:46px!important;line-height:1.3}
.mz-select::-ms-expand{display:none}
[dir="rtl"] .mz-select{background-position:left 18px center!important;padding-right:16px!important;padding-left:46px!important}
.mz-select option{color:#0B0B0C;background:#fff}

/* validation */
form[data-enquiry] .is-invalid{box-shadow:inset 0 0 0 1.5px #E8430A!important;background-color:#fff6f2!important}
form[data-enquiry] .f-err{font-size:13px;line-height:1.4;color:#c8380a;min-height:0}
form[data-enquiry] .f-err:empty{display:none}
form[data-enquiry] .f-summary{border-radius:12px;background:rgba(232,67,10,.08);box-shadow:inset 0 0 0 1px rgba(232,67,10,.4);padding:12px 14px;font-size:14px;color:#0B0B0C}

/* resources cards: the CTA link covers the whole card */
.res-card{cursor:pointer}
.res-cta::after{content:"";position:absolute;inset:0;z-index:1}
.res-cta .res-arrow{transition:transform .3s ease}
.res-card:hover .res-cta .res-arrow{transform:translate(3px,-3px)}
.res-card:hover .res-cta{color:#c8380a!important}

/* ===== Oct-08 pass ===== */
/* Request a demo: the global .navlink:hover orange beat the white label on the orange button */
.btn-demo a.navlink:hover,.btn-demo:hover a.navlink,.btn-demo:hover a.navlink:hover,
.btn-demo:hover span,.btn-demo:hover *{color:#fff!important}
.nav-sheet a.nav-sheet-cta,.nav-sheet a.nav-sheet-cta:hover{color:#fff!important}
.nav-sheet a.nav-sheet-cta:hover{background:#c8380a!important}
/* arrows never render as emoji */
.btn-demo,.nav-sheet-cta,.res-arrow{font-variant-emoji:text}

/* integrations marquee: keep the spacing on small screens */
.sys-marquee{gap:56px!important;flex-wrap:nowrap!important}
.sys-marquee > span{flex:0 0 auto!important;white-space:nowrap!important}
@media (max-width:760px){.sys-marquee{gap:34px!important}.sys-marquee > span{font-size:15px!important}}

/* FAQ: group titles scroll normally on mobile */
@media (max-width:900px){
  .faq-sticky{position:static!important;top:auto!important}
}

/* About values: keep a thin 1.5px orange outline on mobile (mobile padding rules were thickening it) */
@media (max-width:900px){
  .card-outlined{padding:1.5px!important;border-radius:26px!important;background:#E8430A!important;min-height:0!important}
  .card-outlined-inner{border-radius:24.5px!important;background:rgb(18,18,18)!important;padding:32px 26px!important;min-height:0!important;-webkit-mask-image:none!important;mask-image:none!important}
}

/* About values: hairline orange outline (desktop + mobile) */
.card-outlined{padding:1px!important}
.card-outlined{background:rgba(232,67,10,0.75)!important}
@media (max-width:900px){
  .card-outlined{padding:1px!important;background:rgba(232,67,10,0.75)!important}
  .card-outlined-inner{border-radius:25px!important}
}

/* blog rail: overflow-x:auto silently made overflow-y:auto too (the hover lift overflowed),
   so the rail trapped vertical wheel/touch scrolling. Lock it to horizontal only. */
.blog-rail{
  overflow-x:auto!important;overflow-y:hidden!important;
  scroll-snap-type:x proximity!important;scroll-behavior:auto!important;
  overscroll-behavior-x:contain;overscroll-behavior-y:auto;
  touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;
  padding-top:14px!important;margin-top:-14px!important;padding-bottom:14px!important
}
.blog-rail::-webkit-scrollbar{display:none}