/* nav.css — H3 shell: nav (R1 logo plates), hamburger, menu overlay, shell link hovers,
   clock placeholder. Numbers cite docs/reports/H0.md (live measurements). */

/* ---------- nav entrance (home only — the appear manifest has id 2uznpr on / only) ----------
   H0 §6.1: translateY −60 → 0, delay 0.8 s, 1.8 s, ease [0.44, 0, 0.56, 1]. */
@media (prefers-reduced-motion: no-preference) {
  [data-page-type="home"] [data-nav] {
    animation: hwg-nav-in 1.8s cubic-bezier(0.44, 0, 0.56, 1) 0.8s both;
  }
}
@keyframes hwg-nav-in {
  from { transform: translateY(-60px); }
  to { transform: none; }
}

/* ---------- logo: two stacked plates, crossfaded (R1) ----------
   White plate (black text) over dark sections, black plate (white text) over light ones;
   with the menu open, always the white plate, as in the template (D40). The incoming plate fades in ON TOP of the outgoing one
   (350 ms ease-out); the outgoing one drops out underneath once covered, so the logo
   never goes semi-transparent mid-fade. */
.hwg-logo .hwg-plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}
.hwg-plate--white,
html[data-nav-theme="light"] .hwg-plate--black {
  opacity: 1;
  z-index: 2;
  transition: opacity 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hwg-plate--black,
html[data-nav-theme="light"] .hwg-plate--white {
  opacity: 0;
  z-index: 1;
  transition: opacity 0s linear 350ms;
}
/* Menu open: the WHITE plate, over any section, as in the original Framer template (D40, Janardhan
   2026-09-25). These come after the theme rules so they win at equal specificity. */
html.hwg-menu-open .hwg-plate--white {
  opacity: 1;
  z-index: 2;
  transition: opacity 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.hwg-menu-open .hwg-plate--black {
  opacity: 0;
  z-index: 1;
  transition: opacity 0s linear 350ms;
}
/* No hover state: the logo changes only with the section under the nav (Sivan, 2026-09-26 —
   replaces live's hover swap to the black plate, H0 §6.5). */
/* 44 px tall target, same layout box (the 110×19 slot is centred in the 96 px header). */
[data-nav] .framer-5wiiI .framer-1pqusmo-container {
  height: 44px;
  margin: -12.5px 0;
}

/* ---------- hamburger (a real <button>) ---------- */
.hwg-menu-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #fff;
  overflow: visible !important;
  -webkit-tap-highlight-color: transparent;
}
/* 48×44 target: the 24 px slot grows to 44 px with −10 px margins, so the header keeps its 96 px. */
[data-nav] .framer-5wiiI .framer-1035lth-container {
  height: 44px;
  margin: -10px 0;
}
.hwg-menu-btn .framer-1q2wq7a,
.hwg-menu-btn .framer-fja6el {
  display: block;
  background-color: #fff;
  transition:
    background-color 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 200ms cubic-bezier(0.28, -0.16, 0.52, 0.8),
    transform 331ms cubic-bezier(0.3, 0.26, 0.1, 1.2);
}
.hwg-menu-btn .framer-1q2wq7a { top: 16px; }
.hwg-menu-btn .framer-fja6el { bottom: 16px; }
/* Light variant (and the white menu panel): black lines — every theme change drives this
   state, so returning to the dark hero turns them white again (live bug not copied). */
html[data-nav-theme="light"] .hwg-menu-btn,
html.hwg-menu-open .hwg-menu-btn { color: #000; }
html[data-nav-theme="light"] .hwg-menu-btn .framer-1q2wq7a,
html[data-nav-theme="light"] .hwg-menu-btn .framer-fja6el,
html.hwg-menu-open .hwg-menu-btn .framer-1q2wq7a,
html.hwg-menu-open .hwg-menu-btn .framer-fja6el { background-color: #000; }
/* hover (closed): the two lines swap lengths, as the Framer hover variant does */
@media (hover: hover) and (pointer: fine) {
  .hwg-menu-btn[aria-expanded="false"]:hover .framer-1q2wq7a { width: 28px; }
  .hwg-menu-btn[aria-expanded="false"]:hover .framer-fja6el { width: 48px; }
}
/* open: × — both lines 36 px, centred, rotated ∓20° at rest and ∓35° while hovered
   (live: "open, pointer away" = ∓20°, "open, hovered" = ∓35°; H0 §5.4: 331 ms open / 318 ms
   close). Touch devices have no hover, so they always show the ∓20° rest state, as on live. */
.hwg-menu-btn[aria-expanded="true"] .framer-1q2wq7a,
.hwg-menu-btn[aria-expanded="true"] .framer-fja6el { width: 36px; }
.hwg-menu-btn[aria-expanded="true"] .framer-1q2wq7a { transform: translate(-6px, 5px) rotate(-20deg); }
.hwg-menu-btn[aria-expanded="true"] .framer-fja6el { transform: translate(-6px, -5px) rotate(20deg); }
@media (hover: hover) and (pointer: fine) {
  .hwg-menu-btn[aria-expanded="true"]:hover .framer-1q2wq7a { transform: translate(-6px, 5px) rotate(-35deg); }
  .hwg-menu-btn[aria-expanded="true"]:hover .framer-fja6el { transform: translate(-6px, -5px) rotate(35deg); }
}
/* JS off: the button cannot open anything (and could not follow the theme), so it is not
   shown; the footer menu below carries the same links. menu.js sets html.hwg-js first thing. */
html:not(.hwg-js) [data-menu-button] { visibility: hidden; }
/* Forced colours (Windows High Contrast) reset the lines' background-color, which would leave
   a focusable but invisible button; paint them in the system text colour instead. */
@media (forced-colors: active) {
  .hwg-menu-btn :is(.framer-1q2wq7a, .framer-fja6el) {
    forced-color-adjust: none;
    background-color: CanvasText !important;
  }
}

/* ---------- theme switch: no transition until nav.js has set the real state ---------- */
html:not(.hwg-nav-ready) .hwg-plate,
html:not(.hwg-nav-ready) .hwg-menu-btn .framer-1q2wq7a,
html:not(.hwg-nav-ready) .hwg-menu-btn .framer-fja6el { transition: none !important; }

/* ---------- menu overlay ----------
   Live: the nav's white Background grows from the top edge to the full viewport
   (418 ms open / 401 ms close, spring fits below) and the content, clipped by it, rises
   48 px over ≈418 ms starting ≈70–100 ms after the panel (H0 overlay-open.summary.json:
   106→524 ms at 1440, 72→487 at 768, 98→513 at 390; fit (0.24,0.04,0.32,1.02)).
   Here the whole overlay is revealed by a clip-path with the same curves. */
.hwg-menu {
  position: fixed;
  inset: 0;
  z-index: 9; /* under the fixed nav (z 10: logo + × stay on top), over the page (z ≤ 1) */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* keyboard focus scrolled into view must clear the fixed nav band (0–96 px) */
  scroll-padding-top: 104px;
  scroll-padding-bottom: 16px;
  background-color: #fff;
  color: #000;
  clip-path: inset(0 0 100% 0);
}
.hwg-menu[hidden] { display: none; }
.hwg-menu.is-open {
  clip-path: inset(0 0 0 0);
  transition: clip-path 418ms cubic-bezier(0.3, 0.1, 0, 1.26);
}
.hwg-menu.is-closing {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 401ms cubic-bezier(0.32, 0.38, 0.02, 1.2);
}
.hwg-menu__body {
  position: relative;
  box-sizing: border-box;
  min-height: 100%;
  padding: 96px 0 48px;
  transform: translateY(48px);
}
.hwg-menu.is-open .hwg-menu__body {
  transform: none;
  transition: transform 420ms cubic-bezier(0.24, 0.04, 0.32, 1.02) 80ms;
}
.hwg-menu.is-closing .hwg-menu__body { opacity: 0; } /* live: content unmounts at close */
.hwg-menu__slot { display: flex; justify-content: center; }
.hwg-menu__slot > .framer-XNisY {
  height: auto !important;
  min-height: calc(100vh - 144px);
  min-height: calc(100svh - 144px);
  cursor: auto;
}
.hwg-menu__slot--auto > .framer-XNisY { min-height: 0; }
html.hwg-menu-open,
html.hwg-menu-open body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) {
  .hwg-menu,
  .hwg-menu.is-open,
  .hwg-menu.is-closing,
  .hwg-menu__body,
  .hwg-menu.is-open .hwg-menu__body,
  .hwg-menu-btn .framer-1q2wq7a,
  .hwg-menu-btn .framer-fja6el { transition: none !important; }
  .hwg-menu__body { transform: none; }
}

/* ---------- shell links: never the UA link colours (live bug: rgb(0,0,238) on hover) ---------- */
:is([data-nav], .hwg-menu, [data-section="footer"], [data-section="cta"]) a:not(.framer-text):is(:link, :visited, :hover, :active, :focus) {
  color: inherit; /* rich-text links (a.framer-text, e.g. the legal row) keep Framer's link colour tokens */
}
:is([data-nav], .hwg-menu, [data-section="footer"], [data-section="cta"]) a:focus-visible,
.hwg-menu-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* The ring must contrast with the surface it sits on, not with the link's own colour:
   white over the dark CTA photo and over a dark section under the nav (the logo has no
   text colour of its own — currentColor would be black on the black hero). */
[data-section="cta"] a:focus-visible,
html[data-nav-theme="dark"]:not(.hwg-menu-open) [data-nav] a:focus-visible { outline-color: #fff; }
/* The CTA pill sits flush against clipping ancestors (.framer-lf606 / .framer-eheviz,
   overflow:hidden) at ≤1199 px, which would cut an outside ring on two sides — draw its
   ring inside the white pill instead, in black (all widths, so it looks the same everywhere). */
[data-section="cta"] .hwg-cta-button:focus-visible {
  outline: 2px solid #000;
  outline-offset: -5px;
}
/* The legal row ("Bottom Content") clips to its 16.8 px line box; let the 18 px links'
   focus ring show (nothing else in the row overflows — screenshot diff 0 px at rest). */
:is(.hwg-menu, [data-section="footer"]) .framer-x4lw4g { overflow: visible; }
.framer-XNisY:focus { outline: none; }

/* menu / footer / social links — H0 hover/footer-link + linkedin summaries: the resting arrow
   slides out while the hover arrow slides in (23 px); text keeps its colour.
   Right arrows 200 ms fit (0.22,−0.1,0.38,0.96); up-right (LinkedIn) 216 ms fit (0.26,−0.02,0.32,1). */
.hwg-arrow-link .framer-2c0l-container,
.hwg-arrow-link .framer-1q045v2-container,
.hwg-arrow-right .framer-2c0l-container,
.hwg-arrow-right .framer-1q045v2-container {
  transition: transform 200ms cubic-bezier(0.22, -0.1, 0.38, 0.96);
}
.hwg-arrow-upright .framer-2c0l-container,
.hwg-arrow-upright .framer-1q045v2-container {
  transition: transform 216ms cubic-bezier(0.26, -0.02, 0.32, 1);
}
.hwg-arrow-right:is(:hover, :focus-visible) .framer-2c0l-container,
.hwg-arrow-right:is(:hover, :focus-visible) .framer-1q045v2-container { transform: translateX(23px); }
.hwg-arrow-upright:is(:hover, :focus-visible) .framer-2c0l-container,
.hwg-arrow-upright:is(:hover, :focus-visible) .framer-1q045v2-container { transform: translate(23px, -23px); }

/* email + "Book a Call": the 2 px underline draws across on hover — H0 hover/footer-email:
   1 → 444 px in 417 ms, fit (0.32,0.44,0,1.18); opacity 198 ms, fit (0.26,0,0.36,0.98).
   Drawn with transform: scaleX (not width), so the hover never triggers layout. */
.hwg-line-link .framer-1twra6v {
  width: 100%;
  right: auto;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 417ms cubic-bezier(0.32, 0.44, 0, 1.18), opacity 198ms cubic-bezier(0.26, 0, 0.36, 0.98);
}
.hwg-line-link:is(:hover, :focus-visible) .framer-1twra6v {
  transform: scaleX(1);
  opacity: 1 !important;
}

/* ---------- 44 px targets on phones (≤809 px) ----------
   Link rows are 25 px (menu) / 17 px (legal) tall on live; at the phone breakpoint every
   shell link gets a 44 px row (list gap folded into the row, so rows sit 44 px apart
   instead of 37 px). */
@media (max-width: 809.98px) {
  :is(.hwg-menu, [data-section="footer"]) :is(.framer-1i5jlce, .framer-zaaxxc) { gap: 0; }
  .hwg-arrow-link,
  .hwg-line-link { min-height: 44px; }
  .hwg-legal-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  :is(.hwg-menu, [data-section="footer"]) .framer-XNisY .framer-1u83akd { gap: 0; }
}

/* ---------- clocks: never show the SSR timestamp ----------
   The Framer "Time" placeholders (hero, contact, footer, overlay) are filled by clock.js;
   until then (and with JS off) they stay blank rather than showing a stale time. */
.framer-Vz8Gj :is(.framer-1rr39cf-container, .framer-101p0hm-container) > p:not([data-clock-set]) {
  visibility: hidden;
}

/* ---------- footer rules: clipped to the footer ----------
   The two dotted vertical rules sit at top −48 px / 96 px tall so that, on live, they
   straddle the signup strip above the footer. D2 removed that strip, so the top half
   would poke 48 px into the dark CTA; clip it off (the footer half is unchanged). */
[data-section="footer"] .framer-u0ljeh-container { clip-path: inset(48px 0 0 0); }

/* ---------- email link: never cut off ----------
   hello@herewegodigital.com is 12.25 em wide at the 36 px preset — wider than a phone
   (and than the Tablet right column below ~930 px), so live clips ".com". Scale it down
   only where it would not fit; 36 px everywhere it does (1440 / 768 unchanged). */
@media (max-width: 809.98px) {
  :is(.hwg-menu, [data-section="footer"]) a[href^="mailto:"] .framer-text {
    --framer-font-size: min(36px, calc((100vw - 48px) / 12.3));
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  :is(.hwg-menu, [data-section="footer"]) a[href^="mailto:"] .framer-text {
    --framer-font-size: min(36px, calc((50vw - 56px) / 12.3));
  }
}