/* =========================================================
   Phones only (loaded with media="(max-width: 759px)").
   Desktop and tablet never read this file.
   ========================================================= */

/* nothing may push the page wider than the screen (stops Safari zooming out) */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* big fitted headings stay hidden until they're sized for this screen: no flash, no jump */
.js [data-fit]:not(.is-fit) { visibility: hidden; }

/* ---------- Hero ---------- */
.hero-title { top: 27vh; top: 27svh; padding-inline: 16px; }
.hero-title .line + .line { margin-top: 0.02em; }
.hero-front { left: -45%; right: -45%; }

/* ---------- Menu: solid, simple list ---------- */
.mobile-menu {
  justify-content: flex-start; gap: 0;
  padding: 112px 20px calc(28px + env(safe-area-inset-bottom));
  background: var(--black);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow-y: auto;
}
.mobile-menu ul { display: block; border-top: 1px solid var(--line); }
.mobile-menu li { border-bottom: 1px solid var(--line); }
.mobile-menu a.mm-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 4px;
  font-size: clamp(1.8rem, 9vw, 2.4rem); line-height: 1;
}
.mobile-menu a.mm-link::after {
  content: ""; width: 12px; height: 12px; margin-right: 6px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); opacity: .45;
}
.mobile-menu a.mm-link[aria-current="page"] { color: var(--gold-light); }
.mobile-menu a.mm-link[aria-current="page"]::after { opacity: 1; }
.mobile-menu .mm-foot {
  margin-top: auto; padding-top: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.mobile-menu .mm-foot .btn { width: 100%; padding: 0 12px; font-size: .95rem; }
.menu-open .site-header .nav-bar { background: var(--black); border-color: transparent; box-shadow: none; }

/* ---------- Tools: a tidy wall of pills instead of the moving line ---------- */
.ribbon .marquee { display: none; }
.ribbon { padding-block: 22px; }
.tool-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding-inline: 16px;
}
.tool-pills li {
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(8,6,5,.55); border: 1px solid rgba(251,231,178,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .86rem; font-weight: 500; color: var(--cream);
}
.tool-pills li:nth-child(3n+1) { color: var(--gold-light); }
.js .tool-pills li { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i) * 30ms); }
.js .tool-pills.is-in li { opacity: 1; transform: none; }
.marquee-note { text-align: center; }

/* ---------- Work + Contact headings: comfortable size, never wider than the screen ---------- */
.page-hero { padding-top: 112px; }
.contact-hero { padding-top: 124px; }

/* hero buttons side by side so they always fit above the fold */
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-actions .btn { padding: 0 10px; font-size: .92rem; min-height: 48px; }
.hero-content { gap: 18px; }
.hero { min-height: 520px; }
@media (max-width: 389px) { .hero-actions .btn { font-size: .84rem; padding: 0 6px; } }

/* ---------- Big headings: fixed sizes from the font's proportions (no script measuring) ----------
   width of each word = font-size x ratio, so font-size = available width / ratio */
.hero-title .line.outline-type { font-size: calc((100vw - 32px) / 5.12) !important; }
.hero-title .line:not(.outline-type) { font-size: calc((100vw - 32px) / 5.08) !important; }
.page-title { font-size: calc((100vw - 32px) / 4.12) !important; }
.contact-title { font-size: calc((100vw - 32px) / 7.34) !important; }
.contact-email { font-size: calc((100vw - 32px) / 8.9) !important; }
.about-title { font-size: calc((100vw - 32px) / 7.22) !important; }
.hero-title .line, .page-title, .contact-title, .contact-email, .about-title { max-width: 100%; white-space: nowrap; }