/*
Theme Name: Mame Studio
Text Domain: mamestudio2025sep
Version: 1.0
Description: Custom WordPress Theme for Web Design Studio
Tags: responsive, simple
Author: Arisa
Author URI: https://mamestudios.com/
*/

/* -------------------- Fonts -------------------- */
@font-face {
  font-family: 'Sunlight Dreams';
  src: url('assets/fonts/sunlight_dreams-webfont.woff2') format('woff2'),
       url('assets/fonts/sunlight_dreams-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Gentle Side';
  src: url('assets/fonts/gentle_side-webfont.woff2') format('woff2'),
       url('assets/fonts/gentle_side-webfont.woff') format('woff');
  font-display: swap;
}

/* Typography defaults */
h1, h2, h3 { font-family: 'Sunlight Dreams', serif; font-weight: normal; }
p, li, button { font-family: 'Gentle Side', sans-serif; }
p {
    font-size: 14px;
    line-height: 1.5;
}
li {
    font-size: 16px;
    line-height: 1.5;
    list-style: none;
}
h1 {font-size: 32px;}
h2 {font-size: 28px;}
h3 {font-size: 24px; line-height: 1.4;}
@media (min-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
  p { font-size: 14px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 36px; }
  h3 { font-size: 24px; }
  p { font-size: 16px; line-height: 1.7; }
}
@media (min-width: 1280px) {
    h1 { font-size: 48px; }
}

/* -------------------- Global -------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* nice-to-have */
html { scroll-behavior: smooth; }
:root{
  --clr-beige:  #E2DBCF;
  --clr-brown:  #433919;
  --clr-green:  #47471B;
  --clr-white:  #FAF7F2;
  --clr-red:    #8A502B;
  --clr-lime: #D6CB92;
  --clr-brown2: #342812;
  --clr-beige2: #F0E7D3;
}
.bg-beige {background-color: var(--clr-beige);}
.bg-brown {background-color: var(--clr-brown);}
.bg-brown2 {background-color: var(--clr-brown2);}
.bg-green {background-color: var(--clr-green);}
.bg-red {background-color: var(--clr-red);}
.clr-beige{color:var(--clr-beige);}
.clr-brown{color:var(--clr-brown);}
.clr-green{color:var(--clr-green);}
.clr-white{color:var(--clr-white);}
.clr-red{color:var(--clr-red);}
.clr-brown2{color:var(--clr-brown2);}
.clr-beige2{color:var(--clr-beige2);}

blockquote {max-width: 90%; margin: 0 auto;}

/* CTA button */
.btn-orange{
  background:var(--clr-red);
  color:var(--clr-white);
  padding:15px 30px;
  border-radius: 999px;
  text-decoration:none;
  font-family:'Gentle Side', sans-serif;
  min-width: 250px;
  border: 2px solid var(--clr-brown);
}
/* Secondary button */
.btn-secondary{
  background: var(--clr-lime);
  color: var(--clr-brown);
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--clr-brown);
  font-family:'Gentle Side', sans-serif;
  min-width: 250px;
}
.btn-orange,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  /* normalize text metrics */
  font-size:18px;
  line-height:1;            /* <- removes font metric differences */
  font-weight:700;          /* optional: make both equally bold */
  white-space:nowrap;       /* avoid accidental wrap changing height */

  /* consistent padding */
  padding-block:15px;       /* vertical */
  padding-inline:30px;      /* horizontal */

  min-width:250px;          /* keep if you want same width floor */
  box-sizing:border-box;    /* already global but safe */
}

.check {max-width: 24px;}
.check img { width: 100%; height: auto;}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
}
.container-page {
    padding: 9rem 1.5rem 5rem;
}
@media (min-width: 768px) {.container {padding: 4rem 2rem;}}
@media (min-width: 800px) {.container-page{padding: 9rem 2rem;}}
@media (min-width: 1024px) {
    .container {padding: 5rem;}
    .container-page {padding: 11rem 0 9rem;}
    .check {max-width: 32px;}
}
@media (min-width: 1280px) {.container {padding: 5rem}}
.center { text-align: center; }
.fs-18 {
    font-size: 18px;
}
.justify {text-align: justify;}
.list {list-style: none; padding: 1rem 0 0;  margin: 0 auto;}
.list--checks li {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
}
.list--checks {
    display: flex;
    flex-direction: column;
    justify-self: center;
    gap: 24px;
}
.mb-1 {margin-bottom: 1rem;}
.mb-2 {margin-bottom: 2rem;}
.mt-1 { margin-top: 1rem;}
.mt-2 { margin-top: 2rem; }
.mt-5 {margin-top: 0.5rem;}
.ml {margin-left: 35px; text-align: justify; margin-top: 4px;}
.scarcity {margin: .5rem auto 0;}
@media (min-width: 700px) {.mobile-only {display: none;}}
/* -------------------- Header / Nav -------------------- */
/* Sticky site header for all pages */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1100;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* after scroll */
.site-header.scrolled {
  background: var(--clr-beige);
  box-shadow: 0 2px 8px rgba(0,0,0,.1); /* optional */
}
.header-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:14px 12px 10px;

}
.logo img {width: 80px;}
@media (min-width: 1024px) {
    .logo img {width: 120px;}
}
/* -------------------- Booking Bar -------------------- */
.bar {padding: 8px 0; font-size: .75rem;}
.bar--booking {
    background: var(--clr-red);
    color: var(--clr-white);
    text-align: center;
}
.bar--booking a {
    color: var(--clr-white);
    text-decoration: underline;
}
/* -------------------- Desktop nav (hidden on mobile) -------------------- */
.desktop-nav{
    display:none;
    gap:24px;
    align-items:center;
}
.menu{
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
  text-transform:uppercase;
}
.menu a{ text-decoration:none; color:var(--clr-brown); }
.menu a:hover{ color:var(--clr-green); }
/* -------------------- Language Switch (desktop) -------------------- */
.lang-switch{ display:flex; gap:8px; margin-left:16px; }
.lang-switch li{ list-style:none; }
.lang-switch li + li::before{ content:"|"; margin:0 6px; opacity:.5; }
.lang-switch a{ text-decoration:none; opacity:.6; color:var(--clr-brown); }
.lang-switch .is-active a{ opacity:1; }

/*  Mobile Menu (slide-in right) ----------------------------------------------------------------------------------------------------------- */
/* Burger */
.burger{ background:none; border:0; font-size:1.5rem; cursor:pointer; }
.mobile-panel{
  position:fixed; 
  top:0;
  right:0;
  height:100vh;
  width:min(100vw, 360px);
  background:var(--clr-green);
  box-shadow:-12px 0 24px rgba(0,0,0,.12);
  border-radius: 24px;           /* round left corners only */
  transform:translateX(100%);
  transition:transform .5s ease; will-change:transform;
  z-index:1002;

  display:flex;
  flex-direction:column; 
  align-items:center;
  padding:120px 24px; 
  text-align:center;
  pointer-events:none; /* disable when closed */
}
.mobile-panel.is-open{ transform:translateX(0); pointer-events:auto; }

/* Close button */
.mobile-panel .close-btn{
  position:absolute;
  top:40px;
  right:20px;
  background:none;
  border:0;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  color:#fff;
}

/* Inner layout */
.mobile-panel .mobile-nav{
  height:100%;
  width:100%;
  max-width:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
  gap:20px;
}

/* Override desktop .menu in panel */
.mobile-panel .menu{display:flex;flex-direction:column; align-items:center;gap:24px; }
/* Links in panel */
.mobile-panel .menu a{
  color:#fff; text-decoration:none; text-transform:uppercase;
  letter-spacing:.03em; font-size:1rem;
}
.mobile-panel .menu a:hover{ color:var(--clr-beige2); }

/* CTA inside panel */
.mobile-panel .header-btn{
  margin-top:16px;
  display:inline-block; text-align:center;
  color:#fff !important;
  text-transform:none !important;
  font-family:'Gentle Side', sans-serif;
}
/* Social icons inside panel */
.mobile-panel .mobile-social{ margin-top:20px; }
.mobile-panel .mobile-social a{color:#fff; font-size:1.5rem; text-decoration:none;}
.mobile-panel .mobile-social a:hover{ color:var(--clr-beige2); }

/* Brand block at bottom */
.mobile-panel .mobile-brand{
  margin-top: 1rem;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:#fff; text-align:center;
}
.mobile-panel .mobile-brand img.mobile-logo{ width:120px; height:auto; }
.mobile-panel .mobile-brand .tagline{
  font-size:.5rem;
  line-height:1.4;
  max-width:150px;
  color:var(--clr-white);
  opacity:.9;
  margin-top: 0.5rem;
}
/* Language switcher (panel) */
.mobile-panel .mobile-lang{margin-top:12px; display:flex; gap:8px;}
.mobile-panel .mobile-lang li{ list-style:none; }
.mobile-panel .mobile-lang li + li::before{content:"|"; margin:0 6px; opacity:.5;}
.mobile-panel .mobile-lang a{ text-decoration:none; color:#fff; opacity:.8; }
.mobile-panel .mobile-lang .is-active a{ opacity:1; }

/* Backdrop */
.panel-backdrop[hidden]{ display:none; }
.panel-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1001;}



/* -------------------- Home Sections -------------------- */
/* HERO */
.hero {position: relative;}
/* Hero image: sticky, but fills only one viewport */
.hero__media {
  position: sticky;
  top: 3rem;
  z-index: 0;
  display: flex;
  min-height: 350px;
}
.hero__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;   /* no crop, keeps laptop intact */
  object-position: right center; /* keep the RIGHT side visible */
  display: block;
}
/* Container (text section) */
.hero .container {
  position: relative;
  z-index: 1;
  background-color: var(--clr-beige);
  text-align: center;
  color: var(--clr-brown);
  margin: 0 auto;
  justify-content: center;

}
/* Heading + CTA as before */
.hero .container { display: grid; gap: 24px; }
.hero__heading { max-width: 42rem; margin: 0 auto; }
.hero__heading h1 { line-height: 1.2; margin-bottom: 12px; }
.hero__sub {max-width: 500px; margin: 1rem auto;}
.hero__cta { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

@media (min-width: 768px) {
  .hero {position: relative;}
  .hero__media {max-height: 700px; min-height: 520px;}
  .hero__media img {
    width: 100%;
    height: auto;
    max-height: 700px;
    object-fit: cover;
    display: block;
  }
  .hero .container {
    background-color: transparent;
    position: absolute;
    top: 30%;      
    left: 10%; 
    background: none;  
    color: var(--clr-brown);
    text-align: left;
    padding: 0;
  }
  .hero__cta {justify-content: flex-start;}
  .hero__sub {margin: 0;max-width: 400px;}
}
.list-hero li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    max-width: 200px;
}
.list-hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.container-list {padding: 1rem 1.5rem 3rem; max-width: 900px; margin: 0 auto;}
@media (min-width: 768px) {
  .list-hero {
    flex-direction: row;
  }
}
@media (min-width: 800px) {
  .desktop-nav {display: flex;}
  .burger,
  .mobile-panel {display: none; /* hide mobile menu on desktop */}
}
@media (min-width: 1024px) {
    .hero .container {top: 28%; left: 10%; }
    .hero__media { max-height: 750px;}
}
@media (min-width: 1440px) {
    .hero .container {top: 28%; left: 15%; }
}

/* Value Prop */
.check-list li {
    font-family: 'Sunlight Dreams';
    font-size: 18px;
}
.value__media {max-width: 400px;}
.value__media img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.value .container {
    margin: 0 auto;
}
.value .container h3 {
    margin-top: 2rem;
}
@media (min-width: 768px) {
  .value .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
  .value .container h3 {
    margin-top: 0;
}
}
/* Testimonial Strip */
.strip .container {
    padding: 3rem 0;
}
.strip--testimonial.has-parallax {
  position: relative;
  overflow: hidden;
  color: var(--clr-white);
  text-align: center;
}
.strip--testimonial .container {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-inline: auto;
}
.strip--testimonial .parallax-bg {
  position: absolute;
  left: 0;
  width: 100%;
  /* top/height now set dynamically by JS to guarantee coverage */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
}
/* optional: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .strip--testimonial .parallax-bg { transform: none !important; }
}
.quote { margin: 0; font-style: italic; text-align: center; }
.quote cite { display: block; margin-top: 6px; font-style: normal; opacity: .85; }

/* Benefits */
.benefits__grid {
    display: grid;
    gap: 14px;
    background-color: var(--clr-white);
    padding: 2rem 1.5rem;
    border-radius: 30px;
}
@media (min-width: 768px) {
    .benefits__grid {
        grid-template-columns: repeat(4, 1fr);
        text-align: center;
        align-items: center;
    }
}
.benefits__grid li {
    list-style: none;
    font-size: 16px;
}
.benefits__cta {
    margin-top: 3rem;
    display: flex;
    gap: 18px;
    justify-content: center;
    text-align: center; 
    flex-wrap: wrap;
}
.benefit-text {font-size: 12px;}
/* Designer */
.designer {background-color: var(--clr-red);color: var(--clr-beige2);}
.designer__copy h2 {margin-top: 1.5rem;}
.designer__copy p {margin-top: 1rem;text-align: justify;}
.designer__media {max-width: 400px;margin: 2rem auto 0;}
.designer__media img {
    width: 100%;
    border-radius: 12px;
    height: auto;
}
.btn-about {
    background: var(--clr-beige);
    color: var(--clr-brown);
    padding: 15px 30px;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid var(--clr-brown);
    font-family:'Gentle Side', sans-serif;
    min-width: 250px;
}
.about__cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 2rem;
}
@media (min-width: 768px) {
  .designer .container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 2.5rem;
  }
  .designer__copy { text-align: left; }
  .about__cta { justify-content: flex-start; }
  .designer__copy {
    max-width: 50%;
}
}
/* Testimonials Grid with parallax */
.testimonials .container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 1rem; /* optional safety padding so text/cards don’t hit screen edges */
}
.testimonials.has-parallax {
  position: relative;
  overflow: hidden;
  padding: 3rem 1rem; /* padding for spacing, adjust to taste */
}
.testimonials .parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* give some extra room for movement */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
}
.testimonials__grid {
  position: relative;
  z-index: 1; /* keep content above background */
  display: grid;
  gap: 16px;
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}
.tcard {
  background: var(--clr-white);
  padding: 2rem 1.5rem;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  max-width: 400px;
  margin: 2rem auto 0;
}
@media (min-width:768px) {
    .review_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
        max-width: 1000px;
        margin: 0 auto;
    }
}
/* Deliverables */
.deliverables__media {max-width: 400px;}
.deliverables__media img { width: 100%; border-radius: 12px; }
.deliverables__list {margin-top: 2rem;}
.list--deliverables {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}
.list--deliverables .check {margin-top: 6px;}
.stack-cta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}
@media (min-width: 768px) {
  .deliverables .container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    align-items: start;
  }
  .deliverables .container > *:nth-child(3) {
  grid-column: 1 / -1;   /* span across both columns */
  justify-self: center;  /* center the item */
}
  .deliverables__media img { border-radius: 20px; }
  .deliverables__list h2 { margin-top: 0; }
  .deliverables__list {margin-top: 0;}

}
/* Process */
.process.has-parallax {
  position: relative;
  overflow: hidden;
  padding: 3rem 1rem; /* adjust to match your spacing */
  color: var(--clr-white);
}
.process .parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* taller for smooth drift */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
}
.process .container {
  position: relative;
  z-index: 1; /* keep content above BG */
   max-width: 600px;
  width: 100%;
  padding: 0 1rem; /* optional padding so text/cards don’t touch screen edges */
  margin: 0 auto;
}
/* Keep your existing styles */
.process .step { font-size: 32px; font-family: 'Sunlight Dreams', serif; }
.process .accordion .accordion-header li { font-size: 18px; }
.process-header { display: flex; align-items: center; gap: 14px; }
.accordion {
  background: var(--clr-white);
  border-radius: 10px;
  overflow: hidden;
}
.accordion-wrapper {max-width: 500px; margin: 0 auto;}
.accordion-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 18px;
  cursor:pointer;
  font-family: 'Gentle Side', sans-serif;
  gap: 10px;
}
.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height .5s ease;
}
.accordion .description {
  padding: 0 18px 20px;
  text-align: justify;
}
@media (min-width: 768px) {
    .process .container {
        display: grid;
        grid-template-columns: 1.25fr 2.5fr;
        grid-template-rows: auto auto;
        gap: 1rem;
        max-width: 1000px;
    }
    .process .container header {
        margin-top: .5rem;
    }
}
/* CTA */
.cta1 {background: url('assets/images/cta_background_vase_mobile.jpg') center/cover no-repeat;}
.cta2 {background: url('assets/images/cta_forest_desktop.jpg') center/cover no-repeat;}
.cta-text {
    max-width: 500px;
    margin: 1.5rem auto 1rem;
}
/* Packages */
.packages.has-parallax {position: relative;overflow: hidden;}
.packages .parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* extra height so it can drift */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
}
.packages .container {
  position: relative;
  z-index: 1; /* content above bg */
  max-width: 60rem;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
}
.packages__grid {
  display: grid;
  gap: 20px;
  max-width: 60rem; /* optional: limit grid width */
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .packages__grid {
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 columns */
  }
}
.pkg {
  background-color: var(--clr-white);
  color: var(--clr-brown);
  padding: 3rem 1.5rem;
  border-radius: 16px;
  width: 100%;
  max-width: 800px;
  margin: 1rem auto;
}
.package-name { font-size: 32px; margin-right: 1rem; }
.package-title { font-family: 'Gentle Side', sans-serif; font-size: 24px; }
.price { text-decoration: line-through; }
.beta { font-size: 22px; }
.between {display: flex; flex-direction: column; justify-content: space-between;}
/* Projects */
.work-flex {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    margin: 3rem auto;
}
.projects__grid img { width: 100%; border-radius: 12px; max-width: 300px;box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
@media (min-width: 768px) {
    .work-flex { flex-direction: row;}
}
.list-fit {
    margin: 1rem auto 0;
    max-width: fit-content;
}
.faq-wrapper {
    max-width: 700px;
    margin: 2rem auto 0; 
}
/* SERVICE page ---------------------------------------------------------------------------------------*/

.list-results li {
    flex-direction: column;
    max-width: 200px;
    text-align: center;
    margin: 1rem auto 0;
}
.price {font-size: 24px;}
.beta {font-size: 32px;}
.payment {font-size: 18px;}
.value {font-size: 20px;}
.pkg {max-width: 700px;}
@media (min-width: 768px) {
    .hero .hero-service {
        background-color: transparent;
        position: absolute;
        top: 26%;      
        left: 10%; 
        background: none;  
        color: var(--clr-brown);
        text-align: left;
        padding: 0;
    }
    .list-results {flex-direction: row;}
    .pain-flex {display: flex; gap: 3rem; max-width: 1200px; justify-content: center; align-items: center;}
    .column2-flex-right {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: center;
      gap: 2rem;

    }
    .pain-right {max-width: 500px;}
    .packages-grid-service > *:nth-child(4) {grid-column: 1 / -1;}
    .list-bonus {max-width: 450px; margin-top: 1rem;}
    .bonus {padding: 3rem;}
    .service-media {min-height: 550px;}
    .hero-service-sub {max-width: 400px;}

}
@media (min-width: 1024px) {
    .hero .hero-service {top: 27%;}
    .pkg {padding: 3rem 1.5rem;}
        .packages-grid-service {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        grid-template-rows: auto auto;       
        gap: 1.5rem; 
    }
}
@media (min-width: 1280px) {
    .hero .hero-service { top: 26%; right: 45%;}
    .hero-service-sub {max-width: 500px;}
}

/* ABOUT page ---------------------------------------------------------------------------------------*/
.about {background: url('assets/images/welcome_hero_mobile.jpg') center/cover no-repeat; }
.about .container {min-height: 400px; padding: 11rem 1.5rem 4rem;}
.welcome {font-size: 32px;}
.about-sub {font-size: 20px;}
.story-title {font-size: 20px;}
@media (min-width: 768px) {
    .about-flex {display: flex; flex-direction: row-reverse; gap: 3rem; max-width: 1200px;}
    .story-flex-left {display: flex; gap: 3rem; align-items: center; max-width: 1000px;}
    .story-flex-right {display: flex; flex-direction: row-reverse; gap: 3rem; align-items: center; max-width: 1000px;}
    .flex-aboutme {display: flex; gap: 3rem; max-width: 1200px; align-items: center; justify-content: center;}
    .about .container {min-height: 500px; padding: 13rem 2rem 6rem;}
    .welcome {font-size: 36px;}
    .aboutme-right {max-width: 550px;}
}
@media (min-width: 1024px ){.story-title {font-size: 24px;}}
@media (min-width: 1280px) {.about .container {min-height: 550px; padding: 14rem 2rem 5rem;} }
/* Ticker container */
.marquee{
  --speed: 50s;           /* adjust speed */
  --gap: 2.5rem;          /* space between words */
  background: var(--clr-beige);
  overflow: hidden;
  padding: .6rem 0 .5rem;
}
/* Moving belt */
.marquee__track{
  display: flex;
  width: max-content;            /* shrink to content */
  will-change: transform;
  animation: marquee-scroll var(--speed) linear infinite;
}
.marquee:hover .marquee__track{
  animation-play-state: paused;  /* optional pause on hover */
}
/* One “page” of repeated text */
.marquee__block{
  display: inline-flex;
  flex: 0 0 auto;               /* don’t shrink */
  gap: var(--gap);
  padding-right: var(--gap);
  align-items: center;
  white-space: nowrap;
}
/* Text style – match your brand */
.marquee__block span{
  font-family: 'Sunlight Dreams', serif;
  font-size: 20px;  /* responsive size */
  color: var(--clr-brown, #4e3d27);
  letter-spacing: .02em;
}
/* Move right -> left forever.
   Because we duplicated the block twice, translating by 50% loops seamlessly. */
@keyframes marquee-scroll{
  to { transform: translateX(-50%); }
}
/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}
/* PORTFOLIO page ---------------------------------------------------------------------------------------*/

.portfolio {max-width: 300px; margin: 4rem auto 0;}
.portfolio-link {
    text-decoration: none;
    color: var(--clr-brown);
}
.container-portfolio {padding: 10rem 1.5rem 6rem; max-width:1100px; margin: 0 auto;}
.list-focus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--clr-white);
    padding: 1.5rem;
    border-radius: 20px;
    gap: 8px;
    margin-top: -0.75rem; 
    max-width: fit-content;
}
.focus {margin: 3rem auto 0; justify-self: center;}
.list-simple {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.mockup-video {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}
.live-link {
    color: var(--clr-brown);
    font-family: 'Gentle Side', sans-serif;
}
.quote {
    width: 50px;
    height: auto;
    position: absolute;
    top: -1rem;
    left: -0.5rem;
}
.quote-reverse {
    transform: rotate(180deg);
    width: 50px;
    height: auto;
    position: absolute;
    bottom: -1rem;
    right: -0.5rem;
}
.quote img, .quote-reverse img {
    width: 100%;
    height: auto;
}
.review {position: relative;}
.transformation {
    display: flex;
    gap: 14px;
}
.website {max-width: 800px; justify-self: center; margin-top: 4rem;}
.website img {
    width: 100%;
    height: auto;
}
.website-before, .website-after {
    width: 100%;
}
.website-before img, .website-after img {
    width: 100%;
    height: auto;
}
.work-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile = 1 column */
  gap: 2rem;
}
.portfolio__cta {display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;}
.review-portfolio {position: relative; margin: 4rem auto;}
.quote {position: absolute; top: -1rem;}
.list-narrow {max-width: 500px; justify-self: center;}
@media (min-width: 768px) {
    .work-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .container-portfolio {padding: 12rem 2rem 8rem;}
    .flex-yoga {display: flex; gap: 3rem; margin-top: 4rem;}
    .mockup-video {margin: 4rem auto;}
    .portfolio-mockup {margin: 4rem auto;}
    .transformation {justify-self: center; gap: 2rem;}
    .website {margin-top: 6rem;}
}
@media (min-width: 1024px) {
    .work-grid {grid-template-columns: repeat(3, 1fr);}
    .container-portfolio {padding: 14rem 2rem 10rem;}
}
/* CONTACT page ---------------------------------------------------------------------------------------*/
.contact {background: url('assets/images/welcome_hero_mobile.jpg') center/cover no-repeat;}

/* -------------------- Footer -------------------- */
/* Instagram */
.insta {margin: 3rem auto 2rem;}
.insta__grid {display: grid; grid-template-columns: repeat(3, 1fr);}
.insta__grid img { width:100%;}
.insta h3 {margin: 0 1rem; font-size: 22px;}
.insta-desktop {
    display: none;
}
@media (min-width: 768px) {
    .insta-desktop {
        display: flex;
    }
    .insta__grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .insta h3 {font-size: 28px; margin-left: 2rem;}
}
.username {font-family: 'Gentle Side', sans-serif;font-size: 18px;}
.footer-container{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem;
    
}
@media (min-width: 768px) {
    .footer-bottom {padding: 0 3rem;}
}
.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer-logo img{
    width:100px;
    height:auto;
    margin-top: 4px;
}
.footer-tagline{
    max-width:110px;
    font-size:.5rem;
    margin: 1rem auto 0;
    line-height:1.5;
    text-align: justify;
}
.footer-menu{
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
  align-items: center;
}
.footer-menu a {
    color:var(--clr-white);
    text-decoration:none;
    font-size:.75rem;
    text-transform:uppercase;
}
.footer-menu a:hover,
.footer-social a:hover{color:var(--clr-beige2);}
.footer-social a {font-size:1.5rem; color:var(--clr-white);}
.copywrite{
  border-top:1px solid rgba(255,255,255,.2);
  text-align:center;
  padding:8px 0;
  margin:32px auto 0;
  opacity:.8;
  max-width: 95%;
}
.copywrite p {font-size: 8px;}
.terms, .privacy {color: var(--clr-beige2); text-decoration: none;}
/* Instagram grid images always square */
.insta__grid a {
  aspect-ratio: 1 / 1;     /* makes the container a square */
  overflow: hidden;        /* hides overflow */
  display: block;          /* makes aspect-ratio work consistently */
}

.insta__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crops images to fill square without distortion */
  object-position: center; /* keeps the crop centered */
  display: block;
}
/* Show 3 items at ≤768px; hide the desktop-only ones */
.insta__grid a.insta-desktop { 
  display: none !important;   /* beats the generic .insta__grid a { display:block } */
}

/* Desktop: show all 5 at ≥769px */
@media (min-width: 769px) {
  .insta__grid a.insta-desktop { 
    display: block !important; /* or flex; either is fine */
  }
  .insta__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}


/* -------------------- jump links -------------------- */


/* offset for #starter, #essential, #premium (and any [id]) */
#starter, #essential, #premium, #packages
.packages [id] {
  scroll-margin-top: 140px;  /* tune to your header/spacing */
}

/* Fade-up reusable animation */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------- Form -------------------- */

.wpforms-container .wpforms-form .wpforms-field-label {
	font-family:'Gentle Side', sans-serif;
	color: var(--clr-brown);
}
.wpforms-container {
	text-align: left;
	max-width: 700px;
}
#wpforms-submit-31 {
	background-color: var(--clr-green);
	min-width: 200px;
	border-radius: 20px;
	font-family:'Gentle Side', sans-serif;
}
div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: var(--clr-white);
	border: none;
	border-radius: 20px;
	text-align: center;
}


/* Spinner Overlay */
#loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #47471B; /* Green background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-spinner .spinner-content img {
  width: 80px;
  height: 80px;
  animation: pulse 2s ease-in-out infinite;
}

/* Pulse animation (grow/shrink) */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Hidden state */
#loading-spinner.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Mobile-only floating CTA container */
@media (max-width: 768px) {
  .floating-cta {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 12000;                /* above header/menu */
    display: flex;
    justify-content: center;

    /* start hidden (for slide-up anim) */
    transform: translateY(120%);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
    pointer-events: none;          /* avoid blocking taps when hidden */
  }
  .floating-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Optional: subtle elevation for the existing red button */
  .floating-cta .btn-orange {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    width: 100%;                   /* full-width on mobile */
    max-width: 640px;              /* feel free to tweak */
  }

  @media (prefers-reduced-motion: reduce) {
    .floating-cta { transition: none; }
  }
}

/* Explicitly color the Font Awesome icon */
.burger {
  color: var(--clr-brown) !important;
}