/* Woow: WordPress additions on top of the design's site.css */
.brand img{height:var(--logo-h,32px)}
@media (max-width:760px){.brand img{height:calc(var(--logo-h,32px) * .85)}}
.admin-bar header.nav{top:32px}
@media (max-width:782px){.admin-bar header.nav{top:46px}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar: phone number */
.topbar a{display:inline-flex;align-items:center;gap:8px;color:#fff}
@media (max-width:640px){.topbar a{display:none}}
.links .d-foot small a{color:inherit}

/* client logos uploaded from the panel */
.client .clogo{display:grid;place-items:center;width:100%;height:56px}
.client .clogo img{max-width:120px;max-height:56px;width:auto;height:auto;object-fit:contain}
a.client{text-decoration:none}

/* services page: number of projects on the button */
.srow .acts sup.cnt{font-size:11px;opacity:.8;margin-inline-start:2px}

/* contact form */
.cform .hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.fmsg.err{background:#fde2e1;color:#8a1f17}
.cform button[disabled]{opacity:.6;pointer-events:none}
.ccard h3 a{color:inherit}
.ct-map iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(.3)}

/* footer social links */
.fsoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fsoc a{font-size:13px;padding:6px 12px;border-radius:30px;border:1px solid rgba(255,255,255,.18);color:var(--on-navy-muted);transition:all .25s}
.fsoc a:hover{color:#fff;border-color:var(--orange);background:var(--orange)}
footer ul a[dir=ltr]{unicode-bidi:isolate}

/* WhatsApp button (opposite side of "back to top") */
.wa-fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:52px;height:52px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);transition:transform .25s}
.wa-fab:hover{transform:translateY(-3px)}
.wa-fab svg{width:28px;height:28px;fill:#fff}

/* free text, articles, generic pages */
.w-text{max-width:820px;font-size:17px;line-height:2;color:var(--muted)}
.w-text p{margin:0 0 1em}
.entry h2,.entry h3{color:var(--ink);margin:1.4em 0 .5em;line-height:1.4}
.entry img{max-width:100%;height:auto;border-radius:var(--r)}
.entry a{color:var(--orange);text-decoration:underline}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-card .ph{aspect-ratio:16/10;background:var(--tint)}
.post-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .body{padding:18px 20px 22px;display:grid;gap:6px}
.post-card small{color:var(--orange);font-weight:700}
.post-card h3{margin:0;font-size:18px}
.post-card p{margin:0;color:var(--muted);font-size:14.5px}
.nav-links{display:flex;gap:8px;justify-content:center}
.nav-links .page-numbers{padding:8px 14px;border-radius:10px;border:1px solid var(--line);color:var(--ink)}
.nav-links .current{background:var(--orange);border-color:var(--orange);color:#fff}

/* live preview inside the settings panel: no intro animation */
.insight-previewing .intro{display:none}
.ccards .sec-head{margin-bottom:8px}
/* developer credit */
.fbot .fdev{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.fbot .fdev i{font-style:normal;opacity:.5}
.fbot .fcred{font-size:11.5px;color:#9a9a9a;opacity:.8}
.fbot .fcred a{color:inherit;font-weight:600;letter-spacing:.04em;transition:color .2s}
.fbot .fcred a:hover{color:#c4c4c4}
/* intro: the logo animation waits until the logo has loaded */
.intro:not(.ready) .fly img,.intro:not(.ready) .glint::after{animation-play-state:paused}

/* Background photos: faint ones use the 1200 copy everywhere, phones get the 900 copy. */
.ghost::before{background-image:var(--img-md,var(--img))}
.hero2::before{background-image:var(--hero-bg-md,var(--hero-bg,url(../img/demo/hero-bg.webp)))}
@media (max-width:760px){
	.photo::before,.ghost::before,.phero .bg{background-image:var(--img-sm,var(--img))}
	.hero2::before{background-image:var(--hero-bg-sm,var(--hero-bg,url(../img/demo/hero-bg.webp)))}
}