/*
Theme Name: Bricks Child Theme
Theme URI: https://bricksbuilder.io/
Description: Use this child theme to extend Bricks.
Author: Bricks
Author URI: https://bricksbuilder.io/
Template: bricks
Version: 1.1
Text Domain: bricks
*/
/* =========================================================
GLOBAL BUTTON SYSTEM — Jaha Web
Element classes: btn + btn--primary / btn--ghost / btn--light / btn--outline
Base typography/padding/border/layout: typed Bricks global class "btn".
Here: only what typed cannot express — ::before slide-fill + hover motion.
========================================================= */
.btn::before {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
transition: transform var(--at-timing--l);
z-index: -1;
}
.btn:hover {
transform: translateY(-0.2rem);
box-shadow: var(--at-shadow--m);
}
.btn:hover::before { transform: translateX(0); }
.btn--primary::before { background: var(--at-primary); }
.btn--ghost::before { background: var(--at-secondary); }
.btn--light::before { background: var(--at-primary); }
.btn--outline::before { background: var(--color-off); }
/* =========================================================
MONO LABEL — site-wide eyebrow (mono uppercase + leading line)
Typed part lives on the .mono-label global class; the ::before line
cannot be expressed via typed controls, so it lives here.
========================================================= */
.mono-label::before {
content: "";
width: 2rem;
height: 1px;
background: var(--at-primary);
flex: none;
/* gap to the text via margin (Bricks doesn't emit flex column-gap on text-basic) */
margin-right: var(--at-space--2xs);
}
/* ===================== SITE HEADER (v18 1:1) ===================== */
#brx-header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--at-secondary-d-1);border-bottom:1px solid var(--at-white-t-6);transition:background var(--at-timing--m),border-color var(--at-timing--m);}
#brx-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(79,147,245,0.55),transparent);}
#brx-header.is-scrolled{background:rgba(11,23,48,0.88);-webkit-backdrop-filter:blur(1.2rem);backdrop-filter:blur(1.2rem);border-bottom-color:var(--color-line-dark);}
#brx-header.is-scrolled .site-header__inner{padding-top:var(--at-space--2xs);padding-bottom:var(--at-space--2xs);}
#brx-header .site-header__logo{display:inline-flex;align-items:center;width:fit-content;max-width:none;flex:none;text-decoration:none;}
#brx-header .site-header__logo-svg{height:6.5rem;width:8.1rem;flex:0 0 auto;margin:0;transition:height var(--at-timing--m),width var(--at-timing--m);}
#brx-header .site-header__logo-svg img{display:block;height:100%;width:100%;object-fit:contain;margin:0;}
#brx-header.is-scrolled .site-header__logo-svg{height:5.3rem;width:6.6rem;}
#brx-header .site-header__nav-link{position:relative;padding:0.4rem 0;font-family:var(--font-display);text-decoration:none;transition:color var(--at-timing--s);}
#brx-header .site-header__nav-link::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--at-primary-l-1);transition:width var(--at-timing--m);}
#brx-header .site-header__nav-link:hover{color:var(--color-off);}
#brx-header .site-header__nav-link:hover::after{width:100%;} #brx-header .site-header__nav{width:fit-content;max-width:none;flex:none;} #brx-header .site-header__actions{width:fit-content;max-width:none;flex:none;}
#brx-header .site-header__status{white-space:nowrap;font-family:var(--font-mono);}
@media (max-width:85rem){#brx-header .site-header__status{display:none;}}
@media (max-width:76.8rem){#brx-header .site-header__nav,#brx-header .site-header__actions{display:none;}}
/* testimonial logo — image slot (swap placeholder for real logo) */
.tst.brxe-section .tst__logo-img img{height:6rem;width:auto;max-width:20rem;object-fit:contain;display:block}
/* ===== Header mobile menu (hamburger, <=1229px) ===== */
@media (max-width:76.8rem){
#brx-header .site-header__actions{display:flex;}
#brx-header .site-header__actions .btn{display:none;}
#brx-header .site-header__toggle{display:inline-flex;}
#brx-header .site-header__mobile-menu{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:linear-gradient(160deg,var(--at-secondary-d-1) 0%,#0c1d3d 100%);border-top:0;padding:var(--at-space--l) 0 var(--at-space--l);max-height:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:max-height var(--at-timing--m),opacity var(--at-timing--m),padding var(--at-timing--m);}
#brx-header .site-header__mobile-menu.show{max-height:calc(100dvh - 8.6rem);overflow:auto;opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .55s ease-in-out,transform .55s ease-in-out,visibility 0s linear 0s;}
#brx-header .site-header__mobile-link{display:flex;align-items:center;width:100%;box-sizing:border-box;min-height:5.6rem;padding:var(--at-space--2xs) var(--at-gutter);font-family:var(--font-display);font-size:var(--at-heading--m);font-weight:700;letter-spacing:-0.02em;color:var(--color-off);text-decoration:none;transition:color var(--at-timing--s),transform var(--at-timing--s);}
#brx-header .site-header__mobile-link:hover{color:var(--at-primary-l-1);}
#brx-header .site-header__mobile-menu .btn{width:calc(100% - 2 * var(--at-gutter));box-sizing:border-box;margin:var(--at-space--m) auto 0;justify-content:center;}
#brx-header .site-header__overlay{display:block;position:fixed;inset:0;z-index:-1;background:rgba(5,18,47,0.85);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--at-timing--m);}
#brx-header:has(.site-header__mobile-menu.show) .site-header__overlay{opacity:1;visibility:visible;pointer-events:auto;}
body:has(#brx-header .site-header__mobile-menu.show){overflow:hidden;}
}
/* === fixes (button label nowrap + mobile menu font) === */
.btn{white-space:nowrap;flex-shrink:0;}
/* === svc-feature panel screenshot slot === */
.svc-feature .svc-frame__img{position:absolute;inset:0;width:100%;height:100%;margin:0;}
.svc-feature .svc-frame__img img{width:100%;height:100%;object-fit:cover;display:block;}
/* CS-START */
.cs-hero{position:relative;overflow:hidden}.cs-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(100rem 68rem at 82% 4%, var(--color-glow-blue), transparent 56%), linear-gradient(180deg, var(--color-glow-blue), transparent 52%)}
.cs-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:var(--at-space--l) var(--at-space--l);-webkit-mask-image:radial-gradient(circle at 68% 18%,#000 0%,transparent 74%);mask-image:radial-gradient(circle at 68% 18%,#000 0%,transparent 74%)}
.cs-hero .brxe-container{position:relative}
.cs-hero__panelwrap{position:relative}
/* the hero glow is a painted layer, not a node */
.cs-hero__panelwrap::before{content:'';position:absolute;inset:-12% -10%;pointer-events:none;background:radial-gradient(circle at 62% 38%,var(--color-primary-glow),rgba(23,99,214,0) 68%);filter:blur(4rem)}
.cs-hero__specs{position:relative;flex:1;overflow:hidden;box-shadow:0 2.4rem 6rem rgba(11,23,48,0.25),inset 0 1px 0 rgba(255,255,255,0.06)}
.cs-hero__specs::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 86% 4%,rgba(255,255,255,0.07),transparent 52%)}
.cs-hero__spec{flex:1;border-top:1px dashed var(--at-white-t-6)}
.cs-hero__spec:first-of-type{border-top:0}
.cs-hero__spec-k{flex:none}
.cs-hero__spec-v a{color:var(--at-primary-l-1);text-decoration:none}
.cs-hero__spec-v a:hover{text-decoration:underline}
.cs-hero__title{text-wrap:balance}
.cs-shot__frame{overflow:hidden;box-shadow:0 2.4rem 6rem rgba(11,23,48,0.35)}
.cs-shot__bar{position:relative}
.cs-shot__progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--at-primary);transition:width 0.08s linear}
.cs-shot__viewport{position:relative;overflow:hidden;height:56vh}
.cs-shot__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cs-shot__actions .btn{flex:0 0 auto;width:auto;max-width:100%}
.cs-story__item + .cs-story__item{margin-top:var(--at-space--s)}
.cs-story__item{transition:border-color var(--at-timing--m),transform var(--at-timing--m),box-shadow var(--at-timing--m)}
.cs-story__item:hover{border-color:var(--at-primary-t-4);transform:translateY(-0.3rem);box-shadow:0 2.4rem 6rem rgba(5,18,47,0.5)}
.cs-story__num{transition:color var(--at-timing--m)}
.cs-story__item:hover .cs-story__num{color:var(--at-primary-l-1)}
.cs-story__tags{display:flex;flex-direction:column;align-items:flex-end;gap:0.6rem}
.cs-story__tag{font-family:var(--font-mono);font-size:var(--at-text--2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--color-on-dark-muted);border:1px solid var(--at-white-t-6);border-radius:999rem;padding:0.4rem var(--at-space--2xs);white-space:nowrap;transition:color var(--at-timing--m),border-color var(--at-timing--m)}
.cs-story__item:hover .cs-story__tag{color:var(--at-primary-l-1);border-color:var(--at-primary-t-4)}
.cs-quote__quote{margin:0}
.cs-quote__cite{display:block;font-style:normal}
.cs-nav__grid{max-width:var(--at-site-box-max-width);margin:0 auto;padding:0 var(--at-gutter);display:grid;grid-template-columns:var(--at-grid--2)}
.cs-nav__link{display:flex;flex-direction:column;gap:var(--at-space--2xs);padding:var(--at-space--xl) var(--at-space--l);text-decoration:none;color:var(--at-neutral);transition:color var(--at-timing--m)}
.cs-nav__link:hover{color:var(--at-primary)}
.cs-nav__link--next{align-items:flex-end;text-align:right;border-left:1px solid var(--at-neutral-l-5)}
.cs-nav__k{font-family:var(--font-mono);font-size:var(--at-text--2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--at-neutral-l-1)}
.cs-nav__name{font-family:var(--font-display);font-weight:800;font-size:var(--at-heading--s)}
.cta{position:relative;isolation:isolate}
.cta::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url(https://jahaweb.com/wp-content/uploads/2026/06/trans.png);background-repeat:no-repeat;background-position:center;background-size:cover}
.cta::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 0%,var(--color-exp-glow),transparent 48%)}
.cta__inner{position:relative;z-index:1}
.cta__actions .btn{flex:0 0 auto;width:auto;max-width:100%}
@media (max-width:76.8rem){.cs-story__tags{flex-direction:row;flex-wrap:wrap;align-items:center}}
@media (max-width:61.9rem){.cs-nav__grid{grid-template-columns:var(--at-grid--1)}.cs-nav__link--next{border-left:0;border-top:1px solid var(--at-neutral-l-5);align-items:flex-start;text-align:left}}
.cs-res__card svg{width:2rem;height:2rem;color:var(--at-primary-l-1)}
.cs-story__num,.cs-res__val,.cs-quote__quote{font-family:var(--font-display)}
.cs-hero__specs-head,.cs-hero__spec,.cs-res__k,.cs-quote__cite,.cs-shot__hint,.cs-shot__url{font-family:var(--font-mono)}
/* CS-END */
/* ===== Browser dots: 1 element draws 3 via box-shadow (DOM cleanup, was 3 divs) ===== */
/* cs-hero specs = semantic description list (dl/dt/dd); dl transparent to layout */
.cs-hero__specs dl{display:contents}
.cs-hero__specs dt,.cs-hero__specs dd{margin:0}
/* cs-shot pinned scroll-through (desktop) */
.cs-shot__pin{position:relative;height:260vh}
.cs-shot__frame{position:sticky;top:10vh}
/* cs-hero breadcrumb row */
.cs-hero__top{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--at-space--l);flex-wrap:wrap;margin-bottom:var(--at-space--xs)}
.cs-hero .brxe-breadcrumbs{font-family:var(--font-mono);font-size:var(--at-text--xs);color:var(--at-neutral-l-2);letter-spacing:.02em;display:flex;justify-content:flex-start;text-align:left;width:auto;flex:0 1 auto}
.cs-hero .brxe-breadcrumbs a{color:inherit;text-decoration:none}
.cs-hero .brxe-breadcrumbs a:hover{color:var(--at-primary-l-1)}
/* cs-nav = native post-navigation (v21 grid) */
.cs-nav{border-top:1px solid var(--at-neutral-l-5)}
.cs-nav .brxe-post-navigation{display:grid;grid-template-columns:var(--at-grid--2);gap:0}
.cs-nav .brxe-post-navigation .prev-post,.cs-nav .brxe-post-navigation .next-post{display:block;padding:var(--at-space--xl) var(--at-space--l);text-decoration:none;color:var(--at-neutral);transition:color var(--at-timing--m)}
.cs-nav .brxe-post-navigation .prev-post:hover,.cs-nav .brxe-post-navigation .next-post:hover{color:var(--at-primary)}
.cs-nav .brxe-post-navigation .next-post{border-left:1px solid var(--at-neutral-l-5)}
.cs-nav .brxe-post-navigation .content{display:flex;flex-direction:column;gap:var(--at-space--2xs)}
.cs-nav .brxe-post-navigation .next-post .content{align-items:flex-end;text-align:right}
.cs-nav .brxe-post-navigation .label{font-family:var(--font-mono);font-size:var(--at-text--2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--at-neutral-l-1)}
.cs-nav .brxe-post-navigation .title{font-family:var(--font-display);font-weight:800;font-size:var(--at-heading--s);color:inherit;line-height:1.1}
.cs-nav .brxe-post-navigation .prev-post.hide,.cs-nav .brxe-post-navigation .next-post.hide{visibility:hidden}
.cs-nav .brxe-post-navigation:has(.hide) .next-post{border-left:0}
@media(max-width:61.9rem){.cs-nav .brxe-post-navigation{grid-template-columns:var(--at-grid--1)}.cs-nav .brxe-post-navigation .next-post{border-left:0;border-top:1px solid var(--at-neutral-l-5)}.cs-nav .brxe-post-navigation .next-post .content{align-items:flex-start;text-align:left}}
/* cs-shot viewport fill */
@media(min-width:992px){.cs-shot .cs-shot__frame .cs-shot__viewport{height:78vh}}
/* WORK ARCHIVE (Case Studies) - MCP 2026-07-07 */
.work-archive__hero{position:relative;overflow:hidden;background:#fff}.work-archive__hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(100rem 68rem at 82% 4%, var(--color-glow-blue), transparent 56%), linear-gradient(180deg, var(--color-glow-blue), transparent 52%)}.work-archive__hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,27,45,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,27,45,.05) 1px,transparent 1px);background-size:4rem 4rem;-webkit-mask-image:radial-gradient(120% 90% at 75% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 90% at 75% 0%,#000,transparent 72%);pointer-events:none}.work-archive__hero-title{max-width:16ch}.work-archive__hero-lead{max-width:60rem}.brxe-pagination .bricks-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.8rem;list-style:none;margin-top:6.4rem;padding:0}.brxe-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:4rem;height:4rem;padding:0 1.6rem;font-family:var(--font-mono);font-size:var(--at-text--xs);color:var(--at-neutral-l-1);border:1px solid var(--at-neutral-l-5);border-radius:.8rem;transition:color .2s,border-color .2s,background .2s;text-decoration:none}.brxe-pagination .page-numbers:hover{color:var(--at-neutral);border-color:var(--at-neutral)}.brxe-pagination .page-numbers.current{background:var(--at-neutral);color:#fff;border-color:var(--at-neutral)}
/* =========================================================
SERVICE SINGLE (sv-*) SYSTEM — Jaha Web
ACF-driven service template (mirrors jaha-service-v10.html).
clamp() -> fluid AT tokens. Auto numbers via CSS counters.
========================================================= */
.sv-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:4rem 4rem;-webkit-mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%);pointer-events:none;}
.sv-crumb{font-family:var(--font-mono);}
.sv-crumb a{color:var(--at-primary);}.sv-crumb a:hover{color:var(--at-primary-d-1);}
.sv-hero__actions .btn{flex:0 0 auto;width:auto;}
.sv-tag{font-family:var(--font-mono);white-space:nowrap;border:1px solid var(--at-neutral-l-5);}
.sv-spec{border:1px solid var(--at-white-t-6);box-shadow:0 2.4rem 6rem rgba(11,23,48,0.25),inset 0 1px 0 rgba(255,255,255,0.06);}
.sv-spec::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 92% 6%,var(--color-panel-glow),transparent 70%);}
.sv-spec>*{position:relative;z-index:1;}
.sv-spec__head{padding-bottom:var(--at-space--s);border-bottom:1px solid var(--color-line-dark);}
.sv-spec__label{font-family:var(--font-mono);}
.sv-spec__meta{font-family:var(--font-mono);}
.sv-spec__title{font-family:var(--font-display);}
.sv-spec__row{border-bottom:1px dashed var(--color-line-dash);}
.sv-spec__row:last-of-type{border-bottom:0;}
.sv-spec__k{font-family:var(--font-mono);}
.sv-spec__n{font-family:var(--font-display);}
.sv-spec__foot{padding-top:var(--at-space--s);font-family:var(--font-mono);}
.sv-nav{top:6.7rem;border-top:1px solid var(--at-neutral-l-5);border-bottom:1px solid var(--at-neutral-l-5);}
.sv-nav__here{font-family:var(--font-mono);}
.sv-nav__links{margin-left:auto;}
.sv-nav__link{font-family:var(--font-mono);transition:color var(--at-timing--s);}
.sv-nav__link::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--at-primary);transition:width var(--at-timing--m);}
.sv-nav__link:hover::after{width:100%;}
.sv-nav__link:hover{color:var(--at-primary);}
.sv-intro{padding-top:var(--at-space--xl);}
.sv-intro__p + .sv-intro__p{margin-top:var(--at-space--m);}
.sv-contrast{border-top:1px solid var(--at-neutral-l-5);}
.sv-contrast__row{border-bottom:1px solid var(--at-neutral-l-5);}
.sv-contrast__k{font-family:var(--font-mono);}
.sv-contrast__t{font-family:var(--font-display);}
.sv-inc{border-top:1px solid var(--at-neutral-l-5);}
.sv-inc__item{border:1px solid var(--at-neutral-l-5);transition:border-color var(--at-timing--m),transform var(--at-timing--m),box-shadow var(--at-timing--m);}
.sv-inc__item:hover{border-color:var(--at-primary-l-2);transform:translateY(-0.3rem);box-shadow:var(--at-shadow--m);}
.sv-inc__ico{transition:background var(--at-timing--m),color var(--at-timing--m);}
.sv-inc__item:hover .sv-inc__ico{background:var(--at-primary);color:var(--at-white);}
.sv-inc__ico svg{width:2.1rem;height:2.1rem;stroke-width:1.9;}
.sv-inc__name{font-family:var(--font-display);}
.sv-stack__item{border-right:1px dashed var(--color-line-dash);}
.sv-stack__item:last-child{border-right:0;}
.sv-stack__k{font-family:var(--font-mono);}
.sv-stack__v{font-family:var(--font-display);}
.sv-perf{background:linear-gradient(100deg,var(--at-secondary-d-1) 0%,#0c1f41 100%);}
.sv-perf::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 62% 18%,rgba(79,147,245,0.16),transparent 55%);}
.sv-perf>*{position:relative;z-index:1;}
.sv-perf .mono-label{color:var(--at-primary-l-1);}
.sv-perf .mono-label::before{background:var(--at-primary-l-1);}
.sv-perf__grid{border-top:1px solid var(--color-line-dark);counter-reset:svperf;}
.sv-perf__item{border-right:1px solid var(--color-line-dark);counter-increment:svperf;}
.sv-perf__item:last-child{border-right:0;}
.sv-perf__item + .sv-perf__item{padding-left:var(--at-space--m);}
.sv-perf__cat{font-family:var(--font-mono);}
.sv-perf__n{font-family:var(--font-mono);}
.sv-perf__n::before{content:counter(svperf,decimal-leading-zero);}
.sv-perf__name{font-family:var(--font-display);}
.sv-proc__list{border-top:1px solid var(--at-neutral-l-5);counter-reset:svproc;}
.sv-proc__item{border-bottom:1px solid var(--at-neutral-l-5);counter-increment:svproc;}
.sv-proc__item:last-child{border-bottom:0;}
.sv-proc__num{font-family:var(--font-mono);}
.sv-proc__num::before{content:counter(svproc,decimal-leading-zero);}
.sv-proc__name{font-family:var(--font-display);}
.sv-work{border-top:1px solid var(--at-neutral-l-5);}
.sv-why__list{counter-reset:svwhy;}
.sv-why__item{border-bottom:1px solid var(--at-neutral-l-5);counter-increment:svwhy;}
.sv-why__item:last-child{border-bottom:0;}
.sv-why__n{place-items:center;font-family:var(--font-mono);}
.sv-why__n::before{content:counter(svwhy,decimal-leading-zero);}
.sv-why__name{font-family:var(--font-display);}
.sv-card{border:1px solid var(--at-white-t-6);box-shadow:0 2.4rem 6rem rgba(11,23,48,0.25),inset 0 1px 0 rgba(255,255,255,0.06);}
.sv-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 92% 6%,var(--color-panel-glow),transparent 70%);}
.sv-card>*{position:relative;z-index:1;}
.sv-card__head{padding-bottom:var(--at-space--s);border-bottom:1px dashed var(--color-line-dash);font-family:var(--font-mono);}
.sv-card__row{border-bottom:1px dashed var(--color-line-dash);}
.sv-card__k{font-family:var(--font-mono);}
.sv-card__v{font-family:var(--font-display);}
.sv-nono{padding-top:var(--at-space--m);}
.sv-nono__t{font-family:var(--font-mono);}
.sv-nono__i svg{width:1.1rem;height:1.1rem;margin-top:0.45rem;color:var(--at-primary-l-1);flex:none;}
.sv-stat__n{font-family:var(--font-display);}
.sv-stat__l{font-family:var(--font-mono);}
.sv-faq{border-top:1px solid var(--at-neutral-l-5);}
.sv-faq__list{border-top:1px solid var(--at-neutral-l-5);}
.sv-faq__item{border-bottom:1px solid var(--at-neutral-l-5);}
.sv-faq__q{cursor:pointer;list-style:none;font-family:var(--font-display);transition:color var(--at-timing--s);}
.sv-faq__q::-webkit-details-marker{display:none;}
.sv-faq__q:hover{color:var(--at-primary);}
.sv-faq__q:focus-visible{outline:2px solid var(--at-primary);outline-offset:0.4rem;}
.sv-faq__sign{place-items:center;border:1px solid var(--at-neutral-l-5);flex:none;transition:border-color var(--at-timing--s),background var(--at-timing--s);}
.sv-faq__q:hover .sv-faq__sign{border-color:var(--at-primary);}
.sv-faq__sign::before,.sv-faq__sign::after{content:'';position:absolute;background:var(--at-primary);transition:transform var(--at-timing--m),opacity var(--at-timing--s);}
.sv-faq__sign::before{width:1rem;height:2px;}
.sv-faq__sign::after{width:2px;height:1rem;}
.sv-faq__item[open] .sv-faq__sign::after{transform:scaleY(0) rotate(90deg);opacity:0;}
.sv-faq__item[open] .sv-faq__sign{border-color:var(--at-primary);background:var(--color-pale);}
.sv-faq__item[open] .sv-faq__a{animation:faqReveal var(--at-timing--m) both;}
@keyframes faqReveal{from{opacity:0;transform:translateY(-0.6rem);}to{opacity:1;transform:none;}}
.sv-faq__a a{color:var(--at-primary);}
.sv-contrast__k[data-good="1"]{color:var(--at-primary);}
.sv-intro__pwrap + .sv-intro__pwrap{margin-top:var(--at-space--m);}
.sv-contrast__k[data-good="True"]{color:var(--at-primary);}
/* STATE-OVERRIDE SPECIFICITY FIX (typed global = .class.brxe-type 0,2,0; state residue needs 0,2,1+) */
body .sv-crumb a:hover{color:var(--at-primary-d-1);}
body .sv-nav__link:hover{color:var(--at-primary);}
body .sv-inc__item:hover .sv-inc__ico{background:var(--at-primary);color:var(--at-white);}
body .sv-faq__q:hover{color:var(--at-primary);}
body .sv-contrast__k[data-good="1"]{color:var(--at-primary);}
body .sv-contrast__k[data-good="True"]{color:var(--at-primary);}
/* SERVICE responsive residue (pseudo/border only; grid/display are typed responsive) */
@media (max-width:991px){.sv-proc__name,.sv-proc__desc{grid-column:2}.sv-stack__item:nth-child(3n){border-right:0}.sv-perf__item:nth-child(2n){border-right:0}}
@media (max-width:478px){.sv-stack__item{border-right:0;border-bottom:1px dashed var(--color-line-dash)}.sv-perf__item{border-right:0;border-bottom:1px solid var(--color-line-dark)}.sv-stack__item:last-child,.sv-perf__item:last-child{border-bottom:0}}
/* FAQ SIGN CENTER FIX */
.sv-faq__sign::before{top:50%;left:50%;margin-top:-1px;margin-left:-0.5rem}
.sv-faq__sign::after{top:50%;left:50%;margin-top:-0.5rem;margin-left:-1px}
body .sv-perf__item + .sv-perf__item{padding-left:var(--at-space--m)}
/* WHY-N + FAQ-SIGN CENTER (place-items align resolves to normal) */
#brx-content .sv-why__n{place-items:center}
#brx-content .sv-faq__sign{place-items:center}
/* WHY JAHA (homepage) — razmak izmedju dva CTA dugmeta (.why__left je block pa mu je gap inertan) */
.why__left .why__cta + .btn{margin-left:var(--at-space--s)}
/* EXP process rows — stretched clickable link (placeholder #) */
/* MOBILE CTA button pairs — full-width stacked (were cramped ~164px side-by-side) */
@media (max-width:478px){
[class*="__actions"] .btn.brxe-button,[class*="__actions"] .btn.brxe-text-link,.why__left .btn.brxe-button{width:100%;max-width:none;flex:1 1 100%}
.why__left .why__cta + .btn{margin-left:0;margin-top:var(--at-space--s)}
}
/* Perf items — column-aware left padding (fix mobile/tablet ragged edge; desktop 4-col keeps pl) */
@media (max-width:991px){#brx-content .sv-perf__item:nth-child(odd){padding-left:0}}
@media (max-width:478px){#brx-content .sv-perf__item{padding-left:0}}
/* Custom cursor (ring + dot) — desktop only, native hidden except form fields */
html.has-cur *{cursor:none}
html.has-cur input, html.has-cur textarea, html.has-cur select, html.has-cur [contenteditable="true"]{cursor:auto}
.jaha-cur{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%}
.jaha-cur--dot{width:6px;height:6px;background:var(--at-primary-l-1)}
.jaha-cur--ring{width:34px;height:34px;border:1.5px solid var(--at-primary-l-1);opacity:.55;transition:width .25s ease,height .25s ease,opacity .25s ease,background-color .25s ease}
html.cur-hover .jaha-cur--ring{width:58px;height:58px;opacity:.9;background:rgba(79,147,245,.08)}
html.cur-hover .jaha-cur--dot{opacity:0}
/* Mobile menu — staggered reveal on open (CSS, no GSAP) */
@media (prefers-reduced-motion: no-preference){
#brx-header .site-header__mobile-menu > *{opacity:0;transform:translateY(8px);transition:opacity .5s ease-in-out,transform .5s ease-in-out}
#brx-header .site-header__mobile-menu.show > *{opacity:1;transform:none}
#brx-header .site-header__mobile-menu.show > *:nth-child(1){transition-delay:0.04s}
#brx-header .site-header__mobile-menu.show > *:nth-child(2){transition-delay:0.08s}
#brx-header .site-header__mobile-menu.show > *:nth-child(3){transition-delay:0.12s}
#brx-header .site-header__mobile-menu.show > *:nth-child(4){transition-delay:0.16s}
#brx-header .site-header__mobile-menu.show > *:nth-child(5){transition-delay:0.2s}
#brx-header .site-header__mobile-menu.show > *:nth-child(6){transition-delay:0.24s}
#brx-header .site-header__mobile-menu.show > *:nth-child(7){transition-delay:0.28s}
#brx-header .site-header__mobile-menu.show > *:nth-child(8){transition-delay:0.32s}
#brx-header .site-header__mobile-menu.show > *:nth-child(9){transition-delay:0.36s}
}
/* Lively menu open — container fade (statina max-height, ne mrtav max-height animate); stavke nose stagger */
#brx-header .site-header__mobile-menu{height:calc(100dvh - 8.6rem);max-height:calc(100dvh - 8.6rem);overflow:auto;transition:opacity .55s ease-in-out,transform .55s ease-in-out,visibility 0s linear .55s}
/* Mobile menu extras — status + email */
#brx-header .site-header__mobile-status{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;gap:var(--at-space--2xs);padding:var(--at-space--s) var(--at-gutter) var(--at-space--xs);font-family:var(--font-mono);font-size:var(--at-text--xs);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
#brx-header .site-header__mobile-status > *{width:auto;max-width:none;flex:0 0 auto}
#brx-header .site-header__mobile-email{display:block;text-align:center;padding:0 var(--at-gutter) var(--at-space--m);font-family:var(--font-mono);font-size:var(--at-text--m);color:var(--at-primary-l-1);text-decoration:none;transition:color var(--at-timing--s)}
#brx-header .site-header__mobile-email:hover{color:var(--at-primary-l-2)}
/* ===== Mobile menu ghost wordmark + contact label (v5) ===== */
#brx-header .site-header__mobile-menu > *{position:relative;z-index:1}
#brx-header .site-header__ghost{position:absolute;inset:0;z-index:0;overflow:hidden;display:grid;align-content:center;justify-items:start;gap:0;padding-left:var(--at-gutter);padding-bottom:16vh;pointer-events:none}
#brx-header .site-header__ghost span{font-family:var(--font-display);font-weight:800;font-size:clamp(3.3rem,14.3vw,5.7rem);line-height:.92;letter-spacing:-.045em;color:rgba(255,255,255,0.02);white-space:nowrap}
#brx-header .site-header__mobile-k{display:block;text-align:center;margin-top:var(--at-space--s);padding:var(--at-space--m) var(--at-gutter) var(--at-space--3xs);font-family:var(--font-mono);font-size:var(--at-text--2xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--at-neutral-l-3)}
#brx-header .site-header__mobile-menu .site-header__mobile-status{margin-top:auto}
#brx-header .site-header__mobile-menu .btn + .btn{margin-top:var(--at-space--2xs)}
/* v6 nav — no separator lines, bigger display links spaced by gap, hover blue */
#brx-header .site-header__mobile-link + .site-header__mobile-link{margin-top:var(--at-space--xs)}
@media (max-height:800px){#brx-header .site-header__mobile-link{min-height:5rem;font-size:var(--at-text--l)}}
/* v6b — kill focus ring on header/nav (Safari tap=focus-visible) + hide header line when menu open */
#brx-header a:focus,#brx-header button:focus,#brx-header [role="button"]:focus,#brx-header .site-header__mobile-link:focus,#brx-header .site-header__mobile-link:focus-visible,#brx-header .site-header__toggle:focus{outline:none;box-shadow:none}
#brx-header:has(.site-header__mobile-menu.show)::after{opacity:0}
#brx-header:has(.site-header__mobile-menu.show){border-bottom-color:transparent}
/* HEADER OUT OF FLOW - the header shrinks when you scroll (.is-scrolled). While it was
sticky, that shrink moved the whole page by 12-28px and scroll anchoring pulled the
view back, so the page shook on the way down and again on the way up. The header is
now fixed and body reserves the FULL header height, which never changes, so the
compaction is purely visual. Height = inner padding x2 + logo + 1px border. The
media query uses the same 76.8rem as the logo rule below (16px rem, so 1228.8px). */
body.admin-bar #brx-header{top:var(--wp-admin--admin-bar--height,0px)}
body{padding-top:calc(2 * var(--at-space--s) + 6.5rem + 1px)}
@media (max-width:76.8rem){body{padding-top:calc(2 * var(--at-space--s) + 5.4rem + 1px)}}
/* logo smaller on mobile (matches v6 mockup 5.4rem) */
@media (max-width:76.8rem){#brx-header .site-header__logo-svg{height:5.4rem;width:6.7rem}}
/* thicker hamburger bars */
#brx-header .site-header__toggle .brxa-inner,#brx-header .site-header__toggle .brxa-inner::before,#brx-header .site-header__toggle .brxa-inner::after{height:4px}
/* TAP TARGET: dugme je skalirano na 0.55 pa je vidljivih 22x13; pseudo prosiruje SAMO zonu klika (48*0.55=26.4px) na WCAG 2.5.8 minimum. Izgled nepromijenjen. */
#brx-header .site-header__toggle{position:relative}
#brx-header .site-header__toggle::before{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%)}
/* menu panel drop-in (motion-safe) */
@media (prefers-reduced-motion:no-preference){#brx-header .site-header__mobile-menu{transform:translateY(-1.2rem)}#brx-header .site-header__mobile-menu.show{transform:none}}
/* cs-story - scroll-active number (JS toggles .is-active via IntersectionObserver; same accent as :hover) */
.cs-story__item.is-active .cs-story__num{color:var(--at-primary-l-1)}
/* --- Services / Website Redesign: before-after compare -------------------
Layout, size, colour, radius and typography live on the typed global
classes svc-frame__compare-handle / -knob / -chevron / -label (+ the
--before / --after modifiers) and svc-frame__img--compare.
Only what Bricks typed controls cannot express is kept here:
- box-shadow referencing an AT token (Bricks' box-shadow control stores
discrete values and cannot hold a var(); token purity wins)
- font-family via var() (Bricks quotes var() in typed font-family,
which yields an invalid font name)
- ::after pulse ring + its @keyframes
- ::-webkit-scrollbar (vendor pseudo-element)
- the inside the Bricks image element
JS only writes .style.left / .style.opacity while dragging. */
.svc-frame__compare-knob{box-shadow:var(--at-shadow--m)}
.svc-frame__compare-knob::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--at-white);opacity:.5;animation:svcComparePulse 1.6s infinite;pointer-events:none}
@keyframes svcComparePulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.8);opacity:0}}
.svc-frame__compare-label{font-family:var(--font-mono)}
.svc-frame__img--compare{-webkit-overflow-scrolling:touch;scrollbar-width:none}
.svc-frame__img--compare::-webkit-scrollbar{display:none}
.svc-feature .svc-frame__img--compare img{height:auto;display:block}
/* ============================================================
WORK CARD (shared) - homepage rail, /case-studies/ archive,
service single. One card, one class set. Only what typed
controls cannot express lives here.
============================================================ */
.work-card.brxe-block:hover{border-color:var(--at-primary-l-2);transform:translateY(-.4rem);box-shadow:var(--at-shadow--l)}
.work-card__img,.work-card__img img{object-fit:cover;object-position:top center;transition:transform var(--at-timing--l)}
.work-card.brxe-block:hover .work-card__img,.work-card.brxe-block:hover .work-card__img img{transform:scale(1.03)}
.work-card__name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.work-card__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:5rem}
/* .work-card__tag is raw [cs_tags] shortcode markup. Bricks emits no CSS for a
class that is not attached to a Bricks element, so this is its only home. */
.work-card__tag,.sh-card__tag{position:relative;z-index:6;flex:0 0 auto;white-space:nowrap;font-family:var(--font-mono);font-size:var(--at-text--2xs);letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--at-neutral-l-1);background:var(--at-neutral-l-6);border:1px solid var(--at-neutral-l-5);border-radius:999rem;padding:.4rem var(--at-space--2xs)}
a.work-card__tag,a.sh-card__tag{transition:color var(--at-timing--s),border-color var(--at-timing--s),background var(--at-timing--s)}
a.work-card__tag:hover,a.sh-card__tag:hover{color:var(--at-primary);border-color:var(--at-primary-l-2);background:var(--at-white)}
.work-card__go__icon{transition:transform var(--at-timing--m)}
.work-card.brxe-block:hover .work-card__go__icon{transform:translateX(.3rem)}
/* work-card--next: the closing "Yours could be next." card. Modifier -> child
overrides have no typed path; .work-card prefix keeps them above (0,2,0). */
.work-card.work-card--next .work-card__body{justify-content:center}
.work-card.work-card--next .work-card__name{color:var(--color-off)}
.work-card.work-card--next .work-card__desc{color:var(--color-on-dark-muted)}
.work-card.work-card--next .work-card__go{color:var(--at-primary-l-1);border-top-color:var(--color-line-dark)}
.work-card__shot--empty::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:2.4rem 2.4rem}
/* ============================================================
SERVICES HUB (sh-*) - template "Services - Hub", /services/
Residue only: pseudo-element grid, adjacent-sibling spacing,
hover states, dot repeat, and the two-column collapse of the
how-it-works rows. Everything else is typed on the classes.
============================================================ */
.sh-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:4rem 4rem;-webkit-mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%)}
.sh-group + .sh-group{margin-top:var(--at-space--2xl)}
/* On a phone the section padding is 40px, so a 2xl gap between groups (61px) made the\n inside of a section roomier than its edge. Inner spacing must stay under outer. */
@media (max-width:767px){.sh-group + .sh-group{margin-top:var(--at-space--xl)}}
.sh-card{text-decoration:none}
.sh-card.brxe-block:hover{border-color:var(--at-primary-l-2);transform:translateY(-.3rem);box-shadow:var(--at-shadow--m)}
.sh-card.brxe-block:hover .sh-card__ico{background:var(--at-primary)}
.sh-card__go-icon{transition:transform var(--at-timing--m)}
.sh-card.brxe-block:hover .sh-card__go-icon{transform:translateX(.3rem)}
.sh-card.sh-card--open .sh-card__title{color:var(--color-off)}
.sh-card.sh-card--open .sh-card__note{color:var(--color-on-dark-muted)}
.sh-card.sh-card--open .sh-card__go{color:var(--at-primary-l-1)}
.sh-card.sh-card--open .sh-card__ico{background:var(--at-white-t-6)}
.sh-how__item:last-child{border-bottom:0}
@media (max-width:991px){.sh-how__name,.sh-how__desc{grid-column:2}}
/* Proof frame: the full-page capture pans inside its own window, driven by
the cursor position (see jaha-site.js). object-position, not translateY - an
8000px tall image on the compositor gets downsampled and goes blurry. */
.sh-proof__img{display:block;object-fit:cover;object-position:50% 0;transition:object-position .15s linear}
@media (hover:none),(pointer:coarse){
/* No cursor to drive the pan: give the frame real height and let the finger scroll it. */
.sh-proof__frame .sh-proof__viewport.brxe-block{aspect-ratio:3/4;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.sh-proof__viewport .sh-proof__img.brxe-image{height:auto;object-fit:fill}
}
/* Service "Recent work" band: the grid is 3-up, but a service may only have
one or two case studies. Without this a single card sits in a third of the
row and reads as a rendering failure. :has() is Safari 15.4+ and already
used elsewhere here; (0,4,0) so it beats the typed grid without !important. */
.sv-work__grid:has(.work-card:first-child:last-child){grid-template-columns:minmax(0,42rem);justify-content:center}
.sv-work__grid:has(.work-card:nth-child(2):last-child){grid-template-columns:var(--at-grid--2)}
/* ANCHOR LANDING - a sticky header (70px) and, on service pages, a sticky
in-page nav (ends at 152px) both cover the top of whatever an anchor lands
on. scroll-margin-top has no typed control, so it lives here. Class-based
rather than id-based because #why exists on both the homepage and the
service template and needs a different offset on each. */
.svc-feature,.exp,.work,.why,.cta{scroll-margin-top:8rem}
.sv-intro,.sv-inc,.sv-perf,.sv-proc,.sv-work,.sv-why,.sv-faq,.sv-price{scroll-margin-top:16rem}
/* Included grid is 3-up. A service with exactly 7 items leaves a lone seventh
item hanging at the left of the last row. Centring it reads as deliberate.
Desktop only: at 2 columns there is no middle, at 1 column there is no issue. */
@media (min-width:992px){
.sv-inc__item:nth-child(7):last-child{grid-column:2}
}
/* ============================================================
ABOUT (ab-*) - /about/. Residue only: the blueprint pseudo grid,
the panel glow, nth-child border removal on the licence and
principles grids, the last-row border, and the inline link colour.
============================================================ */
.ab-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:4rem 4rem;-webkit-mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%)}
.ab-panel::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 92% 6%,var(--color-panel-glow),transparent 70%)}
/* the status dot is decoration, so it is drawn, not built as an element */
.ab-panel__head::before{content:'';width:.7rem;height:.7rem;flex:none;border-radius:50%;background:var(--at-primary-l-1);box-shadow:0 0 0 .3rem var(--color-dot-halo)}
.ab-panel__row.brxe-block:last-child{border-bottom:0}
.ab-lic__i{border-right:1px dashed var(--color-line-dash);border-bottom:1px dashed var(--color-line-dash)}
.ab-lic__i:nth-child(4n){border-right:0}
.ab-lic__i:nth-last-child(-n+4){border-bottom:0}
.ab-cont__item.brxe-block:last-child{border-bottom:0}
.ab-prin__i.brxe-block:last-child{border-right:0}
.ab-prin__i + .ab-prin__i.brxe-block{padding-left:var(--at-space--m)}
.ab-prin .mono-label.brxe-text-basic{color:var(--at-primary-l-1)}
.ab-prin .mono-label::before{background:var(--at-primary-l-1)}
.ab-record__foot a{color:var(--at-primary);text-decoration:underline;text-underline-offset:.2em}
.ab-who__img{display:block}
.ab-who__bio p + p{margin-top:var(--at-space--m)}
.ab-who__bio p:last-child{margin-bottom:0}
@media (max-width:991px){
.ab-lic__i:nth-child(4n){border-right:1px dashed var(--color-line-dash)}
.ab-lic__i:nth-child(2n){border-right:0}
.ab-lic__i:nth-last-child(-n+4){border-bottom:1px dashed var(--color-line-dash)}
.ab-lic__i:nth-last-child(-n+2){border-bottom:0}
.ab-prin__i.brxe-block:nth-child(2n){border-right:0}
.ab-prin__i.brxe-block:nth-child(n+3){border-top:1px dashed var(--color-line-dash)}
}
@media (max-width:478px){
.ab-lic__i{border-right:0}
.ab-prin__i.brxe-block{border-right:0;padding-left:0;border-top:1px dashed var(--color-line-dash)}
.ab-prin__i + .ab-prin__i.brxe-block{padding-left:0}
}
/* ============================================================
BROWSER-BAR AND STATUS DOTS - drawn, never built as elements.
Each dot used to be an empty block in the structure; it is now a
::before on its own parent. Where a bar shows three dots, one
pseudo-element still draws all three via box-shadow.
============================================================ */
#brx-header .site-header__status::before,#brx-header .site-header__mobile-status::before{content:'';width:.7rem;height:.7rem;flex:0 0 auto;border-radius:50%;background:var(--at-primary-l-1);box-shadow:0 0 0 .3rem var(--color-dot-halo)}
.svc-frame__dots::before{content:'';width:.9rem;height:.9rem;flex:none;border-radius:50%;background:var(--color-line-dark);box-shadow:1.5rem 0 0 var(--color-line-dark),3rem 0 0 var(--color-line-dark);margin-right:3rem}
.work-card__bar::before{content:'';width:.9rem;height:.9rem;flex:none;border-radius:50%;background:var(--at-neutral-l-3);box-shadow:1.5rem 0 0 var(--at-neutral-l-3),3rem 0 0 var(--at-neutral-l-3);margin-right:3rem}
.cs-shot__bar::before{content:'';width:.9rem;height:.9rem;flex:none;border-radius:50%;background:var(--at-white-t-6);box-shadow:1.5rem 0 0 var(--at-white-t-6),3rem 0 0 var(--at-white-t-6);margin-right:3rem}
.sh-proof__bar::before{content:'';width:.7rem;height:.7rem;flex:none;border-radius:50%;background:var(--at-white-t-5);box-shadow:1.2rem 0 0 var(--at-white-t-5),2.4rem 0 0 var(--at-white-t-5);margin-right:2.4rem}
.sv-card__head::before{content:'';width:.7rem;height:.7rem;flex:none;border-radius:50%;background:var(--at-primary-l-1);box-shadow:0 0 0 .3rem var(--color-dot-halo)}
.cs-hero__specs-head::before{content:'';width:.8rem;height:.8rem;flex:none;border-radius:50%;background:var(--at-primary-l-1);box-shadow:0 0 0 .3rem var(--color-dot-halo)}
/* 404 (nf-*) - same blueprint grid as the other heroes, so a dead URL still
looks like the same site. Cards are the services-hub card, reused. */
.nf-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--color-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);background-size:4rem 4rem;-webkit-mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%);mask-image:radial-gradient(120% 90% at 78% 0%,#000,transparent 72%)}
/* ============================================================
HERO GLOW - shared layer, same geometry and token as the case
study heroes. Without it a hero is a flat white band with only
the blueprint grid, which reads as empty. The grid sits on
::before, so ::after is free. Every hero__inner is already
position:relative, so a z-index:0 layer stays behind the text.
============================================================ */
.sh-hero::after,.sv-hero::after,.ab-hero::after,.nf-hero::after,#brxe-ah::after,#brxe-pk::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(100rem 68rem at 82% 4%, var(--color-glow-blue), transparent 56%),linear-gradient(180deg, var(--color-glow-blue), transparent 52%)}
/* ============================================================
SAME-BACKGROUND SEAMS
Where two adjacent sections share a background, the two paddings
sum to twice the intended gap and neither is doing the job of
insetting content from a colour edge. Halve the lower one.
Measured 08.08.2026: 25 of 34 seams DO change colour and are left
alone; these are the 9 that do not.
Specificity: typed section padding is (0,2,0), so the #brx-content
prefix is required, not optional.
============================================================ */
#brx-content .ab-hero + .ab-who,
#brx-content .sh-hero + .sh-groups,
#brx-content .sh-groups + .sh-proof,
#brx-content .a-hero + .tiers,
#brx-content .cs-hero + .cs-shot,
#brx-content .cs-story + .cs-res,
#brx-content .jw-section + .cs-nav,
#brx-content .work-archive + .work-archive{padding-top:calc(var(--at-section-padding-block) / 2)}
/* Privacy note above the submit button. A notice, not a consent tick: an
enquiry runs on pre-contractual necessity, and a tick you cannot submit
without is not freely given consent anyway. */
.ff-privacy-note{margin:0;font-size:var(--at-text--2xs);line-height:1.55;color:var(--at-neutral-l-2)}
.ff-privacy-note a{color:var(--at-neutral-l-1);text-decoration:underline;text-underline-offset:.2em}
.ff-privacy-note a:hover{color:var(--at-primary)}
/* sv-perf grid: row-aware rules for the DESKTOP 4-column layout.
The adjacent selector .sv-perf__item + .sv-perf__item does not know about rows,
so item 5 (first of row two) inherited the column gutter and item 4 kept a
divider at the end of row one. The 2-col and 1-col breakpoints already had
their equivalents; the 4-col case was never written because no service had
more than four items until AI Site Rescue. */
@media (min-width:992px){
#brx-content .sv-perf__item:nth-child(4n+1){padding-left:0}
#brx-content .sv-perf__item:nth-child(4n){border-right:0}
}
/* Story tag koji vodi na uslugu: isti oblik kao obican, samo klikabilan. */
.cs-story__tag--link{color:var(--at-primary-l-1);text-decoration:none;transition:color var(--at-timing--s),border-color var(--at-timing--s);}
.cs-story__tag--link:hover{color:var(--at-primary-l-2);border-color:var(--at-primary);}
/* WCAG 1.4.1 - links inside body copy must not rely on colour alone. Same treatment as .ff-privacy-note a. */
.sv-proc__desc a{color:var(--at-primary);text-decoration:underline;text-underline-offset:.2em}
.aside__alt a{color:var(--at-primary);text-decoration:underline;text-underline-offset:.2em}
.sv-proc__desc a:hover,.aside__alt a:hover{color:var(--at-primary-d-1)}
/* Header services dropdown. Residue only: parent-state reveal, shadow (box-shadow control cannot hold a var), and full-row span. */
.site-header__drop{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--at-space--3xs));box-shadow:var(--at-shadow--l);transition:opacity var(--at-timing--m),transform var(--at-timing--m),visibility var(--at-timing--m)}
.site-header__navitem:hover .site-header__drop,.site-header__navitem:focus-within .site-header__drop{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.site-header__drop.brxe-block{width:auto;min-width:max-content}
.site-header__drop-all.brxe-text-basic{white-space:nowrap}
.site-header__nav-link.brxe-text-basic{white-space:nowrap}
.site-header__navitem.brxe-block{width:auto;flex:0 0 auto}
.site-header__drop-cols.brxe-block,.site-header__drop-col.brxe-block,.site-header__drop-list.brxe-block{width:auto}
/* Mega menu: panel se poravnava sa kontejnerom, chevron, sirina kolona */
.site-header__inner.brxe-block{position:relative}
.site-header__drop-col.brxe-block{width:34ch}
.site-header__drop-title.brxe-text-basic{white-space:nowrap}
.site-header__drop-row.brxe-block{width:100%}
.site-header__navitem.brxe-block::after{content:'';flex:0 0 auto;align-self:center;width:.5em;height:.5em;margin-left:var(--at-space--2xs);border-right:2px solid var(--color-on-dark);border-bottom:2px solid var(--color-on-dark);transform:translateY(-.12em) rotate(45deg);transition:transform var(--at-timing--m)}
.site-header__navitem.brxe-block:hover::after,.site-header__navitem.brxe-block:focus-within::after{transform:translateY(.08em) rotate(-135deg)}
/* Most preko praznog pojasa izmedju stavke menija i panela (izmjereno 40px), aktivna stavka bijela */
.site-header__drop.brxe-block::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:calc(var(--at-space--l) + 2px)}
#brx-header .site-header__navitem:hover > a,#brx-header .site-header__navitem:focus-within > a{color:var(--at-white)}
.site-header__navitem.brxe-block:hover::after,.site-header__navitem.brxe-block:focus-within::after{border-right-color:var(--at-white);border-bottom-color:var(--at-white)}
/* Strelica u redu: skrivena dok se ne predje misem po redu */
.site-header__drop-arrow{opacity:0;transform:translateX(-.25em);transition:opacity var(--at-timing--m),transform var(--at-timing--m)}
.site-header__drop-row:hover .site-header__drop-arrow,.site-header__drop-row:focus-visible .site-header__drop-arrow{opacity:1;transform:translateX(0)}
.site-header__drop-row.brxe-block{padding-right:var(--at-space--l)}
/* Tranzicije na hover stanjima menija: bez ovoga boja i podloga skacu i na ulazu i na izlazu */
.site-header__drop-row.brxe-block{transition:background-color var(--at-timing--m)}
.site-header__drop-title.brxe-text-basic,.site-header__drop-all.brxe-text-basic,.site-header__drop-cta.brxe-text-basic,.site-header__mobile-service.brxe-text-basic{transition:color var(--at-timing--m)}
/* Aktivna stavka: i podvlaka bijela, ne samo tekst */
#brx-header .site-header__navitem:hover .site-header__nav-link::after,#brx-header .site-header__navitem:focus-within .site-header__nav-link::after{background:var(--at-white)}
#brx-header .site-header__navitem > a{transition:color var(--at-timing--m)}
/* Vise zraka samo prije oznake grupe, jer se loop omotac ponavlja pa jedan gap vrijedi za sve */
.site-header__mobile-services > .mono-label{margin-top:var(--at-space--s)}
.site-header__mobile-services > .mono-label:first-child{margin-top:0}
/* KRITICNO: kolona se prelamala u drugu kolonu izvan ekrana kad sadrzaj preraste max-height */
#brx-header .site-header__mobile-menu{flex-wrap:nowrap}
/* Redovi usluga: 44px za palac, tanka linija umjesto razmaka */
.site-header__mobile-service.brxe-text-basic{min-height:3.8rem;box-sizing:border-box;width:100%}
/* Get in touch i email lijevo, kao i sve ostalo */
#brx-header .site-header__mobile-k,#brx-header .site-header__mobile-email{text-align:left}
/* Status i audit link u istu liniju sa dugmadima */
/* Reuf: status traka se ne prikazuje u mobilnom meniju */
#brx-header .site-header__mobile-status{display:none}
/* Oznaka Get in touch otpada, email ostaje kao tiha zadnja linija poravnata sa dugmadima */
#brx-header .site-header__mobile-k{display:none}
#brx-header .site-header__mobile-email{padding-left:var(--at-gutter);padding-right:var(--at-gutter);margin-top:var(--at-space--s)}
/* Dodir na mobilnom: gasi se siva mrlja preko cijelog reda, stanje dodira je uvuceno kao i tekst */
#brx-header .site-header__mobile-menu a,#brx-header .site-header__mobile-menu button{-webkit-tap-highlight-color:transparent}
#brx-header .site-header__mobile-link:active{background:var(--color-card-dark-hover)}
#brx-header .site-header__mobile-service:active{background:var(--color-card-dark-hover);border-radius:var(--at-radius--s)}
/* Razmak sa unutrasnjeg na vanjski, da podloga dodira bude uvucena kao i tekst */
#brx-header .site-header__mobile-link{padding-inline:0;margin-inline:var(--at-gutter);width:auto;border-radius:var(--at-radius--s)}
#brx-header .site-header__mobile-services{padding-inline:0;margin-inline:var(--at-gutter)}
#brx-header .site-header__mobile-service{padding-inline:var(--at-space--2xs);margin-inline:calc(var(--at-space--2xs) * -1)}
/* Meni prekriva zadnjih 13px headera pa sakrije njegovu liniju, vracamo je na vrh menija */
#brx-header .site-header__mobile-menu.show{border-top:1px solid var(--color-line-dark)}
/* Complianz kontrola na privacy stranici: