/* =====================================================================================
   Brand Elite - ABOUT page (about-brand-elite.php). LOCKED 26 Sep 2026.
   Tokens from css/system.css (loaded before this file). Sections, top to bottom:
   1 Story (dark, one screen) - 2 Life at Brand Elite (light) - 3 Journey (dark) - 4 Why us (light)
   - 5 Our Growth Process (dark, one screen) - 6 Logos (light) - 7 Google reviews (orange, one screen)
   ===================================================================================== */

/* ---------- page + section frame ---------- */
.ab-page{background:#f4f8fd;--accent-on-dark:#f78913}   /* logo orange for accents on dark (no light amber on this page) */
.ab{position:relative;padding:var(--space-section) var(--pad);overflow:hidden}
.ab-in{position:relative;z-index:2}
.ab-fx{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ab-top{padding-top:calc(min(100vw,2560px) * 250 / 2260 + var(--gap-head-body))}  /* clears the header art */
@media (max-width:1179.98px){.ab-top{padding-top:calc(60px + 48px)}}             /* clears the 60px phone bar */
@media (min-width:1180px){.ab-screen{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}}
/* phones: the side margin is too narrow for planets and rockets, so only dust and sparkles stay */
@media (max-width:600px){.ab-fx .bp,.ab-fx .brk{display:none}}

/* surfaces */
.ab-light{background:linear-gradient(180deg,#d6e4f5 0%,#f4f8fd 100%)}
.ab-light2{background:linear-gradient(180deg,#f4f8fd 0%,#e6eef9 100%)}
.ab-white{background:#fff}
.ab-space{background:radial-gradient(120% 95% at 50% 100%,#132a57 0%,#0b1a3d 45%,#050a18 100%);color:var(--text-on-dark)}
.ab-navy{background:radial-gradient(90% 80% at 80% 0%,#1b3569 0%,#0e1f45 50%,#081230 100%);color:var(--text-on-dark)}

/* ---------- heading block: h2 -> 20 -> rule -> 20 -> lead -> 40 -> content (same as Home) ---------- */
.ab h1,.ab-h2{margin:0;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.022em;line-height:1.15;color:var(--navy);text-wrap:balance}
.ab-rule{width:var(--rule-w);height:var(--rule-h);border-radius:2px;background:var(--grad);margin-top:var(--gap-h2-rule)}
.ab p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);margin:0}
.ab .ab-lead{margin:var(--gap-rule-lead) 0 0;font-size:var(--fs-lead);line-height:1.5;color:var(--text-body);max-width:40em}
.ab p+p{margin-top:.8em}
.ab p b{color:var(--text-strong);font-weight:600}
.ab-hd+*{margin-top:var(--gap-head-body)}
.ab-c{text-align:center}.ab-c .ab-rule,.ab-c .ab-lead{margin-left:auto;margin-right:auto}
.ab h3{margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.3;color:var(--navy)}
.ab-dark h1,.ab-dark .ab-h2,.ab-dark h3{color:#fff}
.ab-dark p,.ab-dark .ab-lead{color:var(--text-on-dark)}
.ab-dark p b{color:#fff}

/* ---------- buttons (the one system: .rm primary with arrow, .ab-btn2 secondary) ---------- */
.ab .rm{margin-top:0}
.ab-dark .rm{--hov:#f78913}
.ab-btn2{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);padding:0 var(--btn-px);border-radius:999px;font-size:var(--fs-btn);font-weight:500;color:#fff;border:1.5px solid transparent;box-shadow:0 12px 24px -10px rgba(16,25,40,.55);transition:color .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.ab-btn2::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;background:var(--gradN);z-index:-1;transition:opacity .5s var(--ease)}
.ab-btn2:focus-visible{color:var(--navy);border-color:var(--navy);box-shadow:0 0 0 5px rgba(16,25,40,.1)}
.ab-btn2:focus-visible::before{opacity:0}
@media (hover:hover){.ab-btn2:hover{color:var(--navy);border-color:var(--navy);box-shadow:0 0 0 5px rgba(16,25,40,.1)}.ab-btn2:hover::before{opacity:0}}

/* ---------- cards + icon tiles (DESIGN.md 6d) ---------- */
.ab-card{position:relative;background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:28px;padding:clamp(24px,2.2vw,34px);box-shadow:0 26px 44px -18px rgba(30,64,130,.28),0 4px 10px rgba(30,64,130,.06);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
@media (hover:hover){.ab-card:hover{transform:translateY(-6px);box-shadow:0 36px 56px -20px rgba(30,64,130,.34),0 4px 10px rgba(30,64,130,.06)}}
.ab-card h3{margin-top:20px}
.ab-card p{margin-top:8px}
.ab-glass{background:rgba(255,255,255,.06);border:1px solid rgba(232,240,252,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ab-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(140deg,#fff2e6,#ffe1c7);flex:none}
.ai-ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-ic .ai-ic{stroke:#e0580b}
.ab-dark .ab-ic{background:rgba(244,106,16,.16);border:1px solid rgba(247,137,19,.3)}
.ab-dark .ab-ic .ai-ic{stroke:#f78913}
@keyframes borbit{to{transform:rotate(360deg)}}

/* ---------- entrance reveal (viewport-triggered, DESIGN.md 8a) ---------- */
.js .ab-rv{opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .ab-rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.js .ab-rv{opacity:1;translate:none;transition:none}}

/* =====================================================================================
   1. STORY: exactly one screen from 900px wide up (Windows laptops at 125-150% zoom land between
   900 and 1179px); heading, orbit and spacing shrink with the screen height so everything fits
   ===================================================================================== */
.st-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(32px,4vw,80px);align-items:center}
@media (max-width:1179.98px){.st-grid{grid-template-columns:1fr}}
.st-copy .ab-rule+*{margin-top:var(--gap-rule-lead)}
.st-copy p{color:var(--text-on-dark)}
.r-story{--st-top:108px}
@media (min-width:1180px){.r-story{--st-top:calc(min(100vw,2560px) * 250 / 2260 + 16px)}}
@media (min-width:900px){
  .r-story{height:100vh;height:100svh;min-height:480px;padding-top:var(--st-top);padding-bottom:clamp(16px,3.5vh,44px);display:flex;flex-direction:column;justify-content:center}
  .r-story .st-grid{grid-template-columns:1.25fr 1fr;gap:clamp(24px,3vw,64px)}
  .r-story h1{font-size:min(var(--fs-h2),6.4vh)}
  .r-story .o3-sys{width:min(100%,560px,calc(100vh - var(--st-top) - 70px))}
  .r-story .st-icons{margin-top:clamp(14px,3vh,30px);gap:clamp(10px,2vh,20px) 24px}
  .r-story .st-icons .ic{width:clamp(36px,5vh,46px);height:clamp(36px,5vh,46px)}
}
@media (min-width:900px) and (max-height:700px){.r-story .st-copy p{line-height:1.55}.r-story .ab-rule+*{margin-top:14px}}
.st-icons{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.st-icons li{display:flex;align-items:center;gap:14px;font-size:var(--fs-body);font-weight:500;line-height:1.35;color:#fff}
.st-icons .ic{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(247,137,19,.55);box-shadow:0 0 0 5px rgba(244,106,16,.08)}
.st-icons .ai-ic{width:22px;height:22px;stroke:#f78913}
/* RULE (Lohith, 30 Sep 2026, 3rd time asked): every hero-point icon is orange, whatever icon set it comes from (ai-ic, cp-ic, pp-ic, sv-ic, page icons...) */
.st-icons .ic svg{width:22px;height:22px;fill:none;stroke:#f78913;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.st-icons{grid-template-columns:1fr;gap:16px}}
/* orbit system: logo core, turning planets, four count-up stats */
.o3-sys{position:relative;width:min(100%,600px);aspect-ratio:1;margin-inline:auto}
.o3-sys .rg{position:absolute;border-radius:50%;border:1.5px dashed rgba(160,200,255,.38)}
.o3-sys .r1{inset:0}.o3-sys .r2{inset:15%;border-color:rgba(247,137,19,.5)}.o3-sys .r3{inset:31%}
.o3-core{position:absolute;inset:40%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#243d72,#101928 70%);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(255,255,255,.04),0 0 80px rgba(80,150,255,.35)}
.o3-core img{width:58%;height:auto}
.o3-spin{position:absolute;inset:0;animation:borbit 60s linear infinite}
.o3-spin.b{inset:15%;animation-duration:44s;animation-direction:reverse}
.o3-spin .bp{position:absolute}
.o3-stat{position:absolute;z-index:3;padding:12px 18px;border-radius:18px;text-align:left;min-width:140px}
.o3-stat b{display:block;font-size:clamp(26px,2.3vw,38px);font-weight:700;line-height:1;color:#fff;letter-spacing:-.02em}
.o3-stat b em{font-style:normal;color:var(--accent-on-dark)}
.o3-stat>span{display:block;margin-top:6px;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-muted)}
.o3-s1{left:-4%;top:12%}.o3-s2{right:-6%;top:22%}.o3-s3{left:-2%;bottom:14%}.o3-s4{right:-4%;bottom:8%}
@media (max-width:600px){.o3-stat{min-width:0;max-width:47%;padding:10px 12px}.o3-stat>span{letter-spacing:.06em}.o3-s1{left:0;top:2%}.o3-s2{right:0;top:2%}.o3-s3{left:0;bottom:0}.o3-s4{right:0;bottom:0}}
/* orbit boxes with an icon (DESIGN.md 12, Lohith 29 Sep 2026): the Contact look everywhere (policies, service pages):
   glass box, solid orange circle with a white icon, bold word(s). Up to 5 boxes: .o3-s1 ... .o3-s5 (zig-zag left / right) */
.o3-stat.o3-ic{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;min-width:0}
.o3-stat.o3-ic>.ic{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:0 10px 20px -8px rgba(244,106,16,.55)}
.o3-stat.o3-ic>.ic svg{width:20px;height:20px;stroke:#fff}
.o3-stat.o3-ic b{font-size:var(--fs-h3);letter-spacing:0;white-space:nowrap}
/* the 5 boxes are centred on a regular pentagon: 72deg apart on one circle of radius --r (share of the orbit radius), whatever the word length */
.o3-five{--r:.9}.o3-five .o3-stat{translate:-50% -50%;right:auto;bottom:auto}
@media (max-width:1179.98px){.o3-five{--r:.82}}@media (min-width:900px) and (max-width:1179.98px){.o3-five{--r:.72}}@media (min-width:1180px) and (max-width:1399.98px){.o3-five{--r:.84}}   /* like Contact: on the outer ring on laptops / desktops, pulled in only where the screen is small or short */
@media (min-width:900px) and (max-width:1179.98px){.o3-five .o3-stat.o3-ic b{white-space:normal;max-width:6.2em;line-height:1.15}}   /* two-word labels wrap only on the small 900-1179px orbits */   /* smaller circle on tablets and on small side-by-side orbits: the pentagon stays even, it just shrinks */
.o3-five .o3-s5{left:50%;top:calc(50% - var(--r) * 50%)}.o3-five .o3-s2{left:calc(50% + var(--r) * 47.55%);top:calc(50% - var(--r) * 15.45%)}.o3-five .o3-s3{left:calc(50% + var(--r) * 29.39%);top:calc(50% + var(--r) * 40.45%)}.o3-five .o3-s4{left:calc(50% - var(--r) * 29.39%);top:calc(50% + var(--r) * 40.45%)}.o3-five .o3-s1{left:calc(50% - var(--r) * 47.55%);top:calc(50% - var(--r) * 15.45%)}
@media (min-width:900px) and (max-width:1179.98px),(min-width:900px) and (max-height:700px){.o3-stat.o3-ic{gap:8px;padding:6px 12px 6px 6px}.o3-stat.o3-ic>.ic{width:34px;height:34px}.o3-stat.o3-ic>.ic svg{width:18px;height:18px}.o3-stat.o3-ic b{font-size:var(--fs-body)}}   /* short laptop screens: the orbit is small, so the boxes are compact (the phone size) */
@media (max-width:600px){.o3-stat.o3-ic{gap:8px;padding:8px 10px 8px 8px}.o3-stat.o3-ic>.ic{width:34px;height:34px}.o3-stat.o3-ic>.ic svg{width:18px;height:18px}
  .o3-five .o3-stat{translate:none}.o3-five .o3-s1{left:0;right:auto;top:2%;bottom:auto}.o3-five .o3-s2{right:0;left:auto;top:2%;bottom:auto}.o3-five .o3-s3{right:0;left:auto;top:auto;bottom:0}.o3-five .o3-s4{left:0;right:auto;top:auto;bottom:0}.o3-five .o3-s5{display:none}}   /* phones: the 4 corners like the policies, no room for a 5th */
@media (prefers-reduced-motion:reduce){.o3-spin{animation:none}}

/* =====================================================================================
   2. LIFE AT BRAND ELITE: one gliding row of real photos (colour-graded) + four Instagram reels
   ===================================================================================== */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq+.mq{margin-top:18px}
.mq ul{display:flex;gap:18px;width:max-content;list-style:none;margin:0;padding:6px 0 22px;animation:mq 60s linear infinite}
.mq.rev ul{animation-direction:reverse}
.mq.slow ul{animation-duration:80s}
.mq:hover ul,.mq:focus-within ul{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* client-logo rows: the glide time comes from ab_logo_row() (--mq-t = 5s per logo in the row), so every row keeps the same speed per logo */
.mq ul:has(>.lg-client){animation-duration:var(--mq-t,155s);gap:0}.mq .lg-client{margin-right:18px}  /* gap as a margin on every tile: the row is exactly 2 equal halves, so the loop has no 9px hop */.mq.slow ul:has(>.lg-client){animation-duration:calc(var(--mq-t,155s) * 4 / 3)}
@media (prefers-reduced-motion:reduce){.mq ul{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.mq{-webkit-mask-image:none;mask-image:none}}
.lf-row ul{gap:18px;padding:6px 0 18px;animation-duration:70s}
.lf-row li{flex:none}
.lf-ph{position:relative;margin:0;height:clamp(240px,24vw,380px);border-radius:24px;overflow:hidden;background:#101928;box-shadow:0 26px 44px -22px rgba(16,25,40,.55)}
.lf-ph img{display:block;height:100%;width:auto;filter:saturate(1.12) contrast(1.07) brightness(1.02);transition:transform 1.2s var(--ease),filter .6s}
/* the grade: navy at the top, a warm brand glow bottom-left, dark at the foot for the caption */
.lf-ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(90% 70% at 0% 100%,rgba(244,106,16,.42),rgba(244,106,16,0) 60%),linear-gradient(180deg,rgba(36,61,114,.28),rgba(36,61,114,0) 45%);mix-blend-mode:soft-light;transition:opacity .6s}
.lf-ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(16,25,40,0) 55%,rgba(16,25,40,.7) 100%)}
.lf-ph figcaption{position:absolute;left:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.lf-ph figcaption::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(244,106,16,.3)}
@media (hover:hover){.lf-ph:hover img{transform:scale(1.04);filter:saturate(1.2) contrast(1.08)}.lf-ph:hover::before{opacity:.6}}
.r-reels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,32px);max-width:920px;margin:clamp(40px,4vw,64px) auto 0}
.r-reels .rl-phone:nth-child(even){transform:translateY(34px)}
@media (max-width:900px){.r-reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:40px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}.r-reels .rl-phone{flex:0 0 62%;scroll-snap-align:center}.r-reels .rl-phone:nth-child(even){transform:none}}
/* phone frame (9:19) with the reel cover */
.rl-phone{position:relative;aspect-ratio:9/19;width:100%;border-radius:34px;padding:9px;background:linear-gradient(160deg,#243d72,#101928);box-shadow:0 30px 50px -22px rgba(16,25,40,.6),inset 0 1px rgba(255,255,255,.18)}
.rl-phone::before{content:"";position:absolute;left:50%;top:15px;width:34%;height:14px;margin-left:-17%;border-radius:10px;background:#0a0f1c;z-index:2}
.rl-play{position:relative;display:block;width:100%;height:100%;border:0;border-radius:26px;cursor:pointer;padding:0;overflow:hidden;background:linear-gradient(160deg,#243d72 0%,#101928 55%,#c8430a 100%) center/cover no-repeat;color:#fff;font:inherit}
.rl-play.has-poster{background-size:cover;background-position:center}
.rl-play.has-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,25,40,.35) 0%,rgba(16,25,40,0) 30%,rgba(16,25,40,0) 55%,rgba(16,25,40,.85) 100%)}
.rl-play>span{z-index:1}
.rl-play:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.rl-ig{position:absolute;left:14px;top:40px;width:26px;height:26px}
.rl-ig svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2}
.rl-t{position:absolute;left:14px;right:14px;bottom:18px;text-align:left;font-size:var(--fs-body);font-weight:600;line-height:1.3}
.rl-t small{display:block;font-size:var(--fs-label);font-weight:500;opacity:.8}
/* play button: orange gradient disc, white icon; two rings ripple out and the icon nudges forward.
   Loop durations are written 2.5x long because js/system.js plays looping animations at 2.5x (5s = a 2s ripple) */
.rl-pl{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--grad);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 6px rgba(244,106,16,.3),0 12px 28px rgba(16,25,40,.55);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),box-shadow .35s}
.rl-pl svg{width:26px;height:26px;fill:#fff;margin-left:4px;animation:rl-nudge 5s ease-in-out infinite}
.rl-pl::before,.rl-pl::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(247,137,19,.85);pointer-events:none;animation:rl-ripple 5s var(--ease) infinite}
.rl-pl::after{animation-delay:-2.5s}
@keyframes rl-ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes rl-nudge{0%,60%,100%{transform:translateX(0)}70%{transform:translateX(3px)}80%{transform:translateX(0)}}
@media (hover:hover){.rl-play:hover .rl-pl{transform:scale(1.1);box-shadow:0 0 0 10px rgba(244,106,16,.28),0 14px 30px rgba(16,25,40,.6)}.rl-play:hover .rl-pl::before,.rl-play:hover .rl-pl::after{border-color:#fff}}
@media (prefers-reduced-motion:reduce){.rl-pl svg{animation:none}.rl-pl::before,.rl-pl::after{display:none}}
/* pop-up players (reels + full reviews) */
.rl-dlg,.rv-dlg{padding:0;border:0;background:transparent;overflow:visible;max-width:none;max-height:none}
.rl-dlg::backdrop{background:rgba(5,10,24,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rv-dlg::backdrop{background:rgba(5,10,24,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rl-box{width:min(400px,92vw);height:min(760px,86vh);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.rl-box iframe{width:100%;height:100%;border:0;display:block}
.rl-x{position:absolute;right:-14px;top:-14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(244,106,16,.45)}
.rl-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.rl-x:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:600px){.rl-x{right:6px;top:-54px}}

/* =====================================================================================
   3. JOURNEY: zigzag path drawn by js/about.js through the pins; the rocket climbs from 2024 to 2026
   ===================================================================================== */
.fp{position:relative}
.fp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.fp-base{fill:none;stroke:rgba(160,200,255,.32);stroke-width:2.5;stroke-dasharray:8 10;stroke-linecap:round}
.fp-trail{fill:none;stroke:#f78913;stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(247,137,19,.6))}
.fp-rocket{position:absolute;left:0;top:0;z-index:4;pointer-events:none;will-change:transform}
.fp-rocket .brk{position:static;animation:none;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.fp-rows{position:relative;z-index:2;list-style:none;margin:0;padding:40px 0;display:grid;gap:clamp(40px,8vh,96px)}
.fp-row{position:relative;min-height:120px;display:flex;align-items:center}
.fp-pin{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#0b1a3d;border:2px solid rgba(160,200,255,.45);z-index:3;transition:background .5s,border-color .5s,box-shadow .5s}
.fp-row.on .fp-pin{background:var(--orange);border-color:#f78913;box-shadow:0 0 0 7px rgba(244,106,16,.2),0 0 22px rgba(244,106,16,.65)}
.fp-card{width:min(36%,440px);padding:clamp(22px,2vw,32px);opacity:.5;transition:opacity .6s var(--ease)}
.fp-row.on .fp-card{opacity:1}
.fp-card .yr{font-size:clamp(34px,3.2vw,52px);font-weight:700;line-height:1;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fp-card h3{margin-top:10px;text-transform:uppercase;letter-spacing:.05em}
.fp-card p{margin-top:6px}
.fp-now{display:inline-flex;align-items:center;gap:8px;margin-left:12px;vertical-align:middle;padding:4px 10px;border-radius:999px;background:rgba(34,197,94,.14);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;color:#86efac}
.fp-now i{width:7px;height:7px;border-radius:50%;background:#22c55e}
/* pins swing between 58% and 42%, cards sit on the outside */
.fp-row:nth-child(odd) .fp-pin{left:58%}.fp-row:nth-child(even) .fp-pin{left:42%}
.fp-row:nth-child(odd){justify-content:flex-end}.fp-row:nth-child(even){justify-content:flex-start}
/* phones + tablets: one straight line on the left */
@media (max-width:900px){
  .fp .fp-row .fp-pin{left:14px}
  .fp .fp-row{justify-content:flex-start;padding-left:44px}
  .fp .fp-card{width:100%}
}

/* =====================================================================================
   4. WHY BRANDS CHOOSE BRAND ELITE: bento
   ===================================================================================== */
.wy-no{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:40px;padding:0 10px;border-radius:12px;background:var(--grad);color:#fff;font-size:20px;font-weight:700;letter-spacing:.02em;box-shadow:0 10px 22px -8px rgba(244,106,16,.55)}
.c-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
.c-bento .ab-card{display:flex;flex-direction:column}
.c-bento .top{display:flex;align-items:center;justify-content:space-between}
.c-bento .ab-card h3{margin-top:22px}
.c-bento .f1{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,#243d72,#16244a 45%,#101928);border-color:transparent;justify-content:space-between}
.c-bento .f1 h3{color:#fff;font-size:clamp(26px,2.4vw,38px);line-height:1.1;letter-spacing:-.015em}
.c-bento .f1 p{color:var(--text-on-dark);font-size:var(--fs-lead);line-height:1.5}
.c-bento .f1 .ab-ic{background:rgba(244,106,16,.18)}.c-bento .f1 .ab-ic .ai-ic{stroke:#f78913}
.c-bento .f1 .wy-no{background:#fff;color:#c2410c}
/* the ROI graph: eight bars climbing by the same step, growing in when the card appears */
.roi{position:relative;display:flex;align-items:flex-end;gap:clamp(6px,.8vw,12px);height:clamp(170px,15vw,230px);margin-top:28px;padding-top:10px}
.roi i{flex:1;height:calc(var(--k) * 12.5%);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#f78913,#f45c06);transform-origin:50% 100%;box-shadow:0 8px 20px -8px rgba(244,106,16,.7)}
.roi i:nth-child(-n+3){opacity:.75}
.js .roi i{transform:scaleY(0);transition:transform .9s var(--ease);transition-delay:calc(var(--k) * 90ms + .2s)}
.js .f1.in .roi i{transform:none}
.roi svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.roi svg path{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 6;opacity:.55}
@media (prefers-reduced-motion:reduce){.js .roi i{transform:none;transition:none}}
.c-bento .f6{grid-column:span 4;flex-direction:row;align-items:center;gap:24px;background:linear-gradient(135deg,#ff8a3d,#f46a10 50%,#c8430a);border-color:transparent}
.c-bento .f6 h3{margin:0;color:#fff}.c-bento .f6 p{color:#fff}
.c-bento .f6 .ab-ic{background:rgba(255,255,255,.2)}.c-bento .f6 .ab-ic .ai-ic{stroke:#fff}
.c-bento .f6 .tx{flex:1}
.c-bento .f6 .ab-btn2{flex:none}
@media (max-width:1179.98px){.c-bento{grid-template-columns:1fr 1fr}.c-bento .f1,.c-bento .f6{grid-column:span 2}.c-bento .f1{grid-row:auto}}
@media (max-width:600px){.c-bento{grid-template-columns:1fr}.c-bento .f1,.c-bento .f6{grid-column:auto}.c-bento .f6{flex-direction:column;align-items:flex-start}}

/* =====================================================================================
   5. OUR GROWTH PROCESS: stepping stones along a wave, one screen on desktop
   ===================================================================================== */
.b-procw{position:relative}
.b-wave{position:absolute;left:0;right:0;top:45%;width:100%;height:120px;margin-top:-80px;z-index:0;overflow:visible}
.b-proc{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,24px);list-style:none;margin:0;padding:0 0 90px}
.b-proc li:nth-child(even){transform:translateY(90px)}
.b-proc .ab-card{position:relative;z-index:1;padding:26px 22px}
.b-proc .n{font-size:clamp(44px,4vw,64px);font-weight:700;line-height:.9;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(247,137,19,.8)}
.b-proc h3{margin-top:14px;text-transform:uppercase;letter-spacing:.05em}
.b-proc p{margin-top:8px}
.b-proc .ab-ic{position:absolute;right:20px;top:22px}
/* the number row is as tall as the icon, so a title never runs under the icon (Lohith, 18 Oct 2026) */
.b-proc .n{min-height:52px;display:flex;align-items:center}
@media (max-width:1179.98px){.b-proc{grid-template-columns:1fr 1fr;padding:0}.b-proc li:nth-child(even){transform:none}.b-wave{display:none}}
@media (max-width:600px){.b-proc{grid-template-columns:1fr}}

/* =====================================================================================
   6. LOGOS: three gliding rows of white tiles
   ===================================================================================== */
.lg-tile{display:flex;align-items:center;justify-content:center;width:clamp(170px,14vw,220px);flex:none;height:clamp(84px,7vw,112px);padding:14px 18px;background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:20px;box-shadow:0 18px 34px -22px rgba(30,64,130,.35);transition:transform .35s var(--ease),box-shadow .35s}
.lg-tile img{max-width:min(100%,168px);max-height:64px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
@media (hover:hover){.lg-tile:hover{transform:translateY(-4px);box-shadow:0 26px 40px -22px rgba(30,64,130,.45)}}

/* =====================================================================================
   7. CLIENT REVIEWS ON GOOGLE: the Home "Brands That Trust Us" orange, one screen, looping carousel
   ===================================================================================== */
.r-rev{background:radial-gradient(900px 520px at 50% 108%,rgba(247,137,19,.45),transparent 62%),radial-gradient(760px 480px at 8% 0%,rgba(255,150,70,.5),transparent 60%),linear-gradient(172deg,#f46a10,#dc4c0c 42%,#a5300a);color:#fff}
.r-rev .ab-h2{color:#fff}.r-rev .acc{color:var(--navy)}.r-rev .ab-rule{background:var(--navy)}.r-rev .ab-lead{color:rgba(255,255,255,.92)}
.rr-tri{position:absolute;left:0;top:0;width:250px;height:150px;background:linear-gradient(135deg,#f45c06,#f78913);clip-path:polygon(0 0,100% 0,0 100%)}
.rr-tri::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.35) 2px,transparent 2.6px) 0 0/16px 16px}
.rr-glow{position:absolute;left:50%;top:40%;width:1200px;height:520px;margin:-260px 0 0 -600px;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent)}
.c-rev{position:relative;z-index:2;display:grid;grid-template-columns:clamp(260px,22vw,340px) 1fr;gap:clamp(20px,2vw,32px);align-items:stretch}
.c-car{position:relative;min-width:0}
.c-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 24px;scrollbar-width:none}
.c-track::-webkit-scrollbar{display:none}
.c-track .rv-card{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start}
.c-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:6px}
.c-nav button{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background:rgba(16,25,40,.28);border:1px solid rgba(255,255,255,.45);transition:background .3s,border-color .3s,box-shadow .3s}
.c-nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.c-nav button:hover{background:var(--navy);border-color:transparent;box-shadow:0 0 0 5px rgba(16,25,40,.18)}}
.c-nav button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:1179.98px){.c-rev{grid-template-columns:1fr}.c-track .rv-card{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width:600px){.c-track .rv-card{flex-basis:88%}}
/* rating card: navy with the real Google G */
.rr-sum{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,2.4vw,34px);border-radius:24px;background:linear-gradient(160deg,#243d72,#16244a 45%,#101928);color:#fff;box-shadow:0 26px 44px -16px rgba(16,25,40,.55),inset 0 1px rgba(255,255,255,.12)}
.rr-sum .big{font-size:clamp(48px,4.4vw,72px);font-weight:700;line-height:1;letter-spacing:-.03em}
.rr-sum .rv-stars svg{width:22px;height:22px}
.rr-sum p{color:var(--text-on-dark)}.rr-sum p b{color:#fff}
.rr-sum .rm{--hov:#f78913;margin-top:auto}
.rr-g{width:84px;height:84px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.rr-g .rv-g{width:50px;height:50px}
/* review cards: white, like the Home logo tiles; the whole card opens the full review */
.rv-card{margin:0;padding:clamp(22px,2vw,30px);border-radius:24px;background:#fff;box-shadow:0 22px 34px -22px rgba(2,8,30,.55),0 0 0 1px rgba(16,25,40,.05);display:flex;flex-direction:column;gap:16px}
.rv-open{cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s}
@media (hover:hover){.rv-open:hover{transform:translateY(-4px);box-shadow:0 30px 44px -22px rgba(2,8,30,.6)}}
.rv-open:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rv-top{display:flex;align-items:center;justify-content:space-between}
.rv-card .rv-top{margin-bottom:10px}
.rv-stars{display:flex;gap:3px}
.rv-stars svg{width:18px;height:18px;fill:#FBBC05}
.rv-g{width:22px;height:22px;flex:none}
.rv-card blockquote{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.rv-card blockquote p{margin:0}
.rv-card blockquote p+p{margin-top:.7em}
.rv-card blockquote.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rv-card figcaption,.rv-card .rv-cap{display:flex;align-items:center;gap:12px;margin-top:auto}
.rv-card figcaption b,.rv-card .rv-cap b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--navy)}
.rv-card figcaption i,.rv-card .rv-cap i{display:block;font-style:normal;font-size:var(--fs-label);color:#c2410c}
.rv-av{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--gradN);border:2px solid rgba(244,106,16,.55)}
.rv-av svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
/* one screen from 900px up; the cards are exactly as tall as the rating card (the track sits over the grid
   cell, so only the rating card sets the height) and each text is cut to the lines that fit (js/about.js) */
@media (min-width:900px){
  .r-rev{height:100vh;height:100svh;min-height:480px;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(28px,6vh,88px);padding-bottom:clamp(28px,6vh,88px)}
  .r-rev .c-rev{grid-template-columns:clamp(240px,22vw,340px) 1fr}
  .r-rev .c-track{position:absolute;inset:0;align-items:stretch;padding:0 2px}
  .r-rev .c-track .rv-card{flex-basis:calc((100% - 20px) / 2);height:100%;min-height:0}
  .r-rev .c-track .rv-card blockquote{flex:1 1 auto;min-height:0}
  .r-rev .rv-card blockquote.clamp p{display:inline}          /* one block of text, so the "…" cut is clean */
  .r-rev .rv-card blockquote.clamp p+p::before{content:" "}
  .r-rev .c-nav{position:absolute;right:0;bottom:calc(100% + 22px);margin:0}
}
@media (min-width:1180px){.r-rev .c-track .rv-card{flex-basis:calc((100% - 40px) / 3)}}
/* short screens (laptops, zoomed windows): tighter, everything still on one screen */
@media (min-width:900px) and (max-height:760px){
  .r-rev .ab-hd+*{margin-top:clamp(14px,3vh,28px)}
  .r-rev .rv-card{padding:18px 20px;gap:10px}
  .r-rev .rv-av{width:38px;height:38px}
  .rr-sum{gap:8px;padding:20px 22px}.rr-sum .big{font-size:44px}.rr-g{width:64px;height:64px}.rr-g .rv-g{width:38px;height:38px}
  .r-rev .c-nav button{width:44px;height:44px}
  .r-rev .ab-h2{font-size:min(var(--fs-h2),6.4vh)}
}
@media (min-width:900px) and (max-height:620px){
  .r-rev .rv-card{gap:8px;padding:16px 18px}
  .rr-sum{gap:6px;padding:16px 20px}.rr-sum .big{font-size:38px}.rr-sum .rv-stars svg{width:18px;height:18px}
}
/* the full review pop-up */
.rv-full{width:min(620px,90vw);max-height:84vh;overflow:auto;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,40px);border-radius:24px;background:#fff;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.rv-full blockquote{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.rv-full blockquote p{margin:0}.rv-full blockquote p+p{margin-top:.8em}
.rv-full .rv-stars svg{width:20px;height:20px}
.rv-full .rv-g{width:28px;height:28px}
.rv-full figcaption,.rv-full .rv-cap{display:flex;align-items:center;gap:12px}
.rv-full b{display:block;color:var(--navy);font-size:var(--fs-body)}.rv-full i{display:block;font-style:normal;font-size:var(--fs-label);color:#c2410c}

/* =====================================================================================
   SHARED INNER-PAGE HERO (27 Sep 2026; About, Contact and every page after them):
   breadcrumbs > H1 > rule > paragraph > two points > one primary button. Rule: each page gets
   two points of its own, a point is never repeated on another page.
   ===================================================================================== */
.be-crumbs{margin:0 0 clamp(12px,2.2vh,20px)}
.be-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.be-crumbs li{display:flex;align-items:center;gap:6px}
.be-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--text-on-dark-muted);transition:color .25s}
@media (hover:hover){.be-crumbs a:hover{color:#f78913}}
.be-crumbs svg{width:14px;height:14px;fill:none;stroke:var(--text-on-dark-muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.be-crumbs [aria-current]{color:#f78913}
.st-icons .cp-ic{width:22px;height:22px;fill:none;stroke:#f78913;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-story .hero-points{margin-top:clamp(22px,4.4vh,44px);gap:20px clamp(24px,3vw,48px);grid-template-columns:minmax(0,max-content) minmax(0,max-content)}   /* minmax: long points wrap instead of widening the hero (29 Sep 2026) */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,5vh,52px)}
.hero-cta .rm{display:inline-flex;align-items:center;gap:12px;height:var(--btn-h);padding:0 var(--btn-px);border-radius:999px;font-size:var(--fs-btn);font-weight:500}
.hero-cta .rm svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.r-story .hero-points{grid-template-columns:1fr}}
/* phones: every inner-page hero is centred (Lohith, 28 Sep 2026; Home excluded, it has its own hero): breadcrumbs, H1, rule,
   text and button centred; the icon points form one centred block with their icons lined up */
@media (max-width:600px){
  .ab-top.r-story .st-copy{text-align:center}
  .ab-top.r-story .be-crumbs ol{justify-content:center}
  .ab-top.r-story .ab-rule{margin-left:auto;margin-right:auto}
  .ab-top.r-story .st-icons{grid-template-columns:minmax(0,max-content);justify-content:center}   /* minmax: a long point wraps on small phones instead of widening the hero (29 Sep 2026) */
  .ab-top.r-story .st-icons li{text-align:left}
  .ab-top.r-story .hero-cta{justify-content:center}
}
@media (min-width:900px) and (max-height:700px){.r-story .hero-points li{font-size:15px}}
/* very short screens (150% zoom, ~560px tall): tighter gaps so the button stays inside the first screen */
@media (min-width:900px) and (max-height:620px){.be-crumbs{margin-bottom:8px}.r-story .hero-points{margin-top:12px;gap:8px 20px}.r-story .st-icons .ic{width:32px;height:32px}.hero-cta{margin-top:14px}}

/* more breathing room above the rating card's Visit Us button (Lohith, 1 Oct 2026) */
.rr-sum p{padding-bottom:clamp(16px,2.6vh,24px)}

/* ---------- Client reviews on the service pages (includes/service-reviews.php, Lohith 14 Oct 2026): the About reviews look,
   service icon instead of the Google "G", service name instead of the rating number ---------- */
.sr-rev .sr-big-ic{color:#e0580b}
.sr-rev .sr-big-ic .sv-ic{width:40px;height:40px;stroke-width:1.8}
.sr-rev .sr-name{margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.25;color:#fff}
.sr-card .sr-ic,.rv-full .sr-ic{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff}
.sr-card .sr-ic .sv-ic,.rv-full .sr-ic .sv-ic{width:17px;height:17px}
@media (max-height:700px) and (min-width:900px){.sr-rev .sr-big-ic .sv-ic{width:32px;height:32px}}

/* service-page reviews = real Google reviews (16 Oct 2026): real star count, reviewer initials, "Read all reviews" link */
.rv-stars svg.off{fill:#d6dde8}
.tst-av{font-size:var(--fs-label);font-weight:700;letter-spacing:.02em;color:#fff}
.sr-rev .sr-all{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:10px 0;margin:-10px 0}
.sr-rev .sr-all:hover{color:#f78913}
.sr-rev .sr-all:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}