*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Raleway', sans-serif;
}

html {
  font-family: 'Raleway', sans-serif;
}

a {
  color: #1EAEDB;              /* base blue */
  text-decoration: none;       /* no underline */
  transition: color 0.9s ease; /* smooth fade */
}

a:visited {
  color: #1EAEDB;              /* keep same as normal */
}

a:hover {
  color: #333;                 /* dark grey on hover */
}

a:active {
  color: #333;                 /* same as hover when clicked */
}

/* Container sets max width and centers all page content */
.container {
  max-width: 1200px;         /* adjust this as needed */
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header layout: flex with logo on left, nav on right */
header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
  gap: 2rem;
}

/* Logo */

.logo img {
  width: 6.25rem;       
  height: auto;         
  max-height: 12.5rem;  
  display: block;       
  transition: transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05);
}

/* Right side wrapper */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between; /* or just flex-start */
    flex-grow: 1;
    gap: 0.5rem;
    flex: 1; /* take remaining space */
    min-width: 200px; /* keep some min size */
}

/* Tagline top right */
.tagline {
  font-size: 1rem;
  color: #555;
  margin-bottom: 0.25rem;
  text-align: right;
}

/* Social icons + nav wrapper */
.social-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    margin-bottom: 0.25rem;
}

.social-icons {
  display: flex;
  gap: 0.75rem; /* space between icons */
  justify-content: center;
  align-items: center;
}

.social-icons a {
  display: inline-block;
  transition: transform 0.9s ease;
}

.social-icons a:hover,
.social-icons a:active {
  transform: scale(1.2);
}

.social-icons img {
  height: 28px;
  width: auto;
  display: block;
}


/* Navigation styles */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.main-nav a {
    display: inline-block;
    text-decoration: none;
    color: #333;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: transform 0.8s ease, color 0.8s ease;
}

.main-nav a:hover,
.main-nav a:focus {
    color: #1EAEDB;
    transform: scale(1.08);
}

/* Main content expands to fill space */
main {
  flex-grow: 1;
  padding: 2rem 0;
}

/* Footer layout */
footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem 0;
  border-top: 1px solid #ccc;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

footer .tagline {
    padding-top: 4rem;
  font-size: 1rem;
  color: #333;
}

footer .social-icons {
  display: flex;
    gap: 0.5rem;
}

footer .social-icons a {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  display: inline-block;
}

footer .social-icons img:hover {
  transform: scale(1.2);
}

footer .social-icons img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}

footer .main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}

footer .main-nav a {
    font-size: 1rem;
    font-weight: 300;
    text-decoration: none;
    color: #333;
    letter-spacing: 0.05em;
    transition: color 0.3s ease, transform 0.3s ease;
}

footer .main-nav a:hover {
    color: #1EAEDB;
    transform: scale(1.05);
}

.top-row h1 {
    color: #333;
    font-weight: 300;
    letter-spacing: -0.07rem;
}
 
.top-row h2 {
    color: #777;
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.02rem;
    line-height: 2rem;
}

.top-row-content a img,
.second-row-content a img {
  transition: transform 1.0s ease;
  display: block; /* ensures no inline spacing issues */
}

.top-row-content a:hover img,
.second-row-content a:hover img {
  transform: scale(1.04);
}   

/* MAIN COLUMNS */
/* === Top row: desktop — equal-height headlines & content with 65/35 split === */
@media (min-width: 769px) {
  .top-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.top-row-right {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
}

.top-row-headline,
.top-row-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
    
.top-row-headline a.headline-link {
    min-height: 120px; /* Adjust as needed for narrow breakpoints */
    text-decoration: none;
    color: #555;
    font-weight: 300;
    transition: transform 0.9s ease, color 0.5s ease;
    display: inline-block;
    /* We’ll add a little padding so scaling doesn’t get cut off */
    padding: 0.1rem 0.2rem;
}
    
.top-row-headline a.headline-link:hover,
.top-row-headline a.headline-link:focus {
  color: #1EAEDB;
  transform: scale(1.03);
}
  
.top-row-headline a.headline-link:hover h1,
.top-row-headline a.headline-link:hover h2,
.top-row-headline a.headline-link:focus h1,
.top-row-headline a.headline-link:focus h2 {
    color: #1EAEDB;    
}
    
/* Ensure h1 and h2 have consistent line-height and margins */
.top-row-headline a.headline-link h1,
.top-row-headline a.headline-link h2 {
  margin: 0;
  line-height: 1.2;
  transition: inherit; /* smooth transition with parent */
}

/* Optional: slightly reduce the scale effect on h2 so it feels natural */
.top-row-headline a.headline-link h2 {
  font-weight: 200;
  font-size: 1.6rem; /* or your preferred size */
  opacity: 0.8;
}    

.headline-link h2 {
  transition: transform 0.9s ease, color 0.9s ease;
}

.headline-link:hover h2 {
  transform: scale(1.03);
  color: #1EAEDB;
}
        
.second-row-headline {
        padding-top: 1rem;
        padding-top: 1rem;
    padding-bottom: 1rem;
    min-height: 10px; /* Adjust as needed for narrow breakpoints */
}    
    
.top-row-content {
    flex: 1;
}


/* Match heights for headline and content separately */
.top-row-left, .top-row-right, top-row-left-ready-made, top-row-right-ready-made {
    align-items: stretch;
}
 
/* -----------------------
   MAIN CONTENT STYLING
   ----------------------- */
.main-cont {
  display: flex;
  gap: 20px;               /* spacing between text + image */
  align-items: flex-start; /* aligns top edges */
}

/* Left column: main content (65%) */
.main-cont-left {
  flex: 0 0 calc(65% - 10px);   /* subtract half the gap so 65% + 35% + gap ~= 100% */
  max-width: calc(65% - 10px);
}

.main-cont-left h1 {
  margin-top: 0;
}

/* Right column: image (35%) */
.main-cont-right {
  flex: 0 0 calc(35% - 10px);
  max-width: calc(35% - 10px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.main-cont-right img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* --- Bespoke variant (if you need the reverse or different split) --- */
/* Use explicit, sensible values to avoid confusion */
.main-cont-left-bespoke {
  flex: 0 0 calc(37% - 10px);
  max-width: calc(37% - 10px);
}

.main-cont-left-bespoke a {
  color: #1EAEDB;
  text-decoration: none;
    transition: transform 0.9s ease, color 0.9s ease;
}
.main-cont-left-bespoke a:hover {
  color: #333;
}
    

    
.main-cont-right-bespoke {
  flex: 0 0 62%;  /* optional if you want it fixed width */
  display: block; /* remove flex */
}

.main-cont-right-bespoke img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Content heading/paragraph styles */
.main-cont h1,
.main-cont h2,
.main-cont h3,
.main-cont h4 {
  margin-top: 0;
  color: #555;
  font-weight: 300;
  letter-spacing: -0.07rem;
}  
    
.main-cont p {
  color: #555;
  font-weight: 300;
  letter-spacing: 0.03rem;
  line-height: 1.3rem;
}           

.main-cont-left-bespoke h2 {
    font-size: 2rem;
    font-weight: 300;
    }     
    
/* cont-right-text specifics */
.cont-right-text h3 {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.03rem;
  padding-top: 1.rem;
}
.cont-right-text h4 {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.01rem;
  margin-top: -1rem;
}
.cont-right-text p {
  font-size: 1.1rem;
  font-weight: 100;
  letter-spacing: 0.01rem;
  margin-top: -1.1rem;
  margin-bottom: -2rem;
}
    
.bespoke-figure {
    display: block;        /* keeps everything stacked */
    margin: 0;             /* reset if needed */
    padding: 0;
}

.bespoke-figure img {
  display: block;
  max-width: 100%;       /* responsive */
  height: auto;
}

.bespoke-figure figcaption {
  margin-top: 10px; /* space between image and text */
    text-align: center;
}
    
/* H3: main title */
.bespoke-figure figcaption h3 {
  font-size: 1.1rem;     
  font-weight: 900;      
  letter-spacing: 0.08rem;
  margin: 0;
    padding-top: 0.3rem;
  padding-bottom: 0.6rem; /* space below */
  color: #777;
  text-transform: uppercase; /* matches your snippet */
}

/* H4: subtitle */
.bespoke-figure figcaption h4 {
  font-size: 1rem;
  font-weight: 300;      /* or 100 if you prefer lighter */
  letter-spacing: 0.01rem;
  margin: 0;
    padding-top: 0.1rem;
  padding-bottom: 0.10rem;
  color: #777;
}

.bespoke-figure figcaption p {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.01rem;
  line-height: 1.3rem;
  margin: 0rem;
    padding-top: .5rem;
  padding-bottom: 0rem;
  color: #777;
}
    
.figure-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 1rem 0 1rem 0; /* negative top margin to pull it up */
    width: 100%;
}    
    
/* Flex container for side-by-side images */
.figure-images {
    display: flex;
    gap: 1rem; /* space between images */
}

.figure-images img {
    display: block;
    width: 48.9%;   /* half each on desktop */
    height: auto;
}
    
/* NEW layout: image + video */
.figure-media-pair {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.figure-media-pair > * {
  flex: 1 1 0;
  min-width: 0;              /* prevents overflow */
}

.figure-media-pair img,
.figure-media-pair video,
.figure-media-pair iframe {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 600px;         /* adjust to taste */
}

.figure-media-pair video {
  background: #000;
}   
    
.headline-link {
  display: block;
  text-decoration: none;
  color: #555;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0rem;
}

.headline-link h1,
.headline-link h2 {
    margin: 0;
    padding: 0;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.05rem;
    text-decoration: none;
    color: #667;    
}

.headline-link h1 {
    font-size: 2rem;
}

.headline-link h2 {
  font-size: 1.6rem; /* You can tweak this */
  margin-top: 0.5rem;
}
    
.intro-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 2rem; 
    font-weight: 300;
    color: #888;
    line-height: 1.3;
    letter-spacing: 0.02rem;
    margin: 0 0 1rem 0;
}   
    

.second-row-left-ready-made {
        color: #555;   
    }    
    
.second-row-left-ready-made h2 {
        font-weight:300;      
    }    
    
.second-row-left-ready-made p {
        font-weight:300;        
    }    

/* Large screens: side by side */

@media (min-width: 769px) {
  .top-row {
      display: flex;
      gap: 2%; /* optional spacing between left and right blocks */
      align-items: stretch;
  }
    
 .second-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2%; /* optional spacing between left and right blocks */
    align-items: stretch;
    margin-top: 1rem;
    border-top: 1px solid #ddd;
  }   

.top-row-left, .top-row-right, .second-row-left, .second-row-right, .top-row-left-ready-made, .top-row-right-ready-made, top-row-left-contact, top-row-right-contact {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch; /* force children to stretch full height */
}   
    }
    
  .top-row-left {
      flex-basis: 64.4%;
  }

  .top-row-right {
      flex-basis: 33.6%;
  }
    
.second-row-left {
      flex-basis: 32.75%;
  }

.second-row-right {
      flex-basis: 65.25%;
  }    
    
.top-row-left-ready-made {
      flex-basis: 30%;
  }

.top-row-right-ready-made {
      flex-basis: 68%;
  }    
   
.top-row-left-ready-made h1 {
      margin-top: -0.5rem;
  }    

.second-row-left-ready-made {
      flex-basis: 60%;
  }

.second-row-right-ready-made {
      flex-basis: 38%;
    padding-top: 1.5rem;
  }     
    
.second-row-left-ready-made {
      flex-basis: 60%;
  }   
    
.top-row-left-contact {
        flex-basis: 43%;    
    }
    
.top-row-right-contact  {
        flex-basis: 55%;
    }   
    
.top-row-left-contact, .top-row-right-contact p {
        line-height: 1.4rem;    
    }    
   

.second-row-left-ready-made {
        color: #555;   
    }    
    
.second-row-left-ready-made h2 {
        font-weight:300;      
    }    
    
.second-row-left-ready-made p {
        font-weight:300;        
    }
    
.e-mail:before {
            content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
        }    
    
.insta-contact {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between icon and text */
}

.insta-icon {
  display: inline-block;
}
 
.top-row-left-contact a,
.top-row-right-contact a {
  color: #1EAEDB;
  text-decoration: none;
  transition: color 0.9s ease;
  font-weight: 300;
}

.top-row-left-contact a:hover,
.top-row-right-contact a:hover {
  color: #333;
}    
    
.top-row-headline, .second-row-headline {
  flex-grow: 1;  /* makes headline expand to fill available space */
  /* remove min-height here */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}   
}

/* Divider line full width inside <main> */
.section-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 3rem 0 1.5rem 0;
  width: 100%;
}

/* Intro heading above Instagram feed */
.instagram-intro {
  font-weight: 400;        /* paragraph weight */
  font-size: 1.25rem;      /* slightly larger than body */
  color: #333;
  margin-bottom: 1rem;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.03em;
}

/* Container for the Snapwidget embed */
.snapwidget-container {
  margin-bottom: 1.5rem;
  /* You can add any specific width or flex styles if needed */
}

/* "See more on Instagram" link below the feed */
.instagram-link {
  font-weight: 400;
  font-size: 1rem;
  color: #555;
  margin-top: 0;
}

.instagram-link a {
  color: #1EAEDB;          /* matches your nav hover */
  text-decoration: none;
  transition: color 0.3s ease;
}

.instagram-link a:hover,
.instagram-link a:focus {
  color: #0d7cae;
  text-decoration: none;
}

.payment-icons {
  display: flex;
  justify-content: center;
  gap: 10px; /* space between icons */
  margin-top: 1.2rem; /* breathing room below PayPal logo */
}

.payment-icon {
  height: 40px;  /* keeps them consistent size */
  width: auto;
  opacity: 0.85;
  transition: transform 0.9s ease, opacity 0.9s ease;
}

.payment-icon:hover {
  transform: scale(1.0);
  opacity: 1;
}

/* Privacy policy */

.privacy-policy {
  font-family: 'Raleway', sans-serif;
  color: #555;
  line-height: 1.6;
  max-width: 800px; /* optional: keep text readable */
  margin: 2rem auto; /* center on page with spacing */
  padding: 0 1rem;
}

.privacy-policy h1,
.privacy-policy h2,
.privacy-policy h3 {
  color: #555;
  font-weight: 500; /* slightly heavier than body text */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.privacy-policy p,
.privacy-policy li {
  font-weight: 300;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.privacy-policy a {
  color: #1EAEDB;              /* base blue */
  text-decoration: none;       /* no underline */
  transition: color 0.9s ease; /* smooth fade */
}

.privacy-policy a:visited {
  color: #1EAEDB;              /* keep same as normal */
}

.privacy-policy a:hover {
  color: #333;   /* dark grey on hover */
    transform: scale(1.2);
}

.privacy-policy a:active {
  color: #333; 
}

.privacy-policy ul {
  margin-left: 1.5rem;
}

/* Responsive adjustments */

/* Tablets and below */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-right {
    width: 100%;
    align-items: flex-start;
  }

  .tagline {
    text-align: left;
  }

  .social-nav {
    align-items: flex-end;
  }

  .main-nav ul {
    flex-wrap: wrap;
    gap: 1rem;
  }
    
  .top-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .top-row-left,
  .top-row-right {
    width: 100%;
  }
    
/* Stack images on smaller screens */

    .figure-images {
        flex-direction: column;
    }
    
    .figure-images img {
        width: 100%;
    }
    
    .main-cont-left-bespoke,
    .main-cont-right-bespoke {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .main-cont-right-bespoke img {
        width: 100%;
        height: auto;
    }  
    
    .figure-media-pair {
    flex-direction: column;
  }
  .figure-media-pair > * {
    width: 100%;
    flex-basis: auto;
  }
  .figure-media-pair img,
  .figure-media-pair video,
  .figure-media-pair iframe {
    max-height: none;
  }
    
  /* headine/content revert to natural sizing on mobile */
  .top-row-headline {
    display: block;
    height: auto;
    padding: 1rem 0;
  }

  .top-row-content {
    display: block;
  }

  .top-row-content img {
    width: 100%;
    height: auto;
  }

 .second-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .second-row-left,
  .second-row-right {
    width: 100%;
  }

  /* Preserve desktop-style headline links */
  .second-row-headline {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .second-row-headline a.headline-link {
    display: inline-block;          /* keeps hover/padding effects */
    text-decoration: none;
    color: #555;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .second-row-headline a.headline-link:hover,
  .second-row-headline a.headline-link:focus {
    color: #1EAEDB;
    transform: scale(1.03);
  }

  .second-row-headline a.headline-link h2 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.05rem;
    color: #667;
    transition: inherit;
    font-size: 1.6rem;               /* same as top row h2 */
    font-weight: 300;
  }
    
  .second-row-left-ready-made {
      color: #555;
  }

  .second-row-left-ready-made h2 {
      font-weight: 300;
  }

  .second-row-left-ready-made p {
      font-weight: 300;
  }    
    
}

/* Mobile phones */
@media (max-width: 480px) {
    header {
        flex-direction: column;
        align-items: flex-start;
  }
    .logo {
        align-self: flex-start; 
  }
    
    .logo img {
        max-height: 5rem;
        display: block;
  }

  .tagline {
        font-size: 0.9rem;
  }

  .main-nav a {
        font-size: 0.9rem;
  }

  .social-icons a img {
    width: 18px;
    height: 18px;
  }
}

/* -------------------------
   Safe responsive image defaults
   ------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}