/* Page-specific styles for business site */
    /* Common styles are now in /styles.css */

    /* Business Site Header */
    header {
      background: var(--bg-primary);
      border-bottom: 2px solid var(--border-accent);
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(12px);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    header::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--copper) 50%, transparent 100%);
      opacity: 0.3;
    }

    .nav {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      height: 80px;
      gap: var(--spacing-lg);
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--spacing-md);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      font-weight: 600;
      font-size: 18px;
      color: var(--charcoal);
      outline: none;
    }

    .brand:focus {
      outline: none;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--slate) 0%, var(--charcoal) 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--copper);
      font-size: 14px;
      box-shadow: 0 2px 4px rgba(26, 31, 46, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .brand:hover .brand-mark {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(26, 31, 46, 0.15);
    }

    .brand-mark-logo {
      width: 40px;
      height: 40px;
      object-fit: contain;
      transition: transform 0.2s ease, filter 0.3s ease;
    }

    .brand:hover .brand-mark-logo {
      transform: translateY(-2px);
    }

    /* Make header logo white in dark mode */
    [data-theme="dark"] .brand-mark-logo {
      filter: brightness(0) invert(1);
    }

    .nav-main-links {
      display: none;
      gap: var(--spacing-lg);
      align-items: center;
      justify-self: center;
    }

    @media (min-width: 768px) {
      .nav-main-links {
        display: flex;
      }
    }

    .nav-main-links a {
      font-weight: 500;
      font-size: 15px;
      padding: 8px 0;
      border-bottom: 2px solid transparent;
      transition: border-color 0.2s ease, color 0.2s ease;
    }

    .nav-main-links a:hover {
      color: var(--copper);
      border-bottom-color: var(--copper);
    }

    .nav-main-links a.active {
      color: var(--copper);
      border-bottom-color: var(--copper);
    }

    .nav-actions {
      display: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-self: end;
    }

    @media (min-width: 768px) {
      .nav-actions {
        display: flex;
      }
    }

    /* Mobile Menu */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 80px;
      left: 0;
      right: 0;
      background: var(--white);
      border-top: 1px solid rgba(26, 31, 46, 0.08);
      box-shadow: var(--shadow-lg);
      z-index: 99;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .mobile-menu.open {
      display: block;
      max-height: 300px;
    }

    .mobile-menu nav {
      padding: var(--spacing-md);
    }

    .mobile-menu a {
      display: block;
      padding: var(--spacing-sm);
      font-weight: 500;
      color: var(--charcoal);
      border-bottom: 1px solid rgba(26, 31, 46, 0.06);
      transition: background 0.2s ease, color 0.2s ease;
    }

    .mobile-menu a:last-child {
      border-bottom: none;
    }

    .mobile-menu a:hover {
      background: var(--stone);
      color: var(--copper);
    }

    @media (min-width: 768px) {
      .mobile-menu {
        display: none !important;
      }
    }

    /* Theme Toggle Button */
    .theme-toggle {
      background: none;
      border: 1.5px solid var(--border-color);
      border-radius: 6px;
      padding: 8px 12px;
      cursor: pointer;
      color: var(--text-primary);
      font-size: 18px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: var(--spacing-md);
    }

    .theme-toggle:hover {
      border-color: var(--copper);
      background: var(--bg-secondary);
      transform: scale(1.05);
    }

    .theme-toggle:focus {
      outline: 2px solid var(--copper);
      outline-offset: 2px;
    }

    .nav-email {
      color: var(--copper) !important;
      font-weight: 500 !important;
      border-bottom: 2px solid transparent !important;
    }

    .nav-email:hover {
      border-bottom-color: var(--copper) !important;
    }

    .mobile-menu-btn {
      display: block;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      padding: 8px;
      color: var(--charcoal);
    }

    @media (min-width: 768px) {
      .mobile-menu-btn {
        display: none;
      }
    }

    /* Hero */
    .hero {
      /*padding: var(--spacing-3xl) 0 var(--spacing-4xl);*/
      background: linear-gradient(180deg, var(--white) 0%, var(--stone) 100%);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-2xl);
      align-items: center;
    }

    @media (min-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
      }
    }

    @media (min-width: 1440px) {
      .hero-grid {
        grid-template-columns: 1.3fr 0.7fr;
      }
    }

    .hero-content h1 {
      margin-bottom: var(--spacing-md);
      color: var(--charcoal);
    }

    @media (max-width: 480px) {
      .hero-content h1 {
        font-size: 32px;
        line-height: 1.3;
        letter-spacing: -0.01em;
      }
    }

    .hero-subhead {
      font-size: 20px;
      color: var(--slate);
      margin-bottom: var(--spacing-xl);
      font-weight: 500;
      line-height: 1.5;
    }

    .hero-copy {
      font-size: 18px;
      line-height: 1.7;
      color: var(--charcoal);
      margin-bottom: var(--spacing-xl);
      /*max-width: 600px;*/
    }

    .cta-row {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      margin-bottom: var(--spacing-xl);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      text-decoration: none;
    }

    .btn-primary {
      background: var(--copper);
      color: var(--white);
      box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
      background: #a66a47;
      transform: translateY(-2px) scale(1.02);
      box-shadow: var(--shadow-md);
    }

    .btn-secondary {
      background: transparent;
      color: var(--charcoal);
      border: 1.5px solid var(--slate);
    }

    .btn-secondary:hover {
      background: var(--stone);
      border-color: var(--copper);
      color: var(--copper);
      transform: scale(1.02);
    }

    .trust-signals {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    @media (max-width: 480px) {
      .trust-signals {
        flex-direction: column;
        gap: 8px;
      }

      .trust-badge {
        text-align: center;
      }
    }

    .trust-badge {
      padding: 8px 14px;
      background: var(--white);
      border: 1px solid rgba(26, 31, 46, 0.1);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: var(--slate);
    }

    .hero-image {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .hero-image img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Theme-based logo switching for hero section */
    .hero-image .logo-dark {
      display: none !important;
    }

    [data-theme="dark"] .hero-image .logo-light {
      display: none !important;
    }

    [data-theme="dark"] .hero-image .logo-dark {
      display: block !important;
    }

    .photo-placeholder {
      width: 100%;
      aspect-ratio: 3 / 4;
      background: linear-gradient(135deg, var(--slate) 0%, var(--charcoal) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Sylfaen, Georgia, serif;
      font-size: clamp(48px, 8vw, 72px);
      color: var(--copper);
      font-weight: 700;
      letter-spacing: 0.05em;
    }

    /* Sections */
    section {
      padding: var(--spacing-xl) 0;
      position: relative;
    }

    section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(26, 31, 46, 0.06) 50%, transparent 100%);
    }

    section:first-of-type::before {
      display: none;
    }

    .hero::before {
      display: none;
    }

    .section-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--copper);
      margin-bottom: var(--spacing-sm);
    }

    .section-intro {
      font-size: 18px;
      color: var(--slate);
      margin-bottom: var(--spacing-xl);
      /*max-width: 800px;*/
      line-height: 1.7;
    }

    /* Services */
    .services-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-lg);
      margin-top: var(--spacing-2xl);
    }

    @media (min-width: 768px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
      }
    }

    @media (min-width: 1024px) {
      .services-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .service-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: var(--spacing-lg);
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      min-height: 320px;
      border-top: 3px solid transparent;
    }

    .service-card:nth-child(1),
    .service-card:nth-child(2) {
      border-top-color: var(--copper);
    }

    .service-card:nth-child(3) {
      border-top-color: var(--sage);
    }

    .service-card:nth-child(4) {
      border-top-color: var(--slate);
    }

    .service-card:nth-child(5) {
      border-top-color: var(--sandstone);
    }

    .service-card:nth-child(6) {
      border-top-color: var(--forest);
    }

    .service-card > p {
      flex: 1;
    }

    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-top-width: 4px;
    }

    .service-card:hover .service-label {
      color: var(--charcoal);
    }

    .service-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--copper);
      margin-bottom: var(--spacing-xs);
    }

    .service-card h3 {
      margin-bottom: var(--spacing-sm);
      color: var(--charcoal);
    }

    .service-card p {
      color: var(--slate);
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: var(--spacing-sm);
    }

    .service-card ul {
      list-style: none;
      padding: 0;
      margin: var(--spacing-sm) 0 0 0;
    }

    .service-card li {
      padding-left: 20px;
      position: relative;
      font-size: 14px;
      color: var(--slate);
      margin-bottom: 6px;
    }

    .service-card li:before {
      content: "→";
      position: absolute;
      left: 0;
      color: var(--copper);
    }

    /* About */
    #about {
      background: #f9f8f6;
    }

    [data-theme="dark"] #about {
      background: #151a23;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-2xl);
      margin-top: var(--spacing-2xl);
    }

    @media (min-width: 1024px) {
      .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3xl);
      }
    }

    .about-image {
      position: relative;
    }

    .about-image img {
      width: 100%;
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
    }

    .about-content h3 {
      margin-bottom: var(--spacing-md);
      color: var(--charcoal);
    }

    .about-content p {
      margin-bottom: var(--spacing-md);
      line-height: 1.7;
      color: var(--charcoal);
    }

    .quote {
      font-family: 'DM Mono', monospace;
      font-size: 17px;
      padding: var(--spacing-md) var(--spacing-lg);
      padding-left: var(--spacing-lg);
      border-left: 3px solid var(--copper);
      margin: var(--spacing-lg) 0;
      color: var(--charcoal);
      font-style: normal;
      background: rgba(184, 120, 85, 0.04);
      border-radius: 4px;
    }

    [data-theme="dark"] .quote {
      background: rgba(184, 120, 85, 0.15);
      color: var(--text-primary);
    }

    .credentials {
      background: var(--white);
      border-radius: var(--radius);
      padding: var(--spacing-lg);
      margin-top: var(--spacing-lg);
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(26, 31, 46, 0.06);
    }

    .credentials h4 {
      margin-bottom: var(--spacing-sm);
      color: var(--charcoal);
    }

    .credentials ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .credentials li {
      padding: 2px 0;
      color: var(--slate);
      font-size: 15px;
    }

    .credentials li:has(strong) {
      padding-top: 8px;
    }

    .credentials li:first-child {
      padding-top: 0;
    }

    /* Contact */
    #contact {
      padding: var(--spacing-xl) 0;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-2xl);
      margin-top: var(--spacing-md);
    }

    @media (min-width: 1024px) {
      .contact-grid {
        grid-template-columns: 1fr 0.9fr;
      }
    }

    .contact-form {
      background: var(--white);
      border-radius: var(--radius);
      padding: var(--spacing-xl);
      box-shadow: var(--shadow-sm);
    }

    @media (max-width: 480px) {
      .contact-form {
        padding: var(--spacing-md);
      }
    }

    .form-group {
      margin-bottom: var(--spacing-md);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }

    @media (min-width: 768px) {
      .form-row {
        grid-template-columns: 1fr 1fr;
      }
    }

    label {
      display: block;
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 6px;
      color: var(--charcoal);
    }

    input, textarea, select {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid var(--slate);
      border-radius: 6px;
      font-family: inherit;
      font-size: 16px;
      background: var(--white);
      color: var(--charcoal);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: var(--copper);
      box-shadow: 0 0 0 3px rgba(184, 120, 85, 0.15);
    }

    .btn:focus, .mobile-menu-btn:focus, a:focus {
      outline: 2px solid var(--copper);
      outline-offset: 2px;
    }

    .mobile-menu-btn:focus {
      outline-offset: 4px;
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    .big-textarea {
      height: 270px;
    }

    .form-helper {
      font-size: 13px;
      color: var(--slate);
      margin-top: 6px;
    }

    .form-success {
      background: #e8f5e9;
      border: 2px solid #4caf50;
      border-radius: var(--radius);
      padding: var(--spacing-lg);
      margin-bottom: var(--spacing-md);
      display: none;
    }

    .form-success.show {
      display: block;
    }

    .form-success h4 {
      color: #2e7d32;
      margin-bottom: var(--spacing-xs);
      font-size: 18px;
    }

    .form-success p {
      color: #1b5e20;
      margin: 0;
      font-size: 15px;
    }

    .contact-info {
      background: var(--white);
      border-radius: var(--radius);
      padding: var(--spacing-xs);
      /*box-shadow: var(--shadow-sm);*/
    }

    .contact-info h3 {
      margin-bottom: var(--spacing-md);
    }

    .contact-method {
      margin-bottom: var(--spacing-sm);
      padding-bottom: var(--spacing-sm);
      border-bottom: 1px solid rgba(26, 31, 46, 0.08);
    }

    .contact-method:last-child {
      border-bottom: none;
    }

    .contact-method strong {
      display: block;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--copper);
      margin-bottom: 4px;
      font-weight: 600;
    }

    .contact-method a {
      color: var(--charcoal);
      font-size: 16px;
    }

    .contact-method a:hover {
      color: var(--copper);
    }

    /* Footer */
    footer {
      background: #1a1f2e;
      color: var(--stone);
      padding: var(--spacing-2xl) 0;
      margin-top: var(--spacing-4xl);
    }

    [data-theme="dark"] footer {
      background: #1a1f2e;
    }

    .footer-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-xl);
    }

    @media (min-width: 768px) {
      .footer-content {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (min-width: 1024px) {
      .footer-content {
        grid-template-columns: 2fr 1fr 1fr;
      }
    }

    .footer-about h3 {
      color: var(--copper);
      margin-bottom: var(--spacing-sm);
      font-size: 20px;
    }

    .footer-about p {
      color: var(--stone);
      opacity: 0.9;
      font-size: 14px;
      line-height: 1.6;
    }

    .footer-links h4 {
      color: var(--copper);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--spacing-sm);
    }

    .footer-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li {
      margin-bottom: 8px;
    }

    .footer-links a {
      color: var(--stone);
      opacity: 0.8;
      font-size: 14px;
      transition: opacity 0.2s ease, color 0.2s ease;
    }

    .footer-links a:hover {
      opacity: 1;
      color: var(--copper);
    }

    .footer-bottom {
      margin-top: var(--spacing-xl);
      padding-top: var(--spacing-md);
      border-top: 1px solid rgba(245, 243, 240, 0.2);
      text-align: center;
      font-size: 13px;
      color: var(--stone);
      opacity: 0.7;
    }

    .footer-legal-links {
      margin-top: 8px;
      font-size: 12px;
    }

    .footer-legal-links a {
      color: var(--stone);
      opacity: 0.7;
      text-decoration: underline;
      transition: opacity 0.2s ease;
    }

    .footer-legal-links a:hover {
      opacity: 1;
    }

    /* Skip to content link */
    .skip-to-content {
      position: absolute;
      top: -100px;
      left: 0;
      background: var(--copper);
      color: var(--white);
      padding: 12px 24px;
      font-weight: 600;
      z-index: 1000;
      transition: top 0.2s ease;
    }

    .skip-to-content:focus {
      top: 0;
    }

    /* Section divider - extends full width */
    .section-divider {
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      height: 2px;
      background: rgba(26, 31, 46, 0.12);
      margin-top: 0;
      margin-bottom: var(--spacing-2xl);
    }

    .section-divider::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--copper) 50%, transparent 100%);
      opacity: 0.4;
    }

    /* Utilities */
    .bg-white {
      background: var(--white);
    }

    .text-center {
      text-align: center;
    }

    /* Animations */
    .scroll-fade {
      opacity: 0.5;
      transform: translateY(30px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

    .scroll-fade.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: no-preference) {
      .fade-in {
        opacity: 0;
        animation: fadeIn 0.6s ease-out forwards;
      }

      .fade-in-delay-1 {
        animation-delay: 0.1s;
      }

      .fade-in-delay-2 {
        animation-delay: 0.2s;
      }

      .fade-in-delay-3 {
        animation-delay: 0.3s;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }