/* Thin layer: maps redesign "Na" class names onto the shared example-tier CSS (variables & base components).
   Load AFTER example-<tier>.css. Reuses --bg/--surface/--accent/--serif/--line/--heading/--ease etc. */

.compare-new { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; }
.compare-new *, .compare-new *::before, .compare-new *::after { box-sizing: border-box; }
.compare-new img { max-width: 100%; }

/* Header must float inside the compare pane, not full-viewport fixed */
.compare-new .header { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 10; }
.compare-new .header.scrolled { background: var(--bg); backdrop-filter: none; }

/* Compare content scrolls; no full-viewport hero */
.compare-new .hero { min-height: 0; padding: clamp(3.5rem,7vw,5.5rem) clamp(2rem,5vw,4rem); }

/* Alias redesign buttons onto example buttons */
.compare-new .btn-white { background: var(--accent); color: var(--on-accent); }
.compare-new .btn-white:hover { background: var(--accent-light); }
.compare-new .btn-outline { color: var(--text); border-color: var(--line); }
.compare-new .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Alias feature/team/blog grids onto example component look */
.compare-new .features-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.compare-new .feature-card { background: var(--surface); border: 1px solid var(--line); padding: 2rem; transition: border-color .25s, transform .25s, box-shadow .25s; }
.compare-new .feature-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.compare-new .feature-icon { width: 44px; height: 44px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 1.2rem; }
.compare-new .feature-icon svg { width: 22px; height: 22px; }
.compare-new .feature-card h3 { font-family: var(--serif); font-size: 1.2rem; color: var(--text); margin: 0 0 .5rem; }
.compare-new .feature-card p { font-size: .9rem; color: var(--muted); line-height: 1.7; margin: 0; }

.compare-new .team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; text-align: center; }
.compare-new .team-card h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--text); margin: 0 0 .2rem; }
.compare-new .team-card p { font-size: .82rem; color: var(--accent); margin: 0; }
.compare-new .team-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); color: var(--accent); font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }

.compare-new .blog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.compare-new .blog-card { background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s, transform .25s; }
.compare-new .blog-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.compare-new .blog-img { height: 140px; background: linear-gradient(135deg, var(--accent-soft), var(--bg-soft)); }
.compare-new .blog-body { padding: 1.25rem; }
.compare-new .blog-tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.compare-new .blog-body h3 { font-family: var(--serif); font-size: 1.1rem; color: var(--text); margin: .4rem 0 .4rem; line-height: 1.2; }
.compare-new .blog-body p { font-size: .85rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* Alias section + contact */
.compare-new .section-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare-new .section-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem,8vw,6.5rem) clamp(2rem,5vw,4rem); }
.compare-new .contact-section { background: var(--bg-soft); border-top: 1px solid var(--line); }
.compare-new .contact-section .contact-inner { background: transparent; }
.compare-new .contact-details h3, .compare-new .contact-info h3 { font-family: var(--serif); font-size: 1.2rem; color: var(--text); margin: 0 0 1.2rem; }
.compare-new .contact-alt { font-size: .85rem; color: var(--muted); margin-top: 1rem; }

/* Essential */
.compare-new .about-text { max-width: 640px; }
.compare-new .about-text p { font-size: 1rem; color: var(--muted); line-height: 1.8; max-width: 600px; }
.compare-new .about-text strong { color: var(--text); }
.compare-new .services-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.compare-new .service-item { background: var(--surface); border: 1px solid var(--line); padding: 2rem; }
.compare-new .service-item h3 { font-family: var(--serif); font-size: 1.3rem; color: var(--text); margin: 0 0 .6rem; }
.compare-new .service-item p { font-size: .9rem; color: var(--muted); line-height: 1.7; margin: 0; }

/* Pro + Essential hero: direct h1/p in .hero (no .hero-content) */
.compare-new .hero > h1 { font-family: var(--serif); font-size: clamp(2.4rem,5.5vw,3.6rem); line-height: 1.08; color: var(--text); margin: 0 0 1rem; }
.compare-new .hero > h1 em { font-style: italic; }
.compare-new .hero > p { font-size: 1.05rem; color: var(--muted); max-width: 500px; line-height: 1.75; margin: 0 0 2rem; }

/* Pro hero visual */
.compare-new.redesign-pro .hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem,5vw,4rem); }
.compare-new.redesign-pro .hero-visual { max-height: 70vh; }
.compare-new.redesign-pro .hero-visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .compare-new.redesign-pro .hero { grid-template-columns: 1fr; }
  .compare-new.redesign-pro .hero-visual { max-height: 50vh; }
}

/* Date-less opening-hours list for Pro */
.compare-new .contact-info .opening-hours {}
.compare-new .opening-hours dt { font-weight: 700; color: var(--text); font-size: .88rem; }
.compare-new .opening-hours dd { color: var(--muted); font-size: .88rem; margin: 0 0 .4rem; }

/* Ultimate: dark hero with full-bleed bg image */
.compare-new.redesign-ultimate .hero { position: relative; display: block; color: var(--text); }
.compare-new.redesign-ultimate .hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.compare-new.redesign-ultimate .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.compare-new .hero-badge { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: .5rem 1.1rem; margin-bottom: 1.4rem; }
.compare-new .stats-row { display: flex; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.compare-new .stat { display: flex; flex-direction: column; }
.compare-new .stat-num { font-family: var(--serif); font-size: 1.9rem; color: var(--text); }
.compare-new .stat-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Ultimate projects masonry */
.compare-new .projects-masonry { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.compare-new .project-card { background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s, transform .25s; }
.compare-new .project-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.compare-new .project-card.tall { grid-row: span 2; }
.compare-new .project-visual { overflow: hidden; }
.compare-new .project-visual-inner { height: 180px; background-size: cover !important; background-position: center !important; }
.compare-new .project-card.tall .project-visual-inner { height: 100%; min-height: 380px; }
.compare-new .pv-1 { background: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=600&q=60'); }
.compare-new .pv-2 { background: url('https://images.unsplash.com/photo-1518780664697-55e3ad937233?w=600&q=60'); }
.compare-new .pv-3 { background: url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=600&q=60'); }
.compare-new .pv-4 { background: url('https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&q=60'); }
.compare-new .project-body { padding: 1.25rem; }
.compare-new .project-tag { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.compare-new .project-body h3 { font-family: var(--serif); font-size: 1.3rem; color: var(--text); margin: .3rem 0 .4rem; line-height: 1.1; }
.compare-new .project-body p { font-size: .88rem; color: var(--muted); line-height: 1.65; margin: 0; }

/* Ultimate approach / services with numbers */
.compare-new .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.compare-new .service-card { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.compare-new .service-num { font-family: var(--serif); font-size: 1.2rem; color: var(--accent); margin-bottom: .6rem; }
.compare-new .service-card h3 { font-family: var(--serif); font-size: 1.25rem; color: var(--text); margin: 0 0 .5rem; }
.compare-new .service-card p { font-size: .88rem; color: var(--muted); line-height: 1.7; margin: 0; }

/* Ultimate testimonial */
.compare-new .testimonial-section { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare-new .testimonial-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem,8vw,6rem) clamp(2rem,5vw,4rem); }
.compare-new .testimonial-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem,3vw,1.9rem); line-height: 1.45; color: var(--text); margin: 0 0 1.2rem; max-width: 720px; }
.compare-new .testimonial-attr { font-size: .85rem; color: var(--muted); }
.compare-new .testimonial-attr strong { color: var(--text); }

/* Ultimate dashboard preview */
.compare-new .dashboard-preview { background: var(--surface); border: 1px solid var(--line); overflow: hidden; margin-top: 2rem; }
.compare-new .dashboard-bar { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.compare-new .dashboard-dot { width: 9px; height: 9px; border-radius: 50%; }
.compare-new .dd-r { background: #EF4444; } .compare-new .dd-y { background: #EAB308; } .compare-new .dd-g { background: #22C55E; }
.compare-new .dashboard-title { font-size: .75rem; color: var(--muted); margin-left: .5rem; }
.compare-new .dashboard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.compare-new .dash-card { background: var(--surface); padding: 1.4rem; }
.compare-new .dash-card-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare-new .dash-card-value { font-family: var(--serif); font-size: 1.7rem; color: var(--text); margin-top: .3rem; }
.compare-new .dash-card-change { font-size: .75rem; color: #22C55E; margin-top: .3rem; }
.compare-new .dash-card-change.neg { color: #EF4444; }
.compare-new .dash-chart { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; }
.compare-new .dash-bar-row { display: flex; align-items: center; gap: .75rem; }
.compare-new .dash-bar-label { font-size: .72rem; color: var(--muted); width: 2rem; flex-shrink: 0; }
.compare-new .dash-bar-track { flex: 1; height: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.compare-new .dash-bar-fill { height: 100%; background: var(--accent); transition: width 1.1s var(--ease); }

/* Reveal */
.compare-new .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.compare-new .reveal.visible { opacity: 1; transform: none; }
.compare-new .reveal-delay-1 { transition-delay: .1s; }
.compare-new .reveal-delay-2 { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .compare-new .reveal { opacity: 1; transform: none; transition: none; }
  .compare-new .dash-bar-fill { transition: none !important; }
}

@media (max-width: 768px) {
  .compare-new .services-list, .compare-new .services-grid, .compare-new .team-grid, .compare-new .projects-masonry { grid-template-columns: 1fr; }
  .compare-new .blog-grid, .compare-new .features-grid { grid-template-columns: 1fr; }
  .compare-new .dashboard-grid { grid-template-columns: 1fr; }
  .compare-new .project-card.tall .project-visual-inner { min-height: 200px; }
  /* Keep nav tappable inside the compare pane (no hamburger here) */
  .compare-new .nav-toggle { display: none; }
  .compare-new .nav { position: static; flex-direction: row; flex-wrap: wrap; gap: .25rem; opacity: 1; pointer-events: auto; transform: none; padding: 0; background: none; backdrop-filter: none; border: none; }
  .compare-new .nav a { color: var(--muted) !important; padding: .8rem .75rem; border: none; }
  .compare-new .header-inner { flex-wrap: wrap; }
}