/* ==========================================================================
   BAU Accelerator — main.css
   Scheme: PAPER (warm off-white · cobalt blue) — Space Grotesk / JetBrains Mono
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --bg:#FBFAF7;
  --surface:#F3F1EB;
  --line:#E6E3DA;
  --txt:#14140F;
  --dim:#6E6B60;
  --accent:#1E6FE8;      /* Azure — BAU brand blue. Change here (or via BAU Settings → Brand colour) to rekey the whole site. */
  --accent-hover:#1556C0;
  --accent-deep:#0F4AA8;  /* darker end of the hero gradient */
  --accent-soft:#D7E6FF;  /* light text/UI tint used on blue backgrounds */
  --accent-em:#AECDFF;    /* highlighted word tint inside blue hero titles */
  --onaccent:#FFFFFF;

  --maxw:1200px;
  --gutter:clamp(20px,5vw,56px);
  --sp-section:clamp(70px,10vw,130px);

  --f:'Space Grotesk',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;

  --radius:5px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f);
  background:var(--bg);
  color:var(--txt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Layout helpers ---------- */
.wrap{max-width:90%;margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sp-section)}
.sec--flush-top{padding-top:0}
.surface{background:var(--surface);border-block:1px solid var(--line)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:9999}
.skip-link:focus{left:10px;top:10px}

/* ---------- Eyebrow (signature) ---------- */
.eyebrow{
  font-family:var(--fm);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.eyebrow--center{justify-content:center}

/* ---------- Headings ---------- */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.02em;line-height:1.05}
.h1{font-size:clamp(3rem,8.5vw,7rem);font-weight:500;line-height:.98;letter-spacing:-.03em}
.h2{font-size:clamp(2rem,4.5vw,3.6rem)}
.h3{font-size:clamp(1.5rem,2.5vw,1.8rem)}
.accent{color:var(--accent);font-style:normal}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.9rem;
  padding:12px 22px;border-radius:3px;
  transition:.2s ease;border:1px solid transparent;
}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}
.btn--primary{background:var(--accent);color:var(--onaccent)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--outline{border-color:var(--line);color:var(--txt)}
.btn--outline:hover{border-color:var(--txt)}
.btn--lg{padding:15px 28px;font-size:.95rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{font-weight:700;font-size:1.35rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.brand__mark{width:34px;height:34px;background:var(--accent);border-radius:4px;display:grid;place-items:center;color:var(--onaccent);font-weight:700;font-size:.85rem;flex:none}
.brand img{height:38px;width:auto}
.nav__menu{display:flex;gap:32px;align-items:center}
.nav__menu a{font-size:.9rem;color:var(--dim);transition:color .15s;position:relative;padding-block:6px}
.nav__menu a:hover,.nav__menu .current-menu-item>a{color:var(--txt)}
.nav__menu .menu-item-has-children>a::after{content:"›";margin-left:6px;color:var(--dim)}
.nav__menu .sub-menu{
  position:absolute;top:100%;left:0;min-width:230px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;
  box-shadow:0 20px 44px -28px rgba(20,20,15,.4);
}
.nav__menu .menu-item-has-children{position:relative}
.nav__menu .menu-item-has-children:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__menu .sub-menu li{width:100%}
.nav__menu .sub-menu a{display:block;width:100%;padding:10px 12px;border-radius:3px;white-space:nowrap}
.nav__menu .sub-menu a:hover{background:var(--surface)}
.nav__right{display:flex;gap:18px;align-items:center}
.lang-switch{font-family:var(--fm);font-size:12px;color:var(--dim);display:flex;gap:6px}
.lang-switch a{transition:color .15s}
.lang-switch a.active,.lang-switch a:hover{color:var(--txt);font-weight:500}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px}
.nav__toggle span{width:24px;height:2px;background:var(--txt);transition:.2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(70px,12vw,150px) clamp(50px,8vw,90px)}
.hero__title{max-width:16ch;margin-top:28px}
.hero__sub{margin:32px 0 40px;font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--dim);max-width:52ch;line-height:1.5}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);padding-block:28px;overflow:hidden}

/* The track holds N identical groups side by side. It shifts left by exactly
   the width of ONE group, so when the animation loops the following group is
   already sitting in the outgoing group's place — no visible jump, no gap. */
.marquee__track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:marquee var(--marquee-duration,24s) linear infinite;
  will-change:transform;
}
.marquee__group{
  display:flex;
  gap:60px;
  padding-right:60px; /* gap BETWEEN groups lives inside the group, so one
                         group's width is the exact loop distance */
  flex:none;
}
.marquee__item{
  display:flex;gap:12px;align-items:center;
  font-family:var(--fm);font-size:14px;color:var(--dim);letter-spacing:.05em;
  flex:none;
}
.marquee__item::before{content:"→";color:var(--accent)}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% / var(--marquee-groups,3)))}
}

.marquee:hover .marquee__track{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee__group:not(:first-child){display:none}
}

/* ---------- KPI grid ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.kpi{background:var(--bg);padding:38px 28px}
.kpi__n{font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--accent)}
.kpi__l{margin-top:10px;color:var(--dim);font-size:.9rem}

/* ---------- Section head ---------- */
.shead{margin-bottom:56px;max-width:60ch}
.shead__title{margin-top:20px;max-width:20ch}
.shead__intro{margin-top:18px;color:var(--dim);font-size:1.05rem;line-height:1.6;max-width:56ch}

/* ---------- Split cards (Who we serve) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.split__card{background:var(--bg);padding:48px;transition:background .25s;display:flex;flex-direction:column}
.split__card:hover{background:var(--surface)}
.split__tag{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.split__card h3{font-size:1.8rem;margin:18px 0 14px}
.split__card p{color:var(--dim);max-width:40ch;line-height:1.55;flex:1}
.link-go{margin-top:28px;display:inline-flex;gap:8px;font-weight:600;font-size:.92rem;color:var(--accent)}
.link-go .arw{transition:transform .2s}
.link-go:hover .arw{transform:translateX(3px)}

/* ---------- Pillars ---------- */
.prow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.pill{border-left:2px solid var(--accent);padding:8px 0 8px 26px}
.pill__no{font-family:var(--fm);font-size:12px;color:var(--accent);letter-spacing:.1em}
.pill h3{font-size:1.6rem;margin:16px 0 12px}
.pill p{color:var(--dim);font-size:.92rem;line-height:1.5}
.pill .link-go{margin-top:18px;color:var(--accent-soft);border-bottom:1px solid var(--accent);padding-bottom:2px}

/* ---------- Service cards ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{border:1px solid var(--line);border-radius:var(--radius);padding:34px;transition:.25s;background:var(--bg)}
.svc:hover{border-color:var(--accent);transform:translateY(-4px)}
.svc__ic{width:44px;height:44px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;margin-bottom:24px;color:var(--accent)}
.svc__ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.svc h3{font-size:1.25rem;font-weight:600;margin-bottom:14px}
.svc ul{display:flex;flex-direction:column;gap:8px}
.svc li{color:var(--dim);font-size:.9rem;padding-left:16px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--accent);border-radius:50%}
.svc .link-go{margin-top:24px}

/* ---------- Events slider ---------- */
.ev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.ev-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:18px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.ev-card{scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:26px;display:flex;flex-direction:column;gap:14px;min-height:210px;transition:.2s}
.ev-card:hover{border-color:var(--accent)}
.ev-date{display:flex;align-items:baseline;gap:8px}
.ev-date .d{font-size:2rem;font-weight:600;line-height:1}
.ev-date .m{font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.chip{align-self:flex-start;font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:2px;border:1px solid var(--line);color:var(--dim)}
.chip--eit{border-color:var(--accent);color:var(--accent)}
.ev-card h4{font-size:1.1rem;font-weight:500;line-height:1.25;flex:1}
.ev-card .src{font-size:.82rem;color:var(--dim)}

/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.story__media{background:linear-gradient(135deg,#24408f,#0a1633);aspect-ratio:4/3;position:relative;display:grid;place-items:center;min-height:280px}
.story__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.story__logo{font-size:2rem;font-weight:600;color:#fff;position:relative}
.story__body{padding:44px 44px 44px 8px}
.story__metric{font-size:2.6rem;font-weight:600;color:var(--accent);line-height:1}
.story__metric small{display:block;font-size:.85rem;font-weight:500;color:var(--dim);margin-top:6px}
.story blockquote{font-size:1.35rem;line-height:1.4;margin:22px 0;font-weight:400}
.story cite{font-style:normal;font-size:.9rem;color:var(--dim)}

/* ---------- Partners strip ---------- */
.partners{border-top:1px solid var(--line)}
.partners .wrap{padding-block:60px}
.plogos{display:flex;gap:52px;align-items:center;flex-wrap:wrap;margin-top:30px}
.plogo{font-weight:600;font-size:1.25rem;color:var(--dim)}
.plogo img{height:40px;width:auto;filter:grayscale(1);opacity:.7;transition:.2s}
.plogo img:hover{filter:none;opacity:1}

/* ---------- CTA band ---------- */
.cta{text-align:center;padding-block:clamp(80px,11vw,150px)}
.cta__title{max-width:18ch;margin:24px auto 36px}
.cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Generic content blocks ---------- */
.rich{max-width:68ch;font-size:1.05rem;line-height:1.75;color:var(--txt)}
.rich h2{margin:1.6em 0 .6em;font-size:1.9rem}
.rich h3{margin:1.4em 0 .5em;font-size:1.4rem}
.rich p{margin-bottom:1em;color:var(--dim)}
.rich a{color:var(--accent);border-bottom:1px solid transparent}
.rich a:hover{border-bottom-color:var(--accent)}
.rich ul{list-style:disc;padding-left:1.3em;margin-bottom:1em;color:var(--dim)}
.rich li{margin-bottom:.4em}

/* ---------- Page hero (interior) ---------- */
.page-hero{padding-block:clamp(60px,9vw,120px) clamp(30px,5vw,60px);border-bottom:1px solid var(--line)}
.page-hero__title{max-width:20ch;margin-top:22px}
.page-hero__intro{margin-top:22px;color:var(--dim);font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:56ch;line-height:1.55}
.breadcrumbs{font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.breadcrumbs a:hover{color:var(--txt)}

/* ---------- Journey timeline ---------- */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step;margin-top:20px}
.jstep{padding:32px 24px 32px 0;border-top:2px solid var(--line);position:relative}
.jstep::before{counter-increment:step;content:"0" counter(step);font-family:var(--fm);font-size:13px;color:var(--accent);letter-spacing:.1em}
.jstep::after{content:"";position:absolute;top:-2px;left:0;width:40px;height:2px;background:var(--accent)}
.jstep h4{font-size:1.15rem;margin:16px 0 10px}
.jstep p{color:var(--dim);font-size:.88rem;line-height:1.5}

/* ---------- News / archive grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ncard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);transition:.25s;display:flex;flex-direction:column}
.ncard:hover{transform:translateY(-4px);border-color:var(--accent)}
.ncard__media{aspect-ratio:16/10;background:var(--surface);overflow:hidden}
.ncard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ncard:hover .ncard__media img{transform:scale(1.04)}
.ncard__body{padding:26px;display:flex;flex-direction:column;flex:1}
.ncard__date{font-family:var(--fm);font-size:12px;color:var(--dim);letter-spacing:.06em}
.ncard__body h3{font-size:1.2rem;margin:12px 0;line-height:1.3;flex:1}
.ncard__body p{color:var(--dim);font-size:.92rem;line-height:1.5;margin-bottom:16px}

/* ---------- Team grid ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{text-align:left}
.member__photo{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:18px}
.member__photo img{width:100%;height:100%;object-fit:cover}
.member h4{font-size:1.15rem;margin-bottom:4px}
.member .role{font-family:var(--fm);font-size:12px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-info dl{display:grid;gap:26px}
.contact-info dt{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.contact-info dd{font-size:1.1rem}
.contact-form label{display:block;font-size:.85rem;color:var(--dim);margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);background:var(--bg);border-radius:3px;font-family:inherit;font-size:.95rem;margin-bottom:20px;color:var(--txt)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}

/* ---------- Portfolio ---------- */
.folio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.folio{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--bg);transition:.25s}
.folio:hover{border-color:var(--accent);transform:translateY(-4px)}
.folio__logo{height:44px;margin-bottom:20px;display:flex;align-items:center}
.folio__logo img{max-height:44px;width:auto}
.folio h4{font-size:1.2rem;margin-bottom:6px}
.folio .stage{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.folio p{color:var(--dim);font-size:.9rem;line-height:1.5;margin-top:12px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:70px 34px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.footer-brand p{color:var(--dim);font-size:.9rem;max-width:32ch;margin-top:16px}
.site-footer h5{font-family:var(--fm);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.site-footer ul{display:flex;flex-direction:column;gap:11px;font-size:.9rem;color:var(--dim)}
.site-footer ul a:hover{color:var(--txt)}
.footer-news input{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--bg);border-radius:3px;margin:12px 0;font-family:inherit;color:var(--txt)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:26px;font-size:.82rem;color:var(--dim);flex-wrap:wrap;gap:12px}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav__menu,.lang-switch{display:none}
  .nav__menu.is-open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:20px var(--gutter);gap:4px}
  .nav__menu.is-open a{padding:12px 0;font-size:1rem;color:var(--txt)}
  .nav__menu.is-open .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 0 16px}
  .nav__toggle{display:flex}
  .kpis{grid-template-columns:1fr 1fr}
  .split,.svcs,.prow,.card-grid,.folio-grid{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}
  .story__body{padding:34px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .journey{grid-template-columns:1fr}
}
@media(max-width:560px){
  .team-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}



body > header > div > a.custom-logo-link > img{
	width: 150px;
}

.nav__menu li{list-style:none;position:relative}
.nav__menu .sub-menu{list-style:none;margin:0;padding:10px}
.nav__menu .sub-menu li{list-style:none}

/* ==========================================================================
   Hero graphic — animated SVG (globe + growth arc)
   Shared visual language; variants per page type.
   All colours inherit --accent. Motion is disabled under reduced-motion.
   ========================================================================== */

.hero-gfx{display:grid;place-items:center;width:100%}
.hero-gfx svg{width:100%;height:auto;overflow:visible}
.hero-gfx--full svg{max-width:440px}
.hero-gfx--mini svg{max-width:200px}

/* ---- shared primitives ---- */
.hero-gfx .g-ring{fill:none;stroke:var(--line);stroke-width:1}
.hero-gfx .g-dot{fill:var(--accent)}
.hero-gfx .g-dot--soft{opacity:.5}
.hero-gfx .g-headarrow{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- gentle float on the whole composition ---- */
.hero-gfx .g-float{animation:bau-float 6s ease-in-out infinite}
@keyframes bau-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---- counter-rotating dashed rings ---- */
.hero-gfx .g-dash{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-dasharray:5 9;opacity:.5;
  transform-origin:220px 210px;animation:bau-spin-r 22s linear infinite}
.hero-gfx .g-dash2{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:2 7;opacity:.32;
  transform-origin:220px 210px;animation:bau-spin 15s linear infinite}
.hero-gfx .g-dash--sm{transform-origin:100px 100px}
@keyframes bau-spin{to{transform:rotate(360deg)}}
@keyframes bau-spin-r{to{transform:rotate(-360deg)}}

/* ---- breathing meridians ---- */
.hero-gfx .g-mer{fill:none;stroke:var(--accent);stroke-width:1;opacity:.3;
  transform-origin:220px 210px;animation:bau-mer 9s ease-in-out infinite}
.hero-gfx .g-mer--b{animation-delay:1.2s}
.hero-gfx .g-mer--sm{transform-origin:100px 100px}
.hero-gfx--mini-growth .g-mer--sm{transform-origin:100px 94px}
@keyframes bau-mer{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.14)}}

/* ---- growth arc: draws, holds, fades ---- */
.hero-gfx .g-path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:bau-draw 5s ease-in-out infinite}
.hero-gfx .g-path--sm{stroke-width:2.2;stroke-dasharray:240;stroke-dashoffset:240;
  animation:bau-draw-sm 5s ease-in-out infinite}
@keyframes bau-draw{0%{stroke-dashoffset:520}45%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes bau-draw-sm{0%{stroke-dashoffset:240}45%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* ---- dot travelling along the arc ---- */
.hero-gfx .g-trav{fill:var(--accent);
  offset-path:path("M108 296 C 150 290, 176 254, 206 214 S 272 132, 336 104");
  animation:bau-trav 5s ease-in-out infinite}
@keyframes bau-trav{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  45%{offset-distance:100%;opacity:1}
  60%{opacity:0}
  100%{offset-distance:100%;opacity:0}
}

/* ---- arrowhead pops in once the arc lands ---- */
.hero-gfx .g-head{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:bau-head 5s ease-in-out infinite}
@keyframes bau-head{
  0%,40%{opacity:0;transform:scale(.6)}
  52%{opacity:1;transform:scale(1)}
  88%{opacity:1;transform:scale(1)}
  100%{opacity:0}
}

/* ---- orbiting beacon with pulse ---- */
.hero-gfx .g-orb{transform-origin:220px 210px;animation:bau-spin 11s linear infinite}
.hero-gfx .g-pulse{transform-box:fill-box;transform-origin:center;opacity:.5;
  animation:bau-pulse 2.6s ease-out infinite}
@keyframes bau-pulse{0%{r:3;opacity:.9}75%{r:16;opacity:0}100%{r:16;opacity:0}}

/* ---- crosshatch globe (Programmes) ---- */
.hero-gfx .g-rot{transform-origin:100px 100px;animation:bau-spin 28s linear infinite}
.hero-gfx .g-cross{fill:none;stroke:var(--accent);stroke-width:.9;opacity:.25}
.hero-gfx .g-sweep{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:30 340;transform-origin:100px 100px;animation:bau-spin 4s linear infinite}
.hero-gfx .g-blip{fill:var(--accent);animation:bau-blip 2.2s ease-in-out infinite}
.hero-gfx .g-blip--2{animation-delay:.5s}
.hero-gfx .g-blip--3{animation-delay:1s}
.hero-gfx .g-blip--4{animation-delay:1.5s}
@keyframes bau-blip{0%,100%{opacity:.3;r:2.6}50%{opacity:1;r:4.4}}

/* ---- rising bars (Client Journey) ---- */
.hero-gfx .g-bar{fill:var(--accent);transform-origin:bottom;
  animation:bau-rise 2.8s cubic-bezier(.34,1.3,.64,1) infinite}
.hero-gfx .g-bar--2{animation-delay:.14s}
.hero-gfx .g-bar--3{animation-delay:.28s}
.hero-gfx .g-bar--4{animation-delay:.42s}
@keyframes bau-rise{0%,100%{transform:scaleY(.25);opacity:.45}45%,62%{transform:scaleY(1);opacity:1}}

/* ---- satellites (About / Contact) ---- */
.hero-gfx .g-orbit{fill:none;stroke:var(--accent);stroke-width:1;opacity:.3}
.hero-gfx .g-o1{transform-origin:100px 100px;animation:bau-spin 9s linear infinite}
.hero-gfx .g-o2{transform-origin:100px 100px;animation:bau-spin 14s linear infinite reverse}
.hero-gfx .g-o3{transform-origin:100px 100px;animation:bau-spin 20s linear infinite}

/* ---- hero layout: text left, graphic right ---- */
.hero--has-gfx .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero--has-gfx .hero__title{max-width:14ch}

/* interior page heroes: smaller graphic, right-aligned */
.page-hero--has-gfx .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.page-hero--has-gfx .hero-gfx{justify-self:end}

@media(max-width:900px){
  .hero--has-gfx .wrap{grid-template-columns:1fr;gap:28px}
  .hero--has-gfx .hero-gfx{order:-1;max-width:300px;margin-inline:auto}
  .hero--has-gfx .hero__title{max-width:16ch}
  .page-hero--has-gfx .wrap{grid-template-columns:1fr}
  .page-hero--has-gfx .hero-gfx{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-gfx *{animation:none!important}
  .hero-gfx .g-path,.hero-gfx .g-path--sm{stroke-dashoffset:0}
  .hero-gfx .g-head{opacity:1}
  .hero-gfx .g-trav{opacity:0}
}


/* ==========================================================================
   Hero graphic — full-size page variants
   ========================================================================== */

/* ---- shared additions ---- */
.hero-gfx .g-hub{fill:var(--accent)}
.hero-gfx .g-orbit{fill:none;stroke:var(--accent);stroke-width:1;opacity:.3}
.hero-gfx .g-link{stroke:var(--accent);stroke-width:1;opacity:.32;stroke-dasharray:3 5;
  animation:bau-flow 3s linear infinite}
@keyframes bau-flow{to{stroke-dashoffset:-16}}

/* ---- WHO WE SERVE — two diverging paths ---- */
.hero-gfx .g-split-a{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;animation:bau-split-a 5.2s ease-in-out infinite}
.hero-gfx .g-split-b{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;opacity:.62;
  stroke-dasharray:400;stroke-dashoffset:400;animation:bau-split-b 5.2s ease-in-out infinite}
@keyframes bau-split-a{0%{stroke-dashoffset:400}40%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}
@keyframes bau-split-b{0%,10%{stroke-dashoffset:400}50%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:.62}100%{opacity:0}}
.hero-gfx .g-split-head-a,
.hero-gfx .g-split-head-b{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}
.hero-gfx .g-split-head-a{animation:bau-head 5.2s ease-in-out infinite}
.hero-gfx .g-split-head-b{animation:bau-head 5.2s ease-in-out .35s infinite}

/* ---- OUR SERVICES — three orbiting rings ---- */
.hero-gfx .g-svc1{transform-origin:220px 205px;animation:bau-spin 16s linear infinite}
.hero-gfx .g-svc2{transform-origin:220px 205px;animation:bau-spin 22s linear infinite reverse}
.hero-gfx .g-svc3{transform-origin:220px 205px;animation:bau-spin 28s linear infinite}

/* ---- CLIENT JOURNEY — stepped path ---- */
.hero-gfx .g-jpath{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:bau-draw 6s ease-in-out infinite}
.hero-gfx .g-jnode{fill:var(--accent);opacity:.2;animation:bau-jnode 6s ease-in-out infinite}
.hero-gfx .g-jring{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:bau-jring 6s ease-out infinite}
.hero-gfx .g-jn1,.hero-gfx .g-jn1 .g-jring{animation-delay:.2s}
.hero-gfx .g-jn2,.hero-gfx .g-jn2 .g-jring{animation-delay:.9s}
.hero-gfx .g-jn3,.hero-gfx .g-jn3 .g-jring{animation-delay:1.6s}
.hero-gfx .g-jn4,.hero-gfx .g-jn4 .g-jring{animation-delay:2.3s}
.hero-gfx .g-jn5,.hero-gfx .g-jn5 .g-jring{animation-delay:3s}
@keyframes bau-jnode{0%,8%{opacity:.2}16%,80%{opacity:1}100%{opacity:.2}}
@keyframes bau-jring{0%,8%{opacity:0;transform:scale(1)}18%{opacity:.7;transform:scale(2.2)}32%{opacity:0;transform:scale(2.6)}100%{opacity:0}}
.hero-gfx .g-jflag{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:bottom left;
  animation:bau-jflag 6s ease-out infinite}
.hero-gfx .g-jflagbody{fill:var(--accent)}
@keyframes bau-jflag{0%,58%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1)}92%{opacity:1}100%{opacity:0}}

/* ---- PROGRAMMES — large crosshatch + sweep ---- */
.hero-gfx .g-rot-lg{transform-origin:220px 205px;animation:bau-spin 34s linear infinite}
.hero-gfx .g-sweep-lg{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:70 740;transform-origin:220px 205px;animation:bau-spin 5s linear infinite}

/* ---- ABOUT US — satellites ---- */
.hero-gfx .g-a1{transform-origin:220px 205px;animation:bau-spin 12s linear infinite}
.hero-gfx .g-a2{transform-origin:220px 205px;animation:bau-spin 18s linear infinite reverse}
.hero-gfx .g-a3{transform-origin:220px 205px;animation:bau-spin 26s linear infinite}

/* ---- NEWS & EVENTS — broadcast waves ---- */
.hero-gfx .g-wave{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:0;
  animation:bau-wave 4s ease-out infinite}
.hero-gfx .g-w2{animation-delay:1.33s}
.hero-gfx .g-w3{animation-delay:2.66s}
@keyframes bau-wave{0%{r:20;opacity:.7;stroke-width:2}100%{r:132;opacity:0;stroke-width:.6}}
.hero-gfx .g-marker{fill:var(--accent);animation:bau-marker 4s ease-in-out infinite}
.hero-gfx .g-mk2{animation-delay:.7s}
.hero-gfx .g-mk3{animation-delay:1.4s}
.hero-gfx .g-mk4{animation-delay:2.1s}
@keyframes bau-marker{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---- PORTFOLIO — arc over columns ---- */
.hero-gfx .g-ppath{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:460;stroke-dashoffset:460;animation:bau-ppath 4.6s ease-in-out infinite}
@keyframes bau-ppath{0%{stroke-dashoffset:460}45%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.hero-gfx .g-bar--5{animation-delay:.56s}

/* ---- APPLY — converging paths onto a target ---- */
.hero-gfx .g-conv{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.75;
  stroke-dasharray:6 9;animation:bau-conv 2s linear infinite}
.hero-gfx .g-cv2{animation-delay:.5s}
.hero-gfx .g-cv3{animation-delay:1s}
.hero-gfx .g-cv4{animation-delay:1.5s}
@keyframes bau-conv{to{stroke-dashoffset:-30}}
.hero-gfx .g-target-o{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.4;
  transform-box:fill-box;transform-origin:center;animation:bau-target 3s ease-in-out infinite}
.hero-gfx .g-target-i{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.6;
  transform-box:fill-box;transform-origin:center;animation:bau-target 3s ease-in-out .4s infinite}
@keyframes bau-target{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.14);opacity:.75}}

/* ---- reduced motion: freeze in a readable end state ---- */
@media(prefers-reduced-motion:reduce){
  .hero-gfx .g-split-a,.hero-gfx .g-split-b,
  .hero-gfx .g-jpath,.hero-gfx .g-ppath{stroke-dashoffset:0}
  .hero-gfx .g-split-head-a,.hero-gfx .g-split-head-b,
  .hero-gfx .g-jflag,.hero-gfx .g-jnode{opacity:1}
  .hero-gfx .g-wave{opacity:0}
}

/* ==========================================================================
   BRAND COLOUR SECTIONS + CREATIVE EXTRAS
   Everything below is driven by the --accent* tokens in :root, so changing
   the brand colour in one place (or via BAU Settings → Brand colour) rekeys
   all of it — hero, blue sections, graphics, buttons, hover states.
   ========================================================================== */

/* ---- Blue section modifier: add class "is-blue" to any <section> ---- */
.is-blue{background:var(--accent);color:#fff;border-block:1px solid var(--accent);position:relative;overflow:hidden}
.is-blue .eyebrow{color:var(--accent-soft)}
.is-blue .eyebrow::before{background:var(--accent-soft)}
.is-blue h1,.is-blue h2,.is-blue h3,.is-blue h4,.is-blue .shead__title,.is-blue .cta__title{color:#fff}
.is-blue p,.is-blue .shead__intro,.is-blue .hero__sub{color:var(--accent-soft)}
.is-blue .hero__title em,.is-blue .hero__title .accent{color:var(--accent-em)}

/* buttons invert on blue: primary becomes white, outline becomes light */
.is-blue .btn--primary{background:#fff;color:var(--accent)}
.is-blue .btn--primary:hover{background:#eef4ff}
.is-blue .btn--outline{border-color:rgba(255,255,255,.55);color:#fff}
.is-blue .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* journey timeline on blue */
.is-blue .jstep{border-top-color:rgba(255,255,255,.4)}
.is-blue .jstep::before{color:var(--accent-soft)}
.is-blue .jstep::after{background:#fff}
.is-blue .jstep p{color:var(--accent-soft)}

/* KPIs / stats on blue */
.is-blue .kpis{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.22)}
.is-blue .kpi{background:var(--accent)}
.is-blue .kpi__n{color:#fff;background:none;-webkit-text-fill-color:#fff}
.is-blue .kpi__l{color:var(--accent-soft)}

/* pillars on blue */
.is-blue .pill{border-left-color:#fff}
.is-blue .pill__no{color:var(--accent-soft)}

/* recolour the animated hero graphic so it reads on a blue background */
.is-blue .hero-gfx .g-ring{stroke:rgba(255,255,255,.34)}
.is-blue .hero-gfx .g-dot,
.is-blue .hero-gfx .g-head,
.is-blue .hero-gfx .g-hub,
.is-blue .hero-gfx .g-jnode,
.is-blue .hero-gfx .g-trav{fill:#fff}
.is-blue .hero-gfx .g-dash,
.is-blue .hero-gfx .g-dash2,
.is-blue .hero-gfx .g-mer,
.is-blue .hero-gfx .g-path,
.is-blue .hero-gfx .g-headarrow,
.is-blue .hero-gfx .g-orbit,
.is-blue .hero-gfx .g-conv,
.is-blue .hero-gfx .g-target-o,
.is-blue .hero-gfx .g-target-i{stroke:#fff}

/* ---- CREATIVE EXTRA 1: gradient depth on blue hero ---- */
.hero.is-blue{background:linear-gradient(160deg,var(--accent) 0%,var(--accent-deep) 100%)}

/* ---- CREATIVE EXTRA 2: faint tech-grid texture on the blue hero ---- */
.hero.is-blue::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 28%,#000,transparent);
          mask-image:radial-gradient(ellipse 70% 80% at 72% 28%,#000,transparent);
}
.hero.is-blue .wrap{position:relative;z-index:1}

/* ---- CREATIVE EXTRA 3: hover / detail polish (site-wide, paper sections) ---- */
.split__card{transition:transform .25s, box-shadow .25s, background .25s}
.split__card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(30,111,232,.32)}
.kpi__n{
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.link-go .arw{transition:transform .2s}
.link-go:hover .arw{transform:translateX(4px)}

/* ---- Split banner: ONE wide image under both cards, with a gap above it ---- */
.split__banner{margin-top:clamp(20px,3vw,36px);border-radius:var(--radius);overflow:hidden;aspect-ratio:21/9;background:var(--surface)}
.split__banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg);
    display: block;
    transition: transform .5s ease;
.split__banner:hover img{transform:scale(1.01)}
.is-blue .split__banner{background:rgba(255,255,255,.12)}

@media(prefers-reduced-motion:reduce){
  .split__card:hover{transform:none}
  .split__banner:hover img{transform:none}
}