/* A B Woolley Ventures logo: sizing, animation and the sidebar lockup. Visitors who prefer reduced motion get no movement. */
.abw-logo{display:block;max-width:100%;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
[data-logo]{display:inline-flex;align-items:center;justify-content:center;max-width:100%}

/* sidebar: full logo when open, the heart when collapsed (never stretched) */
.sidebar-brand .abw-brand{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;padding:8px 10px;background:none;box-shadow:none;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 7px rgba(255,255,255,.5))}
.sidebar-brand .abw-full{display:inline-flex}
.sidebar-brand .abw-heart-wrap{display:none}
.sidebar-brand .abw-full{width:100%}.sidebar-brand .abw-full .abw-wrap{width:100%!important;max-width:200px}
.sidebar-brand .abw-heart-wrap .abw-wrap{width:54px!important}
body.side-min .sidebar-brand .abw-brand{flex:0 0 auto;justify-content:center;padding:6px}
body.side-min .sidebar-brand .abw-full{display:none}
body.side-min .sidebar-brand .abw-heart-wrap{display:inline-flex}

/* dark panels: the logo keeps its own colours on a clean white card */
.logo-card{display:inline-flex;background:#fff;border-radius:22px;padding:18px 24px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35)}

/* animated logo (transparent background): entrance, slow float, a light sweep that only touches the logo's own pixels.
   Hero version builds in stages. Visitors who prefer reduced motion get no movement. */
.abw-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;vertical-align:middle}
.abw-wrap .abw-logo{width:100%!important;height:auto;max-width:100%}
.abw-live{animation:abw-float 6.5s ease-in-out 1.2s infinite;will-change:transform}
.abw-live::after,.abw-shine{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--m,url(/assets/brand/abw-logo.png)) center/100% 100% no-repeat;mask:var(--m,url(/assets/brand/abw-logo.png)) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 150% 0/300% 100% no-repeat}
.abw-live::after{animation:abw-sweep 5.5s ease-in-out 1.8s infinite}
@keyframes abw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes abw-sweep{0%{background-position:150% 0}42%,100%{background-position:-50% 0}}
.abw-anim{animation:abw-in 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes abw-in{from{opacity:0;transform:translateY(12px) scale(.92);filter:blur(7px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}

/* hero: five layers of the same artwork, each clipped to its part of the logo, arriving one after another */
.abw-hero-logo{position:relative;display:block;max-width:100%}
.abw-hero-logo::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(50,140,255,.30),rgba(50,140,255,0) 72%);opacity:0;animation:abw-glow 5.2s ease-in-out 1.6s infinite}
@keyframes abw-glow{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.75;transform:scale(1.04)}}
.abw-stage{position:relative;display:block;width:100%;aspect-ratio:768/347}
.abw-float{display:block;animation:abw-float 7s ease-in-out 3.4s infinite}
.abw-ly{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation-fill-mode:both;user-select:none;-webkit-user-drag:none;will-change:transform,opacity}
.abw-ly.l1{clip-path:inset(0 69% 25.2% 0);animation:abw-l1 1s cubic-bezier(.2,.9,.3,1) .05s forwards}
.abw-ly.l2{clip-path:inset(0 0 25.2% 31%);animation:abw-l2 1.15s cubic-bezier(.2,1.25,.4,1) .3s forwards}
.abw-ly.l3{clip-path:inset(74.8% 0 0 0);animation:abw-l3 .9s cubic-bezier(.2,.9,.3,1) .85s forwards}
@keyframes abw-l1{from{opacity:0;transform:translateX(-14%) rotate(-7deg)}to{opacity:1;transform:none}}
@keyframes abw-l2{from{opacity:0;transform:scale(.7) translateY(8%)}to{opacity:1;transform:none}}
@keyframes abw-l3{from{opacity:0;transform:translateY(14%) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
to{opacity:1;transform:none}}
to{opacity:1;transform:none}}
.abw-shine{opacity:0;animation:abw-shine2 5.8s ease-in-out 3.2s infinite}
@keyframes abw-shine2{0%{opacity:1;background-position:150% 0}42%{opacity:1;background-position:-50% 0}43%,100%{opacity:0}}
.abw-sp{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 18%,rgba(140,210,255,.95) 34%,rgba(140,210,255,0) 70%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:abw-twinkle 3.4s ease-in-out infinite}
.abw-sp.s1{left:77.5%;top:15%;width:30px;height:30px;margin:-15px 0 0 -15px;animation-delay:2.2s}
.abw-sp.s2{left:35.5%;top:63%;animation-delay:2.9s}.abw-sp.s3{left:62.5%;top:63%;animation-delay:3.4s}
.abw-sp.s4{left:90%;top:43%;width:12px;height:12px;margin:-6px 0 0 -6px;animation-delay:4s}
@keyframes abw-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1.2) rotate(45deg)}70%{opacity:0}}

@media (prefers-reduced-motion:reduce){.abw-live,.abw-live::after,.abw-anim,.abw-float,.abw-hero-logo::before,.abw-shine,.abw-sp,.abw-tag *,.abw-tag *::after{animation:none!important;will-change:auto}.abw-ly{animation:none!important;opacity:1}.abw-sp,.abw-shine{display:none}.abw-tag *{opacity:1!important;transform:none!important;clip-path:none!important}}

/* ===== the wording under the name: "Sancrete & Concrete Products", the writing line and the three service icons ===== */
.abw-lockup{container-type:inline-size;display:block}
.abw-wrap.abw-lockup{display:block}
.abw-tag{display:flex;flex-direction:column;align-items:center;gap:2.1cqw;margin-top:2.4cqw;line-height:1.1;font-family:'Montserrat','Segoe UI',system-ui,sans-serif;color:#0B2A66}
.abw-tag *{box-sizing:border-box}
/* the bar: deep navy with a glowing blue rim, like the original lockup */
.tg-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:94%;padding:1.5cqw 5.2cqw;border-radius:99px;overflow:hidden;
  background:linear-gradient(180deg,#14337F 0%,#071A4A 55%,#0B2A6E 100%);
  box-shadow:0 0 0 .45cqw #2D9BFF,0 0 0 .8cqw rgba(45,155,255,.22),0 1.6cqw 3.4cqw -1.4cqw rgba(7,26,74,.7),inset 0 .25cqw .5cqw rgba(255,255,255,.35);
  transform-origin:50% 50%;opacity:0;animation:tg-open .95s cubic-bezier(.2,1.1,.3,1) var(--t0) forwards,tg-glow 3.8s ease-in-out calc(var(--t0) + 1.2s) infinite}
.tg-pill b{position:relative;font-weight:800;font-size:max(8px,2.9cqw);letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 0 1.4cqw rgba(120,200,255,.7)}
.tg-pill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) 160% 0/300% 100% no-repeat;animation:tg-sheen 4.6s ease-in-out calc(var(--t0) + 1.4s) infinite;pointer-events:none}
.tg-script{display:block;font-family:'Playball','Segoe Script','Brush Script MT',cursive;font-size:max(9px,3.55cqw);line-height:1.18;letter-spacing:.01em;text-align:center;text-wrap:balance;padding:0 2cqw .6cqw;max-width:100%;
  background:linear-gradient(90deg,#0B2A66 0%,#0B2A66 38%,#2E8BFF 50%,#0B2A66 62%,#0B2A66 100%) 0 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  clip-path:inset(-10% 100% -20% 0);animation:tg-write 1.25s cubic-bezier(.45,.1,.2,1) calc(var(--t0) + .55s) forwards,tg-text-shine 6s ease-in-out calc(var(--t0) + 2.2s) infinite}
.tg-icons{display:flex;justify-content:center;align-items:flex-start;gap:7cqw;width:100%;margin-top:.4cqw}
.tg-i{display:flex;flex-direction:column;align-items:center;gap:1.1cqw;opacity:0;transform:scale(.2) translateY(30%);
  animation:tg-pop .7s cubic-bezier(.2,1.5,.4,1) calc(var(--t0) + 1.2s + var(--i) * .16s) forwards,tg-bob 4.2s ease-in-out calc(var(--t0) + 2.6s + var(--i) * .5s) infinite}
.abw-tag .tg-i svg{width:max(18px,7.2cqw)!important;height:max(18px,7.2cqw)!important;max-width:none!important;padding:1.2cqw;flex:none;border-radius:30%;color:#0F4FC2;background:linear-gradient(160deg,#EAF3FF,#CFE3FF);box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(15,79,194,.55),inset 0 0 0 .2cqw rgba(45,155,255,.45)}
.tg-i em{font-style:normal;font-weight:700;font-size:max(8px,2.35cqw);letter-spacing:.08em;text-transform:uppercase;color:#0B2A66;white-space:nowrap}
@keyframes tg-open{0%{opacity:0;transform:scaleX(.25) scaleY(.6);letter-spacing:.5em}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes tg-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(45,155,255,0))}50%{filter:drop-shadow(0 0 1.4cqw rgba(45,155,255,.65))}}
@keyframes tg-sheen{0%{background-position:160% 0}38%,100%{background-position:-60% 0}}
@keyframes tg-write{0%{clip-path:inset(-10% 100% -20% 0)}100%{clip-path:inset(-10% 0 -20% 0)}}
@keyframes tg-text-shine{0%{background-position:0 0}50%,100%{background-position:100% 0}}
@keyframes tg-pop{0%{opacity:0;transform:scale(.2) translateY(30%) rotate(-12deg)}100%{opacity:1;transform:none}}
@keyframes tg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.9cqw)}}
/* narrow logos (header, sidebar): the icons become a plain text row so every line of the wording is still there */
.tg-mini{display:none;font-weight:700;font-size:max(8px,2.6cqw);letter-spacing:.14em;text-transform:uppercase;color:#0F4FC2;opacity:0;animation:tg-fade .8s ease calc(var(--t0) + 1.3s) forwards}
@keyframes tg-fade{to{opacity:1}}
@container (max-width:339px){.tg-icons{display:none}.tg-mini{display:block}}