/* Globalvoip (/globalvoip/) — Hero. Photographic, institutional: the real photo is the only visual resource.
   The hero starts behind the fixed header (negative margin = --header-height, measured by site-navigation.js), so the
   header's liquid glass shows the photo through it. Typography follows the interior heroes (security-page.css /
   td-page.css): eyebrow .75rem/.14em, h1 400 with -.045em tracking, lead #b8c5d9 1.85. */
.gv-about-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:100vh;min-height:100svh;margin-top:calc(-1 * var(--header-height,74px));padding:calc(var(--header-height,74px) + 64px) 0 104px;overflow:hidden;background:#00010e}

/* Photo: cover, technician kept on the right. The source carries the previous site's blue cast; a light desaturation and a
   touch of warmth bring it back towards a natural photograph while staying in the dark palette. */
.gv-about-hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% center;pointer-events:none;filter:saturate(.8) sepia(.1) contrast(1.04) brightness(.97)}

/* #00010E from the left (text side), fading out towards the technician; a soft top shade under the header glass and a
   fade into the page base at the bottom. */
.gv-about-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,1,14,.4) 0,rgba(0,1,14,0) 20%,rgba(0,1,14,0) 74%,#00010e 100%),
  linear-gradient(90deg,#00010e 0%,rgba(0,1,14,.94) 20%,rgba(0,1,14,.74) 38%,rgba(0,1,14,.3) 56%,rgba(0,1,14,0) 72%)}

.gv-about-hero>.container{margin-block:0}
.gv-about-hero-copy{position:relative;max-width:780px}
.gv-about-hero .eyebrow{margin-bottom:28px;color:#fff}
.gv-about-hero h1{font-size:clamp(2.6rem,4.1vw,4rem);line-height:1.16;letter-spacing:-.045em;color:#f5f5fc}
.gv-about-hero h1 span{display:block;width:fit-content}
.gv-about-hero-lead{max-width:540px;margin-top:30px;color:#b8c5d9;font-size:1.06rem;line-height:1.85}

/* Entrance — same timing and curves as the interior heroes (interior-hero-motion.css / hero-motion.css). */
@media(prefers-reduced-motion:no-preference){
  .gv-about-hero{--hero-rise:9px}
  .gv-about-hero h1 span{animation:gv-hero-wipe 1.05s cubic-bezier(.16,1,.3,1) .28s backwards}
  .gv-about-hero h1 span+span{animation-delay:.44s}
  .gv-about-hero .eyebrow{animation:gv-hero-lift .8s cubic-bezier(.25,.8,.35,1) .15s backwards}
  .gv-about-hero-lead{animation:gv-hero-lift .8s cubic-bezier(.25,.8,.35,1) .75s backwards}
  .gv-about-hero-photo{animation:gv-hero-fade 1.2s ease both}
}
@keyframes gv-hero-wipe{from{clip-path:inset(-.15em -.1em 110% -.1em);translate:0 var(--hero-rise)}to{clip-path:inset(-.15em -.1em -.15em -.1em);translate:0 0}}
@keyframes gv-hero-lift{from{opacity:0;translate:0 var(--hero-rise)}to{opacity:1;translate:0 0}}
@keyframes gv-hero-fade{from{opacity:0}to{opacity:1}}

/* Laptop / small desktop: technician pushed slightly right so the two title lines keep clear of the arm. */
@media(max-width:1200px){
  .gv-about-hero-photo{object-position:68% center}
}

/* Mobile and portrait tablets: the photo takes the upper part (technician, camera and face recognisable), the copy sits
   below it on the dark base, so the text never covers the face. */
@media(max-width:700px),(max-width:1024px) and (orientation:portrait){
  /* The copy never starts above the photo area (header + a width-based band where the face sits), even on short
     screens where the hero has to grow beyond 100svh; the photo height is capped by the same measure. */
  .gv-about-hero{align-items:flex-end;padding:calc(var(--header-height,110px) + min(72vw,420px)) 0 56px}
  .gv-about-hero-photo{height:min(64%,calc(var(--header-height,110px) + 96vw));object-position:93% center;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  .gv-about-hero::before{background:linear-gradient(180deg,rgba(0,1,14,.35) 0,rgba(0,1,14,0) 18%,rgba(0,1,14,0) 36%,rgba(0,1,14,.75) 56%,#00010e 70%)}
  .gv-about-hero-copy{max-width:640px}
}
@media(max-width:700px){
  .gv-about-hero{--hero-rise:6px}
  .gv-about-hero .eyebrow{margin-bottom:18px}
  .gv-about-hero h1{font-size:clamp(1.75rem,7.6vw,2.6rem);line-height:1.17;letter-spacing:-.04em}
  .gv-about-hero-lead{margin-top:22px;font-size:1rem;line-height:1.8}
}