/* Verrofied Media — static utility CSS
   This file contains a plain, pre-written CSS rule for every single
   className used in app.js. It replaces the Tailwind CDN script entirely,
   so there is no runtime JIT compiler that could fail to load, fail to
   finish scanning the page, or race against the page's own script. What
   you see is exactly what will render, every time, on any connection. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Browsers give <button> a default white/gray background and a visible
   border on their own — this is normally the very first thing a CSS
   framework's reset removes. Without it, every <button> in the app shows
   that native chrome through, which is what caused the white boxes around
   the nav logo and the "Get in Touch" pills. */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- layout / display ---------- */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.group { /* marker only */ }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }

/* ---------- position ---------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.-inset-8 { top: -2rem; right: -2rem; bottom: -2rem; left: -2rem; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.bottom-10 { bottom: 2.5rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* ---------- sizing ---------- */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-20 { height: 5rem; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.h-\[280px\] { height: 280px; }
.h-\[2px\] { height: 2px; }
.min-h-screen { min-height: 100vh; }
.min-h-0 { min-height: 0; }
.min-h-\[140vh\] { min-height: 140vh; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-\[460px\] { max-width: 460px; }
.object-contain { object-fit: contain; }

/* ---------- spacing ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-24 { margin-top: 6rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-28 { padding-top: 7rem; }
.p-7 { padding: 1.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* ---------- typography ---------- */
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-\[0\.65rem\] { font-size: 0.65rem; line-height: 1rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.05\] { line-height: 1.05; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.08em\] { letter-spacing: 0.08em; }
.tracking-\[0\.12em\] { letter-spacing: 0.12em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.align-bottom { vertical-align: bottom; }

/* ---------- borders / radius ---------- */
.rounded-full { border-radius: 9999px; }
.rounded-2xl { border-radius: 1rem; }

/* ---------- effects / transitions ---------- */
.opacity-0 { opacity: 0; }
.origin-left { transform-origin: left center; }
.scale-x-50 { transform: scaleX(0.5); }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.ease-out { transition-timing-function: cubic-bezier(0,0,0.2,1); }

/* ---------- group-hover ---------- */
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-x-100 { transform: scaleX(1); }

/* ============================================================
   Responsive variants — Tailwind default breakpoints
   sm: 640px   md: 768px   lg: 1024px
   ============================================================ */
@media (min-width: 640px) {
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:h-8 { height: 2rem; }
  .sm\:w-8 { width: 2rem; }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
  .sm\:tracking-\[0\.2em\] { letter-spacing: 0.2em; }
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:gap-20 { gap: 5rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:h-28 { height: 7rem; }
  .md\:h-\[560px\] { height: 560px; }
  .md\:min-h-screen { min-height: 100vh; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:px-16 { padding-left: 4rem; padding-right: 4rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* order utilities used without a breakpoint prefix on mobile-first base */
.order-1 { order: 1; }
.order-2 { order: 2; }