/* tg-b44.css: the Triad look from the Base44 concept, on every page of the three public sites.
   Rules marked b44-solhome are the Solutions home only; the "every page" layer is at the end.
   Everything is scoped to html.b44, which tg-b44.js sets only on preview channels (host with "--")
   or with ?b44=1 in the address, so the live site is unchanged even if this file ships. */

/* 1. Hero mark: crisp, full colour, assembles from three facets, tilts toward the pointer. */
html.b44.b44-solhome .tgm-mark{opacity:1!important;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))!important;
  right:-4%!important;left:auto!important;top:90px!important;width:min(560px,46vw)!important;
  perspective:900px}
html.b44 .tgm-mark .tgm-spin{animation:none!important;transform-style:preserve-3d;
  transform:rotateX(var(--b44-rx,0deg)) rotateY(var(--b44-ry,0deg));transition:transform .25s ease-out}
html.b44 .tgm-mark img{opacity:0;animation:none!important}
html.b44 .tgm-mark.b44-in .f1{animation:b44F1 1.1s cubic-bezier(.34,1.56,.64,1) .15s forwards!important}
html.b44 .tgm-mark.b44-in .f2{animation:b44F2 1.1s cubic-bezier(.34,1.56,.64,1) .3s forwards!important}
html.b44 .tgm-mark.b44-in .f3{animation:b44F3 1.1s cubic-bezier(.34,1.56,.64,1) .45s forwards!important}
html.b44 .tgm-mark.b44-in .tgm-spin{animation:b44Breathe 6s ease-in-out 1.8s infinite!important}
@keyframes b44F1{from{opacity:0;transform:translate(-60%,-30%) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes b44F2{from{opacity:0;transform:translate(60%,-30%) rotate(25deg)}to{opacity:1;transform:none}}
@keyframes b44F3{from{opacity:0;transform:translate(0,70%) rotate(12deg)}to{opacity:1;transform:none}}
@keyframes b44Breathe{0%,100%{scale:1}50%{scale:1.03}}
html.b44 .tgm-in{position:relative;z-index:2}
@media(max-width:860px){html.b44.b44-solhome .tgm-mark{width:70vw!important;right:-22%!important;top:60px!important;opacity:.22!important}}

/* 2. Tool marquee under the hero. */
.b44-marquee{display:none}
html.b44 .b44-marquee{display:block;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);background:#0f1b30;padding:14px 0}
html.b44 .b44-track{display:flex;gap:44px;width:max-content;animation:b44Scroll 38s linear infinite}
html.b44 .b44-marquee:hover .b44-track{animation-play-state:paused}
html.b44 .b44-track span{display:inline-flex;align-items:center;gap:12px;font:600 13px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#9fb0c8;white-space:nowrap}
html.b44 .b44-track span::before{content:"";width:0;height:0;border-left:6px solid transparent;
  border-right:6px solid transparent;border-bottom:10px solid #c9a14a}
html.b44 .b44-track span:nth-child(3n+2)::before{border-bottom-color:#2d6a4f}
html.b44 .b44-track span:nth-child(3n)::before{border-bottom-color:#5b84b8}
@keyframes b44Scroll{to{transform:translateX(-50%)}}

/* 3. Pillars: each band gets its facet colour as a triangle and a coloured top edge on its cards. */
html.b44.b44-solhome #services .bandhead{position:relative;padding-left:46px!important}
html.b44.b44-solhome #services .bandhead::before{content:"";position:absolute;left:0;top:6px;width:0;height:0;
  border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:30px solid var(--b44-c,#c9a14a);
  transform:scale(0) rotate(-40deg);transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
html.b44.b44-solhome #services .bandhead.b44-seen::before{transform:none}
html.b44.b44-solhome #services .bandhead[data-b44="build"]{--b44-c:#3d6aa3}
html.b44.b44-solhome #services .bandhead[data-b44="run"]{--b44-c:#2d6a4f}
html.b44.b44-solhome #services .bandhead[data-b44="core"]{--b44-c:#c9a14a}
html.b44.b44-solhome #services .card[data-b44]{border-top:3px solid var(--b44-c)!important}
html.b44.b44-solhome #services .card[data-b44="build"]{--b44-c:#3d6aa3}
html.b44.b44-solhome #services .card[data-b44="run"]{--b44-c:#2d6a4f}
html.b44.b44-solhome #services .card[data-b44="core"]{--b44-c:#c9a14a}

/* 4. Work cards: a triangle of light opens from the bottom left on hover. */
html.b44.b44-solhome #work .work-card{position:relative;isolation:isolate;overflow:hidden}
html.b44.b44-solhome #work .work-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(201,161,74,.18),rgba(45,106,79,.16) 55%,rgba(31,58,94,.22));
  clip-path:polygon(0 100%,0 100%,0 100%);transition:clip-path .7s cubic-bezier(.16,1,.3,1)}
html.b44.b44-solhome #work .work-card:hover::before,html.b44.b44-solhome #work .work-card:focus-visible::before{clip-path:polygon(0 100%,0 -120%,220% 100%)}

/* 5. Magnetic buttons ease back when the pointer leaves. */
html.b44 .b44-mag{transition:transform .35s cubic-bezier(.16,1,.3,1)!important;will-change:transform}

/* 6. Small triangle cursor follower (fine pointers only). */
.b44-cur{display:none}
html.b44 .b44-cur{display:block;position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #c9a14a;
  opacity:.85;transform:translate(-50%,-50%);transition:opacity .2s,border-bottom-color .2s}
html.b44 .b44-cur.on-link{border-bottom-color:#2d6a4f;scale:1.6}
@media (hover:none),(pointer:coarse){html.b44 .b44-cur{display:none}}

/* 7. Diagonal cut at the triangle's angle into the services section. */
html.b44.b44-solhome #services{clip-path:polygon(0 3.5vw,100% 0,100% 100%,0 100%);margin-top:-3.5vw;padding-top:calc(3.5vw + 64px)}

@media (prefers-reduced-motion:reduce){
  html.b44 .tgm-mark img{opacity:1!important;animation:none!important;transform:none!important}
  html.b44 .tgm-mark .tgm-spin{animation:none!important;transform:none!important}
  html.b44 .b44-track{animation:none}
  html.b44.b44-solhome #services .bandhead::before{transform:none;transition:none}
  html.b44 .b44-cur{display:none}
}

/* 8. Background touches from the Base44 concept: big faint cropped triangles behind the content,
   in the three facet tones, on the hero and the dark sections. */
html.b44:not([data-theme="light"]) .tgm{background-color:#14213a!important;
  background-image:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 34,8 58,100' fill='%23ffffff' fill-opacity='.035'/%3E%3Cpolygon points='-10,62 22,40 30,100' fill='%235b84b8' fill-opacity='.06'/%3E%3Cpolygon points='72,100 100,58 100,100' fill='%232d6a4f' fill-opacity='.10'/%3E%3Cpolygon points='84,0 100,0 100,26' fill='%23c9a14a' fill-opacity='.05'/%3E%3C/svg%3E"),
   radial-gradient(1200px 600px at 75% 20%,rgba(61,106,163,.22),transparent 60%),
   radial-gradient(900px 500px at 10% 90%,rgba(45,106,79,.16),transparent 60%)!important;
  background-size:100% 100%,auto,auto!important;background-repeat:no-repeat!important}
html.b44 .tgm .tgm-grid{opacity:.35}
html.b44.b44-solhome #services,html.b44.b44-solhome #work,html.b44.b44-solhome #team{position:relative;isolation:isolate}
html.b44.b44-solhome #services::after,html.b44.b44-solhome #work::after,html.b44.b44-solhome #team::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='70,0 100,0 100,45' fill='%235b84b8' fill-opacity='.05'/%3E%3Cpolygon points='0,72 18,100 0,100' fill='%23c9a14a' fill-opacity='.05'/%3E%3C/svg%3E") no-repeat center/100% 100%}
html.b44.b44-solhome #work::after{transform:scaleX(-1)}
html.b44.b44-solhome #team::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 26,0 0,38' fill='%232d6a4f' fill-opacity='.08'/%3E%3C/svg%3E")}

/* 8b. Light mode: keep the light hero, draw the same triangles in navy and green tints. */
html.b44[data-theme="light"] .tgm{
  background-image:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 34,8 58,100' fill='%231f3a5e' fill-opacity='.045'/%3E%3Cpolygon points='-10,62 22,40 30,100' fill='%231f3a5e' fill-opacity='.05'/%3E%3Cpolygon points='72,100 100,58 100,100' fill='%232d6a4f' fill-opacity='.09'/%3E%3Cpolygon points='84,0 100,0 100,26' fill='%23c9a14a' fill-opacity='.10'/%3E%3C/svg%3E"),
   radial-gradient(1100px 560px at 78% 18%,rgba(61,106,163,.12),transparent 60%),
   radial-gradient(900px 500px at 8% 92%,rgba(45,106,79,.10),transparent 60%)!important;
  background-size:100% 100%,auto,auto!important;background-repeat:no-repeat!important}
html.b44[data-theme="light"] .b44-marquee{background:#eef0ea;border-color:rgba(20,33,58,.08)}
html.b44[data-theme="light"] .b44-track span{color:#4b5a70}
html.b44[data-theme="light"] .b44-cur.on-link{border-bottom-color:#1f3a5e}

/* 9. Pillar headers as coloured slabs with a diagonal foot (Build navy, Run green, platform gold). */
html.b44.b44-solhome #services .bandhead{background:var(--b44-c);color:#fff;border-radius:6px;
  padding:26px 28px 40px 74px!important;clip-path:polygon(0 0,100% 0,100% 78%,0 100%);margin-bottom:18px}
html.b44.b44-solhome #services .bandhead[data-b44="build"]{--b44-c:#1f3a5e}
html.b44.b44-solhome #services .bandhead h3,html.b44.b44-solhome #services .bandhead p{color:#fff!important}
html.b44.b44-solhome #services .bandhead p{opacity:.85}
html.b44.b44-solhome #services .bandhead::before{left:24px;top:30px;border-bottom-color:rgba(255,255,255,.9)}
html.b44.b44-solhome #services .bandhead[data-b44="core"]{--b44-c:#c9a14a}
html.b44.b44-solhome #services .bandhead[data-b44="core"] h3,html.b44.b44-solhome #services .bandhead[data-b44="core"] p{color:#14213a!important}
html.b44.b44-solhome #services .bandhead[data-b44="core"]::before{border-bottom-color:#14213a}

/* 10. How we work on a full green band with gold numbers, like the concept. */
html.b44.b44-solhome #how{background:#2d6a4f!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,70 64,0' fill='%23ffffff' fill-opacity='.05'/%3E%3Cpolygon points='0,100 0,40 30,100' fill='%2314213a' fill-opacity='.12'/%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;clip-path:polygon(0 3vw,100% 0,100% calc(100% - 3vw),0 100%);padding-top:calc(3vw + 72px)!important;padding-bottom:calc(3vw + 72px)!important}
html.b44.b44-solhome #how h2,html.b44.b44-solhome #how h3{color:#fff!important}
html.b44.b44-solhome #how p,html.b44.b44-solhome #how .lead{color:rgba(255,255,255,.85)!important}
html.b44.b44-solhome #how .step{background:transparent!important;border:0!important;border-top:1px solid rgba(255,255,255,.22)!important;border-radius:0!important;box-shadow:none!important;padding-top:18px!important}
html.b44.b44-solhome #how .step .snum{background:transparent!important;border:0!important;border-radius:0!important;width:auto;height:auto;justify-content:flex-start;color:#e0be6e!important;font-size:13px;letter-spacing:.1em}

/* 11. One word of each section heading in gold (added by tg-b44.js). */
html.b44 .b44-acc{color:#c9a14a!important}
html.b44[data-theme="light"] .b44-acc{color:#8a6a1f!important}
html.b44.b44-solhome #how .b44-acc{color:#e0be6e!important}

/* 12. Angled section edges (the concept's slanted joins instead of straight lines).
   Each section overlaps the one above by the slant, in a tone different enough to show the cut. */
html.b44.b44-solhome #work,html.b44.b44-solhome #team,html.b44.b44-solhome #pricing,html.b44.b44-solhome #contact{
  margin-top:-4vw!important;padding-top:calc(4vw + 72px)!important;position:relative;z-index:1}
html.b44.b44-solhome:not([data-theme="light"]) #work,html.b44.b44-solhome:not([data-theme="light"]) #pricing{background:#162746!important}
html.b44.b44-solhome:not([data-theme="light"]) #team{background:#101d36!important}
html.b44.b44-solhome:not([data-theme="light"]) #contact{background:#14213a!important}
html.b44.b44-solhome #work{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
html.b44.b44-solhome #team{clip-path:polygon(0 0,100% 4vw,100% 100%,0 100%)}
html.b44.b44-solhome #pricing{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
html.b44.b44-solhome #contact{clip-path:polygon(0 0,100% 4vw,100% 100%,0 100%)}
html.b44.b44-solhome #how{margin-top:-3vw!important;position:relative;z-index:1}
html.b44.b44-solhome[data-theme="light"] #work,html.b44.b44-solhome[data-theme="light"] #pricing{background:#dde4ee!important}
html.b44.b44-solhome[data-theme="light"] #team{background:#eee6d3!important}
html.b44.b44-solhome[data-theme="light"] #contact{background:#d9e6dd!important}
@media(max-width:700px){
  html.b44.b44-solhome #work,html.b44.b44-solhome #team,html.b44.b44-solhome #pricing,html.b44.b44-solhome #contact{margin-top:-6vw!important;padding-top:calc(6vw + 48px)!important}
  html.b44.b44-solhome #work,html.b44.b44-solhome #pricing{clip-path:polygon(0 6vw,100% 0,100% 100%,0 100%)}
  html.b44.b44-solhome #team,html.b44.b44-solhome #contact{clip-path:polygon(0 0,100% 6vw,100% 100%,0 100%)}
}

html.b44 section .sec-head h2 .b44-acc,html.b44 section .sec-head h2[style] .b44-acc{color:#c9a14a!important;-webkit-text-fill-color:#c9a14a}
html.b44[data-theme="light"] section .sec-head h2 .b44-acc{color:#8a6a1f!important;-webkit-text-fill-color:#8a6a1f}
html.b44.b44-solhome #how .sec-head h2 .b44-acc{color:#e0be6e!important;-webkit-text-fill-color:#e0be6e}

/* ===== Every page (all three sites): set by tg-b44.js through classes, so no page id is assumed. ===== */

/* A. Hero band: faint cropped triangles and two soft glows laid OVER the page's own hero background,
      so text colours stay exactly as each page set them (works in light and dark). */
html.b44 .b44-hero{position:relative;isolation:isolate}
html.b44 .b44-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 30,6 52,100' fill='%235b84b8' fill-opacity='.07'/%3E%3Cpolygon points='74,100 100,54 100,100' fill='%232d6a4f' fill-opacity='.12'/%3E%3Cpolygon points='86,0 100,0 100,28' fill='%23c9a14a' fill-opacity='.10'/%3E%3C/svg%3E") no-repeat center/100% 100%,
   radial-gradient(900px 480px at 80% 15%,rgba(61,106,163,.16),transparent 60%),
   radial-gradient(700px 420px at 6% 95%,rgba(45,106,79,.12),transparent 60%)}
html.b44.b44-solhome .tgm.b44-hero::before{display:none}

/* B. Slanted joins between sections: every other top-level section is tinted (inset shadow keeps the
      page's own background) and cut on a diagonal, alternating direction. Sections with forms, maps,
      menus or video are left straight so nothing that opens over them gets clipped. */
html.b44 .b44-s{position:relative;z-index:1;margin-top:-3.2vw!important;padding-top:calc(3.2vw + 56px)!important}
html.b44:not([data-theme="light"]) .b44-s{box-shadow:inset 0 0 0 100vmax rgba(91,132,184,.07)}
html.b44[data-theme="light"] .b44-s{box-shadow:inset 0 0 0 100vmax rgba(31,58,94,.05)}
html.b44 .b44-s.b44-sa{clip-path:polygon(0 3.2vw,100% 0,100% 100%,0 100%)}
html.b44 .b44-s.b44-sb{clip-path:polygon(0 0,100% 3.2vw,100% 100%,0 100%)}
html.b44 .b44-s::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='72,0 100,0 100,40' fill='%235b84b8' fill-opacity='.06'/%3E%3Cpolygon points='0,76 16,100 0,100' fill='%23c9a14a' fill-opacity='.07'/%3E%3C/svg%3E") no-repeat center/100% 100%}
html.b44 .b44-s.b44-sb::after{transform:scaleX(-1)}
@media(max-width:700px){
  html.b44 .b44-s{margin-top:-5vw!important;padding-top:calc(5vw + 40px)!important}
  html.b44 .b44-s.b44-sa{clip-path:polygon(0 5vw,100% 0,100% 100%,0 100%)}
  html.b44 .b44-s.b44-sb{clip-path:polygon(0 0,100% 5vw,100% 100%,0 100%)}
}

/* C. Gold last word in section headings, every page. */
html.b44 .b44-acc{color:#c9a14a!important;-webkit-text-fill-color:#c9a14a}
html.b44[data-theme="light"] .b44-acc{color:#8a6a1f!important;-webkit-text-fill-color:#8a6a1f}