/* Ceazers 3D - refinements.css | ui-ux-pro-max accessibility + contrast overrides */


    /* ============================================================
       UI/UX REFINEMENT PASS — Accessibility · Contrast · Polish
       ui-ux-pro-max v2.5.0 | 2026-04-17
    ============================================================ */

    /* Skip-to-main-content (keyboard & screen-reader accessibility) */
    .skip-link {
      position: absolute;
      top: -120%;
      left: 16px;
      padding: 12px 22px;
      background: var(--color-accent);
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 600;
      border-radius: 0 0 var(--radius-md) var(--radius-md);
      z-index: 99999;
      text-decoration: none;
      transition: top 0.18s ease;
      box-shadow: 0 4px 20px rgba(14,165,233,0.4);
    }
    .skip-link:focus {
      top: 0;
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    /* ── Global focus-visible ring ─────────────────────────────── */
    /* Keyboard users get a clear 2px ring; mouse users don't */
    *:focus { outline: none; }
    *:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
      border-radius: 4px;
    }
    .btn:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 4px;
      box-shadow: 0 0 0 5px rgba(14,165,233,0.18);
    }
    /* Inputs already show their own focus ring — no double outline */
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: none;
    }

    /* ── WCAG AA Contrast: dark section text ───────────────────── */
    /* Hero subtitle  (was 0.58 → 0.72, bumps contrast ~6.4:1) */
    .hero-subtitle      { color: rgba(255,255,255,0.72); }

    /* Hero stat labels (was 0.40 → 0.65, bumps contrast ~5.5:1) */
    .stat-label         { color: rgba(255,255,255,0.65); }

    /* Why section — feature descriptions (was 0.48 → 0.68) */
    .why-feature-desc   { color: rgba(255,255,255,0.68); }

    /* Why section — stat-card labels (was 0.40 → 0.65) */
    .why-stat-label     { color: rgba(255,255,255,0.65); }

    /* About section — body copy (was 0.57 → 0.72) */
    .about-body         { color: rgba(255,255,255,0.72); }

    /* About section — card text (was 0.48 → 0.68) */
    .about-card-text    { color: rgba(255,255,255,0.68); }

    /* Section subtitles on dark backgrounds (was 0.60 → 0.75) */
    .section-subtitle--light { color: rgba(255,255,255,0.75); }

    /* Estimator alt material note (was 0.40 → 0.60) */
    .est-ai-alt         { color: rgba(255,255,255,0.60); }

    /* Footer — improved legibility across the board */
    .footer-tagline                    { color: rgba(255,255,255,0.55); }
    .footer-col-title                  { color: rgba(255,255,255,0.62); }
    .footer-links a                    { color: rgba(255,255,255,0.62); }
    .footer-copy                       { color: rgba(255,255,255,0.50); }
    .footer-bottom-links a             { color: rgba(255,255,255,0.50); }
    .footer-social-link                { color: rgba(255,255,255,0.60); }

    /* Tools strip label (was 0.30 → 0.52) */
    .tools-strip-label  { color: rgba(255,255,255,0.52); }

    /* Tool names (was 0.72 — already good, keep) */

    /* ── Touch target minimums (mobile, WCAG 2.5.5) ────────────── */
    @media (max-width: 768px) {
      .btn {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
      }
      .mobile-menu a {
        min-height: 48px;
        display: flex;
        align-items: center;
      }
      .hamburger {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      input, select {
        min-height: 48px;
      }
      textarea { min-height: 128px; }
    }

    /* ── prefers-reduced-motion — comprehensive coverage ─────────── */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      /* Specific elements that need instant state change */
      .fade-up {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
      }
      .tool-card {
        opacity: 1 !important;
        transform: none !important;
      }
      .shape, .hero-scroll-cue,
      .hero-eyebrow::before,
      .process-connector,
      .wa-fab-icon::before,
      .cursor-glow {
        animation: none !important;
        transition: none !important;
      }
      .process-connector {
        opacity: 0.45;
        background: linear-gradient(90deg, transparent, #0EA5E9, #6366F1, transparent);
      }
    }

    /* ── Branded text selection ──────────────────────────────────── */
    ::selection {
      background: rgba(14,165,233,0.30);
      color: #fff;
    }

    /* ── Custom scrollbar — dark theme branding ─────────────────── */
    ::-webkit-scrollbar        { width: 7px; }
    ::-webkit-scrollbar-track  { background: var(--color-bg-dark); }
    ::-webkit-scrollbar-thumb  {
      background: rgba(14,165,233,0.28);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(14,165,233,0.52);
    }

    /* Prevent mid-word hyphenation on headings */
    .section-title,
    .hero-title,
    .cta-strip-title {
      hyphens: none;
      overflow-wrap: break-word;
      word-break: normal;
    }

    /* ── Mobile typography — tighter clamp() on small screens ──── */
    @media (max-width: 480px) {
      .hero-title  { font-size: clamp(2rem, 9vw, 2.8rem); }
      .section-title { font-size: clamp(1.5rem, 6.5vw, 2rem); }
      .hero-stats  { gap: 22px; }
      .stat-value  { font-size: 1.5rem; }
    }

    /* ── Card hover shadow depth — consistent elevation scale ───── */
    .service-card:hover,
    .project-card:hover,
    .client-card:hover,
    .material-card:hover {
      box-shadow: 0 16px 52px rgba(0,0,0,0.13), 0 4px 18px rgba(14,165,233,0.07);
    }
    .why-stat-card:hover,
    .about-card:hover {
      box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 10px rgba(14,165,233,0.08);
    }

    /* ── Print styles ────────────────────────────────────────────── */
    @media print {
      #navbar, .scroll-progress, .layer-counter,
      .wa-fab, .hero-shapes, .hero-scroll-cue,
      .cursor-glow, #scrollProgress { display: none !important; }
      body { background: #fff; color: #111; }
      .hero-title, .section-title--light,
      .why-feature-title, .about-card-title { color: #111 !important; }
      a { color: #0284C7; }