/* innovalz.com design layer (2026-11-01). Tokens: see DESIGN.md.
   Loaded by mu-plugins/innovalz-design.php on the front end only. Colours and type sizes of each
   widget live in its Elementor controls; this file holds fonts, tokens, resets the theme used to
   provide, and the few things Elementor controls cannot express (the tick, image ratios, form fields). */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(fonts/unbounded-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/readex-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/readex-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------- tokens ---------- */
:root{
  --iz-lime:#D8FC06; --iz-carbon:#10120C; --iz-graphite:#1B1E15; --iz-rule-d:#2D3125;
  --iz-paper:#F3F5EC; --iz-ink:#15170F; --iz-stone:#5B6150; --iz-mist:#A9AE9C; --iz-rule-l:#DCE0D0;
  --iz-body:"Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}

/* ---------- base (replaces the Seosight theme CSS, which is no longer loaded) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--iz-carbon);color:var(--iz-ink);font-family:var(--iz-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
p{margin:0 0 1em}
.elementor-widget-text-editor p:last-child,.elementor-widget-text-editor ul:last-child{margin-bottom:0}
h1,h2,h3,h4,h5,h6{margin:0}
::selection{background:var(--iz-lime);color:var(--iz-ink)}
:focus-visible{outline:2px solid var(--iz-lime);outline-offset:3px}
.iz-paper :focus-visible{outline-color:var(--iz-ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Arabic. Unbounded has no Arabic letters, so on Arabic pages every heading is set in Readex Pro (Arabic and
   Latin from one family, so "SEO" or "2019" inside an Arabic heading matches the words around it). Body text is
   one weight heavier than in English: Readex at 300 is too thin for Arabic. No tracking (it breaks letter joins). */
html[dir="rtl"] .elementor-heading-title,html[dir="rtl"] .iz-case h3,html[dir="rtl"] .elementor-toggle-title{
  font-family:"Readex Pro",system-ui,"Segoe UI",Tahoma,sans-serif!important;letter-spacing:0!important}
html[dir="rtl"] h1.elementor-heading-title,html[dir="rtl"] h2.elementor-heading-title,html[dir="rtl"] .iz-num .elementor-heading-title{font-weight:600!important;line-height:1.35!important}
html[dir="rtl"] h3.elementor-heading-title,html[dir="rtl"] h4.elementor-heading-title{font-weight:600!important;line-height:1.45!important}
html[dir="rtl"] .elementor-widget-text-editor,html[dir="rtl"] .elementor-widget-text-editor p,html[dir="rtl"] .elementor-icon-list-text{font-weight:400!important}
html[dir="rtl"] .elementor-button,html[dir="rtl"] .elementor-nav-menu a{letter-spacing:0!important;font-weight:500!important}
html[dir="rtl"] body{font-size:18px}

/* ---------- the tick (the slanted mark over the logo's i) ---------- */
.iz-hero{position:relative;overflow:hidden}
.iz-hero::after{content:"";position:absolute;top:0;inset-inline-end:-4vw;width:min(34vw,470px);aspect-ratio:60/62;
  background:var(--iz-lime);clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none}
html[dir="rtl"] .iz-hero::after{clip-path:polygon(0 0,100% 0,100% 100%)}
.iz-hero>.elementor-container{position:relative;z-index:1}
.iz-hero--page::after{width:min(22vw,300px);inset-inline-end:-2vw}
@media (max-width:767px){.iz-hero::after{width:22vw;inset-inline-end:0}.iz-hero--page::after{width:18vw}}

/* tick bullets */
.iz-ticks ul{list-style:none;margin:0;padding:0}
.iz-ticks li{position:relative;padding-inline-start:22px;margin:0 0 .55em}
.iz-ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:10px;height:10px;background:currentColor;
  clip-path:polygon(0 0,100% 0,0 100%)}
html[dir="rtl"] .iz-ticks li::before{clip-path:polygon(0 0,100% 0,100% 100%)}
.iz-dark .iz-ticks li::before,.iz-ticks.iz-on-dark li::before{background:var(--iz-lime)}

/* trust points under a page heading: inline ticks */
.iz-tick-inline .elementor-icon-list-item{position:relative;padding-inline-start:18px!important}
.iz-tick-inline .elementor-icon-list-item::before{content:"";position:absolute;inset-inline-start:0;top:.42em;width:9px;height:9px;
  background:var(--iz-lime);clip-path:polygon(0 0,100% 0,0 100%)}
html[dir="rtl"] .iz-tick-inline .elementor-icon-list-item::before{clip-path:polygon(0 0,100% 0,100% 100%)}

/* case-study text on Social Media Projects */
.iz-case h3{font-family:"Unbounded","Readex Pro",sans-serif;font-weight:500;font-size:15px;line-height:1.4;color:var(--iz-ink);margin:20px 0 6px}
.iz-case .content-block:first-child h3{margin-top:0}
.iz-case section,.iz-case .content-block{display:block}

/* primary button: one corner cut at the tick's angle */
.iz-btn .elementor-button{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:background-color .2s,color .2s}
html[dir="rtl"] .iz-btn .elementor-button{clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))}

/* inline widgets in a row (hero buttons): the gap sits on the inline-end side so it mirrors in Arabic */
.iz-gap-end{margin-inline-end:12px}

/* ---------- header ---------- */
.iz-nav .elementor-nav-menu--main .elementor-item{position:relative}
.iz-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after,
.iz-nav .elementor-nav-menu--main .current-menu-ancestor>.elementor-item::after{content:"";position:absolute;inset-inline-start:50%;bottom:4px;
  width:8px;height:8px;margin-inline-start:-4px;background:var(--iz-lime);clip-path:polygon(0 0,100% 0,0 100%);opacity:1!important;
  border:0!important;transform:none!important}
.iz-nav .elementor-nav-menu--dropdown{border:1px solid var(--iz-rule-d)}
.iz-nav .trp-menu-ls-label,.iz-nav .trp-ls-language-name{font-family:var(--iz-body)}
.iz-nav .elementor-menu-toggle{background:transparent!important;width:fit-content!important;padding:8px!important;margin-inline-start:auto!important;margin-inline-end:-8px!important}

/* ---------- surfaces ---------- */
.iz-dark{color:#fff}
.iz-dark .elementor-widget-text-editor a{color:var(--iz-lime)}
.iz-paper .elementor-widget-text-editor a{color:var(--iz-ink);text-decoration-color:var(--iz-stone)}
.iz-rule-top>.elementor-container{border-top:1px solid var(--iz-rule-l);padding-top:48px}
.iz-dark.iz-rule-top>.elementor-container{border-top-color:var(--iz-rule-d)}

/* ---------- work tiles ---------- */
.iz-tile .elementor-widget-image a{display:block;overflow:hidden;background:var(--iz-graphite)}
.iz-tile .elementor-widget-image img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.iz-tile:hover .elementor-widget-image img{transform:scale(1.03)}
@media (max-width:767px){.iz-tile .elementor-widget-image img{aspect-ratio:16/10}}
.iz-tile .elementor-heading-title a{text-decoration:none}

/* service index: linked lists */
.iz-links .elementor-icon-list-item a{text-decoration:none;border-bottom:1px solid var(--iz-rule-l);padding:12px 0;width:100%}
.iz-links .elementor-icon-list-item:last-child a{border-bottom:0}
.iz-links .elementor-icon-list-item a:hover .elementor-icon-list-text{text-decoration:underline;text-underline-offset:.25em}

/* phone numbers and e-mail stay left-to-right inside Arabic text */
a[href^="mailto:"] .elementor-icon-list-text,a[href^="tel:"] .elementor-icon-list-text{direction:ltr;unicode-bidi:isolate}

/* client logos */
.iz-logos img{display:block;margin-inline:auto;width:100%;max-width:150px;height:60px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.iz-logos img:hover{filter:none;opacity:1}

/* cards on Paper (service pages) */
.iz-card>.elementor-widget-wrap{border:1px solid var(--iz-rule-l);background:#fff}
.iz-dark .iz-card>.elementor-widget-wrap{border-color:var(--iz-rule-d);background:var(--iz-graphite)}

/* ---------- forms (Contact Form 7) ---------- */
.iz-form .wpcf7-form{display:grid;gap:16px}
.iz-form .wpcf7-form p{margin:0}
.iz-form label{display:block;font-size:14px;color:var(--iz-mist)}
.iz-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),.iz-form textarea,.iz-form select{
  width:100%;margin-top:6px;padding:14px 16px;background:var(--iz-graphite);border:1px solid var(--iz-rule-d);border-radius:2px;
  color:#fff;font:inherit;font-size:16px}
.iz-form textarea{min-height:150px;resize:vertical}
.iz-form input:focus,.iz-form textarea:focus,.iz-form select:focus{border-color:var(--iz-lime);outline:0}
.iz-form ::placeholder{color:#7d8371}
.iz-form input[type=submit],.iz-form button[type=submit]{appearance:none;border:0;border-radius:2px;background:var(--iz-lime);color:var(--iz-ink);
  font:500 16px/1 var(--iz-body);padding:18px 30px;cursor:pointer;justify-self:start;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.iz-form input[type=submit]:hover{background:#fff}
.iz-form .wpcf7-not-valid-tip{color:#ffb4a3;font-size:14px;margin-top:6px}
.iz-form .wpcf7-response-output{margin:0!important;border-radius:2px;color:#fff}
.iz-form input[type=file]{color:var(--iz-mist);font-size:14px;margin-top:6px}

/* social icons start at the reading side (the widget's own align control is physical) */
.iz-dark .elementor-social-icons-wrapper,.iz-footer .elementor-social-icons-wrapper{justify-content:flex-start!important;text-align:start!important}

/* case-study toggle under each project tile */
.iz-case-toggle .elementor-tab-title{display:flex;align-items:center;gap:10px;border-top:1px solid var(--iz-rule-d)!important;cursor:pointer}
.iz-case-toggle .elementor-toggle-icon{float:none!important;order:-1;margin:0!important;width:auto!important;display:inline-flex}
.iz-case-toggle .elementor-toggle-icon svg{width:12px;height:12px}
.iz-case-toggle .elementor-toggle-title{text-decoration:none}
.iz-case-toggle .elementor-tab-content{border:0!important;font-size:15px!important;line-height:1.7!important}
.iz-case-toggle .elementor-tab-content .content-block{font-size:15px}
/* the services line is two lines tall in every tile, so the toggles line up across a row */
.iz-work .iz-tile .elementor-widget-text-editor{min-height:3em}
html[dir="rtl"] .iz-work .iz-tile .elementor-widget-text-editor{min-height:3.4em}
.iz-case-toggle .elementor-tab-content h3{font:500 14px/1.4 "Unbounded","Readex Pro",sans-serif;color:#fff;margin:14px 0 6px}
.iz-case-toggle .elementor-tab-content .content-block:first-child h3{margin-top:4px}
html[dir="rtl"] .iz-case-toggle .elementor-tab-content h3{font-family:"Readex Pro",sans-serif;font-weight:600}

/* ---------- footer ---------- */
.iz-foot-links .elementor-icon-list-item a{padding:5px 0}
.iz-footer .elementor-nav-menu a,.iz-footer .elementor-icon-list-text{transition:color .2s}
.iz-footer .elementor-social-icon{transition:background-color .2s}

/* chaty floating button: keep it in the brand colours */
.chaty-channel .color-element{fill:var(--iz-lime)!important}