/* =====================================================
   GOAT BAR — the site header, shared by every page.

   One pill, centred on the page, with no outline at all:
   it is read purely as a tint of whatever is behind it.
   On the light pages that tint is a slightly darker grey
   than #ededed; on the dark ones a slightly lighter black.
   .is-dark is toggled by goat-bar.js from the section
   currently under the bar ([data-header-theme]).
   ===================================================== */

.gbar{
  /* light background (#ededed) — a touch darker, still see-through */
  --gb-fg:#131313;
  --gb-surface:rgba(0,0,0,.055);
  --gb-menu:rgba(232,232,232,.86);
  --gb-chip:rgba(0,0,0,.05);
  --gb-chip-hover:rgba(0,0,0,.11);
  --gb-cta-bg:#131313;
  --gb-cta-fg:#ffffff;
  --gb-blur:saturate(1.5) blur(18px);

  position:fixed;
  z-index:60;
  top:clamp(.9rem, 1.6vw, 1.5rem);
  left:50%;
  width:min(1280px, calc(100% - var(--rail, 0px) - 2.2rem));
  margin-left:calc(var(--rail, 0px) / 2);
  transform:translateX(-50%);
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  font-family:Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* dark background (#000) — a touch lighter, still see-through */
.gbar.is-dark{
  --gb-fg:#f4f4f4;
  --gb-surface:rgba(255,255,255,.085);
  --gb-menu:rgba(18,18,18,.86);
  --gb-chip:rgba(255,255,255,.09);
  --gb-chip-hover:rgba(255,255,255,.18);
  --gb-cta-bg:#ffffff;
  --gb-cta-fg:#111111;
}

.gbar.is-hidden{ transform:translateX(-50%) translateY(calc(-100% - 2rem)); opacity:0; pointer-events:none; }

.gbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  min-height:3.5rem;
  padding:.38rem .38rem .38rem 1.15rem;
  border-radius:999px;
  color:var(--gb-fg);
  background:var(--gb-surface);
  -webkit-backdrop-filter:var(--gb-blur);
  backdrop-filter:var(--gb-blur);
  transition:background .35s ease, color .35s ease;
}

.gbar__logo{
  display:block;
  flex:none;
  width:clamp(94px, 8vw, 132px);
  aspect-ratio:2172 / 872;
}
.gbar__logo img{ display:block; width:100%; height:100%; object-fit:contain; }

.gbar__right{ display:flex; align-items:center; gap:.4rem; }

.gbar__wa{ display:flex; align-items:center; gap:.32rem; }
.gbar__wa a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3rem;
  height:2.6rem;
  padding:0 .9rem;
  border:0;
  border-radius:999px;
  background:var(--gb-chip);
  color:var(--gb-fg);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1;
  text-decoration:none;
  transition:background .22s ease;
}
.gbar__wa a:hover{ background:var(--gb-chip-hover); }

.gbar__cta{
  display:inline-flex;
  align-items:center;
  height:2.75rem;
  padding:0 1.3rem;
  border-radius:999px;
  background:var(--gb-cta-bg);
  color:var(--gb-cta-fg);
  font-size:.92rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  transition:background .3s ease, color .3s ease, opacity .2s ease;
}
.gbar__cta:hover{ opacity:.88; }

.gbar__burger{
  display:grid;
  place-content:center;
  gap:.3rem;
  width:2.75rem;
  height:2.75rem;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--gb-cta-bg);
  cursor:pointer;
  transition:background .3s ease;
}
.gbar__burger span{
  display:block;
  width:1.05rem;
  height:2px;
  border-radius:2px;
  background:var(--gb-cta-fg);
  transition:transform .28s ease, background .3s ease;
}
.gbar__burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.gbar__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ---- dropdown ----
   A small solid white card hanging off the right edge of the bar, the way
   the reference does it: it never spans the screen, it never lets the page
   show through, and the hairlines sit inside the card's own padding. */
.gbar__menu{
  position:absolute;
  top:calc(100% + .5rem);
  right:0;
  width:min(21rem, 76vw);
  padding:.2rem 1.15rem .55rem;
  border-radius:1.5rem;
  background:#ffffff;
  color:#111111;
  box-shadow:0 24px 54px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}
.gbar__menu[hidden]{ display:none; }

.gbar__menu a{
  color:#111111;
  font-size:1rem;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s ease;
}
.gbar__menu > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  padding:.82rem 0;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.gbar__menu > a:last-of-type{ border-bottom:0; }
.gbar__menu > a::after{
  content:"\2197";
  font-size:.92em;
  line-height:1;
  opacity:.75;
}
.gbar__menu > a:hover{ opacity:.55; }

.gbar__menu .gbar__menu-wa{
  display:none;
  gap:.4rem;
  margin-top:.5rem;
  padding-top:.6rem;
  border-top:1px solid rgba(0,0,0,.12);
}
.gbar__menu .gbar__menu-wa a{
  flex:1;
  padding:.5rem .3rem;
  border-radius:999px;
  background:rgba(0,0,0,.055);
  color:#111111;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.04em;
  text-align:center;
}
.gbar__menu .gbar__menu-wa a:hover{ background:rgba(0,0,0,.1); }

@media (max-width: 860px){
  .gbar__wa{ display:none; }
  .gbar__menu .gbar__menu-wa{ display:flex; }
}
@media (max-width: 560px){
  .gbar{ top:max(.8rem, env(safe-area-inset-top, 0px)); width:calc(100% - 1.6rem); }
  .gbar__inner{ min-height:3.2rem; padding:.32rem .32rem .32rem .85rem; }
  .gbar__logo{ width:88px; }
  .gbar__cta{ height:2.5rem; padding:0 .95rem; font-size:.82rem; }
  .gbar__burger{ width:2.5rem; height:2.5rem; }
  .gbar__menu{ width:min(19rem, 72vw); padding-inline:1rem; }
  .gbar__menu a{ font-size:.95rem; }
  .gbar__menu > a{ padding:.76rem 0; }
}

@media (prefers-reduced-motion: reduce){
  .gbar, .gbar__inner, .gbar__burger span{ transition:none !important; }
}


/* =====================================================================
   PAGE TRANSITION — the new page wipes in from the right with a soft
   edge, the old page stays put underneath, the header never moves
   (matches atlas-studio.framer.website). Cross-document View Transitions
   where the browser has them; goat-bar.js plays the same wipe on the
   incoming page everywhere else. This file is on every page, so both
   sides of a navigation always opt in.
   ===================================================================== */
@view-transition{ navigation:auto }

.gbar{ view-transition-name:goat-bar; }
::view-transition-group(goat-bar){ animation:none; }
::view-transition-old(goat-bar),
::view-transition-new(goat-bar){ animation:none; mix-blend-mode:normal; }
::view-transition-old(goat-bar){ display:none; }

::view-transition-group(root){ animation-duration:.42s; }
::view-transition-old(root){ animation:none; mix-blend-mode:normal; }
::view-transition-new(root){
  animation:gbar-wipe .42s cubic-bezier(.2,.7,.25,1) both;
  mix-blend-mode:normal;
  -webkit-mask-image:linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
          mask-image:linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
  -webkit-mask-size:240% 100%;
          mask-size:240% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
@keyframes gbar-wipe{
  from{ -webkit-mask-position:0 0;    mask-position:0 0; }
  to{   -webkit-mask-position:100% 0; mask-position:100% 0; }
}

/* going back: same wipe, mirrored, so the page you return to comes from the left */
html:active-view-transition-type(back)::view-transition-new(root){
  animation-name:gbar-wipe-back;
  -webkit-mask-image:linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
          mask-image:linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
}
@keyframes gbar-wipe-back{
  from{ -webkit-mask-position:100% 0; mask-position:100% 0; }
  to{   -webkit-mask-position:0 0;    mask-position:0 0; }
}

/* fallback (no View Transitions): the incoming page plays the same wipe on
   <body>, the outgoing one dims for a beat before the browser navigates.
   body.gb-pt-route-in is the same wipe, played by site-common.js when the
   home <-> #team switch happens in a browser that is on this fallback path,
   so "More about us" moves exactly like a page-to-page navigation there. */
html.gb-pt-fallback body{ opacity:0; }
html.gb-pt-fallback.gb-pt-ready body{ opacity:1; transition:opacity .18s ease-out; }
html.gb-pt-fallback.gb-pt-leave body{ opacity:.55; }
html.gb-pt-fallback body.gb-pt-in,
body.gb-pt-route-in{
  animation:gbar-wipe .42s cubic-bezier(.2,.7,.25,1) both;
  -webkit-mask-image:linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
          mask-image:linear-gradient(90deg, transparent 0 42%, #000 58% 100%);
  -webkit-mask-size:240% 100%;
          mask-size:240% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.gb-pt-fallback body.gb-pt-in,
  body.gb-pt-route-in{ animation:none; }
  ::view-transition-new(root){ -webkit-mask-image:none; mask-image:none; }
}


/* =====================================================================
   SWIPE PROGRESS — the thin pink bar under a horizontally swiped row of
   cards (work stills, the two credentials rows). Hidden by default; each
   section turns it on inside its own phone breakpoint, and goat-bar.js
   fills it from the row's own scrollLeft. Shared here because the rows
   live on different pages.
   ===================================================================== */
.swipe-progress{
  display:none;
  height:4px;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  overflow:hidden;
}
.swipe-progress--dark{ background:rgba(255,255,255,.16); }
.swipe-progress__bar{
  height:100%;
  width:0%;
  border-radius:inherit;
  background:#fb0155;
  transition:width .08s linear;
}

/* ---------------------------------------------------------------
   iOS Safari: the whole page could be dragged a little to the left or
   right with a finger and rubber-band back (Safari lets the document
   pan sideways whenever anything measures even a pixel wider than the
   screen, and ignores body overflow for that gesture). Lock touch
   panning of the document to the vertical axis and disable the
   horizontal bounce. Horizontal scrollers inside the page (logo
   marquee, swipe carousels) are their own scroll containers with their
   own touch handling, so they keep working; pinch-zoom stays allowed.
   --------------------------------------------------------------- */
html,
body{
  touch-action:pan-y pinch-zoom;
  overscroll-behavior-x:none;
}