/* Basic Reset & Root Variables */
    :root {
      --album-paper: #fbf8ef;
      --album-text: #4e443a;
      --album-border: #8c7d6b;
      --album-accent: #a89a8a;
      --album-highlight: #c7b9a5;
      --font-serif: "Playfair Display", serif;
      --font-sans: "Lato", sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      /* Smooth scrolling for nav links */
    }

    body {
      background-color: var(--album-paper);
      color: var(--album-text);
      font-family: var(--font-sans);
      line-height: 1.7;
      font-size: 16px;
      /* Optional: Add subtle background texture image */
      /* background-image: url('/path/to/paper-texture.png'); */
    }

    /* Headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--font-serif);
      color: var(--album-text);
      line-height: 1.3;
      margin-bottom: 0.75em;
      /* Consistent spacing below headings */
    }

    h1 {
      font-size: 2.8rem;
    }

    h2 {
      font-size: 2.2rem;
    }

    h3 {
      font-size: 1.6rem;
    }

    h4 {
      font-size: 1.2rem;
    }

    /* Links */
    a {
      color: var(--album-border);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    a:hover {
      color: var(--album-highlight);
    }

    /* Layout Helpers */
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .section-padding {
      padding: 80px 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 50px;
      font-size: 2.5rem;
      /* Slightly larger */
    }

    /* Button Styling */
    .cta-button {
      display: inline-block;
      background-color: var(--album-border);
      color: var(--album-paper);
      font-weight: bold;
      padding: 12px 25px;
      border-radius: 5px;
      text-decoration: none;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .cta-button:hover {
      background-color: var(--album-highlight);
      color: var(--album-text);
      transform: translateY(-2px);
    }

    /* Header & Navbar */
    .main-header {
      background-color: rgba(251,
          248,
          239,
          0.85);
      /* Slightly transparent paper */
      backdrop-filter: blur(5px);
      /* Blur effect */
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      border-bottom: 1px solid rgba(140, 125, 107, 0.2);
      /* Subtle border */
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
    }

    .logo a {
      font-family: var(--font-serif);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--album-text);
    }

    .logo a:hover {
      color: var(--album-border);
    }

    .nav-links {
      list-style: none;
      display: flex;
      align-items: baseline;
    }

    .nav-links li {
      margin-left: 25px;
    }

    .nav-links a {
      color: var(--album-text);
      font-weight: 700;
      padding-bottom: 5px;
      /* Space for potential border */
      border-bottom: 2px solid transparent;
      transition: color 0.3s ease, border-color 0.3s ease;
    }

    .nav-links a.cta-button {
      color: var(--album-paper);
    }

    .nav-links a:hover,
    .nav-links a.active {
      /* Add 'active' class manually or via JS */
      color: var(--album-border);
      border-bottom-color: var(--album-border);
    }

    .nav-links .cta-button {
      font-size: 0.9rem;
      padding: 8px 15px;
      margin-left: 25px;
    }

    /* Mobile Menu Button */
    .mobile-menu-button {
      display: none;
      /* Hidden by default */
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
      z-index: 1001;
      /* Above the main header background but below dropdown */
    }

    .mobile-menu-button .icon-bar {
      display: block;
      width: 25px;
      height: 3px;
      background-color: var(--album-text);
      margin: 5px 0;
      transition: transform 0.3s ease, opacity 0.3s ease,
        background-color 0.3s ease;
      /* Added transitions */
    }

    .mobile-menu-button:hover .icon-bar {
      background-color: var(--album-border);
    }

    /* Mobile Menu Button Active State (X) */
    .mobile-menu-button.active .icon-bar:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px);
    }

    .mobile-menu-button.active .icon-bar:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu-button.active .icon-bar:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Hero Section */
    .hero {
      min-height: 75vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      /* Light accent background */
      position: relative;
      overflow: hidden;
      padding: 100px 20px;
      /* More padding */
    }

    /* Optional decorative corners */
    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      border: 5px solid rgba(140, 125, 107, 0.2);
      /* Subtle border color */
      opacity: 0.5;
    }

    .hero::before {
      top: 20px;
      left: 20px;
      border-right: none;
      border-bottom: none;
    }

    .hero::after {
      bottom: 20px;
      right: 20px;
      border-left: none;
      border-top: none;
    }

    .hero h1 {
      margin-bottom: 20px;
    }

    .hero p {
      font-size: 1.2rem;
      color: rgba(78, 68, 58, 0.85);
      /* Slightly lighter text */
      max-width: 650px;
      margin: 0 auto 30px auto;
    }

    /* O Nas Section */
    #o-mnie .container {
      max-width: 800px;
      text-align: center;
    }

    #o-mnie p {
      margin-bottom: 20px;
      color: rgba(78, 68, 58, 0.9);
    }

    /* Optional image style */
    .about-image-wrapper {
      display: inline-block;
      margin-top: 30px;
      padding: 10px;
      background-color: var(--album-paper);
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(140, 125, 107, 0.3);
      transform: rotate(-2deg);
      /* Slight tilt */
    }

    .about-image-wrapper img {
      display: block;
      /* Remove extra space below img */
      max-width: 300px;
      height: auto;
    }

    /* Usługi Section */
    #uslugi {
      background-color: rgba(168, 154, 138, 0.08);
      /* Very light accent */
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 30px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .service-card {
      background-color: var(--album-paper);
      padding: 30px;
      border-radius: 5px;
      border: 1px solid rgba(140, 125, 107, 0.3);
      text-align: center;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    }

    .service-card .icon {
      /* Placeholder style */
      font-size: 2.5rem;
      color: var(--album-border);
      margin-bottom: 15px;
    }

    .service-card h3 {
      margin-bottom: 10px;
      font-size: 1.4rem;
    }

    .service-card p {
      font-size: 0.95rem;
      color: rgba(78, 68, 58, 0.8);
    }

    /* Proces Section - Timeline Style */
    #proces .container {
      max-width: 800px;
    }

    .process-timeline {
      position: relative;
      padding-left: 50px;
      /* Space for numbers/line */
      border-left: 3px dashed var(--album-border);
    }

    .process-step {
      position: relative;
      margin-bottom: 40px;
      padding-left: 20px;
      /* Space between line and text */
    }

    /* Last step no margin bottom */
    .process-step:last-child {
      margin-bottom: 0;
    }

    .process-step::before {
      /* Step Number Circle */
      content: attr(data-step);
      /* Read step number from data attribute */
      position: absolute;
      left: -31px;
      /* Adjust to center on the line: -(width/2) - (border-left-width/2) => -(40/2) - (3/2) => -21.5 -> ~-22px adjusted */
      top: 0px;
      width: 40px;
      height: 40px;
      background-color: var(--album-border);
      color: var(--album-paper);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.1rem;
      border: 3px solid var(--album-paper);
      /* Creates gap around circle */
    }

    .process-step h3 {
      margin-bottom: 5px;
      font-size: 1.4rem;
    }

    .process-step p {
      color: rgba(78, 68, 58, 0.9);
    }

    section:nth-child(2n+1) {
      background-color: rgba(168, 154, 138, 0.08);
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
      gap: 25px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .portfolio-item {
      background-color: var(--album-paper);
      padding: 15px;
      /* Padding acts like photo border */
      border: 1px solid rgba(140, 125, 107, 0.2);
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: grid;
      grid-auto-flow: row;
      grid-template-columns: 1fr;
    }

    /* Add slight random rotation */
    .portfolio-item:nth-child(3n + 1) {
      transform: rotate(-1.5deg);
    }

    .portfolio-item:nth-child(3n + 2) {
      transform: rotate(1deg);
    }

    .portfolio-item:nth-child(3n + 3) {
      transform: rotate(-1deg);
    }

    .portfolio-item:hover {
      transform: scale(1.03) rotate(0deg);
      /* Straighten on hover */
      box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.15);
      z-index: 10;
      /* Bring to front */
    }

    .portfolio-item h4 {
      text-align: center;
      font-size: 1rem;
      font-family: var(--font-sans);
      /* Use sans-serif for captions */
      font-style: italic;
      margin-bottom: 10px;
    }

    .portfolio-image {
      width: 100%;
      height: auto;
    }

    .portfolio-item p {
      font-size: 0.85rem;
      text-align: center;
      margin-top: 10px;
      color: rgba(78, 68, 58, 0.8);
    }

    .portfolio-cta {
      text-align: center;
      margin-top: 50px;
    }

    /* Cennik Section */
    #cennik .container {
      max-width: 800px;
      text-align: center;
    }

    #cennik p {
      margin-bottom: 20px;
      color: rgba(78, 68, 58, 0.9);
    }

    #cennik ul {
      list-style: none;
      /* Remove default bullets */
      padding-left: 0;
      display: inline-block;
      /* Center the list */
      text-align: left;
      /* Align text inside list items */
      margin-top: 15px;
      margin-bottom: 25px;
    }

    #cennik li {
      position: relative;
      padding-left: 25px;
      /* Space for custom bullet */
      margin-bottom: 8px;
    }

    #cennik li::before {
      content: "•";
      /* Custom bullet */
      position: absolute;
      left: 0;
      top: -1px;
      color: var(--album-border);
      font-size: 1.4rem;
      line-height: 1;
    }

    #cennik .cta-button {
      margin-top: 20px;
    }

    /* Opinie Section */
    #opinie {
      background-color: rgba(168, 154, 138, 0.08);
    }

    /* --- Stylizacja sekcji O Mnie (Założycielka) --- */
    .founder-profile-container {
      display: flex;
      flex-wrap: wrap;
      /* Aby elementy się zawijały na mniejszych ekranach */
      align-items: center;
      /* Lub 'center' jeśli wolisz wyrównanie w pionie do środka */
      gap: 30px;
      /* Odstęp między zdjęciem a tekstem */
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .founder-photo-frame {
      flex: 1;
      /* Pozwala na elastyczne zajmowanie przestrzeni */
      min-width: 250px;
      /* Minimalna szerokość dla zdjęcia */
      max-width: 300px;
      /* Maksymalna szerokość dla zdjęcia */
      /* Jeśli chcesz, aby .about-image-wrapper (z rotacją) był zawsze wyśrodkowany,
     nawet gdy kolumna jest szersza niż obrazek: */
      display: flex;
      justify-content: center;
    }

    /* .about-image-wrapper jest już zdefiniowany, ale upewnij się,
   że dobrze współpracuje w tym nowym kontekście.
   Możesz chcieć usunąć 'margin: 0 auto;' jeśli .founder-photo-frame
   już centruje. Lub dostosować.
   np. jeśli chcesz, aby rotacja była tylko tu:
*/
    .founder-photo-frame .about-image-wrapper {
      transform: rotate(1deg);
      /* Utrzymujemy styl pochylonego zdjęcia */
      /* margin: 0; Jeśli .founder-photo-frame centruje */
    }

    .founder-bio {
      flex: 2;
      /* Pozwala tekstowi zająć więcej przestrzeni */
      min-width: 300px;
      /* Minimalna szerokość dla bloku tekstu */
    }

    .founder-bio h3 {
      margin-top: 0;
      /* Usuwa domyślny margines górny nagłówka, jeśli jest wewnątrz flex item */
      color: var(--album-text);
      /* Upewnij się, że dziedziczy kolor lub ustaw go */
      font-family: var(--font-serif);
      /* Utrzymanie spójności */
    }

    /* Upewnij się, że akapity w bio też mają odpowiedni styl, jeśli jest to potrzebne */
    .founder-bio p {
      color: rgba(78, 68, 58, 0.9);
      /* Zgodnie z Twoim stylem */
      margin-bottom: 15px;
      /* Standardowy odstęp */
    }

    .founder-bio p strong {
      color: var(--album-border);
      /* Podkreślenie ważnych informacji */
    }

    /* FAQ Section */
    #faq .container {
      max-width: 800px;
    }

    .faq-item summary {
      font-weight: bold;
      cursor: pointer;
      padding: 15px 10px;
      border-bottom: 1px solid rgba(140, 125, 107, 0.3);
      position: relative;
      list-style: none;
      /* Remove default marker */
      transition: background-color 0.2s ease;
    }

    .faq-item summary:hover {
      background-color: rgba(168, 154, 138, 0.05);
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    /* Hide default marker */
    .faq-item summary::after {
      /* Custom marker (+) */
      content: "+";
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.5rem;
      color: var(--album-border);
      transition: transform 0.2s ease;
      /* Added transition */
    }

    .faq-item[open] summary::after {
      /* Custom marker (-) when open */
      content: "−";
      /* Optional: Slight rotation effect */
      /* transform: translateY(-50%) rotate(45deg); */
    }

    .faq-item div {
      /* Content area */
      padding: 15px 10px;
      border-bottom: 1px solid rgba(140, 125, 107, 0.2);
      color: rgba(78, 68, 58, 0.9);
      background-color: rgba(168, 154, 138, 0.03);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      max-width: 1000px;
      margin: 0 auto;
    }

    /* Form Styling */
    .contact-form label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 0.9rem;
      color: rgba(78, 68, 58, 0.9);
    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea,
    .contact-form input[type="file"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid var(--album-accent);
      border-radius: 4px;
      background-color: #fff;
      /* White background for inputs */
      font-family: var(--font-sans);
      font-size: 1rem;
      transition: border-color 0.3s ease;
    }

    .contact-form input[type="text"]:focus,
    .contact-form input[type="email"]:focus,
    .contact-form textarea:focus {
      border-color: var(--album-border);
      outline: none;
      box-shadow: 0 0 5px rgba(140, 125, 107, 0.3);
    }

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

    .contact-form input[type="file"] {
      padding: 5px;
      /* Adjust padding for file input */
      font-size: 0.9rem;
    }

    /* Basic styling for file input button */
    .contact-form input[type="file"]::file-selector-button {
      background-color: var(--album-accent);
      color: var(--album-text);
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
      transition: background-color 0.3s ease;
    }

    .contact-form input[type="file"]::file-selector-button:hover {
      background-color: var(--album-border);
      color: var(--album-paper);
    }

    .contact-form .attachment-note {
      font-size: 0.8rem;
      color: rgba(78, 68, 58, 0.7);
      margin-top: -10px;
      margin-bottom: 15px;
    }

    .contact-form button[type="submit"] {
      width: 100%;
    }

    /* Contact Info Styling */
    .contact-info p {
      margin-bottom: 15px;
      color: rgba(78, 68, 58, 0.9);
    }

    .contact-info h4 {
      font-size: 1.1rem;
      margin-bottom: 5px;
      font-family: var(--font-sans);
      /* Sans-serif for info headings */
      font-weight: 700;
    }

    .contact-info a {
      word-break: break-all;
      /* Prevent long emails/links breaking layout */
    }

    /* Footer */
    .main-footer {
      background-color: var(--album-paper);
      border-top: 1px solid rgba(140, 125, 107, 0.2);
      padding: 30px 0;
      text-align: center;
      font-size: 0.9rem;
      color: rgba(78, 68, 58, 0.7);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      h1 {
        font-size: 2.2rem;
      }

      h2 {
        font-size: 1.8rem;
      }

      .section-title {
        font-size: 2rem;
        margin-bottom: 30px;
      }

      .section-padding {
        padding: 50px 0;
      }

      .navbar {
        height: 60px;
        /* Adjusted height for mobile */
      }

      .nav-links {
        display: none;
        /* Hide desktop links by default */
        /* --- Mobile Menu Styling --- */
        position: absolute;
        top: 60px;
        /* Match navbar height */
        left: 0;
        width: 100%;
        background-color: rgba(251,
            248,
            239,
            0.98);
        /* Slightly more opaque */
        backdrop-filter: blur(5px);
        flex-direction: column;
        padding: 15px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-top: 1px solid rgba(140, 125, 107, 0.2);
        z-index: 999;
        /* Ensure it's above content, below sticky header's bg */
        align-items: center;
        /* Center items horizontally */
      }

      .nav-links.active {
        /* Show menu when active class is added by JS */
        display: flex;
      }

      .nav-links li {
        margin: 0;
        width: 100%;
        /* Make list items take full width */
        text-align: center;
        /* Center text */
      }

      .nav-links a {
        display: block;
        /* Make links block level */
        padding: 12px 20px;
        border-bottom: none;
        /* Remove desktop underline */
        width: 100%;
        /* Make link tappable area full width */
        font-weight: normal;
        /* Optional: slightly less bold on mobile */
      }

      .nav-links a:hover,
      .nav-links a.active {
        /* Mobile hover/active style */
        background-color: rgba(168, 154, 138, 0.1);
        color: var(--album-border);
        border-bottom: none;
      }

      .nav-links .cta-button {
        /* Adjust CTA button for mobile menu */
        margin: 15px auto 5px auto;
        /* Add some margin top/bottom */
        display: inline-block;
        /* Override display: block from link style */
        width: auto;
        /* Don't force full width */
        padding: 10px 20px;
        /* Slightly smaller padding */
        font-size: 1rem;
      }

      /* --- End Mobile Menu Styling --- */

      .mobile-menu-button {
        display: block;
        /* Show hamburger */
      }

      .hero {
        min-height: auto;
        /* Let content define height */
        padding: 60px 20px;
      }

      .hero h1 {
        font-size: 2.5rem;
      }

      .hero p {
        font-size: 1rem;
      }

      .process-timeline {
        padding-left: 40px;
        /* Adjusted padding */
        border-left-width: 2px;
      }

      .process-step::before {
        left: -21px;
        /* Adjust position: -(width/2) - (border-left-width/2) => -(30/2) - (2/2) = -15 - 1 = -16px -> adjusted visually */
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
        border-width: 2px;
      }

      .process-step {
        padding-left: 15px;
      }

      .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      /* Stack portfolio items */
      .portfolio-item {
        transform: rotate(0deg) !important;
        /* Remove rotation on mobile */
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .contact-info {
        margin-top: 20px;
        /* Add space above info when stacked */
        text-align: center;
        /* Center contact info text */
      }

      .contact-info div {
        margin-bottom: 20px;
        /* Space out contact info items */
      }

      .testimonials-grid {
        grid-template-columns: 1fr;
      }

      .services-grid {
        grid-template-columns: 1fr;
      }

      .main-footer {
        margin-top: 60px;
        /* Reduce footer margin */
      }
    }

    @media (max-width: 480px) {
      h1 {
        font-size: 1.8rem;
      }

      h2 {
        font-size: 1.5rem;
      }

      .section-title {
        font-size: 1.8rem;
      }

      .hero h1 {
        font-size: 2rem;
      }

      .hero p {
        font-size: 0.9rem;
      }

      .cta-button {
        padding: 10px 20px;
        font-size: 0.9rem;
      }

      .logo a {
        font-size: 1.5rem;
      }

      .container {
        padding: 0 15px;
        /* Slightly less padding on very small screens */
      }

      .process-timeline {
        padding-left: 30px;
        /* Further adjust timeline padding */
      }

      .process-step::before {
        left: -16px;
        /* Adjust number position */
      }

      .process-step {
        padding-left: 10px;
      }

      #cennik ul {
        padding-left: 5px;
        /* Adjust list indent */
      }
    }