/* ============================================================
   Jahnel Group — Website Overhaul
   Base: Direction 4 "Living Lattice" + multi-page components
   Paths are root-relative (/assets, /css, /js) so every page
   works identically regardless of folder depth.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--jg-dark);
  color: var(--jg-light);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- line-breaking ----------
   Headings balance (even line lengths, no orphan word hanging off a
   giant Anton headline); reading copy gets `pretty` via .prose below.
   Both are progressive enhancements — unsupported browsers fall back
   to normal wrapping, nothing shifts. Browsers cap `balance` at ~6
   lines, which is well past any headline here. */
h1, h2, h3, h4, h5, h6, .display { text-wrap: balance; }

/* ---------- shared bits ---------- */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding-inline: clamp(20px, 4vw, 64px); }
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; }
.cyan { color: var(--jg-primary); }
.muted { color: rgba(244,244,244,0.62); }

/* ---------- prose — every normal reading paragraph site-wide ----------
   One knob for all body copy: tune --prose-color / --prose-size in
   tokens.css. Two-tier specificity on purpose:
   - font-size sits at (0,1,0) so a page rule may scale prose UP
     (hero subs); page rules must never set prose below 17.5px.
   - color/family/weight/line-height are element-qualified (0,1,1)
     so they beat page-local single-class rules regardless of load
     order. Page CSS keeps layout only (margins, max-width).
   Metadata (mono labels, chips, stat labels, nav/footer) never
   gets this class. */
.prose { font-size: var(--prose-size); text-wrap: pretty; }
p.prose, li.prose, span.prose {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--prose-color);
}

/* signature teal stripe heading */
.bar-head { display: flex; align-items: center; gap: 22px; margin-bottom: 56px; }
.bar-head .stripe {
  height: 14px; background: var(--jg-secondary); flex: 1 1 auto;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms cubic-bezier(.16,.84,.44,1);
}
.bar-head.right .stripe { transform-origin: right center; }
.bar-head.in .stripe { transform: scaleX(1); }
.bar-head h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 52px); line-height: 1; white-space: nowrap; flex: 0 0 auto;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; border: none;
  padding: 17px 30px; transition: filter .25s ease, transform .25s ease, background .25s ease, color .25s ease;
}
.btn-primary { background: var(--jg-primary); color: var(--jg-dark); border-radius: 0 24px 24px 24px; }
.btn-primary:hover { filter: brightness(0.85); transform: translateY(-2px) scale(1.025); }
.btn-ghost { background: transparent; color: var(--jg-light); border: 1.5px solid rgba(244,244,244,0.5); border-radius: 0 24px 24px 24px; }
.btn-ghost:hover { background: var(--jg-light); color: var(--jg-dark); }
/* THE white teardrop — the single class for every white button on the site:
   navigation CTAs where a blue fill would fight the section behind them, and
   form/application submits. Same hover as .btn-primary (2px lift + 1.025
   swell); only the dim differs, because white needs less of it than cyan to
   read as a state change. Submits still never take .btn-arrow — arrows are
   reserved for leaving the page. */
.btn-white { background: var(--jg-light); color: var(--jg-dark); border-radius: 0 24px 24px 24px; }
.btn-white:hover { filter: brightness(0.92); transform: translateY(-2px) scale(1.025); }

/* Moving arrow — add .btn-arrow to any CTA that navigates to ANOTHER page
   (blue primary or ghost secondary). Down-page/scroll CTAs and submits
   never get it. Same masked chevron + heartbeat as the home hero. */
.btn-arrow::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  vertical-align: -0.16em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: arrow-beat 1.6s ease-in-out infinite;
}
/* non-flex contexts (inline links) still need breathing room */
:not(.btn).btn-arrow::after { margin-left: 0.5em; }

/* shared inline chevron arrow — matches the home hero buttons/links.
   Drop <svg class="arrow-beat">...</svg> into a flex container instead
   of a literal arrow character. */
.arrow-beat { animation: arrow-beat 1.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes arrow-beat {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(2px); }
  24%  { transform: translateX(0); }
  36%  { transform: translateX(2px); }
  52%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .arrow-beat, .btn-arrow::after { animation: none; }
}

/* reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   NAV — centered logo (3 links · logo · 3 links)
   ============================================================ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px clamp(20px, 4vw, 64px);
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
nav.scrolled { background: rgba(22,23,25,0.92); backdrop-filter: blur(8px); border-bottom-color: rgba(244,244,244,0.1); padding-top: 12px; padding-bottom: 12px; }

/* .nav-menu is layout-transparent on desktop so its two groups
   become direct grid items, sitting either side of the brand. */
nav .nav-menu { display: contents; }
nav .nav-group { display: flex; align-items: center; gap: 30px; }
nav .nav-group.left { order: 1; justify-content: flex-end; }
nav .nav-group.right { order: 3; justify-content: flex-start; }

nav .brand { order: 2; justify-self: center; padding: 0 30px; }
nav .brand img { width: 225px; transition: width .3s ease; }
nav.scrolled .brand img { width: 198px; }

nav .nav-link {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400;
  color: var(--jg-light); transition: color .2s ease; position: relative;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 7px;
}
nav .nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--jg-primary); transition: width .25s ease; }
nav .nav-link:hover { color: var(--jg-primary); }
nav .nav-link:hover::after { width: 100%; }
nav .nav-link .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; }

/* ---- Services dropdown ---- */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  margin-top: 14px; min-width: 280px;
  background: rgba(20,21,24,0.97); backdrop-filter: blur(10px);
  border: 1px solid rgba(244,244,244,0.12);
  border-radius: 0 14px 14px 14px;
  padding: 8px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,.84,.44,1), visibility .22s;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
  z-index: 120;
}
/* hover bridge so the panel doesn't close in the gap */
.has-dropdown::after { content:""; position:absolute; top:100%; left:0; right:0; height:18px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.has-dropdown:hover .nav-link .caret,
.has-dropdown.open .nav-link .caret { transform: rotate(225deg) translateY(2px); }
.dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  font-size: 13.5px; letter-spacing: 0.02em; color: rgba(244,244,244,0.82);
  text-transform: none; font-weight: 400; transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.dropdown a .hx { width: 9px; height: 10px; flex: 0 0 auto; background: var(--jg-secondary); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); transition: background .18s ease; }
.dropdown a:hover { background: rgba(0,189,255,0.1); color: var(--jg-light); }
.dropdown a:hover .hx { background: var(--jg-primary); }

/* mobile toggle button (hidden on desktop) */
.nav-toggle { display: none; }

@media (max-width: 980px){
  nav { grid-template-columns: auto 1fr auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; order: 0;
    width: 42px; height: 42px; background: none; border: 1px solid rgba(244,244,244,0.2);
    border-radius: 8px; cursor: pointer; justify-self: start; position: relative; z-index: 130;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content:""; display:block; width: 18px; height: 2px; background: var(--jg-light); position: relative; transition: transform .25s ease, opacity .2s ease;
  }
  .nav-toggle span::before { position:absolute; top:-6px; }
  .nav-toggle span::after  { position:absolute; top: 6px; }
  body.nav-open .nav-toggle span { background: transparent; }
  body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

  nav .brand { order: 1; justify-self: center; }
  nav .brand img,
  nav.scrolled .brand img { width: clamp(150px, 40vw, 220px); }
  nav .nav-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: 0 0 0 auto; top: 0; width: min(82vw, 360px); height: 100vh;
    background: rgba(16,17,18,0.99); backdrop-filter: blur(12px);
    border-left: 1px solid rgba(244,244,244,0.12);
    padding: 96px 28px 40px; transform: translateX(100%); transition: transform .3s cubic-bezier(.16,.84,.44,1);
    overflow-y: auto; z-index: 110;
  }
  body.nav-open nav .nav-menu { transform: translateX(0); }
  nav .nav-group { flex-direction: column; align-items: stretch; gap: 0; }
  nav .nav-group.left { order: 1; } nav .nav-group.right { order: 2; }
  nav .nav-group.left, nav .nav-group.right { justify-content: flex-start; }
  nav .nav-link { padding: 16px 4px; font-size: 16px; border-bottom: 1px solid rgba(244,244,244,0.08); justify-content: space-between; }
  nav .nav-link::after { display: none; }

  /* dropdown becomes inline accordion */
  .dropdown {
    position: static; transform: none; min-width: 0; margin: 0; padding: 0;
    background: none; border: none; box-shadow: none; backdrop-filter: none;
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto;
    transition: max-height .3s ease;
  }
  .has-dropdown.open .dropdown { max-height: 600px; transform: none; }
  .dropdown a { padding: 13px 14px; border-radius: 0; color: rgba(244,244,244,0.7); }
}

/* ============================================================
   HERO (Direction 4 — unchanged)
   ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: url("/assets/shared_photos/team22.jpg") center/cover; filter: brightness(0.5) grayscale(0.2); transform: scale(1.05); }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--jg-dark) 2%, rgba(22,23,25,0.35) 55%, rgba(22,23,25,0.7) 100%); }
.hero-lattice { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .3s; }
.hero.lit .hero-lattice { opacity: 1; }
.hero-content { position: relative; z-index: 2; padding-top: 90px; }
.hero h1 { font-size: clamp(46px, 8.4vw, 132px); margin: 20px 0 0; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line span { display: inline-block; animation: heroLine .9s cubic-bezier(.16,.84,.44,1) both; }
.hero h1 .line:nth-child(1) span { animation-delay: .15s; }
.hero h1 .line:nth-child(2) span { animation-delay: .28s; }
.hero h1 .line:nth-child(3) span { animation-delay: .41s; }
@keyframes heroLine { from { transform: translateY(110%); } to { transform: none; } }
@keyframes heroFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero .sub { margin-top: 26px; font-size: clamp(16px, 1.5vw, 21px); max-width: 540px; color: rgba(244,244,244,0.82); font-weight: 300; animation: heroFade 1s ease .8s both; }
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 38px; animation: heroFade 1s ease 1s both; }
.scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; width: 26px; opacity: .7; filter: invert(1) brightness(2); animation: float 2.4s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* ---------- trust / logo garden ---------- */
section { padding-block: clamp(70px, 11vh, 130px); }
.trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid rgba(244,244,244,0.1); }
.trust-grid .cell { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(244,244,244,0.1); border-bottom: 1px solid rgba(244,244,244,0.1); padding: 22px; transition: background .35s ease, box-shadow .35s ease; }
.trust-grid .cell:hover { background: rgba(0,189,255,0.08); box-shadow: inset 0 0 0 1px rgba(0,189,255,0.35); }
/* Rest — every logo in its own colours, very slightly muted so hover has room
   to brighten. */
.trust-grid img { max-height: 52px; max-width: 82%; opacity: 0.88; transition: opacity .35s ease, filter .35s ease, transform .45s cubic-bezier(.2,.7,.25,1); }
/* Hover — come alive: bigger and brighter. */
.trust-grid .cell:hover img { opacity: 1; transform: scale(1.14); filter: brightness(1.18) saturate(1.1); }
@media (prefers-reduced-motion: reduce){ .trust-grid img { transition: opacity .35s ease, filter .35s ease; } .trust-grid .cell:hover img { transform: none; } }
@media (prefers-reduced-motion: reduce){ .trust-grid img { transition: opacity .35s ease, filter .35s ease; } .trust-grid .cell:hover img { transform: none; } }
@media (max-width: 860px){ .trust-grid { grid-template-columns: repeat(3,1fr); } }
/* Home page uses a tighter vertical rhythm than the global section default —
   the sections are short, so the full padding left oversized voids between them.
   Scoped to .home so interior pages keep their own spacing. */
body.home section { padding-block: clamp(36px, 4.5vh, 56px); }

/* ============================================================
   VIDEO CASE STUDIES — "Engineering Teams for the AI Era"
   ============================================================ */
.video-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.video-grid .vsub { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.vcard {
  position: relative; overflow: hidden; min-height: 240px; border: 1px solid rgba(244,244,244,0.1);
  display: flex; align-items: flex-end; transition: border-color .3s, transform .3s;
}
.vcard.feature { min-height: 502px; }
.vcard .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) grayscale(0.25); transition: transform .5s ease, filter .3s ease; }
.vcard:hover { border-color: rgba(0,189,255,0.45); transform: translateY(-3px); }
.vcard:hover .poster { transform: scale(1.05); filter: brightness(0.65) grayscale(0); }
.vcard .vscrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,23,25,0.92) 5%, rgba(22,23,25,0.1) 60%); }
.vcard .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%; background: rgba(0,189,255,0.92);
  display: flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease;
}
.vcard.feature .play { width: 84px; height: 84px; }
.vcard:hover .play { transform: translate(-50%,-50%) scale(1.08); }
.vcard .play::before { content:""; width:0; height:0; border-left: 18px solid var(--jg-dark); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.vcard .vmeta { position: relative; z-index: 2; padding: 26px; }
.vcard .vtag { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jg-primary); margin-bottom: 8px; }
.vcard .vtitle { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(20px, 2vw, 30px); line-height: 1; }
@media (max-width: 860px){ .video-grid { grid-template-columns: 1fr; } .vcard.feature { min-height: 280px; } }

/* ---------- capabilities ---------- */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(244,244,244,0.1); border: 1px solid rgba(244,244,244,0.1); }
.cap { background: var(--jg-dark); padding: 40px 34px; transition: background .3s ease, transform .3s ease; position: relative; display: block; }
.cap:hover { background: var(--jg-dark-inlay); }
.cap .ico { width: 40px; height: 40px; filter: brightness(0) invert(1); margin-bottom: 22px; }
.cap h4 { font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--jg-primary); margin-bottom: 12px; }
.cap p { font-size: 15px; line-height: 1.6; color: rgba(244,244,244,0.66); }
.cap .idx { position: absolute; top: 28px; right: 30px; font-family: var(--font-display); font-weight: 400; font-size: 13px; color: rgba(244,244,244,0.22); letter-spacing: .1em; }
@media (max-width: 880px){ .caps-grid { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */
.stats-band { background: var(--jg-dark-inlay); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 400; font-size: clamp(54px, 7vw, 104px); line-height: 1; color: var(--jg-primary); white-space: nowrap; }
.stat .lbl { margin-top: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(244,244,244,0.7); }
@media (max-width: 720px){ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 20px; } }

/* ---------- culture ---------- */
.culture { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 78px); align-items: center; }
.culture-copy h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 54px); line-height: 1; margin-bottom: 24px; }
.culture-copy p { font-size: 16px; line-height: 1.7; color: rgba(244,244,244,0.74); margin-bottom: 18px; max-width: 48ch; }

/* proof-points */
.culture-proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(22px, 3vw, 44px); margin: 32px 0 30px; }
.culture-proof .proof { position: relative; padding-left: 16px; }
.culture-proof .proof::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 18px; width: 2px; background: var(--jg-primary); }
.proof-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1; color: var(--jg-fg); white-space: nowrap; }
.proof-num .unit { color: var(--jg-primary); }
.proof-lbl { margin-top: 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; line-height: 1.35; color: rgba(244,244,244,0.6); }
.culture-copy .award-row { display: flex; gap: 26px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.culture-copy .award-row img { height: 60px; opacity: .85; }

/* photo collage */
.culture-collage { position: relative; min-height: 560px; }
.culture-collage .ph { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(244,244,244,0.12); box-shadow: 0 26px 64px rgba(0,0,0,0.5); }
.culture-collage .ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.15) brightness(0.88); transition: transform .6s cubic-bezier(.2,.7,.25,1); }
.culture-collage .ph:hover img { transform: scale(1.04); }
.culture-collage .ph1 { width: 58%; height: 56%; top: 0; left: 0; z-index: 2; }
.culture-collage .ph2 { width: 50%; height: 74%; right: 0; top: 12%; z-index: 3; border-color: rgba(0,189,255,0.55); }
.culture-collage .ph3 { width: 40%; height: 38%; left: 2%; bottom: 0; z-index: 2; }
.culture-collage .hex-accent { position: absolute; bottom: 3%; left: 40%; width: 132px; color: var(--jg-primary); opacity: .55; z-index: 1; pointer-events: none; }

@media (max-width: 880px){
  .culture { grid-template-columns: 1fr; }
  .culture-collage { min-height: 64vw; margin-top: 12px; }
  .culture-proof { gap: 20px; }
}

/* ---------- CTA ---------- */
.cta { position: relative; text-align: center; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: url("/assets/shared_photos/officebw.jpg") center/cover; filter: brightness(0.3); }
.cta-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22,23,25,0.8), rgba(22,23,25,0.92)); }
.cta .inner { position: relative; z-index: 2; }
.cta h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 6.5vw, 96px); line-height: 0.95; margin-bottom: 26px; }
.cta p { font-size: 18px; color: rgba(244,244,244,0.8); margin-bottom: 38px; }
.cta .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
footer { background: #0a0b0c; padding: 70px 0 36px; border-top: 1px solid rgba(244,244,244,0.08); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 48px; align-items: start; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; }
.foot-brand img { width: 160px; margin-bottom: 28px; }
.foot-addr { font-style: normal; font-size: 13px; color: var(--jg-light); line-height: 1.8; margin-bottom: 24px; }
.foot-contact-rows { display: flex; flex-direction: column; gap: 14px; }
.foot-contact-row { display: flex; flex-direction: column; gap: 2px; }
.foot-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--jg-light); font-family: var(--font-body); }
.foot-val { font-size: 13px; color: var(--jg-light); }
.foot-col h6 { font-family: var(--font-body); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .10em; color: var(--jg-light); margin-bottom: 20px; }
.foot-col a:not(.btn) { display: block; font-size: 13px; color: var(--jg-light); margin-bottom: 12px; text-decoration: none; transition: color .2s ease; }
.foot-col a:not(.btn):hover { color: var(--jg-primary); }
.foot-copy { text-align: center; font-size: 12px; color: rgba(244,244,244,0.30); margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(244,244,244,0.07); }
.foot-copy a { color: rgba(244,244,244,0.30); text-decoration: none; transition: color .2s ease; }
.foot-copy a:hover { color: rgba(244,244,244,0.60); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* Phone: one 2-column grid the whole way down — logo centred as a masthead,
   then address | contact, then Company | Services, then social as a row.
   Every cell shares the same two column edges, so the footer reads as one
   grid instead of a centred block sitting on top of a grid. Pairing address
   with contact (rather than stacking them) is what buys the height back:
   ~86px, which is most of the difference between the old 1165px single-column
   footer and this one. */
@media (max-width: 560px) {
  footer { padding: 48px 0 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot-brand {
    grid-column: 1 / -1;
    /* Same track sizing and gap as .foot-grid, so the address lines up with
       Company below it and the contact block with Services. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    align-items: start;
  }
  .foot-brand img { grid-column: 1 / -1; justify-self: center; margin-bottom: 24px; }
  .foot-addr { margin-bottom: 0; }
  .foot-contact-rows { align-items: center; }
  /* Everything is centred within its own column on phones — the columns are
     narrow enough that a left rag reads as two ragged edges rather than a
     grid. The column boundaries still line up; only the text centres. */
  .foot-brand,
  .foot-col { text-align: center; }
  /* Long service labels wrap inside their column rather than forcing it wider */
  .foot-col a:not(.btn) { overflow-wrap: break-word; }
  .foot-col--social { grid-column: 1 / -1; }
  /* Symmetric margins, not margin-right — a trailing right margin would push
     the whole row off-centre by half its width. */
  .foot-col--social a:not(.btn) {
    display: inline-block;
    margin: 0 10px 12px;
  }
  .foot-copy { margin-top: 36px; }
}

/* ============================================================
   INTERIOR PAGES — shared sub-page header offset
   ============================================================ */
.page-hero {
  position: relative; padding: clamp(140px, 22vh, 240px) 0 clamp(60px, 10vh, 110px);
  border-bottom: 1px solid rgba(244,244,244,0.08); overflow: hidden;
}
/* No cyan wash here. It painted the top of the band rgb(20,35,42) against
   the site's rgb(22,23,25) — a blue-teal cast that read as a different
   background from every other page. The band is plain --jg-dark like the
   rest of the site; .inner keeps its stacking context for anything a page
   layers behind the copy. */
.page-hero .inner { position: relative; z-index: 2; }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 8vw, 110px); line-height: 0.92; margin: 16px 0 0; }
.page-hero .lede { margin-top: 24px; font-size: clamp(17.5px, 1.5vw, 21px); max-width: 660px; }  /* color/weight from .prose */

/* ============================================================
   CASE STUDIES — filter + cards (FLIP shuffle)
   ============================================================ */
.cs-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 50px; }
.chip {
  font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(244,244,244,0.7); cursor: pointer;
  background: transparent; border: 1px solid rgba(244,244,244,0.18);
  padding: 11px 20px; border-radius: 999px; transition: all .22s ease;
}
.chip:hover { border-color: rgba(0,189,255,0.5); color: var(--jg-light); }
.chip.active { background: var(--jg-primary); border-color: var(--jg-primary); color: var(--jg-dark); }

.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px){ .cs-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .cs-grid { grid-template-columns: 1fr; } }

.cs-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(244,244,244,0.12); background: rgba(20,21,24,0.5);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.cs-card:hover { border-color: rgba(0,189,255,0.45); transform: translateY(-4px); box-shadow: 0 20px 50px -24px rgba(0,189,255,0.4); }

/* ---- pop-in on scroll — same gesture as the team page's people panes
   (scale-in-kf in css/team/team-recreation.css): 0 → full size over
   --jg-anim-duration, fired per card by an IntersectionObserver in main.js.

   Deliberately on the standalone `scale` property, NOT transform: the filter's
   FLIP shuffle drives `transform` on these same cards, and a card promoted to
   the top by a filter before it has ever been scrolled into view is mid-reveal
   while the FLIP is translating it. Sharing one property makes the two fight —
   the card flashes to full size, then snaps back to nothing when the FLIP
   clears its inline transform. Separate properties compose instead of
   clobbering, and the hover translateY keeps working throughout.

   The WAITING state is opacity, not scale, and that distinction matters: a
   card held at scale 0 has a zero-area box, and an IntersectionObserver never
   reports a zero-area target as intersecting. Held that way, the cards already
   on screen at load would sit invisible forever, since nothing would ever tell
   them to pop. Held at opacity 0 the box keeps its real size, the observer
   sees them immediately, and the animation takes over from there — its first
   frame sets opacity back to 1, so the gesture is still the team page's pure
   scale-up with no fade.

   .cs-reveal is set on the grid by that same JS, so with JS off the cards
   render normally instead of being stranded invisible. */
@keyframes cs-pop-in-kf {
  from { opacity: 1; scale: 0; }
  to   { opacity: 1; scale: 1; }
}
.cs-reveal .cs-card { opacity: 0; }
.cs-reveal .cs-card.cs-shown { opacity: 1; }
.cs-reveal .cs-card.cs-pop-in {
  transform-origin: center;
  animation: cs-pop-in-kf var(--jg-anim-duration) ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .cs-reveal .cs-card { opacity: 1; scale: 1; animation: none; }
}
.cs-card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.cs-card .thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) brightness(0.7); transition: transform .5s ease, filter .3s ease; }
.cs-card:hover .thumb img { transform: scale(1.06); filter: grayscale(0) brightness(0.85); }
.cs-card .tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jg-dark); background: var(--jg-primary); padding: 6px 12px; border-radius: 999px;
}
.cs-card .cs-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-card .client { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.06em; color: #F4F4F4; text-transform: uppercase; }
.cs-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1; color: var(--jg-light); }
.cs-card p { /* typography from .prose */ }
.cs-card .more { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jg-primary); display: inline-flex; gap: 8px; transition: gap .25s ease; }
.cs-card:hover .more { gap: 14px; }
/* FLIP transition for reordering */
.cs-card.flip-move { transition: transform .65s cubic-bezier(.16,.84,.44,1); }

/* ============================================================
   SERVICE / DETAIL content blocks
   ============================================================ */
.prose-section { padding-block: clamp(60px, 9vh, 110px); }
.lede-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); align-items: start; }
.lede-2col p { font-size: 17px; line-height: 1.75; color: rgba(244,244,244,0.78); margin-bottom: 18px; }
@media (max-width: 820px){ .lede-2col { grid-template-columns: 1fr; } }

.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(244,244,244,0.1); border: 1px solid rgba(244,244,244,0.1); }
.feature-list .fitem { background: var(--jg-dark); padding: 34px 30px; }
.feature-list .fitem .idx { font-family: var(--font-display); font-weight: 400; font-size: 13px; color: var(--jg-primary); letter-spacing: .1em; }
.feature-list .fitem h4 { font-family: var(--font-body); font-weight: 700; font-size: 19px; color: var(--jg-light); margin: 14px 0 10px; }
.feature-list .fitem p { font-size: 14.5px; line-height: 1.6; color: rgba(244,244,244,0.66); }
@media (max-width: 720px){ .feature-list { grid-template-columns: 1fr; } }

.detail-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.detail-meta .m { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,244,244,0.6); border: 1px solid rgba(244,244,244,0.16); padding: 9px 16px; border-radius: 999px; }
.detail-meta .m b { color: var(--jg-primary); font-weight: 700; }
.back-link { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jg-primary); font-weight: 700; margin-bottom: 8px; }


/* ============================================================
   PLACEHOLDER page
   ============================================================ */
.placeholder {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 140px 24px 80px; position: relative; overflow: hidden;
}
.placeholder::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 40%, rgba(0,189,255,0.1), transparent 55%); pointer-events:none; }
.placeholder h1 { position: relative; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 9vw, 120px); line-height: 0.9; }
.placeholder .ph-note { position: relative; margin-top: 26px; font-size: 16px; color: rgba(244,244,244,0.55); max-width: 520px; line-height: 1.6; }
.placeholder .ph-hx { position: relative; width: 40px; height: 46px; margin-bottom: 30px; background: var(--jg-primary); opacity: .9; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

/* respect reduced motion globally for big entrances */
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero h1 .line span, .hero .sub, .hero .actions { animation: none !important; }
  .cs-card.flip-move { transition: none !important; }
}