/* Page-specific styles for our-process.html */
/* Hero - aligned with index page hero */
      .hero {
        position: relative;
        overflow: hidden;
        background: radial-gradient(1200px 500px at 70% -10%, rgba(217,181,69,0.08), transparent),
          linear-gradient(var(--bg), var(--bg));
        min-height: 240px;
        display: flex;
        align-items: center;
        border: none;
        border-bottom: none;
        border-top: none;
      }
      .hero-background {
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 0;
      }
      .hero-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 50%;
        position: absolute;
        inset: 0;
        display: block;
        transform: scaleX(-1);
        filter: saturate(110%);
        opacity: 0;
        transition: opacity 0.8s ease;
        pointer-events: none;
      }
      .hero-background img.hero-image--active {
        opacity: 1;
        z-index: 0;
      }
      .hero-background img.hero-image--previous {
        opacity: 0;
        z-index: -1;
      }
      .hero-background::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.99) 10%, rgba(10,10,10,0.95) 20%, rgba(10,10,10,0.88) 30%, rgba(10,10,10,0.75) 40%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.45) 60%, rgba(10,10,10,0.3) 70%, rgba(10,10,10,0.18) 80%, rgba(10,10,10,0.1) 90%, rgba(10,10,10,0.05) 95%, rgba(10,10,10,0.4) 100%);
        z-index: 2;
      }
      .hero-blur-layer {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.99) 10%, rgba(0,0,0,0.95) 20%, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.99) 10%, rgba(0,0,0,0.95) 20%, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
      }
      .hero-overlay {
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 66px 0;
        border-bottom: none;
      }
      .hero-copy {
        max-width: 1350px;
        text-align: center;
        margin: 0 auto;
      }
      .eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.2em; margin-bottom: 10px; }
      .hero h1 { font-size: 48px; line-height: 1.15; margin: 0 0 20px; }
      .hero p { font-size: 1.1em; line-height: 1.6; color: var(--muted); margin: 0; }
      .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; background: var(--accent); color: var(--accent-contrast); border-radius: 12px; font-weight: 700; border: none; cursor: pointer; font-size: 16px; text-decoration: none; }
      .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217,181,69,0.3); }
      html.pref-high-contrast .hero-background::before {
        background: linear-gradient(to top, rgba(248,250,252,1) 0%, rgba(248,250,252,0.99) 10%, rgba(248,250,252,0.95) 20%, rgba(248,250,252,0.88) 30%, rgba(248,250,252,0.75) 40%, rgba(248,250,252,0.6) 50%, rgba(248,250,252,0.45) 60%, rgba(248,250,252,0.3) 70%, rgba(248,250,252,0.18) 80%, rgba(248,250,252,0.1) 90%, rgba(248,250,252,0.05) 95%, rgba(248,250,252,0.45) 100%);
      }
      html.pref-high-contrast .hero-blur-layer {
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.99) 10%, rgba(0,0,0,0.95) 20%, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.99) 10%, rgba(0,0,0,0.95) 20%, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
      }

      /* Content Sections - consistent vertical rhythm */
      section { padding: 48px 0; }
      .section-title { font-size: 36px; margin: 0 0 20px; text-align: center; }
      .section-subtitle { font-size: 1.2em; color: var(--muted); text-align: center; margin: 0 0 32px; max-width: 1350px; margin-left: auto; margin-right: auto; }
      .section-prose { max-width: 1350px; margin: 0 auto 32px; color: var(--muted); line-height: 1.75; font-size: 1.05em; text-align: center; }
      .section-prose p { margin: 0 0 1em; }
      .section-prose p:last-child { margin-bottom: 0; }
      .hero-copy p { margin: 0 0 1em; }
      .hero-copy p:last-of-type { margin-bottom: 1.25em; }
      .section-gallery { padding: 48px 0 32px 0; background: var(--bg); }

      /* Hero Banner - Why Choose Us */
      .hero-banner {
        position: relative;
        width: 100%;
        margin-top: 0;
        height: 500px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hero-banner-background {
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 0;
      }
      .hero-banner-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(110%);
      }
      .hero-banner-background::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.98) 10%, rgba(10,10,10,0.95) 18%, rgba(10,10,10,0.88) 25%, rgba(10,10,10,0.78) 32%, rgba(10,10,10,0.65) 38%, rgba(10,10,10,0.5) 43%, rgba(10,10,10,0.35) 47%, rgba(10,10,10,0.2) 50%, rgba(10,10,10,0.1) 52%, rgba(10,10,10,0.05) 53%, rgba(10,10,10,0.02) 54%, rgba(10,10,10,0) 55%);
        z-index: 2;
      }
      .hero-banner-blur-layer {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 10%, rgba(0,0,0,0.95) 18%, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.78) 32%, rgba(0,0,0,0.65) 38%, rgba(0,0,0,0.5) 43%, rgba(0,0,0,0.35) 47%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.05) 53%, rgba(0,0,0,0.02) 54%, rgba(0,0,0,0) 55%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 10%, rgba(0,0,0,0.95) 18%, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.78) 32%, rgba(0,0,0,0.65) 38%, rgba(0,0,0,0.5) 43%, rgba(0,0,0,0.35) 47%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.05) 53%, rgba(0,0,0,0.02) 54%, rgba(0,0,0,0) 55%);
      }
      .hero-banner-title {
        position: absolute;
        z-index: 10;
        color: #ffffff;
        font-size: 58px;
        font-weight: 700;
        text-align: center;
        text-shadow: 
          0 2px 4px rgba(0, 0, 0, 0.3),
          0 4px 8px rgba(0, 0, 0, 0.25),
          0 6px 12px rgba(0, 0, 0, 0.2),
          0 8px 16px rgba(0, 0, 0, 0.15);
        margin: 0;
        pointer-events: none;
      }
      .hero-content {
        padding: 60px 0;
        text-align: center;
      }
      .hero-banner-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .hero-banner-headers {
        display: flex;
        justify-content: stretch;
        align-items: center;
        padding: 0;
        gap: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        max-width: 100vw;
        background: rgba(36, 36, 36, 0.9);
        border: none;
        border-radius: 0;
        overflow: hidden;
      }
      .hero-banner-headers::before,
      .hero-banner-headers::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0.5%;
        background: var(--bg);
        z-index: 8;
        pointer-events: none;
      }
      .hero-banner-headers::before {
        left: calc(37.5% - 0.25%);
      }
      .hero-banner-headers::after {
        left: calc(62.5% - 0.25%);
      }
      .hero-banner-header {
        flex: 0 0 auto;
        color: var(--accent);
        font-size: 30px;
        font-weight: 700;
        margin: 0;
        padding: 16px 20px;
        background: transparent;
        border: none;
        border-radius: 0;
        text-shadow: 0 1px 0 rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.75);
        text-align: center;
        cursor: pointer;
        transition: color 0.3s ease, background 0.3s ease;
        font-family: inherit;
        position: relative;
        z-index: 1;
      }
      #custom-design-tab,
      #turnkey-execution-tab {
        width: 37.5%;
      }
      #expert-installation-tab {
        width: 25%;
      }
      .hero-banner-header:hover {
        color: var(--accent);
      }
      .hero-banner-header[aria-selected="true"],
      .hero-banner-header.active {
        color: #0a0a0a;
        text-shadow: none;
        background: transparent;
      }
      .tab-slider-indicator {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        margin-top: 0;
        background: #d9b545;
        border: none;
        box-shadow: none;
        transition: left 0.4s ease, width 0.4s ease;
        z-index: 0;
        pointer-events: none;
      }
      .hero-banner-header:focus {
        outline: none;
      }
      @media (max-width: 720px) {
        .hero-banner-headers {
          left: auto;
          transform: none;
          flex-wrap: nowrap;
          overflow-x: auto;
          gap: 8px;
          padding: 10px 0 4px;
          margin-left: 0;
          margin-right: 0;
          width: 100%;
          max-width: 100%;
          background: transparent;
          border: none;
        }
        .hero-banner-headers::before,
        .hero-banner-headers::after {
          display: none;
        }
        .hero-banner-header {
          flex: 0 0 auto;
          font-size: 18px;
          padding: 10px 14px;
          white-space: nowrap;
          border-radius: 999px;
          background: rgba(36,36,36,0.9);
          border: none;
        }
        #custom-design-tab,
        #turnkey-execution-tab,
        #expert-installation-tab {
          width: auto;
          flex: 0 0 auto;
        }
        /* Hide desktop slider bar on mobile */
        .tab-slider-indicator {
          display: none;
        }
        /* Provide a simple pill highlight for the active tab on mobile */
        .hero-banner-header[aria-selected="true"],
        .hero-banner-header.active {
          background: var(--accent);
          color: var(--accent-contrast);
          text-shadow: none;
          border-color: var(--accent);
        }
      }
      .tab-content {
        display: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
      }
      .tab-content.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
      }
      /* Ensure initial active tab is visible */
      .tab-content.active:first-of-type {
        display: block;
        opacity: 1;
      }

      /* Process Section */
      .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
      .process-step { text-align: center; position: relative; }
      .process-step:not(:last-child)::after { content: ''; position: absolute; top: 40px; right: -15px; width: 30px; height: 2px; background: var(--accent); }
      .process-number { width: 80px; height: 80px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; margin: 0 auto 20px; }
      .process-number i { font-size: 32px; }
      .process-step h3 { font-size: 18px; margin: 0 0 12px; }
      .process-step p { color: var(--muted); font-size: 14px; margin: 0; }

      /* What's Included */
      .included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
      .included-list { list-style: none; padding: 0; margin: 0; }
      .included-list li { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
      .included-list li:last-child { margin-bottom: 0; }
      .included-list i { font-size: 20px; color: var(--accent); }
      .included-list h4 { margin: 0 0 4px; font-size: 16px; }
      .included-list p { margin: 0; color: var(--muted); font-size: 14px; }
      .included-image { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 40px; text-align: center; }
      .included-image i { font-size: 64px; color: var(--accent); margin-bottom: 20px; }

      /* Pricing Section */
      .pricing-section { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 60px; text-align: center; margin: 80px 0; }
      .pricing-badge { display: inline-block; background: var(--accent); color: var(--accent-contrast); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
      .pricing-title { font-size: 32px; margin: 0 0 16px; }
      .pricing-description { font-size: 1.1em; color: var(--muted); margin: 0 0 30px; }
      .pricing-note { font-size: 14px; color: var(--muted); margin-top: 20px; }

      /* Testimonial */
      .testimonial-section { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 40px; text-align: center; margin: 60px 0; }
      .testimonial-quote { font-size: 1.3em; font-style: italic; margin: 0 0 24px; color: var(--text); }
      .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 16px; }
      .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
      .testimonial-info h4 { margin: 0 0 4px; }
      .testimonial-info p { margin: 0; color: var(--muted); font-size: 14px; }

      /* Scrolling Gallery */
      .showcase-gallery { 
        display: flex !important; 
        gap: 30px; 
        overflow-x: auto; 
        overflow-y: hidden; 
        padding: 20px 0 10px 0; 
        margin-top: 0;
        margin-bottom: -20px;
        scroll-behavior: auto; /* Changed from smooth for programmatic scrolling */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar in Firefox */
        -ms-overflow-style: none; /* Hide scrollbar in Chrome, Safari, and Opera */
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }
      .showcase-gallery::-webkit-scrollbar {
        display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
      }
      .showcase-gallery > div {
        flex: 0 0 auto;
        width: 400px;
        min-width: 300px;
      }
      .showcase-gallery img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--border);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .showcase-gallery img:hover {
        transform: scale(1.02);
        box-shadow: 0 8px 24px rgba(217, 181, 69, 0.2);
      }
      @media (max-width: 720px) {
        .showcase-gallery > div {
          width: 300px;
          min-width: 250px;
        }
        .showcase-gallery img {
          height: 200px;
        }
      }

      /* Timeline Slider (Before → Concept → Design → Install) */
      .timeline-slider-wrap { max-width: 1200px; margin: 0 auto; }
      .timeline-image-container { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-bottom: none; margin-bottom: 0; cursor: ew-resize; }
      .timeline-image-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: transparent; transition: mask-image 0.08s ease-in-out, -webkit-mask-image 0.08s ease-in-out; will-change: mask-image; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
      .timeline-image-layer.layer1 { z-index: 1; }
      .timeline-image-layer.layer2 { z-index: 2; }
      .timeline-image-layer.layer3 { z-index: 3; }
      .timeline-image-layer.layer4 { z-index: 4; }
      .timeline-slider-container { padding: 0; margin: 0 auto; }
      .timeline-slider-track { position: relative; width: 100%; height: 10px; border-radius: 0 0 6px 6px; background: var(--bg-2); border: 1px solid var(--border); border-top: none; overflow: hidden; }
      .timeline-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 0 0 5px 5px; background: var(--accent); opacity: 0.85; transition: width 0.05s ease-out; pointer-events: none; }
      .timeline-slider { position: absolute; left: 0; top: 0; width: 100%; height: 10px; margin: 0; padding: 0; border: none; border-radius: 6px; background: transparent; outline: none !important; outline-width: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
      .timeline-slider:hover, .timeline-slider:focus, .timeline-slider:focus-visible, .timeline-slider:active { outline: none !important; box-shadow: none !important; }
      .timeline-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 50%; background: transparent; cursor: pointer; opacity: 0; box-sizing: border-box; outline: none !important; box-shadow: none !important; }
      .timeline-slider::-webkit-slider-thumb:hover, .timeline-slider::-webkit-slider-thumb:focus, .timeline-slider::-webkit-slider-thumb:active { outline: none !important; box-shadow: none !important; }
      .timeline-slider::-webkit-slider-runnable-track { height: 10px; background: transparent; border: none; -webkit-appearance: none; appearance: none; }
      .timeline-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: transparent; cursor: pointer; opacity: 0; border: none; box-sizing: border-box; outline: none !important; box-shadow: none !important; }
      .timeline-slider::-moz-range-thumb:hover, .timeline-slider::-moz-range-thumb:focus, .timeline-slider::-moz-range-thumb:active { outline: none !important; box-shadow: none !important; }
      .timeline-slider::-moz-focus-outer { border: none; outline: none; }
      .timeline-slider::-moz-range-track { height: 10px; background: transparent; border: none; }

      /* Service FAQ */
      

      /* CTA Section */
      .cta-section { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 40px 60px; text-align: center; margin: 40px 0 0; }
      .cta-section h2 { font-size: 32px; margin: 0 0 16px; }
      .cta-section p { font-size: 1.1em; color: var(--muted); margin: 0 0 30px; }
      .cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
      .btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-weight: 600; text-decoration: none; }
      .btn-secondary:hover { background: var(--bg-2); border-color: var(--accent); }
       [contenteditable="true"] { outline: 1px dashed rgba(217, 181, 69, 0.3); outline-offset: 2px; cursor: text; }
       [contenteditable="true"]:hover { outline: 1px dashed rgba(217, 181, 69, 0.6); background: rgba(217, 181, 69, 0.05); }
       [contenteditable="true"]:focus { outline: 2px solid var(--accent); background: rgba(217, 181, 69, 0.08); }

      html.pref-high-contrast .hero-banner-background::before {
        background: linear-gradient(to top, rgba(248,250,252,1) 0%, rgba(248,250,252,0.98) 10%, rgba(248,250,252,0.95) 18%, rgba(248,250,252,0.88) 25%, rgba(248,250,252,0.78) 32%, rgba(248,250,252,0.65) 38%, rgba(248,250,252,0.5) 43%, rgba(248,250,252,0.35) 47%, rgba(248,250,252,0.2) 50%, rgba(248,250,252,0.1) 52%, rgba(248,250,252,0.05) 53%, rgba(248,250,252,0.02) 54%, rgba(248,250,252,0) 55%);
      }
      html.pref-high-contrast .hero-banner-blur-layer {
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 10%, rgba(0,0,0,0.95) 18%, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.78) 32%, rgba(0,0,0,0.65) 38%, rgba(0,0,0,0.5) 43%, rgba(0,0,0,0.35) 47%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.05) 53%, rgba(0,0,0,0.02) 54%, rgba(0,0,0,0) 55%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 10%, rgba(0,0,0,0.95) 18%, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.78) 32%, rgba(0,0,0,0.65) 38%, rgba(0,0,0,0.5) 43%, rgba(0,0,0,0.35) 47%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.05) 53%, rgba(0,0,0,0.02) 54%, rgba(0,0,0,0) 55%);
      }
      html.pref-high-contrast .hero-banner-image {
        filter: none;
      }
      html.pref-high-contrast .hero-banner-header {
        color: var(--accent);
        text-shadow: 0 2px 8px rgba(255,255,255,0.8);
      }
      html.pref-high-contrast .hero-banner-title {
        color: #ffffff;
        text-shadow: 
          0 2px 4px rgba(0, 0, 0, 0.5),
          0 4px 8px rgba(0, 0, 0, 0.4),
          0 6px 12px rgba(0, 0, 0, 0.3),
          0 8px 16px rgba(0, 0, 0, 0.25);
      }
      @media (max-width: 960px) {
        .hero-banner-title {
          font-size: 48px;
        }
      }
      @media (max-width: 720px) {
        .hero-banner-title {
          font-size: 36px;
        }
      }


      /* Mobile Header */
      @media (max-width: 720px) {
        .logo-container img[alt*="FAMI"],
        .logo-container img[src*="logo-fami"] {
          display: none !important;
        }
        .logo-container {
          justify-content: center !important;
          gap: 0 !important;
          width: 100% !important;
        }
      }

      /* Responsive */
      @media (max-width: 960px) {
        .hero-banner {
          height: 380px;
        }
        .process-grid { grid-template-columns: repeat(2, 1fr); }
        .process-step:not(:last-child)::after { display: none; }
        .included-grid { grid-template-columns: 1fr; gap: 40px; }
        .hero-content h1 { font-size: 36px; }
        .cta-buttons { flex-direction: column; align-items: center; }
      }
        @media (max-width: 720px) {
          .menu { display: none; }
          .process-grid { grid-template-columns: 1fr; }
          .hero-content { padding: 40px 0; }
          .hero-content h1 { font-size: 28px; }
          .section-title { font-size: 28px; }
          .hero-banner {
            height: 300px;
          }
          .hero-banner-headers {
            flex-direction: column;
            padding: 20px 20px 0;
            gap: 12px;
          }
          .hero-banner-header {
            font-size: 20px;
            text-align: center !important;
            width: 100%;
          }
          /* Gallery sections - allow scrolling on mobile */
          .showcase-gallery {
            display: flex !important;
            grid-template-columns: none !important;
          }
          .inspiration-gallery {
            display: none !important;
          }
        }