:root {
      --bg: #0A0E10;
      --surface: #121819;
      --card: #182022;
      --card-hover: #1F292C;
      --heading: #F0F0F0;
      --text: #9BA8AD;
      --muted: #5C6B71;
      --accent: #C4202A;
      --accent-hover: #E02530;
      --accent-dim: rgba(196,32,42,0.10);
      --accent-rgb: 196,32,42;
      --border: #1E2A2D;
      --border-light: #283538;
      --font-display: 'Bebas Neue', sans-serif;
      --font-body: 'Inter', sans-serif;
      --nav-height: 80px;
      --container: 1200px;
      --radius: 8px;
    }
    *,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
    html { scroll-behavior:smooth;scroll-padding-top:var(--nav-height);overflow-x:hidden; }
    body { font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased; }
    img { max-width:100%;height:auto; }

    @media(min-width:769px) { * { cursor:none !important; } }
    .cursor-dot { position:fixed;width:8px;height:8px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:10001;transition:width .2s,height .2s;transform:translate(-50%,-50%); }
    .cursor-ring { position:fixed;width:40px;height:40px;border:1.5px solid rgba(196,32,42,0.35);border-radius:50%;pointer-events:none;z-index:10000;transition:width .3s,height .3s,border-color .3s,background .3s;transform:translate(-50%,-50%); }
    .cursor-dot.hovering { width:14px;height:14px; }
    .cursor-ring.hovering { width:60px;height:60px;border-color:var(--accent);background:rgba(196,32,42,0.06); }
    @media(max-width:768px) { * { cursor:auto !important; } .cursor-dot,.cursor-ring { display:none !important; } }

    h1,h2,h3,h4 { font-family:var(--font-display);color:var(--heading);letter-spacing:.02em;line-height:1.1; }
    h1 { font-size:clamp(3rem,8vw,5.5rem); }
    h2 { font-size:clamp(2.2rem,5vw,3.5rem); }
    h3 { font-size:clamp(1.2rem,2vw,1.5rem);font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.3; }
    p { margin-bottom:1rem; }
    a { color:var(--accent);text-decoration:none;transition:color .3s; }
    a:hover { color:var(--accent-hover); }

    .container { max-width:var(--container);margin:0 auto;padding:0 2rem; }
    .section { padding:100px 0;position:relative;overflow:hidden; }
    .section-tag { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:1rem;display:inline-block; }
    .section-heading { margin-bottom:.75rem; }
    .section-sub { font-size:1.05rem;color:var(--text);max-width:600px;margin-bottom:3rem;line-height:1.7; }
    .accent-line { width:50px;height:3px;background:var(--accent);margin-bottom:2rem;border-radius:2px; }

    .btn { display:inline-flex;align-items:center;gap:.5rem;padding:14px 32px;border-radius:6px;font-family:var(--font-body);font-weight:600;font-size:.9rem;text-decoration:none;transition:all .3s;border:2px solid transparent;letter-spacing:.02em; }
    .btn-primary { background:var(--accent);color:#fff;border-color:var(--accent); }
    .btn-primary:hover { background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 25px rgba(196,32,42,.25);color:#fff; }
    .btn-outline { background:transparent;color:var(--heading);border-color:var(--border-light); }
    .btn-outline:hover { border-color:var(--heading);background:rgba(255,255,255,.04);transform:translateY(-2px);color:var(--heading); }
    .cta-group { display:flex;gap:1rem;flex-wrap:wrap;max-width:100%; }

    /* NAV */
    .nav { position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-height);display:flex;align-items:center;padding:0 2rem;transition:all .4s;background:transparent; }
    .nav.scrolled { background:rgba(10,14,16,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 4px 30px rgba(0,0,0,.3); }
    .nav-inner { max-width:var(--container);margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between; }
    .nav-logo img { height:32px;width:auto; }
    .nav-links { display:flex;gap:2rem;align-items:center; }
    .nav-links a { color:rgba(240,240,240,.6);text-decoration:none;font-size:.85rem;font-weight:500;transition:color .3s;position:relative; }
    .nav-links a::after { content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:width .3s; }
    .nav-links a:hover,.nav-links a.active { color:#fff; }
    .nav-links a:hover::after,.nav-links a.active::after { width:100%; }
    .nav-cta .btn { padding:10px 22px;font-size:.8rem; }
    .hamburger { display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;z-index:1002; }
    .hamburger span { width:22px;height:2px;background:#fff;transition:all .3s;display:block;border-radius:2px; }
    .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
    .hamburger.active span:nth-child(2) { opacity:0; }
    .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
    @media(max-width:768px) {
      .nav { padding:0 1rem; }
      .nav-links { position:fixed;top:0;right:-100%;width:75%;max-width:300px;height:100vh;background:var(--surface);flex-direction:column;padding:100px 2rem 2rem;gap:1.5rem;transition:right .4s;border-left:1px solid var(--border); }
      .nav-links.open { right:0; }
      .nav-cta { display:none; }
      .hamburger { display:flex; }
    }

    /* HERO */
    .hero { min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:var(--nav-height); }
    .hero-bg { position:absolute;inset:0;z-index:0;background-size:cover;background-position:center; }
    .hero-bg::after { content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,14,16,.94) 0%,rgba(10,14,16,.65) 50%,rgba(10,14,16,.88) 100%); }
    .hero-content { position:relative;z-index:2;max-width:780px; }
    .hero h1 { margin-bottom:1.25rem; }
    .hero h1 .accent { color:var(--accent); }
    .hero-desc { font-size:1.1rem;line-height:1.8;margin-bottom:2.5rem;max-width:620px;color:rgba(240,240,240,.7); }
    .hero-logo { height:42px;width:auto;margin-bottom:1.5rem;opacity:.85; }

    /* TRUST STRIP */
    .trust-strip { background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.25rem 0; }
    .trust-strip-inner { display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;align-items:center; }
    .trust-item { display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:500;color:rgba(240,240,240,.5); }
    .trust-item svg { width:16px;height:16px;color:var(--accent);flex-shrink:0; }

    /* SERVICES */
    .services-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem; }
    .service-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .4s;position:relative;overflow:hidden; }
    .service-card::before { content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--accent);transition:height .4s; }
    .service-card:hover { background:var(--card-hover);transform:translateY(-3px);border-color:var(--border-light); }
    .service-card:hover::before { height:100%; }
    .service-card-icon { width:48px;height:48px;border-radius:10px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem; }
    .service-card-icon svg { width:24px;height:24px;color:var(--accent); }
    .service-card h3 { margin-bottom:.75rem;font-size:1.1rem; }
    .service-card p { font-size:.88rem;line-height:1.7;margin-bottom:0; }

    /* ABOUT */
    .about-layout { display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start; }
    .about-text p { font-size:.95rem;line-height:1.8;margin-bottom:1.25rem; }
    .about-stats { display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2rem; }
    .stat-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center; }
    .stat-number { font-family:var(--font-display);font-size:2.5rem;color:var(--accent);line-height:1;margin-bottom:.25rem; }
    .stat-label { font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500; }
    .team-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem; }
    .team-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .4s;text-align:center; }
    .team-card:hover { transform:translateY(-3px);border-color:var(--border-light); }
    .team-photo { width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(15%);transition:filter .4s; }
    .team-card:hover .team-photo { filter:grayscale(0%); }
    .team-info { padding:1.25rem; }
    .team-name { font-family:var(--font-display);font-size:1.4rem;color:var(--heading);margin-bottom:.1rem; }
    .team-role { font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:.5rem; }
    .team-desc { font-size:.82rem;line-height:1.6;margin:0; }
    .avatar-placeholder { width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--card) 0%,var(--surface) 100%);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:3.5rem;color:var(--muted); }

    /* PROJECTS */
    .projects-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem; }
    .projects-grid .project-card { aspect-ratio:4/3; }
    .project-card { position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;transition:transform .3s ease-out,box-shadow .3s ease-out; }
    .project-card img { width:100%;height:100%;object-fit:cover;transition:transform .6s; }
    .project-card:hover img { transform:scale(1.03); }
    .project-overlay { position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.25rem;background:linear-gradient(to top,rgba(10,14,16,.88) 0%,transparent 55%);opacity:0;transition:opacity .4s; }
    .project-card:hover .project-overlay { opacity:1; }
    .project-label { font-family:var(--font-display);font-size:1.15rem;color:#fff;letter-spacing:.04em; }
    


    /* PROJECT FILTERS */
    .filter-bar { display:flex;gap:.5rem;justify-content:center;margin-bottom:2.5rem;flex-wrap:wrap; }
    .filter-btn { background:transparent;border:1px solid var(--border);color:var(--muted);padding:8px 20px;border-radius:100px;font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.03em;transition:all .3s;cursor:pointer; }
    .filter-btn:hover { border-color:var(--border-light);color:var(--heading); }
    .filter-btn.active { background:var(--accent);border-color:var(--accent);color:#fff; }
    .project-card { transition:transform .4s,opacity .4s; }
    .project-card.hidden { display:none; }
    .project-overlay { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem;background:linear-gradient(to top,rgba(10,14,16,.9) 0%,rgba(10,14,16,.3) 40%,transparent 60%);opacity:0;transition:opacity .4s; }
    .project-card:hover .project-overlay { opacity:1; }
    .project-tag { font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.25rem; }
    .project-label { font-family:var(--font-display);font-size:1.2rem;color:#fff;letter-spacing:.04em; }
    
    /* PROJECT FILTERS */
    .project-filters { display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap; }
    .filter-btn {
      background:transparent;border:1px solid var(--border);color:var(--muted);
      padding:8px 20px;border-radius:100px;font-family:var(--font-body);
      font-size:.82rem;font-weight:500;transition:all .3s;letter-spacing:.02em;
    }
    .filter-btn:hover { color:var(--heading);border-color:var(--border-light); }
    .filter-btn.active { background:var(--accent);border-color:var(--accent);color:#fff; }
    .project-card { transition:transform .4s,opacity .4s; }
    .project-card.hidden { display:none; }
    .project-type {
      display:block;font-family:var(--font-body);font-size:.72rem;
      color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;
      margin-top:.2rem;font-weight:500;
    }
    .project-overlay { flex-direction:column;justify-content:flex-end; }

    /* DIFFERENTIATORS */
    .diff-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem; }
    .diff-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .4s;position:relative; }
    .diff-card:hover { border-color:var(--border-light);transform:translateY(-2px); }
    .diff-number { font-family:var(--font-display);font-size:3rem;color:rgba(196,32,42,.12);position:absolute;top:.75rem;right:1.25rem;line-height:1; }
    .diff-card h3 { margin-bottom:.75rem; }
    .diff-card p { font-size:.88rem;line-height:1.7;margin:0; }

    /* PROCESS */
    .process-timeline { position:relative;max-width:780px;margin:0 auto; }
    .process-line { position:absolute;left:27px;top:0;bottom:0;width:2px;background:var(--border); }
    .process-line-fill { width:100%;height:0;background:var(--accent);transition:height 1.5s; }
    .process-step { display:flex;gap:1.75rem;margin-bottom:2.5rem;position:relative;align-items:flex-start; }
    .process-step:last-child { margin-bottom:0; }
    .step-marker { width:54px;height:54px;border-radius:50%;flex-shrink:0;background:var(--card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.3rem;color:var(--accent);transition:all .4s;position:relative;z-index:2; }
    .process-step.active .step-marker { background:var(--accent);border-color:var(--accent);color:#fff; }
    .step-content { padding-top:.5rem; }
    .step-content h3 { margin-bottom:.5rem; }
    .step-content p { font-size:.88rem;line-height:1.7;margin:0; }

    /* CONTACT */
    .contact-layout { display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start; }
    .contact-info p { font-size:1rem;line-height:1.8;margin-bottom:2rem; }
    .contact-detail { display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem; }
    .contact-detail-icon { width:42px;height:42px;border-radius:10px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .contact-detail-icon svg { width:18px;height:18px;color:var(--accent); }
    .contact-detail-text { font-size:.9rem;color:var(--heading); }
    .contact-detail-text span { display:block;font-size:.78rem;color:var(--muted);margin-top:2px; }
    .contact-form { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2.25rem; }
    .form-group { margin-bottom:1.1rem; }
    .form-group label { display:block;font-size:.82rem;font-weight:500;color:var(--heading);margin-bottom:.35rem; }
    .form-group input,.form-group select,.form-group textarea { width:100%;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--heading);font-family:var(--font-body);font-size:.88rem;transition:border-color .3s,box-shadow .3s;outline:none; }
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,32,42,.08); }
    .form-group textarea { min-height:110px;resize:vertical; }
    .form-group select { appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6B71' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px; }
    .form-row { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }

    /* FOOTER */
    .footer { background:var(--surface);border-top:1px solid var(--border);padding:3rem 0 1.5rem; }
    .footer-top { display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem;margin-bottom:2rem; }
    .footer-brand { display:flex;flex-direction:column;gap:.75rem; }
    .footer-brand-logos { display:flex;align-items:center;gap:.75rem; }
    .footer-brand-logos .f-icon { height:32px;width:auto; }
    .footer-brand-logos .f-word { height:22px;width:auto; }
    .footer-tagline { font-size:.82rem;color:var(--muted);max-width:280px;line-height:1.5; }
    .footer-contact { display:flex;flex-direction:column;gap:.35rem; }
    .footer-contact a { color:var(--text);font-size:.85rem;transition:color .3s; }
    .footer-contact a:hover { color:var(--accent); }
    .social-links { display:flex;gap:.6rem; }
    .social-link { width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;transition:all .3s;border:1px solid var(--border); }
    .social-link:hover { background:var(--accent);border-color:var(--accent); }
    .social-link svg { width:15px;height:15px;color:var(--text);transition:color .3s; }
    .social-link:hover svg { color:#fff; }
    .footer-bottom { text-align:center;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--muted); }

    /* UTILITIES */
    .back-to-top { position:fixed;bottom:2rem;right:2rem;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;transform:translateY(20px);transition:all .3s;border:none;box-shadow:0 4px 15px rgba(196,32,42,.25); }
    .back-to-top.visible { opacity:1;transform:translateY(0); }
    .back-to-top:hover { background:var(--accent-hover);transform:translateY(-3px); }
    .back-to-top svg { width:18px;height:18px; }
    .toast { position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--card);border:1px solid var(--accent);color:var(--heading);padding:1rem 2rem;border-radius:var(--radius);z-index:9999;font-size:.88rem;font-weight:500;opacity:0;transition:all .4s;box-shadow:0 8px 30px rgba(0,0,0,.5); }
    .toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
    .mobile-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s; }
    .mobile-overlay.active { opacity:1;pointer-events:all; }

    /* Logo accent used throughout - inline cube icon */
    .inline-logo { height:28px;width:auto;vertical-align:middle;margin-right:.5rem; }

    /* ANIMATIONS */
    .reveal { opacity:0;transform:translateY(25px);transition:opacity .7s,transform .7s; }
    .reveal.revealed { opacity:1;transform:translateY(0); }
    .reveal-left { opacity:0;transform:translateX(-30px);transition:opacity .7s,transform .7s; }
    .reveal-left.revealed { opacity:1;transform:translateX(0); }
    .reveal-right { opacity:0;transform:translateX(30px);transition:opacity .7s,transform .7s; }
    .reveal-right.revealed { opacity:1;transform:translateX(0); }
    .stagger-grid .reveal { transition-delay:calc(var(--i,0) * .1s); }
    @keyframes fadeInUp { from { opacity:0;transform:translateY(35px); } to { opacity:1;transform:translateY(0); } }
    .hero-content > * { opacity:0;animation:fadeInUp .8s ease forwards; }
    .hero-content > *:nth-child(1) { animation-delay:.2s; }
    .hero-content > *:nth-child(2) { animation-delay:.4s; }
    .hero-content > *:nth-child(3) { animation-delay:.6s; }
    .hero-content > *:nth-child(4) { animation-delay:.8s; }

    /* RESPONSIVE */
    @media(max-width:768px) {
      .section { padding:60px 0; }
      .container { padding:0 1.25rem; }
      .hero h1 { font-size:clamp(2.2rem,7vw,3.5rem); }
      .hero-desc { font-size:1rem; }
      .hero-logo { height:32px; }
      .btn { padding:12px 24px;font-size:.88rem; }
      .services-grid { grid-template-columns:1fr; }
      .about-layout { grid-template-columns:1fr;gap:2rem; }
      .team-grid { grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto; }
      .projects-grid { grid-template-columns:1fr 1fr;gap:.5rem; }
      .projects-grid .project-card { aspect-ratio:4/3; }
      
      .diff-grid { grid-template-columns:1fr; }
      .contact-layout { grid-template-columns:1fr;gap:2rem; }
      .contact-form { padding:1.5rem; }
      .service-card,.diff-card { padding:1.5rem; }
      .trust-strip-inner { gap:1rem 2rem; }
      .trust-item { font-size:.78rem; }
      .stat-number { font-size:2rem; }
      .process-step { gap:1rem; }
      .step-marker { width:44px;height:44px;font-size:1.1rem; }
      .process-line { left:22px; }
      .form-row { grid-template-columns:1fr; }
      .footer-top { flex-direction:column;align-items:center;text-align:center; }
      .footer-tagline { max-width:100%; }
    }
    @media(max-width:480px) {
      .container { padding:0 1rem; }
      .hero h1 { font-size:2rem; }
      .about-stats { gap:.75rem; }
      .stat-card { padding:1rem; }
      .trust-strip-inner { flex-direction:column;gap:.4rem; }
      .trust-item { justify-content:center; }
      .cta-group { flex-direction:column; }
      .cta-group .btn { width:100%;justify-content:center; }
      .projects-grid { grid-template-columns:1fr 1fr;gap:.5rem; }
      
    }/* ═══════════════════════════════════════════════════════════
   R&R Theme — WP-Only Additions
   APPEND this file to assets/css/theme.css after extracting
   CSS from the Phase 3 HTML demo.

   These classes are rendered by front-page.php PHP code and
   have NO HTML demo counterpart. They are identical across
   all client themes (only --accent changes via CSS variable).

   Usage:
     cat wp-additions.css >> /home/claude/theme-slug/assets/css/theme.css

   DO NOT skip this step. Without these styles:
   - Draft preview shows unstyled text at page bottom
   - Holiday banners are invisible or unstyled
   - Clients can't tell draft vs live site
   ═══════════════════════════════════════════════════════════ */

/* ── DRAFT PREVIEW BANNER ── */
.sp-draft-preview-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #1a1a1a;
  color: #fff;
  text-align: center;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.sp-draft-preview-banner a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}
.sp-draft-preview-banner a:hover {
  color: #fff;
}

/* ── HOLIDAY BANNER ── */
.sp-holiday-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9998;
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.sp-holiday-banner button {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

/* ── Flip Cards ── */
.project-card.has-flip { perspective:1000px;cursor:pointer; }
.project-card.has-flip:hover { transform:none; }
.project-card.has-flip:hover img { transform:none; }
.flip-inner { position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d; }
.project-card.has-flip.flipped .flip-inner { transform:rotateY(180deg); }
.flip-front, .flip-back { position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);overflow:hidden; }
.flip-front { z-index:2; }
.flip-back { transform:rotateY(180deg);z-index:1;background:var(--card);border:1px solid var(--border); }
.flip-back-inner { display:flex;flex-direction:column;justify-content:center;height:100%;padding:1.75rem;gap:.6rem; }
.flip-back-inner h4 { font-family:var(--font-display);font-size:1.4rem;color:var(--heading);letter-spacing:.03em;line-height:1.2; }
.flip-back-inner p { font-size:.82rem;line-height:1.65;color:var(--text);margin:0; }
.project-type-back { display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);padding:3px 10px;background:var(--accent-dim);border-radius:12px;width:fit-content; }
.project-type { font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-top:.15rem; }
.flip-hint { font-size:.68rem;color:var(--muted);margin-top:.5rem;opacity:.7;transition:opacity .3s; }
.project-card.has-flip:hover .flip-hint { opacity:1; }
.flip-hint-back { font-size:.68rem;color:var(--muted);margin-top:auto;opacity:.6; }
.project-card.has-flip .project-overlay { opacity:1;background:linear-gradient(to top,rgba(10,14,16,.92) 0%,rgba(10,14,16,.4) 45%,transparent 65%); }
.project-card.has-flip .project-overlay { flex-direction:column;align-items:flex-start;justify-content:flex-end; }

/* ── Filter Buttons (styled) ── */
.filter-btn { padding:8px 20px;border-radius:20px;border:1px solid var(--border-light);background:transparent;color:var(--text);cursor:pointer;font-size:.85rem;font-family:var(--font-body);transition:all .3s; }
.filter-btn:hover { border-color:var(--accent);color:var(--accent); }
.filter-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }

/* ── Flip responsive ── */
@media(max-width:768px){
  .flip-back-inner { padding:1.25rem; }
  .flip-back-inner h4 { font-size:1.15rem; }
  .flip-back-inner p { font-size:.78rem;line-height:1.55; }
  .flip-hint { display:block; }
}
@media(max-width:480px){
  .flip-back-inner { padding:1rem; }
  .flip-back-inner h4 { font-size:1rem; }
  .flip-back-inner p { font-size:.75rem; }
}

/* ── Hero Video ── */
.hero-video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; }
.hero-video + .container, .hero-bg + .container { position:relative;z-index:2; }
.hero .container { position:relative;z-index:2; }
.hero-video-overlay { position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,14,16,.92) 0%,rgba(10,14,16,.55) 50%,rgba(10,14,16,.85) 100%);z-index:1;pointer-events:none; }

/* ── 3-Step Intake Form ── */
.intake-form { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2.25rem; }
.intake-progress { display:flex;align-items:center;margin-bottom:2rem; }
.intake-dot { display:flex;align-items:center;gap:.45rem;flex-shrink:0; }
.dot-num { width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;border:2px solid var(--border-light);color:var(--muted);background:transparent;transition:all .35s; }
.intake-dot.active .dot-num { background:var(--accent);border-color:var(--accent);color:#fff; }
.intake-dot.done .dot-num { border-color:var(--accent);color:var(--accent);background:transparent; }
.dot-label { font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);transition:color .35s; }
.intake-dot.active .dot-label,.intake-dot.done .dot-label { color:var(--heading); }
.intake-line { flex:1;height:2px;background:var(--border);margin:0 .75rem;position:relative;overflow:hidden; }
.intake-line-fill { height:100%;width:0;background:var(--accent);transition:width .5s ease; }
.intake-panel { animation:intakeFade .35s ease; }
@keyframes intakeFade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.intake-title { font-family:var(--font-display);font-size:1.5rem;color:var(--heading);margin-bottom:.3rem; }
.intake-sub { font-size:.85rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.5; }

/* Step 1 Cards */
.intake-options { display:grid;grid-template-columns:1fr 1fr;gap:.65rem; }
.intake-card { display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;background:var(--surface);border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;user-select:none;-webkit-user-select:none; }
.intake-card:hover { border-color:rgba(196,32,42,.4);background:rgba(196,32,42,.03); }
.intake-card.on { border-color:var(--accent);background:var(--accent-dim); }
.ic-icon { flex-shrink:0; }
.ic-icon svg { stroke:var(--muted);transition:stroke .2s; }
.intake-card.on .ic-icon svg { stroke:var(--accent); }
.ic-text { font-size:.85rem;font-weight:500;color:var(--text);flex:1;transition:color .2s; }
.intake-card.on .ic-text { color:var(--heading); }
.ic-check { opacity:0;transition:opacity .2s;flex-shrink:0; }
.ic-check svg { stroke:var(--accent); }
.intake-card.on .ic-check { opacity:1; }
.intake-next-btn:disabled { opacity:.35;pointer-events:none; }

/* Step 2 Fields */
.intake-fields { display:flex;flex-direction:column;gap:1rem; }
.intake-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.intake-field label { display:block;font-size:.8rem;font-weight:500;color:var(--heading);margin-bottom:.3rem; }
.intake-field .req { color:var(--accent); }
.intake-field input,.intake-field textarea { width:100%;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--heading);font-family:var(--font-body);font-size:.88rem;outline:none;box-sizing:border-box;transition:border-color .3s,box-shadow .3s; }
.intake-field input:focus,.intake-field textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,32,42,.08); }
.intake-field textarea { resize:vertical;min-height:100px; }
.intake-nav { display:flex;gap:.75rem;margin-top:1.5rem; }
.intake-error { margin-top:.75rem;padding:.65rem 1rem;background:rgba(196,32,42,.07);border:1px solid rgba(196,32,42,.15);border-radius:6px;color:var(--accent);font-size:.82rem; }

/* Step 3 */
.intake-success { text-align:center;padding:2rem 0; }
.success-check { margin-bottom:1rem; }
.intake-success .intake-sub { max-width:360px;margin:0 auto; }

@media(max-width:600px){
  .intake-options { grid-template-columns:1fr; }
  .intake-row { grid-template-columns:1fr; }
  .intake-form { padding:1.5rem; }
  .dot-label { display:none; }
  .intake-line { margin:0 .4rem; }
}


/* ── Footer Grid ── */
.footer-grid { display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2rem; }
.footer-col-heading { font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem; }
.footer-nav { display:flex;flex-direction:column;gap:.5rem; }
.footer-nav a { color:var(--text);font-size:.85rem;text-decoration:none;transition:color .2s;line-height:1.6; }
.footer-nav a:hover { color:var(--accent); }
.footer-contact-list { display:flex;flex-direction:column;gap:.6rem; }
.footer-contact-list a, .footer-contact-list .footer-addr { color:var(--text);font-size:.85rem;text-decoration:none;transition:color .2s;line-height:1.5; }
.footer-contact-list a:hover { color:var(--accent); }
.footer-contact-list .footer-addr { color:var(--muted); }
.footer-tagline { display:block;color:var(--muted);font-size:.84rem;line-height:1.6; }
.footer-social-row { display:flex;justify-content:center;padding:1.25rem 0;border-top:1px solid var(--border); }
@media(max-width:768px){
  .footer-grid { grid-template-columns:1fr;gap:1.75rem;text-align:center; }
  .footer-nav { align-items:center; }
  .footer-contact-list { align-items:center; }
}

/* ── 3D Tilt Cards ── */
.tilt-card { transition:transform .25s ease-out,box-shadow .25s ease-out; }
.tilt-card:hover { box-shadow:0 12px 32px rgba(0,0,0,.25); }
.diff-card.tilt-card { transform-style:preserve-3d; }

/* ── Diff Number Hover ── */
.diff-number { transition:color .3s ease,opacity .3s ease; }

/* ── Missing Button Variants ── */
.btn-solid-accent { background:var(--accent);color:#fff;border-color:var(--accent); }
.btn-solid-accent:hover { background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 25px rgba(196,32,42,.25);color:#fff !important; }
.btn-outline-light { background:transparent;color:var(--heading);border-color:var(--border-light); }
.btn-outline-light:hover { border-color:var(--heading);background:rgba(255,255,255,.04);transform:translateY(-2px);color:var(--heading); }
.btn-outline-accent { background:transparent;color:var(--accent);border-color:var(--accent); }
.btn-outline-accent:hover { background:var(--accent);color:#fff;transform:translateY(-2px); }

/* ── Fix: All red buttons keep white text on hover ── */
.btn-primary:hover, .btn-solid-accent:hover { color:#fff !important; }

/* ── Mobile Flip Cards Fix ── */
@media(max-width:768px){
  .projects-grid { grid-template-columns:1fr !important;gap:.75rem; }
  .projects-grid .project-card { aspect-ratio:3/2; }
  .flip-back-inner { padding:1.5rem;gap:.5rem;overflow-y:auto; }
  .flip-back-inner h4 { font-size:1.15rem; }
  .flip-back-inner p { font-size:.8rem;line-height:1.55; }
  .project-type-back { font-size:.65rem; }
  .flip-hint, .flip-hint-back { font-size:.65rem; }
}
@media(max-width:480px){
  .projects-grid .project-card { aspect-ratio:4/3; }
  .flip-back-inner { padding:1.15rem;gap:.4rem; }
  .flip-back-inner h4 { font-size:1rem; }
  .flip-back-inner p { font-size:.74rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden; }
}

/* ── Card Show/Hide Animations ── */
@keyframes cardSlideIn {
  from { opacity:0; transform:translateY(24px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cardSlideOut {
  from { opacity:1; transform:translateY(0) scale(1); }
  to   { opacity:0; transform:translateY(-16px) scale(.96); }
}
.card-show { animation:cardSlideIn .45s ease both; }
.card-hide { animation:cardSlideOut .35s ease both; }
.project-card:nth-child(7).card-show { animation-delay:.05s; }
.project-card:nth-child(8).card-show { animation-delay:.1s; }
.project-card:nth-child(9).card-show { animation-delay:.15s; }
.project-card:nth-child(10).card-show { animation-delay:.2s; }
.project-card:nth-child(11).card-show { animation-delay:.25s; }