/* Inventiff shell — header/nav/mega-menu + footer. Shared by home, tech, landing. */
/* --bar-h is the one place the bar's height is written. The glass, the bar and the
   mobile panel's offset all have to agree, and when the bar went 88 -> 78 the panel
   kept 88 and hung 10px clear of the bar on every page from 681 to 1023. */
header.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; padding: 0 24px; --bar-h: 78px; }
/* ── the header glass (DS §12) ───────────────────────────────────────────────
   The header is permanently fixed, so it is permanently the sticky state. The
   blur has to be clipped to the header's own shape — the page content passing
   directly behind the bar is blurred and nothing else is — which is why it is a
   layer of its own rather than a background on .nav-inner.

   The reason is mechanical: backdrop-filter makes its element the containing
   block for every positioned descendant. Put it on .nav-inner (or on .nav-bar)
   and the mobile menu panel, which is absolutely positioned against header.nav
   and deliberately escapes .nav-inner's overflow:hidden, would be re-anchored and
   then clipped away. A pseudo-element carries the filter and owns no descendants,
   so nothing moves. z-index:-1 keeps it behind the logo, the labels and the CTA —
   they stay fully opaque and sharp — and inside header.nav's own stacking context,
   so it never sinks below the page.

   It is sized to .nav-bar rather than to .nav-inner: when the mega menu opens, the
   panel below is opaque white (§12: "Mega Menu container: #FFFFFF"), and the glass
   stays exactly the height of the bar. */
header.nav::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 24px; right: 24px;
  height: var(--bar-h); max-width: 1340px; margin: 0 auto;
  border-radius: var(--r-lg);
  background: var(--nav-glass-solid);   /* the stated fallback, replaced below */
  pointer-events: none;
  transition: border-radius var(--dur-slow) var(--ease); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.nav::before {
    background: var(--nav-glass);
    -webkit-backdrop-filter: blur(var(--nav-blur));
    backdrop-filter: blur(var(--nav-blur)); }
}
/* with the menu open the white panel continues below the bar, so the glass squares
   off its bottom corners rather than leaving a light notch at the seam */
header.nav:has(.mega-open)::before { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* No border and no stroke on the navigation container (§12); the surface it used to
   paint is the glass layer above. The shadow stays here, not on the glass, so it
   keeps growing with the mega panel when the menu opens — §12 says preserve the
   existing subtle shadow treatment, and the panel is part of what it sits under. */
.nav-inner { display: flex; flex-direction: column; max-width: 1340px; margin: 0 auto; background: transparent; border: none; border-radius: var(--r-lg); box-shadow: 0 10px 34px rgba(4,17,58,0.10); overflow: hidden; }
.nav-bar { display: flex; align-items: center; justify-content: flex-start; height: var(--bar-h); padding: 0 16px 0 32px; }
/* The nav CTA is the standard button at ~85%: every proportion of it — type scale,
   arrow offset, the padding swap that drives the arrow march — scaled by the same
   factor, so it reads as the same button rather than a different one.
   40px tall against the page's 48px: sized for the 78px bar without dominating it,
   and still well clear of the 32px chip it used to be. */
.nav-cta .btn { font-size: var(--fs-btn-sm); padding: 13px var(--s-3); }   /* 40px — the same height as .btn-sm */
.nav-cta .btn:has(.ar) { padding-left: var(--s-2); padding-right: 40px; }
.nav-cta .btn:has(.ar):hover { padding-left: 40px; padding-right: var(--s-2); }
.nav-cta .btn .ar, .nav-cta .btn:has(.ar)::before { width: 15px; height: 15px; }
.nav-cta .btn .ar { right: 16px; }
.nav-cta .btn:has(.ar)::before { left: 16px; }
.nav-cta .btn:hover .ar { transform: translateY(-50%) translateX(22px); }
.logo { display: inline-block; padding: 8px 0; margin: -8px 0; }   /* hit area only — negative margin keeps the bar metrics identical */
.logo svg { height: 27px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 48px; margin-right: auto; }
.nav-cta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* scoped to .nav-links so the family sheets' own `.btn { display: inline-flex }`
   (index.css / websites.css re-declare it after this file) can't win on specificity */
/* descendant, not child: shell.js wraps the rows in .nav-root for the mobile
   drill-down, so the mobile CTA is no longer a direct child of .nav-links and a
   child combinator stopped hiding it — it appeared in the middle of the desktop bar. */
.nav-sub, .nav-links .nav-cta-mobile { display: none; }
/* display: contents, so the wrapper shell.js adds for the mobile drill-down generates
   no box of its own up here. Without this the nav items stop being flex children of
   .nav-links and the desktop bar stacks them down the page instead of across it. The
   burger breakpoint gives it a real box again. */
.nav-root { display: contents; }
.nav-item > a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--fs-nav); color: var(--ink); padding: 8px 16px; border-radius: var(--r-pill); transition: color var(--dur-fast), background var(--dur-fast); }
/* the same Menu / Tab Hover surface as the mega menu rows below it (§04) */
.nav-item:hover > a, .nav-item.active > a { color: var(--ink); background: var(--menu-hover); }
.nav-item .caret { transition: transform var(--dur); }
.nav-item.active .caret { transform: rotate(180deg); }
/* Seven items only just clear the CTA at the narrowest desktop width — tighten the
   gaps there so "Contact" never ends up touching the Book a call button. */
@media (min-width: 1024px) and (max-width: 1149px) {
  .nav-links { margin-left: 24px; gap: 0; }
  .nav-item > a { padding-left: 8px; padding-right: 8px; }
}
/* the Mega Menu container is #FFFFFF (§12) — opaque, so the menu itself never
   inherits the bar's translucency */
.mega-area { max-height: 0; overflow: hidden; background: var(--white); transition: max-height var(--dur-slow) var(--ease); }
.nav-inner.mega-open .mega-area { max-height: 520px; }
.mega { display: none; padding: 2px 16px 16px; }
.mega.active { display: block; }
.mega-inner { display: grid; grid-template-columns: 1.95fr 1fr; gap: 16px; }
/* §12 names the two surfaces: the column/group is the off-white, the hovered row
   is the menu grey. The polarity used to run the other way — a darker column with
   rows that went white on hover — so the hovered item read as a hole rather than a
   fill. No border, no stroke, no shadow, no lift: background only. */
.mega-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; background: var(--off-white); border-radius: var(--r); padding: 8px; }
.mega-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 16px; border-radius: var(--r-md); transition: background var(--dur-fast) ease; }
.mega-item:hover { background: var(--menu-hover); }
/* The design's icons are duotone artwork that carries its own amber, not a glyph
   sitting on a tile — so the amber tile that stood in for them is gone and the
   icon is drawn at its native 24px. */
.mega-item .mi-ic { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.mega-item .mi-ic img { display: block; width: 24px; height: 24px; }
/* DS §11 names scaling in the Mega Menu as something to avoid — the hover surface
   already carries the state. */
.mega-item b { display: block; font-size: var(--fs-p-small); font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 3px; }
/* the design sets the descriptor at 12/1.2, not the 16px h6 token that stood in */
.mega-item small { display: block; font-size: var(--fs-p-smallest); color: var(--muted-on-soft); line-height: 1.2; }   /* the panel behind it is var(--off-white), not white */
/* no min-height: the floor was taller than the promo actually needs (207px), so on
   the shorter menus it stretched the whole row and left a hole under the last link.
   Content decides now; the footer stays pinned by its own margin-top:auto. */
.mega-promo { position: relative; overflow: hidden; border-radius: var(--r); background: linear-gradient(200deg, var(--off-white), var(--light-bg)); padding: 24px; display: flex; flex-direction: column; }
/* a label on a promo panel, not a section heading — it used to be an <h3>, which
   put four identical headings in the document outline of every page */
.mega-promo .mp-title { font-size: var(--fs-h3); font-weight: 500; color: var(--ink); line-height: var(--lh-h3); }
.mega-promo .plane { position: absolute; top: 24px; right: 16px; width: 130px; height: auto; }
.mega-promo .pfoot { margin-top: auto; padding-top: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mega-promo .pfoot small { font-size: var(--fs-p-small); color: var(--text-dim); line-height: 1.45; }
/* A fill, not a button of its own: shape, type and interaction come from .btn in
   base.css — this only says "navy" for the promo panel it sits on. */
.btn-dark { background: var(--navy); color: #fff; box-shadow: 0 0 0 0 rgba(4,17,58,0.35); }
.btn-dark:hover { box-shadow: 0 12px 26px rgba(4,17,58,0.28), 0 0 0 12px rgba(4,17,58,0); }

/* AI-native teaser (Tech menu promo variant) */
.mega-promo-ai { background: radial-gradient(120% 90% at 85% 0%, #12235a 0%, var(--navy) 55%, #030b24 100%); }
.mega-promo-ai .mp-title { color: #fff; }
.mega-promo-ai .mp-glow { position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,189,14,0.55) 0%, rgba(255,189,14,0) 70%); pointer-events: none; }
.mega-promo-ai .mp-tag { position: relative; z-index: 1; align-self: flex-start; font-size: var(--fs-p-smallest); font-weight: 700;
 text-transform: uppercase; color: var(--navy); background: var(--amber);
  padding: 5px 8px; border-radius: var(--r-pill); margin-bottom: 16px; }
.mega-promo-ai .mp-sub { position: relative; z-index: 1; font-size: var(--fs-h6); line-height: 1.5; color: #aeb8d4; margin-top: 8px; }
.mega-promo-ai .pfoot small { color: #aeb8d4; }
.menu-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: var(--s-1); line-height: 0;
  /* the icon is 26 here and 22 on a phone, so 8px of padding left the site's primary
     mobile control a 42 and then a 38px target. Both comments here already claimed
     44; a minimum delivers it at either icon size without leaving the spacing scale. */
  min-width: 44px; min-height: 44px; }
/* ── footer ─────────────────────────────────────────────────────────────────
   Mirrors the Figma frame "Footer" (Website 2.0 → Tech template, node 1:4447).
   Reference frame is 1440×547: content from y=74, four columns on a 97px gutter,
   16/18px body copy, 36/47px headings, everything in navy. Every number below is
   the Figma value, so the two can be diffed against each other later. */
/* #f9fafc — the frame is white with the design's #d3dbe8 panel over it at 15%.
   Reading the fill colour alone gives a far heavier blue-grey than the design. */
footer { padding: 64px 0 32px; background: var(--off-white); color: var(--ink); }
footer .wrap { max-width: 1340px; margin: 0 auto; padding: 0 24px; }
/* row 1 is pinned to the height of a heading + four 36px lines (47 + 18 + 126).
   Left to auto, the two columns that span both rows would grow row 1 and push the
   "Get in touch" row below them — in the design it sits alongside them, at y=327. */
.foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 191px auto; column-gap: 96px; row-gap: 64px; margin-bottom: 96px; align-items: stretch;
  /* 4×245 + 3×97 = the 1271px content block of the Figma frame. Left-aligned inside
     the site wrap so the columns land on the same x as the design, and fluid below it. */
  max-width: 1271px; }
.foot-brand, .foot-col { display: flex; flex-direction: column; }
.foot-brand { grid-row: 1 / 3; }
.foot-meet { grid-row: 1 / 3; }
.foot-brand .logo img { height: 32px; width: auto; display: block; }
/* logo is 32px tall and the first link sits at y=139 → 106 + 33 */
.foot-legal-col { margin-top: var(--s-3); }
.foot-legal-col a { display: block; font-size: var(--fs-p-small); line-height: 18px;
  color: var(--ink); margin-bottom: 16px; transition: color var(--dur-fast); }
/* 16px text on an 18px line is an 18px target. On touch, pad every footer link out
   to 44px — and grow the pitch to match: trimming the margin instead made adjacent
   hit areas overlap by 8px, so a tap near the edge hit the wrong link. The Figma
   frame is a desktop one; a fine pointer keeps its exact 36px rhythm. */
@media (hover: none) and (pointer: coarse) {
  /* 44px exactly, from min-height rather than 16px of padding on an 18px line —
     that made every row 50px and the column six pixels taller per link for nothing.
     Still no margin between them, so adjacent targets stay flush and cannot overlap. */
  .foot-legal-col a, .foot-col a { display: flex; align-items: center; min-height: 44px; padding: 0; margin-bottom: 0; }
  .foot-brand .foot-email { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin-bottom: 0; }
  /* The social icons draw at 25px, which is the artwork, not the target. Pad the
     link out to 44px and drop the gap to keep the row the same width on screen. */
  .foot-social { gap: 0; margin-left: -8px; }
  .foot-social a { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .foot-talk { min-height: 44px; }   /* 24px of type; 8px of padding stopped at 40 */
  .nav-bar .logo { min-height: 44px; }
}
.foot-brand .foot-email { display: inline-block; margin-top: auto; font-size: var(--fs-p-small);
  line-height: 20px; color: var(--ink); transition: color var(--dur-fast); }
/* Footer links are navy at rest, so the site's ordinary "hover to navy" is a no-op
   here and the sheet had them fading to the muted grey instead -- the one place on
   the site where a link loses contrast when you point at it, which reads as
   disabled rather than interactive and drops it from 16:1 to 5.4:1 exactly when the
   reader is aiming at it. DS 09 lists underline behaviour among the restrained
   interactions a link may use; it gains emphasis instead of shedding it, and every
   link on the site now moves the same direction. */
.foot-brand .foot-email:hover, .foot-legal-col a:hover, .foot-col a:hover {
  color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; }
.foot-h { font-size: var(--fs-h2); font-weight: 400; line-height: 47px; color: var(--ink); margin: 0 0 16px; }
.foot-col a { display: block; font-size: var(--fs-p-small); line-height: 18px;
  color: var(--ink); margin-bottom: 16px; transition: color var(--dur-fast); }
.foot-office b, .foot-office span { display: block; font-size: var(--fs-p-small);
  line-height: 18px; color: var(--ink); margin-bottom: 16px; }
.foot-office b { font-weight: 700; }
.foot-office span:last-child { margin-bottom: 0; }
/* Cluj block ends at y=229, London starts at y=282 */
.foot-office + .foot-office { margin-top: 48px; }
.foot-touch { grid-column: 3 / -1; grid-row: 2; align-self: start; display: flex;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.foot-touch .foot-h { margin: 0; }
/* 8px of gap plus 4px of padding on each mark reads as the same 16px pitch the
   design has, with a plate to hover. The plate must come from padding and nothing
   else: the touch-target block above sets width/height/margin on this same selector
   at the same specificity but earlier in the file, so any box property declared here
   would beat it and quietly shrink the tap target from 44px back to the artwork. */
.foot-social { display: flex; align-items: center; gap: 8px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; color: var(--ink); border-radius: var(--r-sm);
  transition: background var(--dur-fast) ease; }
.foot-social img { width: 24px; height: 24px; display: block; }
.foot-social a:hover { background: var(--soft-hover); color: var(--ink); }
.foot-talk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-subtitle);
  font-weight: 400; line-height: 24px; color: var(--ink); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1px; }
.foot-talk svg { width: 24px; height: 24px; flex-shrink: 0; }
.foot-talk svg { transition: transform var(--dur) var(--ease); }
.foot-talk:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .foot-talk:hover svg { transform: none; } }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 32px 24px; flex-wrap: wrap; max-width: 1271px; }
.foot-badges { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* the four badges are the Figma exports at their own intrinsic sizes (128/165/138/129
   wide) — forcing a common height made the row 73px wider than the design and it
   wrapped onto a second line once the images actually loaded */
.foot-badges img { display: block; }   /* size comes from the width/height attributes = the Figma node sizes */
.foot-copy { display: flex; flex-direction: column; gap: 5px; text-align: right; }
/* the copyright and the certification line are sentences, not badges */
/* 12, not 16: the frame sets both lines at 12 (1333:367/368), and the size is what
   lets them sit on the badge row instead of wrapping under it. At 16 the ISO
   sentence alone runs ~790px, which blows past what .foot-bottom has left beside
   632px of badges and drops the whole block onto its own line. */
.foot-copy b { color: var(--ink); font-size: var(--fs-p-smallest); font-weight: 700; line-height: 1.3; }
.foot-copy p { font-size: var(--fs-p-smallest); font-weight: 400; line-height: 1.3; color: var(--ink); }
.marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 95%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 48px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* 60 and .82, the same cap and the same tone the client grid uses further down the
   homepage — the two logo strips were drawing 68 at .9 up here against 48 at .82
   down there, so the same mark changed size and weight between them. The frame
   caps its grid marks at 60 (1315:1794). */
.marquee-track img { height: 60px; width: auto; object-fit: contain; opacity: 0.82; flex-shrink: 0; }
/* A 68px logo is ~200px wide, so a 390px phone showed one and a half of them and
   the mask cut the second mid-word. Smaller marks and a tighter gap put three on
   screen, which is what makes it read as a row of clients rather than a mistake. */
@media (max-width: 680px) {
  .marquee-track { gap: 32px; }
  .marquee-track img { height: 40px; }
}
/* The desktop bar (logo + 6 items + CTA) needs ~950px; below that it clipped the
   "Book a call" button clean off the edge — so the burger takes over at 1023px. */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  /* the right-hand push came from .nav-links' margin-right:auto — with the links
     hidden, the CTA/burger cluster collapsed back against the logo */
  .nav-cta { margin-left: auto; }
  .mega-area { display: none; }
  /* The desktop rule gives .nav-links a margin-left to sit clear of the logo.
   On the absolutely-positioned mobile panel that margin survives and pushed
   the panel 44px right of the header bar while left/right:0 held it flush to
   the screen edge. Pin it to the bar's own 24px inset and clear the margin. */
.nav-links.open { display: flex; position: absolute; top: var(--bar-h); left: 24px; right: 24px; margin: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--white); padding: var(--s-2); border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--bar-h) - 42px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-links.open .nav-item { width: 100%; }
  .nav-links.open .nav-item > a { padding: 16px 16px; width: 100%; border-radius: var(--r-md); justify-content: space-between; }
  .nav-links.open .nav-item.open > a { background: var(--menu-hover); }
  /* the mega-menu is desktop-only, so its links are re-exposed here as sub-lists
     (built by shell.js) — otherwise no service page is reachable on a phone.
     They are a drill-down, not an accordion: opening one slides it in from the right
     and replaces the root list, so a phone shows one level at a time and gets a back
     button rather than a long scroll of expanded sections. */
  /* the row drills sideways now, so the caret points the way it goes rather than
     down, which is accordion language */
  .nav-links.open .nav-item.has-drop .caret { transform: rotate(-90deg); }
  /* Both levels are in the drawer at once and slide past each other, so the move is
     animated in both directions rather than only on the way in. The root sits in a
     wrapper shell.js adds; the panel is absolute over it, and shell.js animates the
     drawer's own height between the two so nothing jumps. */
  .nav-links.open { overflow: hidden; transition: height var(--dur) var(--ease); }
  .nav-root { display: flex; flex-direction: column; align-items: stretch; gap: 2px; max-height: 100%; overflow-y: auto;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .nav-links.open.drilled .nav-root { transform: translateX(-32px); opacity: 0; visibility: hidden; }
  /* z-index and a ground of its own: on the way back the panel slides out OVER the
     root list rather than cross-fading through it, which was the muddy part of the
     return. Without a background the drawer showed both levels at once mid-slide. */
  .nav-links.open .nav-sub { display: block; position: absolute; z-index: 2;
    left: var(--s-2); right: var(--s-2); top: var(--s-2); max-height: calc(100% - var(--s-4)); overflow-y: auto;
    background: var(--white); border-radius: var(--r-md);
    transform: translateX(100%); opacity: 0; visibility: hidden;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur); }
  .nav-links.open .nav-sub.open { transform: none; opacity: 1; visibility: visible; }
  /* Coming back, the panel does not travel. Sliding it out meant watching a screen of
     text move sideways and get clipped at the drawer's edge, which is the part that
     kept reading as wrong. It stays where it is and fades, and the root list slides
     back underneath it — the motion belongs to the level that is arriving, not the one
     that is leaving. Later than the .open rule so it wins the exit. */
  .nav-links.open .nav-sub.leaving { transform: none; opacity: 0; visibility: visible;
    transition: opacity var(--dur-fast) var(--ease); pointer-events: none; }
  /* min-height rather than taller padding: the row still needs §17's 44px, and 12px
     of padding is not on the spacing scale */
  /* direct children only. .nav-sub a also matched the promo's own button, and at
     0,2,0 it outranked .btn — so the CTA lost btn-sm's padding and picked up this
     row's 16px gap, which is what pushed the arrow away from the label. */
  .nav-sub > a { display: flex; align-items: center; min-height: 44px; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-p-small); font-weight: 500; color: var(--text-dim); }
  .nav-sub > a:hover, .nav-sub > a:focus-visible { background: var(--menu-hover); color: var(--ink); }
  /* the back control reads as a heading with an affordance, so it carries the section
     name — on a panel of nine links, "Back" alone does not say back to what */
  .nav-back { display: flex; align-items: center; gap: var(--s-1); width: 100%; min-height: 44px;
    padding: var(--s-1) var(--s-2); margin-bottom: 4px; border: 0; border-radius: var(--r-md);
    background: var(--menu-hover); color: var(--ink); font: inherit; font-weight: 600;
    text-align: left; cursor: pointer; }
  .nav-back svg { width: 16px; height: 16px; flex-shrink: 0; }
  .nav-back:hover, .nav-back:focus-visible { background: var(--soft-hover); }
  /* the icon cloned from the mega item sits where it does on desktop, ahead of the
     label, at the same 24px */
  .nav-sub > a { gap: var(--s-2); }
  .nav-sub > a .mi-ic { width: 24px; height: 24px; flex-shrink: 0; display: block; }
  .nav-sub > a .mi-ic img { display: block; width: 24px; height: 24px; }
  /* the promo is the mega-menu's third column, cloned in under the links. It is
     already a fluid flex column, so it only needs room above it and its plane pulled
     in — 130px of aeroplane at the top right of a 300px panel sat on the title. */
  .nav-sub .mega-promo { margin-top: var(--s-2); padding: var(--s-3); }
  .nav-sub .mega-promo .plane { width: 96px; top: var(--s-2); right: var(--s-1); }
  .nav-sub .mega-promo .pfoot { flex-wrap: wrap; }
  .nav-sub .mega-promo .btn { min-height: 44px; }
}
/* below ~680px the logo + "Book a call" + burger no longer fit on one line,
   so the CTA moves inside the panel instead of being pushed off the edge */
@media (max-width: 680px) {
  .nav-bar { padding: 0 16px 0 24px; }
  .nav-cta .btn { display: none; }
  .nav-links.open .nav-cta-mobile { display: inline-flex; margin: 8px 6px 4px; }
  /* whole bar scaled ~20% down for phones — height, logo, burger and radii move
     together, and .nav-links.open's offset must track the new bar height */
  .nav-inner { border-radius: var(--r-lg); }
  header.nav { top: 13px; --bar-h: 70px; }
  .logo svg { height: 22px; }
  .menu-toggle svg { width: 22px; height: 22px; }   /* 22 + 2×11 = exactly 44px of hit area */
  .nav-links.open { border-radius: var(--r); }
}
@media (max-width: 480px) {
  header.nav { padding: 0 16px; }
  header.nav::before { left: 16px; right: 16px; }   /* tracks the header's inset */
  /* the header tightens its inset here, and the panel has to follow it */
  .nav-links.open { left: 12px; right: 12px; }
  .logo svg { height: 20px; }
}
@media (max-width: 940px) {
  /* the Figma frame is desktop-only; below it the four columns fold to two and the
     97px gutter / 85px tail would leave craters, so they scale with the layout */
  .foot-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
    column-gap: 48px; row-gap: 48px; margin-bottom: 64px; }
  .foot-touch { align-self: auto; }
  /* the desktop row/column spans assume 4 columns — reset them or the browser
     invents a 3rd column and shoves the block outside the footer */
  .foot-brand, .foot-meet { grid-row: auto; }
  .foot-touch { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 680px) {
  .svc-grid, .testi-grid, .foot-grid { grid-template-columns: 1fr; }
  /* stacked, the five blocks run down the screen instead of across it, so the gap
     that separates columns on a wide screen reads as a gulf between rows */
  .foot-grid { gap: var(--s-3); margin-bottom: var(--s-3); }
  footer { padding: var(--s-5) 0 var(--s-3); }
  .foot-badges { gap: 16px; }
  .foot-badges img { max-width: 100%; height: auto; }
  .foot-bottom { align-items: flex-start; gap: var(--s-2); }
  .foot-copy { text-align: left; }
  /* One column per section, but the link lists inside each section pair up two-across —
     a single stacked column made the footer several screens tall on a phone. */
  .foot-legal-col, .foot-meet, .foot-give { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .foot-meet .foot-h, .foot-give .foot-h { grid-column: 1 / -1; }
  .foot-office + .foot-office { margin-top: 0; }
  .foot-touch { justify-content: flex-start; gap: 16px 24px; }
  .foot-touch .foot-talk { margin-left: 0; }
  .foot-h { margin-bottom: 16px; }
  .foot-brand .logo img { height: 29px; }
}

/* the sticky mobile CTA moved to base.css — /download uses it too and does not
   load this sheet. What stays here is the one rule that is about the footer. */
@media (max-width: 680px) {
  /* only where the bar can still be up at the bottom of the page. shell.js adds
     .mcta-clears when it wires the observer that hides the bar over the contact
     section, which every page with a form has directly above its footer. */
  body.has-mcta:not(.mcta-clears) footer { padding-bottom: 96px; }   /* keep the last footer row reachable */
}