/* 77Labs test site: inner-page heroes and layout fixes (subpages only; the homepage does not load this file).
   - Hero: the photo is cut into diagonal shards that fly together on load and drift apart as you scroll,
     graded teal with grain. Pages without a photo get the same shards in teal tones.
   - The hero outline: the notch around "Start your journey" is only carved when the hero's bottom edge
     actually sits at the button (tall heroes on phones used to lose their bottom-right corner and buttons). */

.phero{clip-path:var(--hclip,polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%))!important}
.phero > .ph-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.phero.ph-on .bgimg{display:none}
.ph-shard{position:absolute;inset:-2px;will-change:transform}
.ph-pic{position:absolute;inset:-4%;background-size:cover;background-position:var(--ph-pos,center);transform-origin:50% 50%;will-change:transform;
  filter:saturate(.92) contrast(1.06) brightness(1.02)}
.ph-media.no-img .ph-pic{inset:0;background:var(--tgrad,linear-gradient(135deg,#063B40,#0B6D72 55%,#16A3A0))}
.ph-media.no-img .ph-shard:nth-child(odd) .ph-pic{background:linear-gradient(120deg,#063B40 0%,#0B6D72 60%,#13908F 100%)}
.ph-media.no-img .ph-shard:nth-child(even) .ph-pic{background:linear-gradient(120deg,#07444A 0%,#0E7C80 55%,#1AAFA9 100%)}
.ph-media.no-img .ph-shard::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px}
/* thin aqua seam along each shard's top edge */
.ph-edge{position:absolute;left:-5%;right:-5%;height:2px;background:linear-gradient(90deg,transparent,rgba(95,227,214,.85) 30%,rgba(242,106,31,.9) 70%,transparent);transform-origin:0 50%;opacity:.0;pointer-events:none}
/* teal grade, legibility and grain over the photo */
.ph-media .ph-tint{position:absolute;inset:0;background:#0B6D72;mix-blend-mode:color;opacity:.24}
.ph-media.no-img .ph-tint{display:none}
.ph-media .ph-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(4,38,42,.84) 0%,rgba(4,38,42,.55) 36%,rgba(4,38,42,.1) 68%,rgba(4,38,42,0) 100%),
  linear-gradient(180deg,rgba(4,38,42,.45) 0%,rgba(4,38,42,0) 24%,rgba(4,38,42,0) 62%,rgba(4,38,42,.6) 100%)}
.ph-media.no-img .ph-shade{background:linear-gradient(180deg,rgba(6,59,64,.2),rgba(6,59,64,0) 40%,rgba(6,59,64,.55))}
.ph-media .ph-grain{position:absolute;inset:-50%;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:phGrain .9s steps(4) infinite}
@keyframes phGrain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-4%)}100%{transform:translate(0,0)}}
/* with a photo underneath, the generic darkening layer and bars step back a little */
.phero.ph-on.ph-img::after{background:linear-gradient(180deg,rgba(6,59,64,.25),rgba(6,59,64,0) 35%,rgba(6,59,64,.35))}
.phero.ph-on.ph-img .bars{opacity:.72}
.phero h1,.phero .lead{text-shadow:0 2px 24px rgba(4,30,34,.35)}

@media (max-width:900px){
  .ph-media .ph-shade{background:linear-gradient(180deg,rgba(4,38,42,.25) 0%,rgba(4,38,42,.3) 28%,rgba(4,38,42,.78) 58%,rgba(4,38,42,.93) 100%)}
  .phero.ph-on.ph-img .bars{opacity:.35}
  .phero .bars{opacity:.4}
}
@media (prefers-reduced-motion:reduce){.ph-media .ph-grain{animation:none}}

/* ---------- layout fixes ---------- */
/* wide tables scroll inside their own box instead of pushing the page; make that obvious on phones */
.tbl{max-width:100%;-webkit-overflow-scrolling:touch}
@media (max-width:700px){
  .tbl{position:relative;box-shadow:inset -18px 0 14px -14px rgba(6,59,64,.25)}
  .tbl table{min-width:600px;font-size:14px}
  .tbl thead th{font-size:24px}
}
/* hero text never runs under the right-hand bars/button on narrow screens */
@media (max-width:900px){
  .phero h1{max-width:100%;overflow-wrap:break-word}
  .phero .ctas{flex-wrap:wrap}
}
/* pinned dark bands (cta-band, dark-sec) were frozen 20px too wide by the pin, so they ran into the right edge;
   keep their 10px side margins while pinned and while waiting in the pin spacer */
.pin-spacer > .cta-band,.pin-spacer > .dark-sec{max-width:100%!important;box-sizing:border-box}
.pin-spacer > .cta-band[style*="fixed"],.pin-spacer > .dark-sec[style*="fixed"]{max-width:calc(100% - 20px)!important}
/* bars over a photo: dark/teal bars tint the photo instead of covering it, orange stays solid */
.phero.ph-on.ph-img .bars{opacity:1}
.phero.ph-img .bars i{opacity:.5}
.phero.ph-img .bars i[style*="242, 107, 29"]{opacity:.92}
@media (max-width:900px){.phero.ph-on.ph-img .bars{opacity:.45}}
/* long hero headlines (industry pages) were filling the whole first screen on laptops and pushing the
   intro text and buttons below the fold */
.phero h1.h1-long{font-size:clamp(46px,5.4vw,104px);max-width:19ch}
.phero h1.h1-xlong{font-size:clamp(42px,4.7vw,88px);max-width:21ch}
@media (max-width:700px){.phero h1.h1-long,.phero h1.h1-xlong{font-size:clamp(40px,11vw,58px);max-width:100%}}