/* ============================================================
   Mobile navigation — hamburger toggle + full-screen overlay.
   Toggle shows <=1040px (where .nav__links is hidden).
   ============================================================ */

/* ---- Hamburger toggle ---- */
.nav__toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:-10px;
  background:none;border:0;padding:0;
  color:var(--ink);cursor:pointer;z-index:210;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.nav__toggle svg{display:block;width:26px;height:26px}
.nav__toggle .nav__toggle-close{display:none}
body.menu-open .nav__toggle .nav__toggle-open{display:none}
body.menu-open .nav__toggle .nav__toggle-close{display:block}

/* ---- Overlay panel: clip-path wipe from the top ---- */
.nav__overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:var(--paper, #f3efe7);
  padding:24px 28px clamp(32px,7vh,64px);
  opacity:0;visibility:hidden;
  clip-path:inset(0 0 100% 0);            /* hidden: clipped to the top edge */
  transition:clip-path .6s cubic-bezier(.76,0,.24,1),
             opacity .4s ease,
             visibility .6s;
  overscroll-behavior:contain;
}
body.menu-open .nav__overlay{
  opacity:1;visibility:visible;
  clip-path:inset(0 0 0% 0);              /* open: full panel revealed */
}
/* closing: wipe back up off the bottom for an exit that mirrors entry */
body.menu-closing .nav__overlay{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .45s cubic-bezier(.76,0,.24,1),
             opacity .45s ease .05s,
             visibility .45s;
  opacity:0;
}

/* ---- Overlay header: wordmark + close ---- */
.nav__overlay-head{
  display:flex;align-items:center;justify-content:space-between;
  height:48px;flex:none;
}
.nav__overlay-brand{display:flex;align-items:center;line-height:0}
.nav__overlay-brand img{height:30px;width:auto;display:block}
.nav__overlay-close{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;padding:6px 0 6px 12px;cursor:pointer;
  color:var(--ink);
  font:500 11px/1 var(--mono, monospace);letter-spacing:.22em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
.nav__overlay-close svg{width:22px;height:22px;transition:transform .4s var(--ease, ease)}
.nav__overlay-close:hover svg,
.nav__overlay-close:active svg{transform:rotate(90deg)}

/* ---- Links: numbered, staggered reveal ---- */
.nav__overlay-links{
  display:flex;flex-direction:column;
  margin-top:auto;margin-bottom:auto;
  border-top:1px solid var(--rule, rgba(0,0,0,.12));
}
.nav__overlay-links a{
  display:flex;align-items:baseline;gap:18px;
  padding:14px 0;overflow:hidden;            /* clip the text as it wipes up */
  border-bottom:1px solid var(--rule, rgba(0,0,0,.12));
  color:var(--ink);text-decoration:none;
}
/* the NUMBER: fades + drops in, a beat after its word */
.nav__overlay-num{
  flex:none;width:2.2ch;
  font:500 12px/1 var(--mono, monospace);letter-spacing:.1em;
  color:var(--mute, #6b6660);
  transform:translateY(-.4em);
  opacity:0;
  transition:opacity .4s ease, color .3s var(--ease, ease);
}
/* the WORD: lives in an overflow-hidden row; enters by sliding up from below
   with a slight skew, exits by sliding further up and clipping away */
.nav__overlay-text{
  position:relative;display:inline-block;
  font-family:var(--serif, "Playfair Display", serif);font-weight:500;
  font-size:clamp(34px,10vw,52px);line-height:1;letter-spacing:-.01em;
  --slide:0px;
  transform:translate(var(--slide),110%) skewY(6deg);transform-origin:left bottom;
  transition:color .3s var(--ease, ease),
             transform .6s cubic-bezier(.22,.61,.36,1);
}

/* ---- ENTRANCE (open): forward stagger by --i ---- */
body.menu-open .nav__overlay-text{
  transform:translate(var(--slide),0) skewY(0);
  transition-delay:calc(.22s + var(--i, 0) * .07s);
}
body.menu-open .nav__overlay-num{
  opacity:1;
  transition-delay:calc(.34s + var(--i, 0) * .07s);
}

/* ---- EXIT (closing): reverse stagger — last item leaves first ---- */
body.menu-closing .nav__overlay-text{
  transform:translate(var(--slide),-120%) skewY(-5deg);
  transition-duration:.42s;
  transition-delay:calc((var(--n, 6) - var(--i, 0)) * .045s);
}
body.menu-closing .nav__overlay-num{
  opacity:0;transition-duration:.2s;
  transition-delay:calc((var(--n, 6) - var(--i, 0)) * .045s);
}
/* hover/active: slide right + go accent, with a leading rule that grows */
.nav__overlay-text::before{
  content:"";position:absolute;left:0;top:50%;
  width:0;height:2px;background:var(--accent, #ff002e);
  transform:translate(-14px,-50%);
  transition:width .35s var(--ease, ease);
}
.nav__overlay-links a:hover .nav__overlay-text,
.nav__overlay-links a:active .nav__overlay-text,
.nav__overlay-links a.is-active .nav__overlay-text{
  color:var(--accent, #ff002e);--slide:22px;
}
.nav__overlay-links a:hover .nav__overlay-text::before,
.nav__overlay-links a:active .nav__overlay-text::before,
.nav__overlay-links a.is-active .nav__overlay-text::before{width:14px}
.nav__overlay-links a:hover .nav__overlay-num,
.nav__overlay-links a.is-active .nav__overlay-num{color:var(--accent, #ff002e)}

/* ---- CTAs, staggered in after the links ---- */
.nav__overlay-ctas{
  display:flex;flex-direction:column;gap:12px;padding-top:24px;flex:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
body.menu-open .nav__overlay-ctas{
  opacity:1;transform:none;
  transition-delay:calc(.18s + var(--i, 6) * .06s);
}
body.menu-closing .nav__overlay-ctas{transition-delay:0s;transition-duration:.2s;opacity:0}
.nav__overlay-ctas a{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:17px 24px;border-radius:999px;
  font:500 16px/1 var(--sans, "Inter", sans-serif);text-decoration:none;
}
.nav__overlay-ctas a svg{width:20px;height:20px}
.nav__overlay-cta--primary{background:var(--accent, #ff002e);color:var(--paper, #f3efe7)}
.nav__overlay-cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--rule, rgba(0,0,0,.16))}


@media(max-width:1040px){ .nav__toggle{display:inline-flex} }
@media(min-width:1041px){ .nav__overlay{display:none} }

/* Tighten oversized desktop hero top-spacing on mobile (site-wide) */
@media(max-width:700px){
  .about-hero{padding:120px 0 8px}
  .arch-hero{padding:120px 0 8px}
  .case-hero{padding:120px 0 32px}
  .cta{padding:56px 0}
  /* dark numbered case block starts flush on desktop; give it top air on mobile */
  .case-section.dark-bg{padding-top:56px!important}
  /* "Read the case" buttons: full-width + sized to match the hero CTA on mobile */
  .case__cta{
    display:flex;width:100%;justify-content:center;
    padding:18px 26px;font-size:16px;
  }
}

/* Footer copyright glyph — bump the © so it optically matches the text */
.copy-mark{font-size:1.35em;line-height:1;vertical-align:middle;position:relative;top:-.04em}