/*
 * Audit Fixes: Turnkey responsive layout, contrast, and visibility fixes
 */

/* 1. Global Viewport Containment: Fix mobile side-scroll / horizontal wobble */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  position: relative !important;
}

/* 2. Fix Mobile Brand Page Grid Overflows */
@media (max-width: 640px) {
  .lockups-grid {
    grid-template-columns: 1fr !important;
  }
  .lockup-card {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }
  .lockup-preview {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* 3. Hero stage & cursor mobile containment */
@media (max-width: 768px) {
  .avh-stage {
    overflow: hidden !important;
  }
  .avh-cursor {
    max-width: calc(100vw - 32px) !important;
  }
  /* Prevent decorative SVG ribbons from expanding layout */
  svg[class*="AnimatedRibbons"],
  div[class*="AnimatedRibbons"] {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

/* 4. Animation Fail-Safe: Ensure project text, journey cards, and previews are never invisible */
.framer-sneup7 span[style*="opacity:0.001"],
.framer-sneup7 span[style*="opacity: 0.001"],
.journey-card,
[data-framer-name="Visual Work Preview Item"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

[data-framer-name="Project 2"] img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Homepage introduction retains its original coloured, progressive text styling. */

/* 6. Suppress Framer Watermark Badge */
#__framer-badge-container,
.framer-badge {
  display: none !important;
}

/* 7. Canvas Dock Polish */
.av-dock {
  z-index: 100 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}
/* A visible escape route if a mirrored client route fails to render. */
.av-route-recovery{min-height:70vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:760px;margin:auto;padding:6rem 1.5rem;color:#1c1a22}
.av-route-recovery h1{font-size:clamp(2.5rem,7vw,5rem);line-height:1.05;letter-spacing:-.05em;margin:0 0 1rem}
.av-route-recovery p{font-size:1.125rem;line-height:1.6}
.av-route-recovery a{display:inline-block;margin:1rem 1rem 0 0;padding:.8rem 1.2rem;border:1px solid currentColor;border-radius:999px;color:inherit;text-decoration:none}
.av-route-recovery a:focus-visible{outline:3px solid #8a62dc;outline-offset:3px}

/* Reserve scrolling clearance for the fixed navigation and focused controls. */
body { padding-bottom: 110px !important; }
/* The footer carries its own bottom padding, so pages ending in it need no extra. */
body:has(footer) { padding-bottom: 0 !important; }
html { scroll-padding-bottom: 110px; }
:is(a, button, input, select, textarea, [tabindex]) { scroll-margin-bottom: 110px; }

/* Preserve the service cards and order, with readable spacing on small screens. */
@media (max-width: 810px) {
  [data-framer-name="Service card frame"] { display: grid !important; grid-template-columns: 1fr; gap: 24px !important; height: auto !important; padding: 24px 0 !important; overflow: visible !important; }
  [data-framer-name="Service card frame"] > .ssr-variant { display: contents !important; }
  [data-framer-name="Service card frame"] > .ssr-variant > div { position: relative !important; inset: auto !important; width: 100% !important; height: 280px !important; transform: none !important; opacity: 1 !important; }
}
@media (min-width: 600px) and (max-width: 810px) {
  [data-framer-name="Service card frame"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Darker shades keep the existing color families readable for small labels. */
.avh .status { color: #176847 !important; }
.avh-stage .flabel, .avg-flabel { color: #245da8 !important; }
.avg { --blue: #245da8; }
.avh .avh-layer.sel, .avh .avh-target b, .avh .flabel { color: #245da8 !important; }
.avh .avh-cursor.c1 .tag { background: #176847; }
.avh .avh-bar .who span:first-child { background: #176847 !important; }
.avh .avh-dims { background: #245da8; }
.framer-text[style*="--token-1e67be23"], .framer-text[style*="rgb(0, 143, 240)"] { --framer-text-color: #245da8 !important; color: #245da8 !important; }
.framer-text[style*="--token-e1510d18"], .framer-text[style*="rgb(244, 172, 40)"] { --framer-text-color: #8b5900 !important; color: #8b5900 !important; }

/* Small legacy hero label: white text needs the darker green. */
.framer-ih7km7 { background-color: #176847 !important; }

/* Remaining small-text contrast fixes from the six-route check. */
.framer-1btl9q3 { background-color: #176847 !important; }
.framer-p6qqgn .framer-text { color: #176847 !important; --framer-text-color: #176847 !important; }
a[href*="play.google.com/store/apps"] { color: #245da8 !important; }

/* Contact has explicit, independently focusable copy and compose actions. */
.av-email-link { display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:12px; color:#245da8; text-decoration:underline; font:500 14px/1.5 Inter,system-ui,sans-serif; }
.av-email-link:hover { color:#17221c; }
.av-email-link:focus-visible { outline:3px solid #245da8; outline-offset:4px; border-radius:4px; }
/* Consistent focus visibility on remaining interactive text controls. */
main a:focus-visible, footer a:focus-visible, footer button:focus-visible { outline:3px solid #245da8; outline-offset:4px; }

/* Framer resets button outlines; keep the contact focus indicator visible. */
footer button:focus-visible, [role="contentinfo"] button:focus-visible { outline:3px solid #245da8 !important; outline-offset:4px !important; }