/* ==========================================================================
   DELLIUX theme — base + self-hosted fonts + blog typography
   Marketing pages carry their own verbatim inline styles from the design;
   this file provides fonts, the shared base reset, keyframes and the
   .entry-content styles used by Insights blog posts.
   ========================================================================== */

/* ---- Self-hosted fonts (latin) ---- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2')}

/* ---- Base (from the design <style> block) ---- */
html,body{margin:0;padding:0}
body{background:#faf9f5;color:#17191f;font-family:'IBM Plex Sans',sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#8f5827}
a:hover{color:#c9922e}
img{max-width:100%}
input,select,textarea{font-family:'IBM Plex Sans',sans-serif}
input:focus,select:focus,textarea:focus{outline:none;border-color:#c9922e!important;box-shadow:0 0 0 3px rgba(201,146,46,.14)}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(13px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){*{animation:none !important}}

/* WordPress admin bar shouldn't fight the sticky header */
@media screen and (max-width:600px){body.admin-bar header[data-site-header]{top:0}}

/* ---- Insights blog post typography (.entry-content) ---- */
.entry-content{font-family:'IBM Plex Sans',sans-serif;font-size:18px;line-height:1.75;color:#33373f}
.entry-content > *:first-child{margin-top:0}
.entry-content p{margin:0 0 1.35em}
.entry-content h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(26px,3vw,34px);line-height:1.12;letter-spacing:-.02em;color:#17191f;margin:1.9em 0 .55em}
.entry-content h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(21px,2.2vw,25px);line-height:1.2;letter-spacing:-.01em;color:#17191f;margin:1.6em 0 .5em}
.entry-content h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;color:#17191f;margin:1.5em 0 .5em}
.entry-content a{color:#8f5827;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.entry-content a:hover{color:#c9922e}
.entry-content strong{font-weight:600;color:#17191f}
.entry-content ul,.entry-content ol{margin:0 0 1.35em;padding-left:1.25em}
.entry-content li{margin:0 0 .55em;padding-left:.25em}
.entry-content ul li::marker{color:#c9922e}
.entry-content ol li::marker{color:#a8712a;font-family:'IBM Plex Mono',monospace;font-size:.9em}
.entry-content blockquote{margin:1.8em 0;padding:6px 0 6px 24px;border-left:3px solid #e3b74e;font-size:20px;line-height:1.55;color:#3a3e46;font-style:normal}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content img{border-radius:14px;border:1px solid #ece8de;display:block;height:auto;margin:1.6em 0}
.entry-content figure{margin:1.6em 0}
.entry-content figure img{margin:0}
.entry-content figcaption{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#9aa0a8;margin-top:10px;text-align:center}
.entry-content hr{border:0;border-top:1px solid #ece8de;margin:2.4em 0}
.entry-content code{font-family:'IBM Plex Mono',monospace;font-size:.88em;background:#f2ead9;border:1px solid #ecdcb6;border-radius:6px;padding:.12em .4em;color:#8f5827}
.entry-content pre{font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.6;background:#14161b;color:#e8e5df;border-radius:14px;padding:22px 24px;overflow-x:auto;margin:1.6em 0}
.entry-content pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.entry-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px}
.entry-content th,.entry-content td{border:1px solid #ece8de;padding:11px 14px;text-align:left}
.entry-content th{background:#f7f2e6;font-family:'Space Grotesk',sans-serif;font-weight:600}

/* ==========================================================================
   Shared interactive components (header, mobile menu, FAQ accordion)
   Replaces the design's JS-runtime-driven inline state with CSS classes.
   Visuals match the design exactly (colours, sizes, transitions preserved).
   ========================================================================== */

/* ---- Announcement bar ---- */
.dlx-announce{background:#14161b;color:#e8e5df;font-family:'IBM Plex Sans',sans-serif}
.dlx-announce-inner{max-width:1240px;margin:0 auto;padding:9px clamp(44px,6vw,56px);display:flex;align-items:center;justify-content:center;gap:14px;position:relative}
.dlx-announce-inner span.dlx-announce-txt{font-size:13.5px;line-height:1.4;text-align:center}
.dlx-announce-inner a.dlx-announce-btn{font-size:12.5px;font-weight:600;color:#14161b;background:linear-gradient(135deg,#c9922e,#e3b74e);padding:5px 13px;border-radius:7px;text-decoration:none;white-space:nowrap}
.dlx-announce-inner a.dlx-announce-btn:hover{filter:brightness(1.06)}
/* Work page filter pills */
.dlx-filter{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;color:#6a6f78;background:#fff;border:1px solid #ece8de;padding:9px 18px;border-radius:100px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.dlx-filter:hover{border-color:#e6d6b3;color:#17191f}
.dlx-filter.active{color:#17191f;background:linear-gradient(135deg,#8f5827,#c9922e,#e3b74e);border-color:#c9922e}
.dlx-hidden{display:none!important}

/* ---- Header ---- */
header[data-site-header]{--barH:74px;--logoH:34px;position:sticky;top:0;z-index:50;background:rgba(250,249,245,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #e9e5db;transition:box-shadow .25s ease;font-family:'IBM Plex Sans',sans-serif}
header[data-site-header].scrolled{--barH:60px;--logoH:30px;box-shadow:0 10px 30px -18px rgba(20,22,27,.4)}
.dlx-bar{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,40px);height:var(--barH);transition:height .25s ease;display:flex;align-items:center;justify-content:space-between;gap:24px}
.dlx-logo{display:flex;align-items:center;flex-shrink:0}
.dlx-logo img{height:var(--logoH);display:block;transition:height .25s ease}
.dlx-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px)}
.dlx-nav a{font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:500;letter-spacing:.01em;text-decoration:none;color:#6a6f78;padding:6px 0;border-bottom:2px solid transparent;transition:color .18s}
.dlx-nav a:hover{color:#17191f}
.dlx-nav a.active{font-weight:600;color:#17191f;border-bottom-color:#c9922e}
.dlx-cta-wrap{display:flex;align-items:center;flex-shrink:0}
.dlx-cta{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em;color:#17191f;background:linear-gradient(135deg,#8f5827,#c9922e,#e3b74e);padding:12px 22px;border-radius:10px;text-decoration:none;white-space:nowrap}
.dlx-cta:hover{filter:brightness(1.06);color:#17191f}
.dlx-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px;margin-right:-10px}
.dlx-burger span{display:block;height:2px;width:100%;background:#17191f;border-radius:2px;transition:transform .25s,opacity .2s}
.dlx-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dlx-burger.open span:nth-child(2){opacity:0}
.dlx-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dlx-mobile{display:none;overflow:hidden;max-height:0;transition:max-height .3s ease;border-top:1px solid #e9e5db;background:#faf9f5}
.dlx-mobile.open{max-height:460px}
.dlx-mobile-inner{padding:8px clamp(20px,5vw,32px) 24px;display:flex;flex-direction:column}
.dlx-mobile-inner a{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:500;text-decoration:none;color:#4a4e56;padding:14px 0;border-bottom:1px solid #ece8de}
.dlx-mobile-inner a.active{font-weight:600;color:#17191f}
.dlx-mobile-inner a.dlx-mobile-cta{margin-top:16px;text-align:center;font-weight:600;font-size:15px;color:#17191f;background:linear-gradient(135deg,#8f5827,#c9922e,#e3b74e);padding:14px;border-radius:10px;border-bottom:none}
@media (max-width:900px){.dlx-nav{display:none}.dlx-cta-wrap{display:none}.dlx-burger{display:flex}.dlx-mobile{display:block}}

/* ---- FAQ accordion ---- */
.dlx-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.dlx-faq-item.open .dlx-faq-a{max-height:420px}
.dlx-faq-item.open .dlx-faq-icon{transform:rotate(45deg)}

/* ==========================================================================
   WhatsApp chat widget (ported from the previous site, DELLIUX palette)
   ========================================================================== */
.wa-widget{position:fixed;right:clamp(1rem,4vw,1.75rem);bottom:clamp(1rem,4vw,1.75rem);z-index:940;font-family:'IBM Plex Sans',sans-serif}
.wa-fab{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:0;border:none;border-radius:999px;background:#25d366;color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(37,211,102,.35),0 4px 10px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease}
.wa-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 40px rgba(37,211,102,.5),0 6px 14px rgba(0,0,0,.3)}
.wa-fab:active{transform:scale(.96)}
.wa-fab:focus-visible{outline:3px solid #c9922e;outline-offset:3px}
.wa-fab svg{width:34px;height:34px}
.wa-fab::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#25d366;animation:wa-pulse 2.4s ease-out infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
.wa-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#ef4444;color:#fff;font-size:.7rem;font-weight:700;line-height:1;box-shadow:0 0 0 2px #faf9f5}
.wa-fab .wa-icon-close{display:none}
.wa-widget.is-open .wa-fab .wa-icon-chat{display:none}
.wa-widget.is-open .wa-fab .wa-icon-close{display:block}
.wa-widget.is-open .wa-fab::before{animation:none}
.wa-widget.is-open .wa-badge{display:none}
.wa-panel{position:absolute;right:0;bottom:calc(100% + 14px);width:min(340px,calc(100vw - 2rem));border-radius:18px;overflow:hidden;background:#fff;color:#17191f;border:1px solid #ece8de;box-shadow:0 24px 60px rgba(0,0,0,.28);transform-origin:bottom right;opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.wa-widget.is-open .wa-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.wa-header{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.05rem;background:linear-gradient(135deg,#075e54,#128c7e);color:#fff}
.wa-avatar{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.16);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.wa-heading{display:flex;flex-direction:column;gap:2px;min-width:0}
.wa-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.98rem;line-height:1.2}
.wa-status{display:flex;align-items:center;gap:.35rem;font-size:.74rem;opacity:.9}
.wa-status::before{content:"";width:8px;height:8px;border-radius:999px;background:#4ade80}
.wa-close{margin-left:auto;flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:none;border-radius:999px;background:transparent;color:#fff;cursor:pointer;opacity:.85;transition:background .2s ease,opacity .2s ease}
.wa-close:hover{background:rgba(255,255,255,.18);opacity:1}
.wa-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wa-close svg{width:18px;height:18px}
.wa-body{padding:1.15rem 1.05rem .75rem;background:#f6f3ec}
.wa-bubble{position:relative;max-width:88%;padding:.7rem .85rem;border-radius:4px 14px 14px 14px;background:#fff;border:1px solid #ece8de;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.wa-bubble-name{margin:0 0 2px;font-size:.72rem;font-weight:700;color:#a8712a}
.wa-bubble-text{margin:0;font-size:.9rem;line-height:1.45;color:#17191f}
.wa-bubble-time{display:block;margin-top:4px;font-size:.66rem;text-align:right;color:#9aa0a8}
.wa-footer{padding:.85rem 1.05rem 1.05rem;background:#f6f3ec}
.wa-cta{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;padding:.75rem 1rem;border-radius:12px;background:#25d366;color:#fff;font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:.92rem;text-decoration:none;transition:background .2s ease,transform .2s ease}
.wa-cta:hover{background:#1ebe5b;transform:translateY(-1px);color:#fff}
.wa-cta:focus-visible{outline:3px solid #c9922e;outline-offset:2px}
.wa-cta svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab::before,.wa-panel,.wa-cta{animation:none;transition:none}}

/* Gravatar/admin niceties left default */